Estoy tratando de poner el título de mi gráfico en el lado derecho en Chartjs pero estoy fallando miserablemente. ¿Podría alguien ayudarme?
<script> const ctx = document.getElementById('myChart'); const myChart = new Chart(ctx, { type : 'line', data : { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: ['1'], }] }, options : { legend: {position: 'right'}, label: {display: true, text: '# of votes'}, scales: { y: { beginAtZero: true, } } } }); </script>Soy relativamente nuevo en JavaScript. así que hay mucho que necesito aprender.
Suponiendo que desea colocar la legend a la derecha de su gráfico, debe definir la opción plugins.legend.position: 'right' .
Hay más información disponible en la documentación de Chart.js aquí .
Eche un vistazo al fragmento ejecutable a continuación y vea cómo funciona.
new Chart('myChart', { type: 'bar', data: { labels: ['A', 'B', 'C', 'D'], datasets: [{ label: 'Dataset', data: [4, 2, 5, 3], }] }, options: { plugins: { legend: { display: true, position: 'right' } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <canvas id="myChart"></canvas>