0
374
VistasHow can I change the position of legends in chart.js?
I use chart.js for creating this chart:
I want to change the position of two legends( legend1 and legend2), but it did not work!
NOTE: all features work correctly, but problem is that I can't change position of legends: the version of CDN chart.js :
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
I can't understand, what is the problem? Is it because of it's CDN package version?
my pure js code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="778" height="433"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
data: {
labels: ['۱۴۰۰/۰۱/۰۱', '۱۴۰۰/۰۱/۰۲', '۱۴۰۰/۰۱/۰۳', '۱۴۰۰/۰۱/۰۴', '۱۴۰۰/۰۱/۰۵', '۱۴۰۰/۰۱/۰۶'],
datasets: [{
type: 'line',
label: 'legend1',
data: [6, 5.5, 4, 7, 5.4, 5.8],
fill:false,
borderColor: 'rgb(14, 156, 255)',
tension:0 },
{
type: 'line',
label: 'legend2',
data: [6.2, 5.7, 3.8, 7.2, 5.2, 5.9],
fill:false,
borderColor: 'rgb(22, 185, 156)',
tension:0
} ]
},
options: {
legend: {
position: 'bottom',
}, // end: legend
scales: {
y: {
beginAtZero: true,
display: false }// end: y
,x: {
grid: {
borderDash: [6, 5],
lineWidth: 1,
color:'#CCCCCC' }// end grid
}//end:x
} // end: scales
} //end options
});
</script>
</body>
</html>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
I believe it needs to be set under the plugins property in options, like
options: {
plugins: { /// PUT LEGEND UNDER THIS PROP
legend: {
position: 'bottom',
}
},
scales: {
y: {
beginAtZero: true,
display: false }// end: y
,x: {
grid: {
borderDash: [6, 5],
lineWidth: 1,
color:'#CCCCCC' }// end grid
}//end:x
} // end: scales
} //end options
·
Juan Pablo Isaza
Denunciar
Responde la pregunta