Basic Column Chart - CanvasJS

Basic Column Chart

by JohnCarranza

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

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "House Median Price"
	},
	axisY2: {
		title: "Median List Price",
		prefix: "$",
		suffix: "K"
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		verticalAlign: "top",
		horizontalAlign: "center",
		dockInsidePlotArea: true,
		itemclick: toogleDataSeries
	},
	data: [{
		type:"line",
		axisYType: "secondary",
		name: "San Fransisco",
		showInLegend: true,
		markerSize: 0,
		yValueFormatString: "$#,###k",
		dataPoints: [		
			{ x: 0.8, y: 850 },
			{ x: 2.1, y: 889 },
			{ x: 3, y: 790 },
      { x: 4, y: 690 },
      { x: 5, y: 791 },
      { x: 6, y: 809 },
      { x: 7, y: 598 },
      { x: 8, y: 621 }
		]
	},
  {
		type:"line",
		axisYType: "secondary",
		name: "Valencia",
		showInLegend: true,
		markerSize: 0,
		yValueFormatString: "$#,###k",
		dataPoints: [		
			{ x: 0.8, y: 850 },
			{ x: 2.1, y: 889 },
			{ x: 3, y: 790 },
      { x: 4, y: 590 },
      { x: 5, y: 791 },
      { x: 6, y: 809 },
      { x: 7, y: 698 },
      { x: 8, y: 621 }
		]
	},
  {
		type:"line",
		axisYType: "secondary",
		name: "other3",
		showInLegend: true,
		markerSize: 0,
		yValueFormatString: "$#,###k",
		dataPoints: [		
			{ x: 2.1, y: 189 },
      { x: 2.6, y: 159 }
		]
	},
  {
		type:"line",
		axisYType: "secondary",
		name: "other4",
		showInLegend: true,
		markerSize: 0,
		yValueFormatString: "$#,###k",
		dataPoints: [		
			{ x: 2.1, y: 259 },
      { x: 2.6, y: 259 }
		]
	},
  {
		type:"line",
		axisYType: "secondary",
		name: "other5",
		showInLegend: true,
		markerSize: 0,
		yValueFormatString: "$#,###k",
		dataPoints: [		
			{ x: 2.1, y: 329 },
      { x: 2.5, y: 329 }
		]
	},
  {
		type:"line",
		axisYType: "secondary",
		name: "other6",
		showInLegend: true,
		markerSize: 0,
		yValueFormatString: "$#,###k",
		dataPoints: [		
			{ x: 2.1, y: 689 },
      { x: 2.5, y: 689 }
		]
	},
	{
		type: "line",
		axisYType: "secondary",
		name:...