I have a set of interconnected charts with Highcharts and callback functions. Specifically, put together a scatter plot with an x-axis range selection, which connects to a bar chart that reflects the average y-value of the points selected, by category.
It uses the 'events' key when creating the chart to call a function that edits and redraws the bar chart.
Please click on this sandbox link to see the example that I have put together: https://codesandbox.io/s/youthful-browser-mid8x?file=/index.html
I would like to know if the code can be written any better with improvements. If anyone can please review and let me know. Thanks.
You don't need to call redraw after setData:
redraw
setData
function update_chart2(xmin, xmax) { ... chart2.series[0].setData(new_data); // chart2.redraw(); - redraw is called in setData }
You can update xAxis with plot-band options instead of removing and adding it.
xAxis
events: { selection: function (event) { ... if (event.xAxis) { xmin = event.xAxis[0].min; xmax = event.xAxis[0].max; this.xAxis[0].update( { plotBands: [ { from: xmin, to: xmax } ] }, false ); } update_chart2(Math.floor(xmin) + 1, Math.floor(xmax) + 1); }, ... }
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#setData
https://api.highcharts.com/class-reference/Highcharts.Axis#update
1.4m articles
1.4m replys
5 comments
56.9k users