Basic Column Chart - CanvasJS

Basic Column Chart

by Shiva002

HTML

<script src="https://cdn.canvasjs.com/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>

CSS

root {
  --bg-red: red;
  --bg-green: green;
}

JavaScript

window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Desktop Search Engine Market Share - 2016"
	},
	data: [{
		type: "pie",
		startAngle: 240,
		yValueFormatString: "##0.00\"%\"",
		indexLabel: "{label} {y}",
		dataPoints: [
			{y: 79.45, label: "Google", color: "var(--bg-red)"},
			{y: 7.31, label: "Bing", color: "var(--bg-green)"},
		]
	}]
});
chart.render();

}