ngx-charts: set number of max. displayed labels/ticks on xAxis and prevent rotation

Question

In a ngx-area-chart i want to set the max. displayed labels on the xAxis to 5. If i have only a few values this works as expected (left example), but with more data, the labels begin to rotate and it looks like the right example in this screen:

screenshot

I want to have only 5 labels on the xAxis and not rotated, independent of the number of values in the chart. I played around with this plunker by only changin the values in the data.ts:

export var multi = [{
'name': 'Data',
'series': [
  {"name":"24 Aug 12:30","value":"1.35870168"},
  {"name":"24 Aug 12:40","value":"3.92566715"},
  {"name":"24 Aug 12:50","value":"8.5667666"},
  {"name":"24 Aug 13:00","value":"5.25927041"},
  {"name":"24 Aug 13:10","value":"4.99596386"},

  ....

]}];

Any help is much appreciated.

Answer 1

It is a bit late I think, but maybe this will be useful for someone else. If you want to customize the number of ticks in the X Axis, You may do this trick by using [xAxisTickFormatting] input.

<ngx-charts-area-chart 
  class='chart' 
  [view]="view" 
  [scheme]="colorScheme" 
  [results]="results" 
  [xAxis]="showXAxis" 
  [yAxis]="showYAxis" 
  [legend]="showLegend" 
  [showXAxisLabel]="showXAxisLabel" 
  [showYAxisLabel]="showYAxisLabel" 
  [xAxisLabel]="xAxisLabel"
	[yAxisLabel]="yAxisLabel" 
  [autoScale]="autoScale"
  [showGridLines]='false' 
  (select)="onSelect($event)" 
  [xAxisTickFormatting]='axisFormat'>
</ngx-charts-area-chart>

And then define your axisFormat function ( which will take only the first tick, the tick in the middle and the last one ) , you can cusstomize your options depending on your needs

  axisFormat(val) {
    if ( this.ticks[0] == val || this.ticks[this.ticks.length-1] == val || this.ticks[(this.ticks.length-1)/2] == val) {
      return val
    } else {
      return ''
   }
 }

Hope it helps

Answer 2

I'm sure there's a better way, but this is how I solved it:

Define parameters at the start of your file:

var tickCounter: number = 0;
const tickInterval: number = 4;

Define your ngx-chart as usual with the same custom labelling function as shown above by AsmaG:

<ngx-charts-area-chart 
  class='chart' 
  ...
  [xAxisTickFormatting]='axisFormat'>
</ngx-charts-area-chart>

But this is how I implemented axisFormat:

axisFormat(val:any) {
    return (++tickCounter % tickInterval) === 0 ? val : '';
  }

For some reason in my Angular 12.2.7 project, the postfix increment operator was being ignored, but prefix works. Not clear why. This might not be acceptable for some projects if you really need the first data label rendered. I tried to implement it more cleanly (i.e. ensuring first data point was always rendered, irrespective of tickInterval) but encountered mysterious issues with ngx-charts, with no labels at all being rendered.

Answer 3

Playing with the scss fixed it for me.

.x.axis {
  .tick {
    display: none;

    &:nth-child(4n) {
      display: block;
    }
  }
}

This will display every 4th tick, adjust accordingly.