FusionCharts - 100% Stacked Column 2D Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

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>
<!-- 
    A simple 100% stacked column chart in FusionCharts showing revenue by product category for current year 
    Attribute: 
        # stack100Percent - Used to show percentage distribution instead of actual values in a stacked chart.
		# showPercentInTooltip - Set to 1,
		# showValues - Set to 1,
		# showPercentValues - Set to 0,
		# valueFontColor - Set to #ffffff,

        
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "% Revenue",
        "numberPrefix": "$",
        //To show revenue stack in Percentage distribution
        "stack100Percent": "1",
        "decimals": "1",
        //To show value as datavalue and percent value in tooltip
        "showPercentInTooltip": "0",
        "showValues": "1",
        "showPercentValues": "0",
        //Value font color
        "valueFontColor": "#ffffff",

        "theme": "fusion"
      },

      "categories": [{
        "category": [{
          "label": "Q1"
        }, {
          "label": "Q2"
        }, {
          "label": "Q3"
        }, {
          "label": "Q4"
        }]
      }],

      "dataset": [{
        "seriesname": "Food Products",
        "data": [{
          "value": "11000"
        }, {
          "value": "15000"
        }, {
          "value": "13500"
        }, {
          "value": "15000"
        }]
      }, {
        "seriesname": "Non-Food Products",
        "data": [{
          "value": "11400"
        }, {
          "value": "14800"
        }, {
          "value": "8300"
        }, {
          "value": "11800"
        }]
      }]
    }
  });

  revenueChart.render();
});