FusionCharts - Stacked Column 2D Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div style="display: flex;">
  <div style="flex: 1">
    <div id="chart-container-1">FusionCharts will render here</div>
  </div>
</div>

<div style="display: flex;">
  <div style="flex: 1">
    <div id="chart-container-2">FusionCharts will render here</div>
  </div>
</div>
<div style="display: flex;">
  <div style="flex: 1">
    <div id="chart-container-3">FusionCharts will render here</div>
  </div>
</div>

JavaScript

FusionCharts.ready(function() {
  var revenueChart1 = new FusionCharts({
    type: 'stackedbar2d',
    renderAt: 'chart-container-1',
    width: '100%',
    height: '80',
    dataFormat: 'json',
    dataSource: {
      "chart": {
          "animation": "0",
    			"bgColor": '#ffffff',
    			"canvasBgColor": '#ffffff',
    			"showAlternateHGridColor": "0",
    			"showAlternateVGridColor": "0",
    			"maxLabelWidthPercent": '20',
    			"showPlotBorder": "0",
    			"usePlotGradientColor": "0",
    			"showBorder": "0",
    			"showCanvasBorder": "0",
    			"showTooltipforWrappedLabels": "1",
    			"showValues": "0",
    			"useEllipsesWhenOverflow": "1",
    			"showLegend": "0",
    			"showLabels": "0",
    			"showDivLineValues": "0",
    			"showLimits": "0",
    			"showSecondaryLimits": "0",
    			"lineAlpha": "0",
    			"divLineAlpha": "0",
    			"canvasLineAlpha": "0",
    			"borderAlpha": "0",
    			"canvasBorderAlpha": "0",
    			"showYAxisValues": "0",
    			"showXAxisValues": "0",
    			"showXAxisLine": "0",
    			"showYAxisLine": "0",
    			"numDivLines": "0",
    			"baseFont": 'Lato',
    			"baseFontSize": '12',
    			"plottooltext": '$displayValue',
    			"chartTopMargin": "0",
    			"chartLeftMargin": "0",
    			"chartRightMargin": "0",
    			"chartBottomMargin": "0",
    			"chartTopPadding": "0",
    			"chartLeftPadding": "0",
    			"chartRightPadding": "0",
    			"chartBottomPadding": "0",
      },
      "categories": [{
        "category": [{}]
      }],
      "dataset": [{
          "seriesname": "Series 1",
          "data": [{
              "value": "11000"
            }
          ]
        },
        {
          "seriesname": "Series 2",
          "data": [{
              "value": "11400"
            }
          ]
        }
      ]
    }
  }).render();
  
  var revenueChart2 = new FusionCharts({
    type: 'stackedbar2d',
    renderAt: 'chart-container-2',
    width: '100%',
    height: '80',
    dataFormat:...