JSFiddle - React, Tailwind, and code Playground

by FusionCharts

HTML

<script src="https://s3.amazonaws.com/fusionimplementation/fusion_excel_export/fusioncharts.js"></script>
<!-- A column 3D chart showcasing monthly revenue for last year. 
The Excel Export feature has been enabled in this sample. Click the menu button and select the format to Export to Excel.-->
<div id="chart-container">FusionCharts will render here</div>

CSS

html,body,#chart-container {
  width : 100%;
  height : 100%;
  overflow : hidden;
}

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'column3d',
        renderAt: 'chart-container',
        width: '96%',
        height: '96%',
        dataFormat: 'json',
        dataSource: {
    "chart": {
        "exportenabled":"1",
        "exportMode": "server",
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "paletteColors": "#0075c2",
        "valueFontColor": "#ffffff",
        "baseFont": "Helvetica Neue,Arial",
        "captionFontSize": "20",
        "captionFontBold":"1", 
        "subcaptionFontSize": "20",
        "subcaptionFontBold": "1",
        "placeValuesInside": "1",
        "rotateValues": "1",
        "showShadow": "0",
        "divlineColor": "#999999",
        "divLineDashed": "1",
        "divlineThickness": "1",
        "divLineDashLen": "1",
        "canvasBgColor": "#ffffff"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}
    }).render();
});