<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: [82, 18, 24, 82, 61, 51, 99],
backgroundColor: [
'rgba(245, 218, 40, 0.2)',
'rgba(102, 153, 204, 0.2)',
'rgba(71, 73, 115, 0.2)',
'rgba(22, 27, 51, 0.2)',
'rgba(13, 12, 29, 0.2)'
],
borderColor: [
'rgb(245, 218, 40)',
'rgb(102, 153, 204)',
'rgb(71, 73, 115)',
'rgb(22, 27, 51)',
'rgb(13, 12, 29)'
],
borderWidth: 1
}]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
const myChart = new Chart(
document.getElementById('chart'),
config
);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.