Hide Unhide dataSeries on legend click - CanvasJS JavaScript Charts

Hide Unhide dataSeries on legend click - CanvasJS JavaScript Charts

by canvasjs

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: "Multiple Y Axis"
	},
	toolTip: {
		shared:true
	},
	axisX:{
		valueFormatString: "####",
		interval: 1
	},
	axisY:[
	{
		title: "Linear Scale",
		lineColor: "#4F81BC",
		titleFontColor: "#4F81BC",
		labelFontColor: "#4F81BC"
	},
	{
		title: "Logarithmic Scale",
		logarithmic: true,
		lineColor: "#C0504E",
		titleFontColor: "#C0504E",
		labelFontColor: "#C0504E"
	}
	],
	axisY2:[
	{
		title: "Linear Scale",
		lineColor: "#86B402",
		titleFontColor: "#86B402",
		labelFontColor: "#86B402"
	},
	{
		title: "Logarithmic Scale",
		logarithmic: true,
		interval: 1,
		lineColor: "#23BFAA",
		titleFontColor: "#23BFAA",
		labelFontColor: "#23BFAA"
	}
	],
	data: [
	{
		type: "column",
		showInLegend: true,
		//axisYIndex: 0, //Defaults to Zero
		name: "Axis Y-1",
		xValueFormatString: "####",
		dataPoints: [
			{ x: 2006, y: 6 },
			{ x: 2007, y: 2 },
			{ x: 2008, y: 5 },
			{ x: 2009, y: 7 },
			{ x: 2010, y: 1 },
			{ x: 2011, y: 5 },
			{ x: 2012, y: 5 },
			{ x: 2013, y: 2 },
			{ x: 2014, y: 2 }
		]
	},
	{
		type: "spline",
		showInLegend: true,
		axisYIndex: 1, //Defaults to Zero
		name: "Axis Y-2",
		xValueFormatString: "####",
		dataPoints: [
			{ x: 2006, y: 15 },
			{ x: 2007, y: 3 },
			{ x: 2008, y: 20 },
			{ x: 2009, y: 10 },
			{ x: 2010, y: 30 },
			{ x: 2011, y: 10 },
			{ x: 2012, y: 600 },
			{ x: 2013, y: 20 },
			{ x: 2014, y: 2 }
		]	
	},
	{
		type: "column",
		showInLegend: true,                  
		axisYType: "secondary",
		//axisYIndex: 1, //Defaults to Zero
		name: "Axis Y2-1",
		xValueFormatString: "####",
		dataPoints: [
			{ x: 2006, y: 12 },
			{ x: 2007, y: 20 },
			{ x: 2008, y: 28 },
			{ x: 2009, y: 34 },
			{ x: 2010, y: 24 },
			{ x: 2011, y: 45 },
			{ x: 2012, y: 15 },
			{ x: 2013, y: 34 },
			{ x: 2014, y: 22 }
		]
	},
	{
		type: "spline",
		showInLegend: true,
		axisYType: "secondary",
		axisYIndex: 1, //When axisYType is secondary, axisYIndex indexes to...