0

I have to many points on my chart so when I am clicking through on mobile or small screen my tooltip just showing data from multiple points:

enter image description here

I researched on that and find out the the best approach would be is to disable the tooltip on small screens. I tried to follow this advice from the docs. But have no luck:

options: {
        // This chart will not respond to mousemove, etc
        events: ['click']
    }

Also I found that but I think it is actually related to what I just did based on the advice form the docs.

Any ideas how to fix?

Sergino
  • 10,128
  • 30
  • 98
  • 159

1 Answers1

2

Tooltips can be disabled in the options as shown below (see Tooltip Configuration):

option: 
    tooltips: {
        enabled: false
    }
    ...
}

Instead of using a hard coded value false, you may obtain the value from a function that returns true or false depending on the screen size.

option: 
    tooltips: {
        enabled: window.screen.width > 400
    }
    ...
}

I've no experience in creating web apps for mobile devices. Therefore 400 is probably not the right choice. The following answer should help finding the appropriate function: https://stackoverflow.com/a/11381730/2358409

uminder
  • 23,831
  • 5
  • 37
  • 72
  • how would you stick the function in? is it the one are you talking about https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips? Is there any particular examples? – Sergino Feb 09 '20 at 09:36
  • Interesting idea `enabled: window.screen.width > 400` do you think `400px width` is the best value to detect if the screen is mobile? – Sergino Feb 09 '20 at 10:37
  • @sreginogemoh: I've no experience in creating web apps for mobile devices. Therefore 400 is probably not the right choice. The following answer should help finding the appropriate function: https://stackoverflow.com/a/11381730/2358409 – uminder Feb 09 '20 at 16:26