JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

JavaScript

function formatNumbers(value) {
  var persian = {
    0: '۰',
    1: '۱',
    2: '۲',
    3: '۳',
    4: '۴',
    5: '۵',
    6: '۶',
    7: '۷',
    8: '۸',
    9: '۹'
  };
  var res = String(value);
  var list = res.match(/[0-9]/g);
  if (list != null && list.length != 0) {
    for (var i = 0; i < list.length; i++)
      res = res.replace(list[i], persian[list[i]]);
  }
  return res;
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
  "dataProvider": [{
    "year": 2003,
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1
  }, {
    "year": 2004,
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }, {
    "year": 2005,
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
  }],
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.5,
    "gridAlpha": 0,
    "labelFunction": function(label, item) {
      return formatNumbers(label);
    }
  }],
  "graphs": [{
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "labelFunction": function(item, label) {
      return formatNumbers(label);
    },
    "lineAlpha": 0.3,
    "title": "Europe",
    "type": "column",
    "color": "#000000",
    "valueField": "europe"
  }, {
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "labelFunction": function(item, label) {
      return formatNumbers(label);
    },
    "lineAlpha": 0.3,
    "title": "North America",
    "type": "column",
    "color": "#000000",
    "valueField": "namerica"
  }, {
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "labelFunction": function(item, label) {
      return formatNumbers(label);
    },
    "lineAlpha": 0.3,
    "title": "Asia-Pacific",
    "type":...