Tutorial on Creating Charts using JavaScript & HTML - 0 | JSFiddle Sample Code

Tutorial on Creating Charts using JavaScript & HTML - 0 | JSFiddle Sample Code

HTML

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div
  style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;"
>
  Source:
  <a
    href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/"
    target="_blank"
    title="Tutorial on Creating Charts using JavaScript &amp; HTML "
    >https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/</a
  >
</div>

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
		title:{
			text: "Number of Patients Served"              
		},
		data: [              
		{
			// Change type to "doughnut", "line", "splineArea", etc.
			type: "column",
			dataPoints: [
				{ label: "New on OPD",  y: 1015  },
				{ label: "Total on OPD", y: 3540  },
				{ label: "Total on ER", y: 856  },
				{ label: "Total on IPD",  y: 200  },
				
			]
		}
		]
	});
	chart.render();
}