JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://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="height: 300px; margin-top: 2em"></div>

JavaScript

$(function () { 

 Highcharts.setOptions({
        locale: getPersianLocal()
    });
   $('#container').highcharts({
            chart: {
                zoomType: 'x',
                spacingRight: 20
            },
            title: {
                text: 'USD to EUR exchange rate from 2006 through 2008'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: 14 * 24 * 3600000, // fourteen days
                title: {
                    text: null
                },
                 dateTimeLabelFormats: { // don't display the dummy year
                    day: '%d %B %y',
                    week: '%e - %B',
                    month: '%B - %y',
                    year: '%Y'
                },
                labels:{
                    formatter: function () {
                        console.log(this.value);
                        console.log(this.dateTimeLabelFormat);
                        var date = Highcharts.localizationDateFormat(this.dateTimeLabelFormat, this.value);
                        console.log(date);
                        return Highcharts.localizationNumber(date);
                     
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Exchange rate'
                }
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1,...