Adding thousands separator for custom formatted highcharts tooltip

Question

I am using highcharts to in my app and want to add tooltip with thousand separator like I did it in data labels. I used custom formatting for tooltip, so what should I change to achieve this

tooltip options in highcharts

tooltip: {
                formatter: function () {
                    return (this.x + ':' + this.y);
                },
                shared: true,
                useHTML: true
            },

JS FIDDLE

Doubledealing

Answer 1

use thousand separator in lang

$(function () {
Highcharts.setOptions({

    lang: {
      decimalPoint: '.',
      thousandsSep: ','
    }
});

and in tooltip- formatter use like

   tooltip: {
             pointFormat: '<b>{point.x} :</b>' + 'Count: <b>{point.y:,.0f}</b>',

            shared: true,
            useHTML: true
        }

Updated fiddle with separator without decimal point

Tabby

please take a look in the fiddle – Doubledealing

if don't want decimal part replace .1f with .0f pointFormat: ' <b>{point.x} :</b>' + 'Count: <b>{point.y:,.0f}</b>' – Tabby

:) I was making your desired format ,Initially I made it with 1 decimal point .Check the fiddle now – Tabby

The fiddle(s) is/are gone now. Is it possible to re-upload it? – Knossos

jsfiddle page does not exists – Camper

@Irrfan23, please refer another answer given by that fiddle is still available – Tabby

Answer 2

Just following Nishith Kant Chaturvedi's answer, and since there is no jsfiddle example available, here you can see how to implement that answer.

Highcharts.setOptions({
    lang: {
      decimalPoint: '.',
      thousandsSep: ','
    }
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['Salary']
    },
    yAxis: {
        title: {
            text: ''
        },
        stackLabels: {
            enabled: true,
            format: '{total:,.2f} $us'
        },
        labels: {
            format: "{value:,.2f} $us",
        }
    },
    legend: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                    format: '{point.y:,.2f} $us',
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            }
        }
    },
    series: [{
            type: 'column',
        name: 'Tomas',
        data: [60000]
    }, {
            type: 'column',
        name: 'Amy',
        data: [18000]
    }, {
            type: 'column',
        name: 'Jenny',
        data: [85000]
    }]
});

http://jsfiddle.net/zrc5skLy/

Chappie

Great answer! Helped me finally get the $1,000,000 formatting correct. You can modify the formatting of the highlighted values by using '{series.name}: {point.y:,.2f}<br/>Total: {point.stackTotal:,.2f}'. – Calcimine

Answer 3

Use Highcharts.numberFormat() in point.x or point.y

example:

tooltip: {
  enabled: true,
  split: true,
  shared: true,
  formatter: function () {
    // The first returned item is the header, subsequent items are the points
    return [Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x)].concat(
      this.points
        ? this.points.map(function (point) {
            return (
              point.series.name +
              ": " +
              // numberFormat(data, decimal)
              Highcharts.numberFormat(point.y, 2)
            );
          })
        : []
    );
  },
},

Taimi

Answer 4

Since this option is not available in our framework,

lang: {
      decimalPoint: '.',
      thousandsSep: ','
    }

I came up with a trick using point formatter

"pointFormatter": "function (){ return (this.base/1000).toString().replace('.', ',')}"

Leong

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Rosenkranz