javascript - Highcharts Interactivity between plots - looking for code improvements

Question

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.

question from:https://stackoverflow.com/questions/65906396/highcharts-interactivity-between-plots-looking-for-code-improvements

Answer 1

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
    }
   

---

2. 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