How to change the color of Select Bar in Echart barchart in react

Question

I am using this example of the BarChart in REchart Barchart

i want to change to color of select bar on click.

I have tried to use the setOptions but it not worked.

Please can anyone help to change the color of particular bar on click on it.

Answer 1

Without any example code or context that link isn't helpful, the entire docs and fiddles for it are terrible unfortunately and I don't think it's a very common chart provider.

If you look into the docs though there are events.Mouse.events.click events which you should be able to hook into and override the setOption{} color for the bar, as that's where it will be happening.

That being said there's not much to go off here, if you can add code examples and what you've tried it will be a lot more helpful.

Answer 2

An example for clicking an item of event:

class ChartContainer extends React.Component {
  constructor(props) {
    super(props);
    this.echarts_react = null;
    this.onEvents = {
      click: this.handleClick()
    };
  }

  handleClick = e => console.log("e>>>>>>>>>", e)

  render() {
    return (
      <ReactEcharts
        ref={e => {
          this.echarts_react = e;
        }}
        option={this.props.chartOption}
        style={{ height: '100%', width: '100%' }}
        onEvents={this.onEvents}
      />
    );
  }
}