Angular NGX Chart : adjust X tick number

Question

I am developping un app with some line chart. I use line Chart within "ngx-chart" library . It works, but I would like to have a better display of axis. My data are temperatures values according to date. Actually, the chart display a label for each value. If i have 100 values, I have 100 ticks labels. So i vould like to limit the number of ticks.

I use Angular and NGX chart. I saw in the docs the parameter "xAxisTicks" but it seems it is not the good way

component.html:

<ngx-charts-line-chart
  [legendTitle]="legendTitle"
  [xAxisTickFormatting]="xAxisTickFormatting"
  [view]=""
  [scheme]="colorScheme"
  [results]="temperatures"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [autoScale]="autoScale"
  (select)="onSelect($event)">
</ngx-charts-line-chart>

component.ts

legendTitle = "Température actuelle";
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Heure';
showYAxisLabel = true;
yAxisLabel = 'Température';
// xAxisTicks = [
//   new Date("2019-10-06 10:00:00"),
//   new Date("2019-10-06 10:30:00"),
//   new Date("2019-10-06 11:00:00"),
//   new Date("2019-10-06 11:30:00"),
//   new Date("2019-10-06 12:00:00"),
// ]
colorScheme = {domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] };
autoScale = true;

data :

multi = [
{
   "name": "Exterieur",
   "series": [
     {
       "name": new Date("2019-10-09 10:00:00"),
       "value": 15
     },
     {
       "name": new Date("2019-10-11 10:10:00"),
       "value": 17
     }
   ]
 }]

Actual result : exemple

I would like to have this :

expected

Fewer labels but keeping all the data.

Is it possible with ngx chart ?

Thanks you Thomas

Did You found solution how to use this xAxisTicks ? I have similar problem — Mateusz Kaleta, Jan 19 '23 at 20:33

score 1 · Answer 1 · answered Dec 03 '20 at 17:42

Not sure if there's a way to limit the number of ticks manually, but I've noticed using numbers for your X axis seems to display less ticks. So what you can do is transform your Date values into milliseconds, and then use the Input property "xAxisTickFormatting" to format them again into readable date strings.

Angular NGX Chart : adjust X tick number

1 Answers1