Persian (farsi) numbers in highchart

Question

I use Highcharts to draw some charts. My language is Persian (Farsi) and I want to draw charts with Persian numbers. But in Highcharts all numbers show in English.

Is there a way that I show numbers (all numbers: yaxis,tooltip, ...) in Persian?

Answer 1

You can try the Highcharts Localization plugin by Milad Jafary. It includes Persian date and numbers by default, and can be exanded to other localizations. You'll still have to format the labels, but it does "the hard work" for you.

For example, a minimal example could be:

Highcharts.setOptions({
    locale: getPersianLocal()
});

$('#container').highcharts({

    xAxis: {
        labels: {
            formatter: function() {
                // Example of replacing a normal number with persian number
                return Highcharts.localizationNumber(this.value);
            }
        }
    },
    // ...
});

Similarly you can use formatter for your y-axis, tooltip, et cetera.

If you need to format a date you can use this function:

$(function () {
    Highcharts.setOptions({
        locale: getPersianLocal()
    });

    $('#container').highcharts({
        tooltip: {
            formatter: function() {
                return '<span style="font-size: 10px">'+Highcharts.localizationNumber(this.key)+'</span><br/>'
                        +'<span style="color:{point.color}">\u25CF</span> '+this.series.name+': <b>'
                        +Highcharts.localizationNumber(this.y)+'</b><br/>';
            }
        },
        xAxis: {
            labels: {
                formatter: function() {
                    return Highcharts.localizationNumber(this.value);
                }
            }
        },
        yAxis: {
            labels: {
                formatter: function() {
                    return Highcharts.localizationNumber(this.value);
                }
            }
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/jalali.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/highcharts-localization.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Highcharts.localizationDateFormat('%A, %d %B %y, %H:%M:%S', new Date().getTime());

You will have to include the plugin scripts, for example:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/jalali.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/highcharts-localization.js"></script>

See this more complete JSFiddle demonstration of it in use.