Update chart type on button click - CanvasJS

Update chart type on button click - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 280px; width: 100%;"></div>
<button id="button">Update Chart Type</button>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
	title:{
		text: "Update chart type on button click",
	},
	data: [
	{
		type: "column",
        indexLabel: "{label} : {y}",
        indexLabelFontColor: "black",
		dataPoints: [
 			{  y: 8.24,  label: "Banana"  },
            {  y: 7.16,  label: "Orange"  },
            {  y: 4.67,  label: "Grapes"  },
            {  y: 3.67,  label: "Mango"   },       
            {  y: 5.98,  label: "Papaya"  }
		]
	}
	]
});
chart.render();

function chartTypeChanged() {
    
    chart.options.data[0].type = "line";   // you can update chart type here   
    chart.render();
}

var button = document.getElementById( "button" );
button.addEventListener( "click",  chartTypeChanged);