JavaScript Stacked Column Charts & Graphs - 0 | JSFiddle Sample Code

JavaScript Stacked Column Charts & Graphs - 0 | JSFiddle Sample Code

by hsinghal

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/javascript-charts/stacked-column-chart/" target="_blank" title="JavaScript Stacked Column Charts &amp; Graphs ">https://canvasjs.com/javascript-charts/stacked-column-chart/</a></div>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	//animationEnabled: true,
    zoomEnabled: true,
  
	title:{
		text: "Google - Consolidated Quarterly Revenue",
		fontFamily: "arial black",
		fontColor: "#695A42"
	},
	axisX: {
		interval: 1,
		intervalType: "year"
	},
	axisY:{
		/* valueFormatString:"$#0bn", */
		gridColor: "#B6B1A8",
		tickColor: "#B6B1A8"
	},
	toolTip: {
		shared: true,
		content: toolTipContent
	},
	data: [{
		type: "stackedColumn",
		showInLegend: true,
		color: "#696661",
		name: "Q1",
		dataPoints: [
			{ y: 1754564, x: new Date(2010,0) },
			{ y: 2576356, x: new Date(2011,0) },
			{ y: 1064456, x: new Date(2012,0) },
			{ y: 1397456, x: new Date(2013,0) },
			{ y: 1542234, x: new Date(2014,0) },
			{ y: 1726235, x: new Date(2015,0) },
			{ y: 2026365, x: new Date(2016,0) },
			{ y: 2026365, x: new Date(2017,0) },
			{ y: 2026365, x: new Date(2018,0) },
			{ y: 2026365, x: new Date(2019,0) },
			{ y: 2026365, x: new Date(2020,0) },
			{ y: 2026365, x: new Date(2021,0) },
			{ y: 2026365, x: new Date(2022,0) },
			{ y: 2026365, x: new Date(2023,0) },
      { y: 1754564, x: new Date(2024,0) },
			{ y: 2576356, x: new Date(2025,0) },
			{ y: 1064456, x: new Date(2026,0) },
			{ y: 1397456, x: new Date(2027,0) },
			{ y: 1542234, x: new Date(2028,0) },
			{ y: 1726235, x: new Date(2029,0) },
			{ y: 2026365, x: new Date(2030,0) },
			{ y: 2026365, x: new Date(2031,0) },
			{ y: 2026365, x: new Date(2032,0) },
			{ y: 2026365, x: new Date(2033,0) },
			{ y: 2026365, x: new Date(2034,0) },
			{ y: 2026365, x: new Date(2035,0) },
			{ y: 2026365, x: new Date(2036,0) },
			{ y: 2026365, x: new Date(2037,0) },
		]
		},
		{        
			type: "stackedColumn",
			showInLegend: true,
			name: "Q2",
			color: "#EDCA93",
			dataPoints: [
				{ y: 1824565, x: new Date(2010,0) },
				{ y: 1024567, x: new Date(2011,0) },
				{ y: 1180675, x: new Date(2012,0) },
				{ y: 1411567, x: new Date(2013,0) },
				{ y: 1596674, x: new...