0
288
Vistas¿Cómo configurar las etiquetas Donut de chartJs en el lado derecho?
En realidad, estoy usando chart js chartJs Donut chart, esto funciona bien, pero ¿cómo puedo configurar las etiquetas de chartJs Donut en el lado derecho?
Mi código:-
const countryChart = new Chart(document.getElementById('countryChart').getContext('2d'), { type: 'doughnut', data: { labels: ['India', 'Netherlands', 'UAE', 'Egypt', 'Others'], datasets: [{ label: 'Revenue', data: [12, 19, 3, 5, 2], 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 }], }, }); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <canvas id="countryChart" height="150"></canvas> Quiero como este:- 
¡Gracias por tus esfuerzos!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Obtuve la solución para ello, solo necesitamos agregar posiciones de leyenda como se indica a continuación:
También puede seguir la URL dada para saber más sobre las posiciones de ChartJs: haga clic aquí para saber más
options: { plugins: { legend: { position: 'right' } } } const countryChart = new Chart(document.getElementById('countryChart').getContext('2d'), { type: 'doughnut', data: { labels: ['India', 'Netherlands', 'UAE', 'Egypt', 'Others'], datasets: [{ label: 'Revenue', data: [12, 19, 3, 5, 2], 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: { plugins: { legend: { position: 'right' } } } }); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <canvas id="countryChart" height="150"></canvas>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta