0

I've a line chart(chartJs) and i want to change the background colour of shaded region when hovered. I tried below :

const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      data: [12, 1, 4, 3, 5, 2, 3],
      pointHoverRadius: 5,
      **backgroundColor: "blue",**
      borderWidth: 5,
      **hoverBackgroundColor: "red",** --> this instead changes the color of point on hover.
    }
  ]
};

Other config(Extended Line chart) :

options: {
        tooltips: {
          enabled: false,
          intersect: false,
          mode: 'index',
        },
        events: ['mousemove', 'mouseout', 'touchstart', 'touchmove'],
        hover: {
          mode: 'index',
          intersect: false,
        },

I want to change the color of shaded blue region to red.

enter image description here

richa Singh
  • 435
  • 2
  • 5
  • 10
  • Hey would you able to put this in codepen so we could have better look at it and try it out to help you – Abhijeet Abnave Mar 25 '21 at 18:11
  • @AbhijeetAbnave Here it is https://stackblitz.com/edit/ionic-react-demo-zau6lb?file=App.jsx – richa Singh Mar 26 '21 at 03:54
  • I should be using fill here on dataset but it should change back to blue immediately i stop hovering a point. – richa Singh Mar 26 '21 at 04:47
  • I read some articles and Github issues, after spending several hours to get a lead on this, This is not practically possible in Chart.js for now, but I have answered this question with a little different approach, I hope it might help you, please accept and upvote the answer so others would get lead on this issue quickly – Abhijeet Abnave Mar 26 '21 at 20:12

1 Answers1

0

Here is the stackblitz link, made the change in your code and it is live

Chart.js does not yet provide any property or method to a change of color of the area under a line graph on hover (to be specific).

But you can achieve this by some other method by re-rendering your canvas on hover, this can be smooth if you have your own custom made hooks, (This is a hackish way of achieving what you want, IT WORKS !!! but I personally will not recommend this)

Here is the explanation

  1. I have added one state which will toggle to true & false on Hover

    const [ isHover, hoverToggle ] = useState(false)

  2. I have shifted const data inside of App function

  3. To choose background-color to add this condition

    backgroundColor: isHover ? "red" : "blue"

  4. Then in onHover event I have added two conditions

a)

if ( event.type === "mousemove" && !isHover ) {
    hoverToggle(true);
}

b)

if ( event.type === "mouseout" ||
     event.type === "mouseleave" ||
     event.type === "mouseup"
   ) {
        hoverToggle(false);
     }
  1. And most important part pass isHover in useEffect's array so it will be revoked on isHover toggle

I personally recommend d3.js for such type of requirements it is a little complex but you can get whatever you want in the graph.

Abhijeet Abnave
  • 801
  • 6
  • 16