Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by Manoj Gaikwad

HTML

<script src="http://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: "Showing StripLine on top of dataPoints"             
		},
		axisX:{
			stripLines: [
			{
				value: 30,
				showOnTop: true
			},
      {
				value: 50,
				showOnTop: true
			}
			]
		},
		data: [
		{        
			type: "column",                          
			dataPoints: [
				{ x: 10, y: 4 },
				{ x: 20, y: 3 },
				{ x: 30, y: 6 },
				{ x: 40, y: 11},
				{ x: 50, y: 21},
				{ x: 60, y: 9 },
				{ x: 70, y: 3 },
				{ x: 80, y: 4 },
				{ x: 90, y: 7 }
			]
		}
		]
	});
	chart.render();