高图-将yAxis.max设置为数据的最大值

Question

I'm using Highcharts and I have this simple bar chart:

Max value in data is 27, but on the scale it's 40. How can i set yAxis.max to max value from the provided data? In this example 27 instead of 40.

To be honest I don't even need those values on chart, but I want to force a bar with biggest value to occupy 100% of available height.

The data will be provided dynamically, so I can't just set max value manually.

Here is my current code:

 Highcharts.chart('container', { chart: { type: 'column', height: 150, }, yAxis: { title: { text: null, }, labels: { enabled: true, }, }, xAxis: { title: { text: null, }, }, credits: false, legend: false, title: { text: null, }, series: [{ data: [1, 0, 27, 7] }] }); 

 #container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto } 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container"></div> 

Here is jsfiddle: http://jsfiddle.net/de3qfb3r/

Answer 1

You say you don't care about the values on the chart, so maybe adding endOnTick: false would be enough for you:

yAxis: {
    title: {
        text: null,
    },
    labels: {
        enabled: true,
    },
    endOnTick: false
}

Highcharts automatically calculates the maximum value and fits it to the available height. When endOnTick is true though(which is the default), it adds an extra space to finish with a tick

Answer 2

If you have the data before hand, you can just find the max of the array. A gotcha here is that I couldn't get the yAxis max to work without adding a tick interval. Here is an example of how you can accomplish this.

 var data = [1, 0, 27, 7]; var yMax = data.reduce(function(a, b) { return Math.max(a, b); }); Highcharts.chart('container', { chart: { type: 'column', height: 150, }, yAxis: { title: { text: null, }, labels: { enabled: true, }, tickInterval: 2, max: yMax }, xAxis: { title: { text: null, }, }, credits: false, legend: false, title: { text: null, }, series: [{ data: data }] }); 

 #container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto } 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container"></div>