CODEWITHSUNDEEP
angularngx-charts
Steev0
Steev0

Reputation: 61

ngx-charts can I set the y axis increment

I have a data set with whole number values less than 5. The ngx-charts y axis shows tick marks at 0, 0.5, 1, 1.5, etc. Is there a way to make it only put tick marks at whole number increments?

Upvotes: 0

Views: 5444

Answers (3)

thooyork
thooyork

Reputation: 495

If you know that your highest value is always five you can hardcode the ticks like so: yAxisTicks = [0,1,2,3,4,5];

If you don't know what your highest value might be, you have to find out what might be the highest value in the data Object.

Considering that your data looks something like this:

chartData = [
  {"name":"Incidents",
   "series":[
     {"name":"16.01.2025","value":1},
     {"name":"17.01.2025","value":1},
     {"name":"21.01.2025","value":3}
     ...
   ]
  }
]

//set yAxisTicks Array from 0 to highestValue in 1-steps:
 const highestValue = Math.max(...chartData[0].series.map(s => s.value));
      yAxisTicks = Array.from({ length: highestValue + 1 }, (_, i) => i);

Hope this helps.

Upvotes: 0

Arunsai B K
Arunsai B K

Reputation: 213

add [yScaleMin]="yScaleMin" [yScaleMax]="yScaleMax"

and in component yScaleMin = 0 yScaleMax = 5

Upvotes: 1

antoineso
antoineso

Reputation: 2151

In the doc, they talking about an Input property for normalized chart :
yAxisTicks of type any[] so you can pass an array of number value for exemple : 

<ngx-charts-area-chart-normalized
  [view]="view"
  [scheme]="colorScheme"
  [legend]="legend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxis]="xAxis"
  [yAxis]="yAxis"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [yAxisTicks]= [0,2000,555550000,650000000]
  [timeline]="timeline"
  [results]="multi"
  (select)="onSelect($event)">
</ngx-charts-area-chart-normalized>

Upvotes: 1

Related Questions