Grouped Stacked Column Chart - CanvasJS JavaScript Charts

Grouped Stacked Column Chart - 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 Column Chart"
  },
  axisX: {
  	title: "Due Date →",
  	valueFormatString: "YYYY/MM/DD",
    interval: 1,
    intervalType: "day"
  },
  axisY: {
  	title: "Count →"
  },
  axisY2: {  
    lineThickness: 0,    
    tickLength: 0,
    labelFormatter: function(e){
    	return "";
    }
  },
  legend: {
  	verticalAlign: "center",
    horizontalAlign: "right"
  },  
  data: [
    {
      type: "stackedColumn",
      name: "IFC",
      showInLegend: true,
      toolTipContent: null,
      dataPoints: [
        { x: new Date("2017,12,05"), y: 1 },
				{ x: new Date("2017,12,06"), y: 1.2 }
      ]
    },
    {
      type: "stackedColumn",
      name: "IFD",
      showInLegend: true,
      toolTipContent: null,
      dataPoints: [
        { x: new Date("2017,12,05"), y: 1 },
				{ x: new Date("2017,12,06"), y: 0 }				
      ]
    },
    {
      type: "stackedColumn",
      name: "EWP",
      showInLegend: true,
      toolTipContent: "{x}: #total",      
      dataPoints: [
        { x: new Date("2017,12,05"), y: 1 },
				{ x: new Date("2017,12,06"), y: 1.5 }				
      ]
    },
    
    {
      type: "stackedColumn",
      name: "IFR",
      showInLegend: true,
      toolTipContent: null,
      axisYType: "secondary",
      dataPoints: [
        { x: new Date("2017,12,05"), y: 0.7 },
				{ x: new Date("2017,12,06"), y: 0.5 }					
      ]
    },
    {
      type: "stackedColumn",
      name: "IWP",
      showInLegend: true,
      toolTipContent: null,
      axisYType: "secondary",
      dataPoints: [
        { x: new Date("2017,12,05"), y: 0 },
				{ x: new Date("2017,12,06"), y: 0.7 }			
      ]
    },
    {
      type: "stackedColumn", 
      name: "I",
      showInLegend: true,
      axisYType: "secondary",
      toolTipContent: "{x}: #total",
      dataPoints: [
        { x: new Date("2017,12,05"), y: 1 },
				{ x: new Date("2017,12,06"), y: 0.5 }			
      ]
    }
 ...