JSFiddle - React, Tailwind, and code Playground

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!--
    A simple Column 2D chart showing monthly revenue of Harry's SuperMart for last year.
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
      renderAt: 'chart-container',
      "type": "mscombi2d",
      "width": "110%",
      "height": 330,
      "dataFormat": "json",
      "dataSource": {
        "chart": {
          "labelstep": 11,
          "numberSuffix": " مليون ",
          "numberPrefix": "",
         // "theme": "fusion",
          "hasRTLText": 1,
          "drawFullAreaBorder": false,
          "plotBorderThickness": 2,
          "showAnchors": false,
          "anchorRadius": 5,
          "legendPosition": "center",
          "chartBottomMargin": 0,
          "numDivLines": 2,
          "showYAxisValues": true,
          "yAxisValuesPadding": 50,
          "showXAxisLine": true,
          "showToolTip": true,
          "setAdaptiveYMin": 1,
          "drawCrossLine": true,
          "usePlotGradientColor": true,
          "plotGradientColor": "#ffffff",
          "plotBorderAlpha": 100,
          "plotFillAngle": 90,
          "plotFillAlpha": 10,
          "plotFillRatio": "0, 10",
          "xAxisLineColor": "#5a5a5a",
          "xAxisLineThickness": 1,
          "labelDisplay": "none",
          "showvalues": "0",
          "useEllipsesWhenOverflow": "0"
        },
        "categories": [{
          "category": [{
              "label": "يناير 2022"
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
            },
            {
              "label": ""
           ...