Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use two different formatters for highchart tooltips?

I have a highcharts table with two data series that use named values. In my tooltips for one series, I want to reference a data point from the series. So the solution in this answer: How to use a different formatter on Highcharts in each curve of the same graphic? doesn't help me. I need more than just tooltipText, I need a formatter:

For one:

formatter: function() {
    return this.x + ': ' + this.series.name +
    '<br> $' + Highcharts.numberFormat(this.y, 0);
     }

And for the other:

formatter: function() {
    return 'In ' + this.x + ' the median value was' + this.median + 
    'and the total $' + Highcharts.numberFormat(this.y, 0);                        
 }
like image 585
Amanda Avatar asked Dec 19 '12 02:12

Amanda


People also ask

What is highchart tooltip?

The tooltip appears when hovering over a point in a series. By default the tooltip shows the values of the point and the name of the series. For the full set of options available for the tooltip, see the API reference.

What is Formatter in Highcharts?

A callback function for formatting the HTML output for a single point in the tooltip. Like the pointFormat string, but with more flexibility. Defaults to undefined . Context: Highcharts. Point.


2 Answers

Inside formatter this reffers to the focused serie, you can add an if/else inside the formatter and return a string for each one, like the following.

tooltip: {
    shared: false,
    formatter: function() {
        var text = '';
        if(this.series.name == 'MSFT') {
            text = this.x + ': ' + this.series.name +
                   '<br> $' + Highcharts.numberFormat(this.y, 0);
        } else {
            text = 'In ' + this.x + ' the median value was' + this.median +
                   'and the total $' + Highcharts.numberFormat(this.y, 0);
        }
        return text;
    }
}

demo

like image 158
Ricardo Alvaro Lohmann Avatar answered Oct 02 '22 01:10

Ricardo Alvaro Lohmann


You can easily define a toolip formatter for each series - see here: http://api.highcharts.com/highcharts/plotOptions.series.tooltip

{
  tooltip: {
          shared: true
  },
  series: {
     name: 'some series name',
     data: mydata,
     tooltip: {
        valueSuffix: ' bar'
     }
  }
}

Example: http://jsfiddle.net/28qzg5gq/

like image 33
Martin Avatar answered Oct 01 '22 23:10

Martin