I have a chart.js running, but i really want to add axis names on teh axises, but dont know how. Could i get some help?
I have tried to figure it out by searching up, but can't find anything that explain it well.
My chart code:
const ctx = document.getElementById('chart').getContext('2d');
window.myChart = new Chart(ctx,{ // having the "myChart" as a window. insted of const was sugested by someone on StackOverflow (makes the const global, i can therefor use it in another function)
type: 'line',
data: {
labels: arrayTheta,
datasets: [{
//label: graphLabels,
data: arrayRangeArray[0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 0,
tension: 0.4 //The line "tension: 0.4" makes the graph a little bit smoother (might remove later)
},
{
//label: graphLabels,
data: arrayRangeArray[1],
backgroundColor: 'blue, 0.2',
borderColor: 'blue',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[2],
backgroundColor: 'pink, 0.2',
borderColor: 'pink',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[3],
backgroundColor: 'orange, 0.2',
borderColor: 'orange',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[4],
backgroundColor: 'yellow, 0.2',
borderColor: 'yellow',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[5],
backgroundColor: 'black, 0.2',
borderColor: 'black',
pointRadius: 0,
tension: 0.4
}],
},
options: {
scales: {
y: {
beginAtZero: true
}
,x: {
display: true,
type: 'linear'
}
}
}
});
It would be awesome if someone could implement it into my code and the send it here.
Thanks in advance!!
This can be done with the following options:
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Y-Axis Label'
}
},
x: {
title: {
display: true,
text: 'X-Axis Label'
}
}
}
}
For further information, consult Scale Title Configuration from the
Chart.jsdocumentation.
Please take a look at your amended code and see how it works with static data.
new Chart('chart', {
type: 'line',
data: {
labels: ['A', 'B','C','D','E'],
datasets: [{
label: 'Dataset 1',
data: [8, 7, 5, 6, 2],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 2',
data: [2, 4, 2, 4, 7],
backgroundColor: 'blue, 0.2',
borderColor: 'blue',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 3',
data: [5, 8, 7, 6, 2],
backgroundColor: 'pink, 0.2',
borderColor: 'pink',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 4',
data: [8, 7, 5, 6, 2],
backgroundColor: 'orange, 0.2',
borderColor: 'orange',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 5',
data: [5, 3, 2, 4, 1],
backgroundColor: 'yellow, 0.2',
borderColor: 'yellow',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 6',
data: [5, 6, 2, 8, 7],
backgroundColor: 'black, 0.2',
borderColor: 'black',
pointRadius: 0,
tension: 0.4
}
],
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Y-Axis Label'
}
},
x: {
title: {
display: true,
text: 'X-Axis Label'
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" height="110"></canvas>