Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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: "Using formatDate inside Custom Formatter"
		},
		axisX: {
			labelFormatter: function (e) {
              var count = (e.value.getMonth()/3 << 0) + 1;
             return "Q" + count + " " + CanvasJS.formatDate(e.value, "YY");
			},
      gridThickness: 1
		},
		
		data: [
		{
			type: "line",
			dataPoints: [
				{ x: new Date(2015, 10, 1), y: 145 },
        { x: new Date(2015, 10, 30), y: 145 },
        { x: new Date(2015, 11, 1), y: 122 },
        { x: new Date(2015, 11, 31), y: 122 },
				{ x: new Date(2016, 0, 1), y: 103 },
				{ x: new Date(2016, 1, 1), y: 102 },
				{ x: new Date(2016, 2, 1), y: 158 },
        { x: new Date(2016, 2, 31), y: 158 },
				{ x: new Date(2016, 3, 1), y: 34 },
				{ x: new Date(2016, 4, 1), y: 363 },
				{ x: new Date(2016, 5, 1), y: 247 },
				{ x: new Date(2016, 6, 1), y: 253 },
				{ x: new Date(2016, 7, 1), y: 269 },
				{ x: new Date(2016, 8, 1), y: 343 },
				{ x: new Date(2016, 9, 1), y: 370 }
			]
		}
		]                      
	});
	chart.render();