Highcharts fold/unfold waterfall

Question

I use Highcharts watefall (and stacked waterfall for multiple measures) and it is very powerfull. I would like to get a better render with a dynamic fold/unfold. In the following example : https://jsfiddle.net/vegaelce/4x1ndpjr/ I would all california/colorado/dc columns hidden by default (only Subtotals & Total columns visible) and when mouse overed a Subtotal/Total column, the dedicated california/colorado/dc columns are shown.

I think I can use

  plotOptions: {
column: {
  point: {
    events: {
      mouseOver: function() {
      ...
      }
      mouseOut: function() {
      ...
      }
    }}}}

But how to hide columns that are not isIntermediateSum and display only the ones concerned by the isIntermediateSum overed ?

Thanks

Answer 1

You can use breaks for x-axis and dynamically update chart depending on hovered point. Example:

function generateBreaks(hoveredX) {
    const breaks = [];

    for (let i = 3; i < 12; i += 4) {
        if (hoveredX !== i) {
            breaks.push({
                breakSize: 0,
                from: i - 0.5 - 3,
                to: i - 0.5
            });
        }
    }

    return breaks;
};

Highcharts.chart('container', {
    xAxis: {
        ...,
        breaks: generateBreaks()
    },
    ...
});

---

Live demo: https://jsfiddle.net/BlackLabel/mpf4egwn/

API Reference: https://api.highcharts.com/highcharts/xAxis.breaks