<div style="margin-left:5%;margin-right:5%">
<canvas id="GroupedbarChartcanvas" style="width:100%;"></canvas>
</div>
var GroupedbarChartData = {
labels: [
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2023",
"2022"
],
datasets: [
{
label: "JavaScript Developer'",
backgroundColor: "pink",
borderColor: "pink",
borderWidth: 1,
data: [50, 55, 66, 87, 83, 75, 96, 72]
},
{
label: "React Developer",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
data: [44, 27, 63, 96, 100, 57, 34, 56]
},
{
label: "Chart Js Developer",
backgroundColor: "green",
borderColor: "green",
borderWidth: 1,
data: [100, 47, 44, 76, 59, 77, 53, 88]
}
]
};
var BarchartOptions = {
responsive: true,
legend: {
position: "top"
},
title: {
display: true,
text: "Chart.js Bar Chart"
}
}
window.onload = function ()
{
var chartData= {
type: "bar",
data: GroupedbarChartData,
options: BarchartOptions
}
new Chart("GroupedbarChartcanvas", chartData);
};
This Pen doesn't use any external CSS resources.