question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I use chart tooltip formatter?

See original GitHub issue

Hi, how can I use chart tooltip formatter?
I have config like this:

const CHART_CONFIG = {
    ...
    tooltip: {
        formatter: (tooltip) => {
            var s = '<b>' + this.x + '</b>';
            _.each(this.points, () => {
                s += '<br/>' + this.series.name + ': ' + this.y + 'm';
            });
            return s;
        },
        shared: true
    },
    ...
}

But I can’t access chart scope using this keyword and also I can’t get point from tooltip param.
Thanks

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
keithdmoorecommented, Apr 19, 2018

I found the solution to this problem for those using Typescript. I thought I would share it for other Google Sleuthers

tooltip: {
   formatter: function() {
       var self: any = this;
       return self.point.category; 
   }               
},
2reactions
viotticommented, Sep 21, 2017

I think it should be:

const CHART_CONFIG = {
    ...
    tooltip: {
        formatter() {

Notice that the function name was missing parentheses.

Read more comments on GitHub >

github_iconTop Results From Across the Web

tooltip.formatter | highcharts API Reference
To find the actual hovered Point instance, use this.chart.hoverPoint . For shared or split tooltips, all the hover points are available in this.chart....
Read more >
Highcharts tooltip formatter - Stack Overflow
The tooltip formatter function has access to a number of different parameters. Instead of this.x , you could use this.point.name .
Read more >
Tooltip - Chart.js
Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The external option takes a function which is passed...
Read more >
How to Format Dates in the Tooltip in Chart.js - YouTube
How to Format Dates in the Tooltip in Chart.jsIn this video we will explore how to format dates in the tooltip in Chart.js....
Read more >
JavaScript Chart Tooltips Formatting - jQWidgets
The first one is to specify format settings that will be applied when the tooltip is displayed. The second option is to define...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found