<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const data = {
labels: ['Group 1', 'Group 2', 'Group 3', 'Group 4'],
datasets: [
{
label: 'Dataset 1',
data: [10, 20, 30, 40, 50],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: 'Dataset 2',
data: [20, 40, 60, 80, 100],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Dataset 3',
data: [30, 60, 90, 120, 150],
backgroundColor: 'rgba(255, 206, 86, 0.2)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: 'Dataset 4',
data: [40, 80, 120, 160, 200],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
},
{
label: 'Dataset 5',
data: [50, 100, 150, 200, 250],
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}
]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: false
},
y: {
stacked: false
}
}
}
};
const myChart = new Chart(ctx, config);
</script>
</body>
</html>