<!DOCTYPE HTML>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
</
script
>
</
head
>
<
body
>
<
div
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
>Canvas JS Error Column Chart </
h3
>
</
div
>
<
div
id
=
"chartID"
style="height:400px; max-width:950px;
margin:0px auto;">
</
div
>
<
script
>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title:{
text: "Average Marks of Toppers"
},
axisX:{
title: "Subjects"
},
axisY:{
title: "Marks (in Percentage)",
suffix: " %"
},
legend:{
cursor:"pointer"
},
data: [{
type: "column",
name: "First Ranker",
color: "lightgreen",
showInLegend: true,
legendText: "First Ranker Score",
toolTipContent:
"<
b
> {label} </
b
>: {y} %",
dataPoints: [
{ label:"Physics", y:94 },
{ label:"Maths", y: 92 },
{ label:"Biology", y: 98},
{ label: "Chemistry", y: 95},
{ label: "English",y:90 }
]// End dataPoints for first ranker
},
{
type: "error",
name: "Expected Marks range",
toolTipContent:
"<
b
>{name}:</
b
> {y[0]} - {y[1]} %",
dataPoints: [
{ label:"Physics", y:[91,95] },
{ label:"Maths", y: [90,93]},
{ label:"Biology", y: [97,99]},
{ label: "Chemistry", y: [92,96]},
{ label: "English",y:[88,92] }
]// End dataPoints for 3rd ranker
},// End data
{
type: "column",
showInLegend: true,
legendText: "Second Ranker Score",
name: "Second Ranker",
color: "pink",
toolTipContent:
"<
b
> {label} </
b
>: {y} %",
dataPoints: [
{ label:"Physics", y:92 },
{ label:"Maths", y: 90 },
{ label:"Biology", y: 96},
{ label: "Chemistry", y: 94},
{ label: "English",y:89 }
]// End dataPoints for 2nd ranker
},
{
type: "error",
name: "Expected marks range",
toolTipContent:
"<
b
>{name}:</
b
> {y[0]} - {y[1]} % ",
dataPoints: [
{ label:"Physics", y:[91,93] },
{ label:"Maths", y: [88,92]},
{ label:"Biology", y: [94,97]},
{ label: "Chemistry", y: [92,95]},
{ label: "English",y:[85,91] }
]// End dataPoints for 3rd ranker
},// End data
{
type: "column",
showInLegend: true,
legendText: "Third Ranker Score",
name: "Third Ranker",
color: "brown",
toolTipContent:
"<
b
> {label} </
b
>: {y} % ",
dataPoints: [
{ label:"Physics", y:93},
{ label:"Maths", y: 85 },
{ label:"Biology", y: 85},
{ label: "Chemistry", y: 89},
{ label: "English",y:86 }
]// End dataPoints for 3rd ranker
},
{
type: "error",
name: "Expected Marks range",
toolTipContent:
"<
b
>{name}:</
b
> {y[0]} - {y[1]} %",
dataPoints: [
{ label:"Physics", y:[91,95] },
{ label:"Maths", y: [84,92]},
{ label:"Biology", y: [84,99]},
{ label: "Chemistry", y: [87,95]},
{ label: "English",y:[85,89] }
]// End dataPoints for 3rd ranker
}// End error data
]// End data
});
chart.render();
}// window onload
</
script
>
</
body
>
</
html
>