How to Add Labels to the X,Y Axes with Chart.js
Chart.js helps add charts on the web easily, and steps to add labels to the X,Y axes with Chart.js are as follows:
- Find Chart object.
- Find "options" inside the Chart object.
- Locate or add "scales" inside "options".
- Then add labels to the X,Y axes.
Code Sample
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = [
'1',
'2',
'3',
'4',
'5',
'6',
];
const data = {
labels: labels,
datasets: [{
label: 'Data',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data,
options: {
scales:{
x:{
title:{
display:true,
text:"Month"
}
},
y:{
title:{
display:true,
text:"unit"
}
}
}
}
};
var myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>

Comments
Post a Comment