JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js?cacheBust=8232"></script>
<div id="chart-container">Chart will render here</div>
JavaScript
FusionCharts.ready(function () {
var budgetChart = new FusionCharts({
type: 'radar',
renderAt: 'chart-container',
width: '600',
height: '600',
dataFormat: 'json',
dataSource: {
"chart": {
"captionFontSize": "14",
"subcaptionFontSize": "16",
"bgColor" : "#ffffff",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica,arial,sans-serif",
"baseFontSize": "12",
"plotfillalpha": "0",
"paletteColors":"0",
"showlegend":"1",
"radarfillcolor": "#ffffff",
"showBorder" : "0",
"drawanchors":"0",
"showShadow" : "0",
"showCanvasBorder": "0",
"valueFontSize":"14",
"valueFontBold":"1",
"divLineAlpha": "10",
"showValues":"0",
"legendBorderAlpha":"0",
"legendShadow":"0",
"divLineGapLen":"1",
"labelPadding":"10",
"radarSpikeAlpha":"100",
"yAxisValueDecimals": "1",
"labelPadding": "20",
"plotBorderThickness": "5",
"divLineThickness":"4",
"divLineAlpha": "100",
"showYAxisValues":"0"
},
"categories": [
{
"category": [
{ "label": "Innovation" },
{ "label": "Facilitating Change" },
{ "label": "Customer Focus" },
{ "label": "Planning and Execution" },
{ "label": "Organization Talent Development" },
{ "label": "Builds Trusts" }
...