CODEWITHSUNDEEP
highchartsreact-highcharts
laxytt
laxytt

Reputation: 5

How to force start on min/max and prevent automatic rounding

I'm trying to force the graph to start my minY/maxY values but it keeps on rounding the tick values.

My current code looks like so:

yAxis: [
          {
              tickAmount: 3,
              min: minYAxis,
              max: maxYAxis,
              endOnTick: false,
              gridLineWidth: 0,
              title: {
                text: ...,
              },
              alignTicks: false,
            }
      ],

The min and max on the picture should be max: 1630 min: 1400. With current implementation also some of the series values are above the max tick value.

enter image description here

Upvotes: 0

Views: 728

Answers (1)

magdalena
magdalena

Reputation: 3695

By default, Highcharts enforces to have ticks on round values. If you set the yAxis.min or yAxis.max to some value, that is not divisible by round tickInterval (e.g. 2, 5, 10, 20, 25, 50, 100), this value will be rounded to such.

There are some ways of setting ticks in the other way. The most enforcing ones are to set the tickPositions Array that strictly says, what the ticks should be on the given axis, or with tickFormatter function, which returns the tickPositions Array.

Example code:

let data = [1500, 1400, 1550, 1630, 1600],
  min = Math.min(...data),
  mid = (Math.max(...data) - Math.min(...data)) / 2 + Math.min(...data),
  max = Math.max(...data);
    
Highcharts.chart('container', {

  yAxis: [{
    tickPositions: [min, mid, max]
  }],

  series: [{
    data: data
  }]

});

Demo:

https://jsfiddle.net/BlackLabel/07kzt12x/

API References:

https://api.highcharts.com/highcharts/yAxis.tickPositions https://api.highcharts.com/highcharts/yAxis.tickPositioner

Upvotes: 1

Related Questions