Highcharts Interactivity between plots – looking for code improvements

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.

Answer

  1. You don’t need to call redraw after setData:

     function update_chart2(xmin, xmax) {
       ...
       chart2.series[0].setData(new_data);
       // chart2.redraw(); - redraw is called in setData
     }
    

  1. You can update xAxis with plot-band options instead of removing and adding it.

     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

Leave a Reply

Your email address will not be published. Required fields are marked *