Stacked Range Column Chart - CanvasJS JavaScript Charts

Stacked Range 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>
<div style="position:absolute ">
    <ul>
        <li style="color:#3689db">&#9632; John</li>
        <li style="color:#252d29">&#9632; Jane</li>
        <li style="color:#8bbc21">&#9632; Joe</li>
    </ul>
</div>

CSS

li{
  content: "";
  display: inline;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Stacked Column Chart"
  },
  axisY: {
    title: "Total Fruit Consumption"
  },
  toolTip: {
  	contentFormatter: function(e){
    	var content = " ";      
				for (var i = 0; i < e.entries.length; i++) {
					content += "<span style='color: " + e.entries[i].dataPoint.color + "'>" + e.entries[i].dataPoint.name + "</span>: " + Math.round(e.entries[i].dataPoint.y[1] - e.entries[i].dataPoint.y[0]);
					content += "<br/>";
				}
				return content;
    }
  },
  data: [
    {
      type: "rangeColumn",
      indexLabelFormatter: function(e){
        if(e.index === 0)
          return "";
        return (Math.round(e.dataPoint.y[1] - e.dataPoint.y[0]))
      },
      indexLabel: "{y[#index]}",
      indexLabelFontColor: "white",
      indexLabelPlacement: "inside",      
      dataPoints: [
      	//Joe
        { x: 1,label: "Apples", y: [0, 3], color:"#8bbc21", name: "Joe"},
        { x: 2,label: "Oranges", y: [7, 11], color:"#8bbc21", name: "Joe"},
        { x: 3,label: "Pears", y: [5, 9], color:"#8bbc21", name: "Joe"},
        { x: 4,label: "Grapes", y: [7, 9], color:"#8bbc21", name: "Joe"},
        { x: 5,label: "Bananas", y: [9, 14], color:"#8bbc21", name: "Joe"},

				//Jane
        { x: 1,label: "Apples", y: [3.1, 5], color:"#252d29", name: "Jane"},
        { x: 2,label: "Oranges", y: [11.1, 13], color:"#252d29", name: "Jane"},
        { x: 3,label: "Pears", y: [9.1, 12], color:"#252d29", name: "Jane"},
        { x: 4,label: "Grapes", y: [9.1, 11], color:"#252d29", name: "Jane"},
        { x: 5,label: "Bananas", y: [14.1, 15], color:"#252d29", name: "Jane"},

				//John
        { x: 1,label: "Apples", y: [5.1, 10], color:"#3689db", name: "John"},
        { x: 2,label: "Oranges", y: [13.1, 16], color:"#3689db", name: "John"},
        { x: 3,label: "Pears", y: [12.1, 16], color:"#3689db", name: "John"},
        { x: 4,label: "Grapes", y: [11.1, 18], color:"#3689db", name:...