score:0

Accepted answer

as discussed in the comments, you could do it like this:

 const barchart = ({values}) => {

  [data, setdata] = usestate([]);
  [hovering, sethovering] = usestate(null);

  useeffect(() => {
    setdata({
      labels: label,
      datasets:values.map((value, index) => ({
        label:'',
        data: value,
        backgroundcolor: index === hovering ? '#1690ca' :  '#d0e9f4',
        hoverbackgroundcolor: index === hovering ? '#d0e9f4' :  '#1690ca',
      }))
    });
  },[hovering, values]);

<bar
  data={data}
  width={100}
  height={50}
  options={{ onhover: (event,elements) => sethovering(elements[0]._index) }}
/>
}

this will update your data to set the colors of the currently hovered element as you mentioned within your question. you probably have to change it to match your data/setup, but this works for my setup.

hope this helps. happy coding.


Related Query

More Query from same tag