Google Column Chart:- A column chart is a vertical bar chart that is rendered in the browser by using SVG or VML. All Google charts, column charts are displayed tooltips when the user hovers over the data.
Google Column Chart Code:-
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="google chart, column chart, goolge column chart">
<meta name="Description" content="This is google column chart with running example code">
<title>Goole column chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Subject');
data.addColumn('number', 'Correct');
data.addColumn('number', 'Incorrect');
data.addColumn('number', 'Unattempted');
data.addRows([
['Math', 25, 3,2],
['Reseoning', 20, 5,5],
['English', 22, 5,3],
['GK', 20, 0,0],
['Physics', 15, 10,5],
]);
var options = {
title: 'Subject Wise Performance',
isStacked: true,
bar: {groupWidth: "50%"},
height: 250,
width: 600,
colors:['#0B8A1C','#F81C06','#EAE4E3'],
legend: { position: 'top',textStyle: {color: 'black', fontSize: 16}},
hAxis: {
title: 'Subject Name'
},
vAxis: {
title: 'Rating (scale of 1-10)'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Output:-
