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.candy.js"></script>
<div id="chart-container-location-traffic" style="text-align: center;">ABC</div>

JavaScript

FusionCharts.ready(function() {
  var locationTrafficData = {
    "Categories": [{
      "category": [{
        "Label": "LocationTesting"
      }, {
        "Label": "ToolsAL"
      }, {
        "Label": "ToolsM4"
      }]
    }],
    "DataSet": [{
      "SeriesName": "Entries",
      "Data": [{
        "Value": "10"
      }, {
        "Value": "20"
      }, {
        "Value": "30"
      }]
    }, {
      "SeriesName": "Exits",
      "Data": [{
        "Value": "11"
      }, {
        "Value": "22"
      }, {
        "Value": "33"
      }]
    }]
  };

  var chart = new FusionCharts({
    type: "scrollcolumn2d",
    renderAt: 'chart-container-location-traffic',
    dataFormat: "json",
    width: "565",
    height: "365",
    dataSource: {
      // Chart Configuration
      "chart": {
        "caption": "Entries by Toolhub Connect Locations",
        "subCaption": "",
        "xAxisname": "Toolrooms",
        "yAxisName": "Entry/Exit Count",
        "numVisiblePlot": "4"

      },
      // Chart Data
      "categories": locationTrafficData.Categories,
      "dataset": locationTrafficData.DataSet
    }
  });

  chart.render();
});