Custom Y-Axis Scale in Highcharts React

Question

I am using highcharts for trending in my react code. On the initial page load, the chart is blank. User may add any type of series at the run time. On the basis of the series added, corresponding yaxis is added to the chart up to 3 yAxis can be added. I want to open a modal dialog box with min max inputs for each yaxis on the chart and set the min max value for each yaxis manually. I can achieve this already but with some hacks.

Is there any way in React that when the chart is fully loaded with all the y-axes added, I could click a button and open a modal dialog? render method is not always executed when series are added or removed from the chart so the modal dialog does not know how many axes are there in the chart.

Please let me know if it possible to render a modal dialog on click of a button (I can not pre render it while render method is executed.)

Thanks.

Hi @V.B, Did you try to use Highcharts events? The chart load or render events should solve the problem. — ppotaczek
No I have not yet , but how would I render something on chart's render event? The parent component's render event is already fired? Please correct me if I am wrong — V.B
It depends on how you use React. Please check this example: codesandbox.io/s/2x0kpxkoxn, it shows how you can get the component reference in chart events. — ppotaczek
No problem, Please let me know if your problem has been resolved. — ppotaczek

ppotaczek ppotaczek · Accepted Answer · 2019-03-21T12:58:44

You can get the React component reference in the chart events functions and use it to render some elements:

chart: {
  events: {
    render: function() {
      ...
      // use React to render something
    }.bind(this)
  }
},

Live demo: https://codesandbox.io/s/2x0kpxkoxn

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

Custom Y-Axis Scale in Highcharts React

1 Answers