JSFiddle - React, Tailwind, and code Playground

by FusionCharts

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/themes/fusioncharts.theme.fusion.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<title>FusionCharts | Exporting Scroll Charts with Dynamic Resize</title>
	</head>
	<body>
		<center>
			<div id="chart-container"></div>
		</center>
	</body>
</html>

JavaScript

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "scrollColumn2d",
    id: "scrollChart1",
    renderAt: "chart-container",
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
    "chart": {
        "caption": "Sales Trends",
        "subcaption": "FY 2012 - FY 2019",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "showvalues": "1",
        "placeValuesInside" : "1",
        "rotateValues": "1",
        "valueFontColor" : "#ffffff",
        "numberprefix": "$",
       "exportEnabled": "1",
        "theme": "fusion"
    },
    "categories": [
        {
            "category": [
                { "label": "Jan 2012" },
                { "label": "Feb 2012" },
                { "label": "Mar 2012" },
                { "label": "Apr 2012" },
                { "label": "May 2012" },
                { "label": "Jun 2012" },
                { "label": "Jul 2012" },
                { "label": "Aug 2012" },
                { "label": "Sep 2012" },
                { "label": "Oct 2012" },
                { "label": "Nov 2012" },
                { "label": "Dec 2012" },
                { "label": "Jan 2013" }, 
                { "label": "Feb 2013" }, 
                { "label": "Mar 2013" }, 
                { "label": "Apr 2013" }, 
                { "label": "May 2013" }, 
                { "label": "Jun 2013" }, 
                { "label": "Jul 2013" }, 
                { "label": "Aug 2013" }, 
                { "label": "Sep 2013" }, 
                { "label": "Oct 2013" }, 
                { "label": "Nov 2013" }, 
                { "label": "Dec 2013" },
                { "label": "Jan 2014" }, 
                { "label": "Feb 2014" }, 
                { "label": "Mar 2014" }, 
                { "label": "Apr 2014" }, 
                { "label": "May 2014" }, 
                { "label": "Jun 2014" }, 
                { "label": "Jul 2014" }, 
                { "label": "Aug 2014" }, 
   ...