JSFiddle - React, Tailwind, and code Playground

by FusionCharts

HTML

<script src="https://s3.amazonaws.com/fusionimplementation/fusion_excel_export/fusioncharts.js"></script>
<!-- Radar chart showing the allocated budget & actual cost in the different verticals of Harry's supermart 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 budgetChart = new FusionCharts({
        type: 'radar',
        renderAt: 'chart-container',
        width: '96%',
        height: '96%',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Budget analysis",
                "subCaption": "Current month",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "numberPrefix":"$",
                "baseFontColor" : "#333333",
                "baseFont" : "Helvetica Neue,Arial",                        
                "subcaptionFontBold": "0",
                "paletteColors": "#008ee4,#6baa01",
                "bgColor" : "#ffffff",
                "radarfillcolor": "#ffffff",
                "showBorder" : "0",
                "showShadow" : "0",
                "showCanvasBorder": "0",
                "showLegend":"0",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "divLineAlpha": "10",
                "usePlotGradientColor": "0",
                "numberPreffix": "$",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "exportEnabled":"1",
                "exportMode": "server"
            },
            "categories": [
                {
                    "category": [
                        { "label": "Marketing" },
                        { "label": "Product Management" },
                        { "label": "Customer Service" },
                        { "label": "Human Resource" },
                        { "label": "Sales & Distribution" }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Allocated Budget",
                    "data": [
                        { "value": "19000" },
                        { "value": "16500" },
                        { "value": "14300" },
                        {...