ngx chart angular x Axis show time only 4 options

Question

i am new at ngx-charts . i am trying to show ngx-chart-line i am trying to show in my xAxis - time (format - hh:mm) . but i want only to show 4 options on my xAxis for ex : 10:00 12:00 16:00 19:00 i have tried fix it with loop and also with xAxisTickFormatting. and in my yAxis - value here is my code component ts

 this.chartData = [
      {
        name: "exAngular",
        series: [
          { value: "252.30", name: "19:20:00" },
          { value: "252.40", name: "19:20:00" },
          { value: "252.40", name: "16:20:00" },
          { value: "252.60", name: "15:20:00" },
          { value: "252.70", name: "13:19:00" },
          { value: "252.70", name: "13:19:00" },
          { value: "252.60", name: "12:19:00" },
          { value: "252.50", name: "12:19:00" },
          { value: "252.50", name: "12:19:00" },
          { value: "252.10", name: "12:17:00" },
          { value: "252.60", name: "11:16:00" },
          { value: "230.40", name: "11:16:00" },
          { value: "230.00", name: "11:16:00" },
          { value: "230.20", name: "11:16:00" },
          { value: "252.60", name: "11:14:00" },
          { value: "252.30", name: "11:14:00" },
          { value: "252.30", name: "11:14:00" },
          { value: "252.30", name: "11:14:00" },
          { value: "252.80", name: "11:14:00" },
          { value: "252.80", name: "09:58:00" },
          { value: "252.70", name: "09:58:00" },
          { value: "252.70", name: "09:58:00" },
          { value: "252.70", name: "09:58:00" },
          { value: "251.70", name: "09:55:00" },
          { value: "251.70", name: "09:55:00" },
          { value: "251.80", name: "09:55:00" },
          { value: "251.80", name: "09:55:00" },
          { value: "251.80", name: "09:53:00" },
          { value: "251.80", name: "09:52:00" },
          { value: "252.00", name: "09:52:00" },
          { value: "251.80", name: "09:52:00" },
          { value: "252.00", name: "09:51:00" },
          { value: "252.00", name: "09:49:00" },
          { value: "252.00", name: "09:49:00" },
          { value: "252.00", name: "09:49:00" },
          { value: "252.10", name: "09:49:00" },
          { value: "251.10", name: "09:47:00" },
          { value: "251.10", name: "09:47:00" },
          { value: "251.50", name: "09:46:00" }
        ]
      }
    ];`

here is my component html :

<div>
  <ngx-charts-line-chart [results]="chartData"
                         [scheme]="{domain: ['#000']}"
                         [xAxis]="true"
                         [yAxis]="true"
  </ngx-charts-line-chart>
</div>

Zulqarnain Jalil Zulqarnain Jalil · Accepted Answer · 2020-02-02T21:49:41

You just need to filter the data and assign it to chart

this.chartData[0].series = this.chartData[0].series.filter(x=> x.name.split(':')[0]==10 ||x.name.split(':')[0]==12||x.name.split(':')[0]==16||x.name.split(':')[0]==19  )

Click here for demo

ngx chart angular x Axis show time only 4 options

1 Answers