Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Format tooltip numbers in Highcharts

I use tooltip.pointFormat to render additional data in the tooltip. Unfortunately only point.x is formatted correctly with a thousand separator.

jsFiddle

$(function () {
  Highcharts.setOptions({
    global: {
      useUTC: false,
    },
    lang: {
      decimalPoint: ',',
      thousandsSep: '.'
    }
  });
  $('#container').highcharts({
    xAxis: {
      type: 'datetime'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count}</b><br/>',
      shared: true
    },
    series: [{
      data: [{
        y: 20009.9,
        count: 20009.9
      }, {
        y: 10009.9,
        count: 20009.9
      }, {
        y: 40009.9,
        count: 20009.9
      }],
      pointStart: Date.UTC(2010, 0, 1),
      pointInterval: 3600 * 1000 // one hour
    }]
  });
});
like image 991
Andreas Köberle Avatar asked Nov 26 '14 09:11

Andreas Köberle


3 Answers

Found the answer here.

Numbers are formatted with a subset of float formatting conventions from the C library funciton sprintf. The formatting is appended inside the variable brackets, separated by a colon. For example:

  • Two decimal places: "{point.y:.2f}"
  • Thousands separator, no decimal places: {point.y:,.0f}
  • Thousands separator, one decimal place: {point.y:,.1f}

So using :,.1f inside the brackets will format the number correctly.

tooltip: {
  pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>',
  shared: true
}

jsFiddle

like image 61
Andreas Köberle Avatar answered Nov 20 '22 16:11

Andreas Köberle


Instaed of pointFormat, use the tooltip formatter and then Highcharts.numberFormat

tooltip: {
            formatter:function(){

                return this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.options.count,1,',','.') + '</b><br/>' + 'Count: <b>'+Highcharts.numberFormat(this.point.y,1,',','.')+'</b><br/>';
            }
        },

Example: http://jsfiddle.net/8rx1ehjk/4/

like image 29
Sebastian Bochan Avatar answered Nov 20 '22 15:11

Sebastian Bochan


In our case tooltipFormatter applies format only for y property, I found couple ways how to add format not only for y,

  1. add format for each tooltip and for each property like this point.count:,.f

    pointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>',
    
  2. create small extension like this

    (function (Highcharts) {
      var tooltipFormatter = Highcharts.Point.prototype.tooltipFormatter;
    
      Highcharts.Point.prototype.tooltipFormatter = function (pointFormat) {
        var keys = this.options && Object.keys(this.options),
            pointArrayMap = this.series.pointArrayMap,
            tooltip;
    
        if (keys.length) {
          this.series.pointArrayMap = keys;
        }     
    
        tooltip = tooltipFormatter.call(this, pointFormat);        
        this.series.pointArrayMap = pointArrayMap || ['y'];
    
        return tooltip;
      }
    }(Highcharts));
    

Example

like image 3
Oleksandr T. Avatar answered Nov 20 '22 16:11

Oleksandr T.