CODEWITHSUNDEEP
javascriptchartschart.js
kemsbe
kemsbe

Reputation: 605

Chart.js bar chart: show tooltip on label hover

I'm using Chart.js library to draw a bar chart and I want to show tooltip not only on bar hover, but also on x-axis label hover for that bar. I found onHover method for configuration, but it only lets me access the array of currently hovered bars, which isn't useful.

So, how can I access mouse event and maybe take position from there to compare it against bar labels positions? Or there is another way to do it?

My current configuration: 

const countryChartOptions = {
    hover: {
         onHover: this.onChartHover,
    },
};

const onHover = (activeElements) => {
    console.log(activeElements);
};

It only prints out hovered bars data, but I'm stuck to figure out how to extend it for behavior I need.

Upvotes: 7

Views: 10597

Answers (2)

Shivam Vyas
Shivam Vyas

Reputation: 51

It works for me

  options: {
      tooltips:{
      intersect : false,
      mode:'index'
      }
   }

Upvotes: 5

l2aelba
l2aelba

Reputation: 22217

What about :

options: {
  tooltips: {
    // Add this..
    intersect: false
  }
}

Upvotes: 5

Related Questions