Common Highcharts

Common Highcharts is a helper function which creates a unique highchartsContainerRef with useSidebarChartUpdate and returns highcharts. A highchartsContainerRef get a unique id from the highcharts.

Each highcharts will have a unique highchartsContainerRef which will be used in useSidebarChartUpdate when the reflow is executed. useSidebarChartUpdate uses highchartsContainerRef to reflow the highchart when showSidebar changes.

How To Use CommonHighcharts

Import CommonHighcharts into your file. Then return the highcharts props you need in the CommonHighcharts wrapper.

    return (
        <StyledLineChart isLoading={chartLoading}>
            {!noData ? (
                <CommonHighcharts
                    highcharts={Highcharts}
                    options={{ ...config.chart.options, series: chartSeriesListData }}
                    immutable={false}
                />
            ) : (
                <ComponentMessage title={messageTitle} copy={messageCopy} type={messageType} />
            )}
        </StyledLineChart>
    );