Highcharts value bars with full height background bars

Question

I'm trying to use Highcharts to build a graph that looks like this, and is based on values, not percentages: full height background bars

The idea is that it is supposed to show cash flow, which requires labels on the y axis (thus why I can't base it in percentages). I want the grey bars to have hover effects too, so I can't just add a second graph with 100% height grey bars underneath the green graph either.

I have considering setting a maximum scale, subtracting the green bars from the max, and adding a grey bar to the series based on that remainder, but the scale is going to be so varied that I would rather not take that route.

Answer 1

With a little work, i think you can achieve your desidered result using the Stacked percentage chart and formatting labels and tooltips (as i understand, you need to show values on y axis rather than percentage). If you can calculate the maximum value, you can format axis y labels in this way:

$(function() {
  //calculate somehow the maximum value
  var max = 23;
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      labels: {
        formatter: function() {
          //format axis y labels
          return this.value / 100 * max;
        }
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
    },
    plotOptions: {
      column: {
        stacking: 'percent'
      }
    },
    series: [{
      name: 'Other',
      data: [5, 3, 4, 9, 2],
      color: 'gray',
      showInLegend:false
    }, {
      name: 'Jane',
      data: [2, 2, 3, 7, 1]
    }, {
      name: 'Joe',
      data: [3, 4, 4, 7, 5]
    }]
  });
});

Demo: https://jsfiddle.net/jjhk0LL8/

Answer 2

The solution ended up being a lot simpler once I bit the bullet and built the function to calculate the maximum possible value. The graph is now built of stacked bars that sit on top of a bar that spans the entire height (plus a little margin, which I will explain below).

To get the bars to stack, here's the important parts of my structure

chart: {
    type: 'column'
},
yAxis: {
    gridLineWidth: 1,
    minorGridLineWidth: 0,
    maxPadding:0,
    endOnTick:false  //This is important, otherwise highcharts will add its own padding to your graph
},
plotOptions:{
    column:{
        grouping:false,
        groupPadding: 0,
        shadow:false
    }
}

To get the grey background bars I needed to calculate the top limit of my graph. I also wanted a little padding between the top of my graph and the data. BUT since I was working with a wide range of numbers from thousands to multi-millions, it wasn't as simple as rounding to a set tens place. So I built this function to give 15% padding to the top of the graph.

function topRoundRange(num){
    // This variable tells me how many tens places are in the number, and then subtracts two.  Eg, 100,000 will be rounded to the fourth tens place, the nearest 1000
    var place = num.toString().length - 2;

    // Save that exponent for later
    var exponent = Math.pow(10,place);

    // divide the number by the exponent to get a roundable number, then round it.  eg 19,257/10^3 rounded is 19
    var simplified = Math.round(num/exponent);

    // this variable will add the 15% padding to the height
    var rounded = Math.round(simplified*1.15);

    // return our maximum value!
    return(rounded*exponent)
}

With this function you can fill a data array that you can append to highcharts for grey background bars.