Waterfall Highchart to start some of the columns in between the series with 0 y-axis

Question

Can anyone please help me to change the behaviour of waterfall highchart to show graph like in screenshot?

Actually I know about isSum and isIntemediateSum property. Using which I can start some of the columns in waterfall with 0 y-axis.

But this ignores the y-axis value assigned and does calculation itself based on series before this.

Any suggestions?

You may want to consider doing the math outside of Highcharts and adding each result to an array. Then, you can plug the array into your chart series. Each data point can have its own color, data label orientation, etc. — Mike Zavarello, May 26 '16 at 16:26
Hi brightmatrix, Thanks for your reply. But I already did that you mentioned. Issue is that highchart waterfall series starts first bar from 0 then all other bars next to it stay in air. If we want to keep some of the bars in between the series to start from 0 y-axis then we have to use isIntermediateSum or isSum property. But these are basically calculated properties so these ignores value defined by us. — user1678110, May 27 '16 at 05:54
How about using the columnrange type series? http://jsfiddle.net/5jvzj9nz/ Missing lines can be added by [Renderer](http://api.highcharts.com/highcharts#Renderer.path) — Sebastian Bochan, May 27 '16 at 12:01

score 1 · Answer 1 · answered Mar 16 '21 at 14:45

I'm a little late to the party, but I'll give my solution anyway. I'm not entirely satisfied with it because I find it hacky, but it does the job.

Say you want to plot 4 values on your waterfall :

A starts at 0 and ends at 10
B starts at 10 and ends at 20
C starts at 0 and ends at 25
D starts at 25 and ends at 35

The way you can do it is by creating two data points for the value C :

The first one will be invisible (set the attribute visible to true) and has a y-value of -20
The second one is the standard one : y-value = 25

The invisible bar will bring back your waterfall current sum to 0, but will not appear on your graph.

Here is my code :

Highcharts.chart('container', {
    chart: {
        type: 'waterfall'
    },
    title: {
        text: 'Highcharts Waterfall'
    },
    xAxis: {
        type: 'category'
    },
    legend: {
        enabled: false
    },
    series: [{
        upColor: Highcharts.getOptions().colors[2],
        color: Highcharts.getOptions().colors[3],
        data: [
        {y: 10, name: "A", color: "#6a329f"}, 
        {y: 10, name: "B", color: "#6a329f"}, 
        {y: -20, name: "C", visible: false, color: "#f44336"}, 
        {y: 25, name: "C", color: "#f44336"}, 
        {y: 10, name: "D", color: "#6a329f"}],
    }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

I would be happy if anyone can improve on this, I find it too complicated to be an ideal solution.

Waterfall Highchart to start some of the columns in between the series with 0 y-axis

1 Answers1