how to know if the high charts chart has finished rendering

Question

we are calling the highcharts library to render a line chart. each data point will have a lower and upper confidence limit we also render as a line. the line is rendered using the to_pixel function to find the coordinates where to plot the line and using renderer to actually plot it.

now we are experiencing that after evrything has been plotted (the line chart is rendered), the chart is expanded by slanting the x-axis labels. this means the chart expands downward, all the data points are shifted downwards except of course our rendered line (the confidence limits). it looks like we need to know if the chart has been re-rendered so we can render our confidence intervals.

the question is - how do you know if the chart is re-rendered?

we dot knwo how to solve this unless we know that the chart has re-rendered itself. what i am thinking of is to wait for some status (the chart is not re-rendering anymore - that the chart is complete) before we add in our confidence intervals

Answer 1

You can check the chart status by referring to load, redraw, or render events.

API reference: https://api.highcharts.com/highcharts/chart.events.load

Demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-render/

   chart: {
    events: {
        load() {
            createLabel(this, 'load event', 80, colors[0]);
        },
        redraw() {
            createLabel(this, 'redraw event', 80, colors[3]);
        },
        render() {
            createLabel(this, 'render event', 120, colors[1]);
        }
    }
},

Let me know if there's something I could clarify