Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

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

JavaScript

var chart= new CanvasJS.Chart("chartContainer", {
    title:{
        text: "Multiple y - axis"
    },
    legend: {
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }

                e.chart.render();
            }
        },
    axisY2: {
        includeZero: false,
        title: "Secondary Y - Axis",
        gridThickness:2,
    },
    axisY: {        
        title: "Primary Y - Axis",
        gridThickness:2,
    },
    data: [
    {
        type: "line",  
        showInLegend: true,
        dataPoints: [
        
            { x: 10, y: 14.00 },            
            { x: 20, y: 13.75 },
            { x: 30, y: 16.30 }
        ]
    },
    {
        type: "line",
        axisYType: "secondary",
        showInLegend: true,
        dataPoints: [        
            { x: 10, y: 50.00 },
            { x: 20, y: 45.50 },
            { x: 30, y: 30.50 },
        ]
    }
    ]
});
chart.render();