0
370
Views¿Cómo puedo cambiar la posición de las leyendas en chart.js?
Uso chart.js para crear este gráfico:
Quiero cambiar la posición de dos leyendas (leyenda1 y leyenda2), ¡pero no funcionó!
NOTA: todas las funciones funcionan correctamente, pero el problema es que no puedo cambiar la posición de las leyendas: la versión de CDN chart.js:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>No puedo entender, ¿cuál es el problema? ¿Es por la versión del paquete CDN?
mi código js puro:
<!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 answers
Answer question0
Creo que debe configurarse en la propiedad de complementos en las opciones, como
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
Report
Answer question