Grouped Stacked Column Chart rendered across Mulitple Axis - CanvasJS JavaScript Charts

Grouped Stacked Column Chart rendered across Mulitple Axis - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "Grouped Stacked Chart"
  },
  theme: "theme3",
  axisY: {
    maximum: 15
  },
  axisY2: {
    maximum: 15
  },

  data: [
    {
      type: "stackedColumn",
      dataPoints: [
        { x: 1, y: 6, label:"Apple" },
        { x: 2, y: 2, label:"Mango" },
        { x: 3, y: 5, label:"Orange" },
        { x: 4, y: 7, label:"Banana" },
        { x: 5, y: 1, label:"Pineapple" },
        { x: 6, y: 5, label:"Pears" }					
      ]
    },
    {
      type: "stackedColumn",
      dataPoints: [
        { x: 1, y: 7, label:"Apple" },
        { x: 2, y: 4, label:"Mango" },
        { x: 3, y: 7, label:"Orange" },
        { x: 4, y: 5, label:"Banana" },
        { x: 5, y: 2, label:"Pineapple" },
        { x: 6, y: 7, label:"Pears" }					
      ]
    },
    {
      type: "stackedColumn",
      axisYType: "secondary",
      dataPoints: [
        { x: 1, y: 4, label:"Apple" },
        { x: 2, y: 1, label:"Mango" },
        { x: 3, y: 2, label:"Orange" },
        { x: 4, y: 3, label:"Banana" },
        { x: 5, y: 1, label:"Pineapple" },
        { x: 6, y: 3, label:"Pears" }					
      ]
    },
    {
      type: "stackedColumn",
      axisYType: "secondary",
      dataPoints: [
        { x: 1, y: 5, label:"Apple" },
        { x: 2, y: 1, label:"Mango" },
        { x: 3, y: 2, label:"Orange" },
        { x: 4, y: 3, label:"Banana" },
        { x: 5, y: 1, label:"Pineapple" },
        { x: 6, y: 3, label:"Pears" }					
      ]
    }
  ]
});

chart.render();