<div id="chart-container">FusionCharts will render here</div>
<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/3.19.0-dev/fusioncharts.js"></script>
FusionCharts.ready(function () {
  var revenueChart = new FusionCharts({
    type: "msstackedbar2d",
    renderAt: "chart-container",
    width: "700",
    height: "400",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "Break-up of Annual Revenue",
        subcaption: "In Million $",
        xaxisname: "Year",
        yaxisname: "Sales in M$",
        numdivlines: "3",
        numberprefix: "$",
        numbersuffix: "M",
        showsum: "1",
        animation: "1"
      },
      categories: [
        {
          font: "Arial",
          fontsize: "12",
          fontcolor: "000000",
          category: [
            {
              label: "2001"
            },
            {
              label: "2002"
            },
            {
              label: "2003"
            },
            {
              label: "2004"
            },
            {
              label: "2005"
            }
          ]
        }
      ],
      dataset: [
        {
          dataset: [
            {
              seriesname: "Product A",
              color: "AFD8F8",
              data: [
                {
                  value: "30"
                },
                {
                  value: "26"
                },
                {
                  value: "29"
                },
                {
                  value: "31"
                },
                {
                  value: "34"
                }
              ]
            },
            {
              seriesname: "Product B",
              color: "F6BD0F",
              data: [
                {
                  value: "21"
                },
                {
                  value: "28"
                },
                {
                  value: "39"
                },
                {
                  value: "41"
                },
                {
                  value: "24"
                }
              ]
            }
          ]
        },
        {
          dataset: [
            {
              seriesname: "Service A",
              color: "8BBA00",
              data: [
                {
                  value: "27"
                },
                {
                  value: "25"
                },
                {
                  value: "28"
                },
                {
                  value: "26"
                },
                {
                  value: "10"
                }
              ]
            },
            {
              seriesname: "Service B",
              color: "A66EDD",
              data: [
                {
                  value: "17"
                },
                {
                  value: "15"
                },
                {
                  value: "18"
                },
                {
                  value: "16"
                },
                {
                  value: "10"
                }
              ]
            },
            {
              seriesname: "Service C",
              color: "F984A1",
              data: [
                {
                  value: "12"
                },
                {
                  value: "17"
                },
                {
                  value: "16"
                },
                {
                  value: "15"
                },
                {
                  value: "12"
                }
              ]
            }
          ]
        }
      ]
    }
  }).render();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.