Stock tools interacting with another chart/component

Question

Basically I'm running a Reactjs application with Highcharts using the highcharts-react-official wrapper. I'm defining a highchart Component and the goal is to generate a report page with a dozen charts with different settings and data sources. I also want to add highstock stock tools components to it. The problem I'm finding is that when I click on Indicators button in a component (first option, top left) popop is triggered in all components.

Chart Component

// (...) Imports

class CustomGUIChart extends Component {
  constructor(props) {
    super(props);
    const { data } = this.props;

    this.state = {
      options: {
        legend: {
          enabled: true
        },

        tooltip: {
          enabled: false
        },

        series: data.map((set, index) => ({
          ...set,
          id: `series-${index}`,
          type: "line",
          cursor: "pointer",
          marker: {
            enabled: false
          }
        })),

        stockTools: {
          gui: {
            enabled: true
          }
        }
      }
    };
  }

  render() {
    const { options } = this.state;

    return (
      <Card>
        <CardContent style={{ padding: 0 }}>
          <HighchartsReact
            highcharts={Highcharts}
            constructorType="stockChart"
            containerProps={{ className: "chart" }}
            options={options}
            allowChartUpdate
          />
        </CardContent>
      </Card>
    );
  }
}

CustomGUIChart.propTypes = {
  data: PropTypes.array.isRequired
};

export default CustomGUIChart;

Page Content calling chart component multiple times

// (...) Imports

const chartData = mockData.map((series) => ({
  ...series,
  data: series.data.map((point) => {
    const dateArr = point[0].split('-');
    return [
      Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
      point[1] * 100
    ];
  })
}));

function SectionContent() {

  return (
    <>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>

    </>
  );
}

export default Content;

How to handle this unexpected event trigger in different components/charts?

Here is a working Demo:

Answer 1

You need to declare unique bindingsClassName per each chart.

navigation: {
  bindingsClassName: 'chart2'
}

---

Live demo: https://jsfiddle.net/BlackLabel/y5wxvukr/1/

Related thread: https://github.com/highcharts/highcharts/issues/10599

AP Reference: https://api.highcharts.com/highstock/navigation.bindingsClassName