CODEWITHSUNDEEP
javascriptchartshighchartsbar-chart
xyz124
xyz124

Reputation: 69

Highcharts - set yAxis.max to max value from data

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

my current 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/

Upvotes: 2

Views: 4998

Answers (2)

Pedro
Pedro

Reputation: 1072

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

Upvotes: 10

Andrew L
Andrew L

Reputation: 5486

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>

Upvotes: 1

Related Questions