javascript - Highcharts - set yAxis.max to max value from data - Stack Overflow

admin管理员组

文章数量:1352120

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=".js"></script>
<script src=".js"></script>
<script src=".js"></script>

<div id="container"></div>

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./highcharts.js"></script>
<script src="https://code.highcharts./modules/series-label.js"></script>
<script src="https://code.highcharts./modules/exporting.js"></script>

<div id="container"></div>

Here is jsfiddle: http://jsfiddle/de3qfb3r/

• javascript
• charts
• highcharts
• bar-chart

Share Improve this question Follow edited Nov 4, 2017 at 17:24 Andrew L 5,49611 gold badge2929 silver badges3939 bronze badges asked Nov 3, 2017 at 19:44 xyz124xyz124 6911 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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

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 acplish 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./highcharts.js"></script>
<script src="https://code.highcharts./modules/series-label.js"></script>
<script src="https://code.highcharts./modules/exporting.js"></script>

<div id="container"></div>

本文标签： javascriptHighchartsset yAxismax to max value from dataStack Overflow