Search code examples
chartshighchartsdrilldownwaterfall

Highcharts - column chart with drilldown to waterfall

I have a strange behavior with my drill down to a waterfall chart. My middle column which is a negative value is not positioned on the top, instead it is going from zero down.

I have taken the exact same configuration and applied it to a first level waterfall chart and there it works fine.

  • Expected result: Column 'Discount' should go from 50 to 40
  • Actual result: Column 'Discount' goes from 0 to -10

JSfiddle for drilldown chart where waterfall is not as I want it:

[Drilldown][1]

JSfiddle for chart where waterfall is correct:

[Waterfall][2]

I can not figure out what is missing.

  [1]: https://jsfiddle.net/a5x2g0q8/
  [2]: https://jsfiddle.net/jfgycycp/
Solution

  • Based on the Highcharts example of Drilldown from column to pie, you need to set the chart type to be the drilled down type, i.e. to 'waterfall', and set the type of the top level series explicitly, i.e. to 'column'.

    Updated chart options with type:

    chart: {
  type: 'waterfall',
  height: 350,
  zoomType: 'xy'
},

    Updated top level series options with type:

    series: [{
  type: 'column',
  data: [
  {
    name: 'Sweden',
    y: 55,
    drilldown: 'Sweden'
  }]
}],

    Updated Fiddle