Basic Column Chart - CanvasJS

Basic Column Chart

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>

<input type="checkbox"  checked onclick="toggle()"> Toggle

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },
  legend: {
        cursor: 'pointer',
         verticalAlign: 'center', 
         horizontalAlign: 'center', 
        align: 'start',
        margin: 10,
        fontFamily: 'Roboto, sans-serif',
        fontSize: 14
      },
  data: [
    
      {
        name: "Iliad",
        type: "spline",
        yValueFormatString: "#0.#######'%'",
        xValueFormatString: "YYYY, MMM DD, HH:mm<br>",
        xValueType: "dateTime",
        showInLegend: true,
        dataPoints: [
          { "y": 0.00014073161, "x":1641585600000 },
          { "y": 0.000166128538, "x":1641584700000 }
          ],

			}
			]
});

chart.render();

function toggle() {
if(chart.data[0].visible === true) {
	chart.data[0].visible = false;
  alert('Turn it off');
} else {
	alert('Turn it on');
	chart.data[0].visible = true;
}
	
	chart.render();
}