JSFiddle - React, Tailwind, and code Playground
by FusionCharts
HTML
<script src="https://s3.amazonaws.com/fusionimplementation/fusion_excel_export/fusioncharts.js"></script>
<!-- Single-Series Spline 2D Chart
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 visitChart = new FusionCharts({
type: 'msspline',
renderAt: 'chart-container',
width: '96%',
height: '96%',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"xAxisName": "Day",
"yAxisName": "No. of Visitor",
"showValues": "0",
"paletteColors" : "#0075c2,#1aaf5d",
"bgColor" : "#ffffff",
"showBorder" : "0",
"showShadow" : "0",
"showAlternateHGridColor" : "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor" : "#ffffff",
"logoURL": "http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png",
"legendBorderAlpha": "0",
"legendShadow": "0",
"divlineAlpha" : "100",
"divlineColor" : "#999999",
"divlineThickness" : "1",
"divLineIsDashed" : "1",
"divLineDashLen" : "1",
"divLineGapLen" : "1",
"exportEnabled":"1",
"exportMode": "server"
},
"categories": [
{
"category": [
{ "label": "Mon" },
{ "label": "Tue" },
{ "label": "Wed" },
{
"vline": "true",
...