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() {
    revenueChart = new FusionCharts({
        type: 'scrollColumn2d',
        renderAt: 'chart-container',
        width: '100%',
        id: "myChartId",
        height: '350',
        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",
                // Hide export menu item
                "exportShowMenuItem": "0",
                "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"
   ...