Dual Axis HTML5 Chart - CanvasJS

A Dual Axis multi-series html5 chart built using CanvasJS. Useful while rendering series with different range of values.

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 360px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
        theme: "theme2",
            

		toolTip: {
		shared: true
	  },
        title:{
        text: "",  
      },
        axisX: {
        labelFontSize: 11,  
        labelFontColor: "black", 
        labelFontFamily: "calibri",
        labelFontWeight: "normal",
        interval: 10,
        minimum: 15,
        maximum: 95,
      },
		axisY: {
        labelFontSize: 11, 
        labelFontColor: "black",
        labelFontFamily: "calibri",
        labelFontWeight: "normal",
        gridThickness: 0,
        lineColor: "gray", 
        interval: 20,
        minimum: 170,
        maximum: 400,
	  },

		data: [ 
			{   
                type: "line",
				//axisYType: "secondary",
				name: "Downloads",
				lineThickness: 2,
				//showInLegend: true,
				name: "downloads",
				markerType: "none",
				dataPoints: [
				{ x: 46, y: 170 },
				{ x: 40, y: 353 },
				{ x: 47, y: 397 },
				{ x: 47, y: 397 },
				{ x: 57, y: 396 },
				{ x: 92, y: 353 },
				{ x: 70, y: 170 },
				]
			},

			{        
				type: "line",
                markerType: "none",
				//showInLegend: true,
				lineThickness: 2,
				name: "visits",
				dataPoints: [
				{ x: 39, y: 170 },
				{ x: 35, y: 255 },
				{ x: 27, y: 262 },
				{ x: 17, y: 355 },
				{ x: 25, y: 392 },
				{ x: 57, y: 396 },
				{ x: 92, y: 353 },
				{ x: 70, y: 170 },
				]
			},
			{        
				type: "line",
				//showInLegend: true,
                 markerType: "cross",
				name: "Unique Visits",
				lineThickness: 2,
				dataPoints: [
				{ x: 60, y: 280 },
				]
			},
			],
            
		});

 chart.render();