CODEWITHSUNDEEP
javascripthighcharts
wakey
wakey

Reputation: 2399

Highcharts chart axis exceeding set min and max values

I want to limit my y-axis to the range from -43 to 43. I also want my chart to not display space/area/anything under or over those values. Here is what my axis options look like

yAxis: {
   tickInterval: 1,
   minorTickInterval: null,
   endOnTick: false,
   min: -41,
   max: 43,
   title: {
      text: 'Y Coordinate'
   },
   gridLineColor: 'transparent'
}

However, in the following image you can clearly see that highcharts is displaying space for values below my limit and down to -45. I want these hard limits so my background image lines up perfectly with the coordinate grid system. NHL shot image

I read that setting my tickInverval to 1 and endOnTick to false would produce the desired result, however it seems that is not so.

Any ideas?

Upvotes: 0

Views: 600

Answers (1)

stpoa
stpoa

Reputation: 5573

Tick positions determine start and end axis values. You can use tickPositions in order to pass your positions or create a function which returns tick positions based on your min and max value and pass it as positioner.

const random = () => Math.round((Math.random() * 200) - 100)
const options = {
  yAxis: {
    min: -99,
    max: 99,
    // tickPositions: [-99, 99],
    tickPositioner () {
      const axis = this
      return axis.tickPositions.map((pos) => {
        if (pos <= axis.max && pos >= axis.min) return pos // If between range
        else if (pos > axis.max) return axis.max
        else if (pos < axis.min) return axis.min
      })
    }
  },
  series: [{
    data: [...Array(10)].map(random),
    type: 'column'
  }]
}

const chart = Highcharts.chart('container', options)

Live example: https://jsfiddle.net/918zb76r/

Upvotes: 1

Related Questions