Chartjs-Change background color of all charts beside the one hovered

by

0👍

✅

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.

Leave a comment