Automatic fold/unfold Y-axis break on mouse over

Question

I need to build a "basic" columns (horizontal or vertical) chart with Y-axis break. I used the sample provided here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/axisbreak/break-visualized/ to achieve that and the result is fine. Now I need to unfold the Y-axis on mouse over the columns (to display the chart with Y-axis in its original size). I added some events to do that :

plotOptions: {
 column: {
  point: {
    events: {
      mouseOver: function(){
        const chart = this,
        yAxis = chart.series.yAxis;
        yAxis.update({
          breaks: [],
        });
      },
      mouseOut: function(){
        const chart = this,
        yAxis = chart.series.yAxis;
        yAxis.update({
          breaks: breakarray,
        });
      }
    }
   }
  }

Job is done and the result seems OK, you can see it in the jsfiddle here https://jsfiddle.net/vegaelce/wd5nhcqg/

1st point : I would like the // on the Y-axis and the break-signs in the columns disappear when the mouse over the column (and the chart unfold). Then on mouse out event, the breaking signs (// and signs in the columns) need to be drawn again. How to do that ?

2nd point : With my method, event is triggered when mouse is over each columns. I would prefer the event is only triggered on columns impacted by break axis (columns with a break sign), not the others. Is it possible ?

I tried using the events but without success.

Thanks in advance

Answer 1

Please refer to the below code. For the first point I have added brokenAxis.breakArray to this.breakArray and used setColumnBreaksVisibility function in mouse events. For the second point I have changed the mouseOver function to clear breaks conditionally.

Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function(proceed, lineWidth) {
    ...
    (this.breakArray || []).forEach(function(brk) { 
        ...
    });
    ...
});

function pointBreakColumn(e) {
    ...
    if (!point[key]) {
        point.breakKey = key;
        ...
    } else {
        ...
    }
}

function setColumnBreaksVisibility(series, show) {
    series.forEach(function(s) {
        s.points.forEach(function(point) {
            if (point.breakKey) {
                point[point.breakKey][show ? 'show' : 'hide']()
            }
        });
    });
}

Highcharts.chart('container', {
    ...
    plotOptions: {
        column: {
            point: {
                events: {
                    mouseOver: function() {
                        const point = this,
                            allSeries = point.series.chart.series,
                            yAxis = point.series.yAxis;

                        if (this.breakKey) {
                            setColumnBreaksVisibility(allSeries);
                            yAxis.update({
                                breaks: []
                            });
                        }
                    },
                    mouseOut: function() {
                        const point = this,
                            allSeries = point.series.chart.series,
                            yAxis = point.series.yAxis;

                        if (!point.breakArray) {
                            yAxis.update({
                                breaks: breakarray,
                            });
                            setColumnBreaksVisibility(allSeries, true);
                        }
                    }
                }
            }
        }
    }

});

---

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

API Reference:

https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide

https://api.highcharts.com/class-reference/Highcharts.SVGElement#show