Change background color on onClick event - Kendo React

[User]

Hello, 

I need to change the background color on onClick event when I have a multiple donut chart and a bar chart on a page. When I click on BarChart it needs to be selected and the bgColor changes to grey similarly when I select DonutChart - BarChart bgcolor resets and donut charts changes to grey instead

onPlotArea event did not work on DonutChart

This is what I have tried so far : 

const [selected, setSelected] = useState(false);
  const handleClick = () => {
    setSelected(selected => !selected);
  };

 

 <Grid container direction={{ xs: 'row', sm: 'column' }}>
      <Grid item onClick={handleClick}>
        {data ? (
          <BarChart
             data={data}
              title={'title}
          ></BarChart>
        ) : null}
      </Grid>
      {data ? (
        <>
          <Grid item>
            <DonutChart
              data={data}
              title={'title}
            ></DonutChart>
          </Grid>) : null}
    </Grid>

 

 

[Vessy]

Hello,

The plotAreaClick event is not available for pie / donut charts - it is supported only for charts which have axes. A possible option I can suggest you is to wrap each chart inside a standard `<div>` element and handle its click event instead:

https://stackblitz.com/edit/react-yz2esz-aftgvr?file=app%2Fmain.jsx

 

Regards,
Vessy
Progress Telerik