How to Dynamically Change Your Chart’s Height Based on the Data in HighCharts

Woof.  That’s a long title.

Sidenote: I created this based on a JSFiddle that I have lost track of, so if your are the Original Creator™ of this concept in HighCharts, please let me know!! 

The Problem

I often use HighCharts to implement interactive graphing in web projects for clients.  SOOOOOo flexible and easy to customize! I can’t sing my praises for HighCharts loud enough.

In many of these projects, I’m visualizing a whole survey’s worth of data indicators (like the Wyoming Prevention Needs Assessment Survey), many of which have a different number of series.  Instead of building out a million bar chart instances, we usually create one bar chart instance and then dynamically input the data into the HighCharts series.data option.

The problem is the default options in HighCharts is to set statically the bar chart height. So my bars either get very squished and small, or huge 🙁

The Solution

The solution to this problem is to create a variable for the bar chart’s height and then calculate the value of this variable when the chart is being created.

Let’s break down the steps (or just skip to the Fiddle)

1. Create a New Chart Instance

Here’s just a basic, standard bar chart

Highcharts.chart('container', {
     chart: {
        type: 'bar'
     },
     series: ... 
});

2. Turn the chart & data into variables

The above will render your bar chart just fine, but in order to create the dynamic height, we need to create a var for both the data series and the chart so they can interactive with each other.

First, create a variable for the chart:

var barChart = Highcharts.chart(...);

Next, pull the data out of the series option and place it in its own variable, before the chart variable.

var barChartData = [...];
var barChart = Highcharts.chart(...);

The var for the data must appear before the chart variable so the chart can use the data to make the height calculations.

3. Add margins to the chart

Next, we’ll use margins at the top and bottom of the chart essentially as some padding.

var barChartData = [...];
var barChart = Highcharts.chart('container', {
     chart: {
        type: 'bar',
        marginTop:80,
        marginBottom:80,
     },

4. Create an equation for the height

Lastly, we’ll use the length of the data in the series, our desired bar height, and the margins to calculate the chart’s height. By setting the data as a variable, the total height of the chart will change based on the length (essentially, the count of data points).

Here’s our equation:
Chart Height = Data Length x Desired Bar Height + (Top Margin + Bottom Margin)

Say we’d like our bars to be 75px tall. So we’ll write the equation right into the height of our chart:

height: barChartData.length * 75 + 160,

Our chart will calculate its height by using the count of data points, the height of our bars, and the margins we included in step 3.

Our code would look like this all together:

//series data variable
var barChartData = [...];
//chart variable
var barChart = Highcharts.chart('container', {
     chart: {
        type: 'bar',
        marginTop:80,
        marginBottom:80,
        //Data Length x Bar Height + Margins
        height: barChartData.length * 75 + 160,
     },

Pretty neat, huh?

Demo

You can see all the pieces working together in this fiddle.

If you change the number of data points in the data variable, the chart height will dynamically change to accommodate the new number of bars.

Thoughts?

What you think? Any other methods you’ve used to dynamically change the chart properties using HighCharts? Let me know! 🙂