¿Cómo cambio el color de las etiquetas a blue ? ¿Es posible cambiar entre colores, digamos azul y rojo, haciendo clic en un botón?
La razón por la que solicito el cambio es porque podría crear un modo claro/oscuro, y luego sería bueno cambiar los colores en el gráfico dependiendo de esto. Pero si no es posible, entonces blue sería el mejor.
const data = { labels: [ 'New', 'To Do', 'In Progress', 'Resolved' ], datasets: [{ label: 'WDC', data: [300, 50, 100, 20], backgroundColor: [ 'rgb(126, 191, 241)', 'rgb(255, 159, 64)', 'rgb(255, 255, 0)', 'rgb(160, 160, 160)' ], borderColor: [ 'rgb(126, 191, 241)', 'rgb(255, 159, 64)', 'rgb(255, 255, 0)', 'rgb(160, 160, 160)' ], backgroundColor: [ 'rgb(126, 191, 241)', 'rgb(255, 159, 64)', 'rgb(255, 255, 0)', 'rgb(160, 160, 160)' ], hoverOffset: 4 }] }; const config = { type: 'pie', data: data, options: { responsive: true, maintainAspectRatio: false, layout: { padding: 20 }, plugins: { legend: { position: 'top' } } } }; const myChart = new Chart( document.getElementById('myChart'), config ); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="wdc_canvas" style="position: relative; height:30vh; width:40vw"> <canvas id="myChart" width="785" height="389" style="z-index: 8; display: block; box-sizing: border-box; height: 389px; width: 785px;"></canvas> </div>No estoy seguro de si te refieres a las etiquetas en la leyenda o en la información sobre herramientas, pero aquí están las opciones para ambos:
const data = { labels: [ 'New', 'To Do', 'In Progress', 'Resolved' ], datasets: [{ label: 'WDC', data: [300, 50, 100, 20], backgroundColor: [ 'rgb(126, 191, 241)', 'rgb(255, 159, 64)', 'rgb(255, 255, 0)', 'rgb(160, 160, 160)' ], borderColor: [ 'rgb(126, 191, 241)', 'rgb(255, 159, 64)', 'rgb(255, 255, 0)', 'rgb(160, 160, 160)' ], backgroundColor: [ 'rgb(126, 191, 241)', 'rgb(255, 159, 64)', 'rgb(255, 255, 0)', 'rgb(160, 160, 160)' ], hoverOffset: 4 }] }; const config = { type: 'pie', data: data, options: { responsive: true, maintainAspectRatio: false, layout: { padding: 20 }, plugins: { tooltip: { bodyColor: 'blue' }, legend: { labels: { color: 'blue', }, position: 'top' } } } }; const myChart = new Chart( document.getElementById('myChart'), config ); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="wdc_canvas"> <canvas id="myChart"></canvas> </div>