Chartjs-Donut Chart : Trigger legend or pie click event while selecting outside filter state change

0👍

You need to use setVisible method on a series related to a specific button:

handleClick(e) {
  const series = this.internalChart.series;

  series[e.currentTarget.attributes.index.value].setVisible();
}

render() {
  return (
    <div>
      <HighchartsReact
        highcharts={Highcharts}
        options={this.state.chartOptions}
        callback={this.afterChartCreated}
      />
      <h2>custom legend</h2>
      <div>Series 1
        <input
          type="checkbox"
          index="0"
          onChange={this.handleClick.bind(this)}
          defaultChecked={true}
        />
        ...
      </div>
    </div>
  );
}

Live demo: https://codesandbox.io/s/91opxqwn1r

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible

Docs: https://github.com/highcharts/highcharts-react/blob/master/README.md

Leave a comment