CODEWITHSUNDEEP
chart.js
Lauren
Lauren

Reputation: 785

ChartJS: Show default tooltip onclick

I have a chart.js line chart displaying properly. When you hover over the y-axis gridlines, the tooltips display as they should.

I'm trying to convert this to function on a touchscreen, so there is no hover. Is there a way to add a simple parameter to make the tooltip show on both hover and onclick?

Note, I know I could add a custom tooltip and add all of that functionality - I'm trying to see if there's just a parameter I can add as I don't need a custom tooltip.

Upvotes: 7

Views: 11721

Answers (3)

Rahul Gupta
Rahul Gupta

Reputation: 10141

For ChartJS version 2.8.0, you will need to add both the click and mouseout events to make the tooltip behave the desired way.

The click event would make the tooltip to appear when point is clicked and the mouseout event would hide the tooltip when the mouse pointer is moved outside of the chart canvas area which is the desired behavior.

Note: Without adding the mouseout event the tooltip would not hide even when the mouse is moved or clicked outside the chart canvas area.

Code:

options: {
  events: ["click", "mouseout"],
....
...

Upvotes: 1

Lee Han Kyeol
Lee Han Kyeol

Reputation: 2481

For Chart.js v2, you can specify those events at the root level of chart options.

options: {
    events: ['click']
}

Upvotes: 8

potatopeelings
potatopeelings

Reputation: 41065

Just add "click" to your tooltipEvents list when specifying the options for the chart

    ...
    tooltipEvents: ["mousemove", "touchstart", "touchmove", "click"],
});

In the fiddle below, I've removed all other events from the list except for click to give you an idea of how it will be like on a mobile

Fiddle - http://jsfiddle.net/8uobybv3/

Upvotes: 6

Related Questions