score:1

First of all - it seems that you missed importing the broken-axis module.

import HighchartsBrokenAxis from "highcharts/modules/broken-axis";

HighchartsBrokenAxis(Highcharts);

Next, I want to suggest another solution - use the render callback to check the yAxis.minData and do an update on the yAxis.

chart: {
  events: {
    render() {
      const chart = this,
        yAxis = chart.yAxis[0],
        dataMin = yAxis.dataMin;

      if (chartForRender) {
        chartForRender = false;
        yAxis.update({
          breaks: [
            {
              from: 1,
              to: dataMin
            }
          ]
        });
      }
      chartForRender = true;
    }
  }
},

Notice that I used the chartForRender flag to be sure that the update call will be triggered only once.

Demo: https://stackblitz.com/edit/react-jr5bjw?file=index.js

API: https://api.highcharts.com/highcharts/chart.events.render

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update


Related Query

More Query from same tag