Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by Raj Patel

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: "Basic Candle Stick Chart"
				},
				zoomEnabled: true,
				axisY: {
					includeZero: false,
					title: "Prices",
					prefix: "$ "
				},
				axisX: {
					interval: 1,
					intervalType: "year",
					valueFormatString: "YYYY",
				},
				
				data: [
				{
					type: "candlestick",
					dataPoints: [
						{ x: new Date(2012,01,03), y:[33.24,33.72,32.71,32.78]},
{ x: new Date(2012,01,04), y:[32.72,32.98,32.39,32.91]},
{ x: new Date(2012,01,05), y:[32.72,33.70,32.40,33.57]},
{ x: new Date(2012,01,06), y:[33.55,33.71,33.03,33.13]},
{ x: new Date(2012,01,09), y:[33.24,33.42,32.94,33.24]},
{ x: new Date(2012,01,10), y:[33.66,35.00,33.63,34.80]},
{ x: new Date(2012,01,11), y:[34.77,35.28,34.60,35.06]},
{ x: new Date(2012,01,12), y:[33.69,34.57,33.55,34.48]},
{ x: new Date(2012,01,13), y:[34.40,34.44,33.73,34.09]},
{ x: new Date(2012,01,17), y:[34.73,34.88,34.02,34.14]},
{ x: new Date(2012,01,18), y:[33.99,34.60,33.80,34.60]},
{ x: new Date(2012,01,19), y:[34.81,35.36,34.72,34.83]},
{ x: new Date(2012,01,20), y:[34.83,35.29,34.77,35.00]},
{ x: new Date(2012,01,23), y:[35.09,35.37,34.91,35.22]},
{ x: new Date(2012,01,24), y:[35.09,35.57,34.93,35.51]},
{ x: new Date(2012,01,25), y:[35.59,35.89,35.09,35.80]},
{ x: new Date(2012,01,26), y:[35.91,36.16,35.35,35.53]},
{ x: new Date(2012,01,27), y:[35.46,35.76,35.30,35.58]},
{ x: new Date(2012,01,30), y:[35.19,35.52,35.09,35.41]},
{ x: new Date(2012,01,31), y:[35.57,35.89,35.41,35.79]},
{ x: new Date(2012,02,01), y:[36.26,36.61,35.98,36.40]},
{ x: new Date(2012,02,02), y:[36.51,36.75,36.13,36.22]},
{ x: new Date(2012,02,03), y:[36.71,37.01,36.53,36.59]},
{ x: new Date(2012,02,06), y:[36.30,36.47,35.95,36.10]},
{ x: new Date(2012,02,07), y:[36.20,36.47,35.40,35.92]},
{ x: new Date(2012,02,08), y:[34.80,36.25,34.74,35.29]},
{ x: new Date(2012,02,09), y:[35.41,35.77,35.07,35.26]},
{ x: new Date(2012,02,10), y:[35.07,35.14,34.72,34.96]},
{ x: new...