4

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.

Tom
  • 41
  • 2
  • 3

3 Answers3

3

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

AsmaG
  • 487
  • 4
  • 17
  • Thanks for your answer. I also tried the same, but this doesn't work. This prints the desired number of labels, but still vertically. My final solution was to disable the x-axis completely and put 5 static labels in front of the chart. Not nice, but works in this case. – Tom Oct 21 '17 at 21:03
  • Yeah, I have the same issue and I let the tricks being vertical for the moment. But I thought it is the best thing we could do , if we want to use this lib without making all the work ourselves. It has to be changed in the next months ! Please mark the anwser as accepted if you think so – AsmaG Oct 23 '17 at 08:40
1

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.

mattb103190
  • 69
  • 5
-1

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.

Rory
  • 167
  • 1
  • 7
  • This looks error prone because the databinding on `xAxisTickFormatting` will be change detected and most probably delivers different values because of the increase of tickCounter with every get invocation – Youp Bernoulli Sep 16 '22 at 12:52