CODEWITHSUNDEEP
highcharts
Jeromy French
Jeromy French

Reputation: 12121

How can I force Highcharts to respect yAxis.max?

I've noticed that if I specify yAxis.max in a Highcharts call:

  $('#container').highcharts({
    //snip...
    yAxis: {
      max: 30000,
      minorGridLineWidth: 1,
      minorTickInterval: 10000,
      title: {
        enabled: false
      }
    },
    //snip...
  });

The resulting chart will cap the yAxis range at 30000:

The resulting chart will cap the yAxis range at 30000

However, if I specify a somewhat short height on the chart's target container:

<div id="container" style="height:126px; width:420px;"></div>

The resulting chart will not "honor" the yAxis max property:

Highcharts will not honor the yAxis.max property when a height is specified on the chart's target container

Please see https://jsfiddle.net/jhfrench/kpf2b3Lf/ for an example.

How can I force Highcharts to respect yAxis.max when I specify a short height?

Upvotes: 0

Views: 190

Answers (1)

Andrew Ngo
Andrew Ngo

Reputation: 762

You can manually select a tickInterval to force highcharts to respect the axis max. This should work if the size of your container is constant.

Here's an updated fiddle: https://jsfiddle.net/kpf2b3Lf/1/

yAxis: {
  max: 30000,
  minorGridLineWidth: 1,
  minorTickInterval: 10000,
  tickInterval: 10000,
  title: {
    enabled: false
  }
},

Upvotes: 1

Related Questions