JSFiddle - React, Tailwind, and code Playground
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>
<div id="chart-container">FusionCharts will render here</div>
CSS
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
JavaScript
FusionCharts.ready(function() {
var visitChart = new FusionCharts({
type: 'line',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"lineThickness": "2"
},
"data": '[{"label":"Mon","value":"15123"},{"label":"Tue","value":"14233"},{"label":"Wed","value":"23507"},{"label":"Thu","value":"9110"},{"label":"Fri","value":"15529"},{"label":"Sat","value":"20803"},{"label":"Sun","value":"19202"}]'
}
});
visitChart.render();
});