How to add comma in stacked column highchart in indian format?

Question

I am using stacked column highchart. I am getting few value in column and tooltip. Now I want to show this value in Indian format with comma separator. Suppose I have a value like 123456789.So I want to show this value in 12,34,56,789 format. How can I do this? Please share with me if any body has any idea.

I tried this below code.

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

But It gives 123,456,789 format, I want something like 12,34,56,789. The Indian format.

My codes are below:

function draw_charts(amount, interest , year)
    {
        /*Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });*/
        $('#chart_area').highcharts({
        chart: {
            type: 'column',
            backgroundColor: 'transparent'
        },
        title: {
            text: 'Year wise break-up'
        },
        xAxis: {
            categories: year,
             title: {
                text: 'Year'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: -5,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'Interest',
            data: interest, color: '#7fb801'
        },{
            name: 'Principal',
            data: amount, color: '#4fc1e9'
        }],
        exporting: { enabled: false },
        credits: { enabled: false },

    });

    }

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2016-05-25T09:37:10

You can slightly modify the numberFormat function, changing from the lines (from source):

thousands = strinteger.length > 3 ? strinteger.length % 3 : 0;
// ...
ret += strinteger.substr(thousands).replace(/(\d{3})(?=\d)/g, '$1' + thousandsSep);

To these lines:

thousands = strinteger.length > 3 ? (strinteger.length - 1) % 2 : 0;
// ...
ret += strinteger.substr(thousands).replace(/(\d{2})(?=\d{3})/g, '$1' + thousandsSep);

Ending up with this function:

Highcharts.numberFormat = function (number, decimals, decimalPoint, thousandsSep) {

    number = +number || 0;
    decimals = +decimals;

    var lang = Highcharts.getOptions().lang,
        origDec = (number.toString().split('.')[1] || '').length,
        decimalComponent,
        strinteger,
        thousands,
        absNumber = Math.abs(number),
        ret;

    if (decimals === -1) {
        decimals = Math.min(origDec, 20); // Preserve decimals. Not huge numbers (#3793).
    } else if (!isNumber(decimals)) {
        decimals = 2;
    }

    // A string containing the positive integer component of the number
    strinteger = String(Highcharts.pInt(absNumber.toFixed(decimals)));

    // Leftover after grouping into thousands. Can be 0, 1 or 3.
    thousands = strinteger.length > 3 ? (strinteger.length - 1) % 2 : 0;

    // Language
    decimalPoint = Highcharts.pick(decimalPoint, lang.decimalPoint);
    thousandsSep = Highcharts.pick(thousandsSep, lang.thousandsSep);

    // Start building the return
    ret = number < 0 ? '-' : '';

    // Add the leftover after grouping into thousands. For example, in the number 42 000 000,
    // this line adds 42.
    ret += thousands ? strinteger.substr(0, thousands) + thousandsSep : '';

    // Add the remaining thousands groups, joined by the thousands separator
    ret += strinteger.substr(thousands).replace(/(\d{2})(?=\d{3})/g, '$1' + thousandsSep);

    // Add the decimal point and the decimal component
    if (decimals) {
        // Get the decimal component, and add power to avoid rounding errors with float numbers (#4573)
        decimalComponent = Math.abs(absNumber - strinteger + Math.pow(10, -Math.max(decimals, origDec) - 1));
        ret += decimalPoint + decimalComponent.toFixed(decimals).slice(2);
    }

    return ret;
};

I've prefixed some function calls with Highcharts to make it work without a custom js-file.

See this JSFiddle demonstration of it in use.

How to add comma in stacked column highchart in indian format?

1 Answers