JSFiddle - React, Tailwind, and code Playground

by FusionCharts

HTML

<script src="https://s3.amazonaws.com/fusionimplementation/fusion_excel_export/fusioncharts.js"></script>
<!-- ErrorBar 2D chart showing life span of systems used in top 3 stores with error values
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 revenueChart = new FusionCharts({
        type: 'errorbar2d',
        renderAt: 'chart-container',
       width: '96%',
        height: '96%',
        dataFormat: 'json',
        dataSource: {
    "chart": {
        "exportenabled":"1",
        "exportMode": "server",
        "caption": "Machinery lifespan range",
        "subcaption": "Means & standard deviations",
        "xAxisName": "Systems",
        "yAxisName": "Life Span",
        "numberSuffix": " Years",
        "halfErrorBar": "0",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500",
        "showValues": "1",
        "valuePadding":"11.3",
        "errorBarColor": "666666",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "usePlotGradientColor": "0",
        "showXAxisLine": "1",
        "axisLineAlpha": "25",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendBgAlpha": "0",
        "showShadow": "0",
        "showAlternateHgridColor": "0",
        "showHoverEffect": "1",
        "rotateValues":"1",
        "divLineALpha":"0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Central AC"
                },
                {
                    "label": "Computers"
                },
                {
                    "label": "Bar-code Scanners"
                },
                {
                    "label": "Packaging Machines"
                },
                {
                    "label": "Chilling Compartments"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Daly City Serramonte",
            "data": [
                {
                    "value": "8",
                    "errorvalue": "2"
                },
                {
                    "value": "3",
                    "errorvalue": "0.5"
                },
                {
                    "value":...