Necesito cambiar el color de fondo de la barra cuando la selecciono en la leyenda. Cuando actualicé el gráfico con ci.update() , el color se restableció.
options: { plugins: { legend: { display: true, position: 'right', onClick: function (e, legendItem, legend) { const index = legendItem.datasetIndex; const ci = legend.chart; const meta = ci.getDatasetMeta(index); const element = meta.data[0]; if (!legendItem.checked) { element.options.backgroundColor = 'rgba(255, 159, 64, 1)'; legendItem.lineWidth = 2; legendItem.strokeStyle = 'rgba(0,0,0, 1)'; legendItem.checked = true; } else { legendItem.checked = false; } ci.update(); } } } }Cuando se invoca chart.update(), el gráfico se vuelve a configurar a partir de chart.data.datasets y todas las opciones de elementos (cambiadas mientras tanto) se pierden. Los chart.data.datasets deben cambiarse. Los backgroundColor originales deben almacenarse porque, de lo contrario, se perderán.
const ctx = document.getElementById("myChart"); const backgroundColors = ['rgba(40, 139, 170, 1)', 'rgba(40, 139, 0, 1)']; const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'user 1 online', data: [50, 35, 45, 47, 10, 3, 27], backgroundColor: backgroundColors[0], borderWidth: 0, borderSkipped: 'start' }, { label: 'user 2 online', data: [50, 35, 45, 47, 10, 3, 27], backgroundColor: backgroundColors[1], borderWidth: 0, borderSkipped: 'start' }] }, options: { plugins: { legend: { display: true, position: 'right', onClick: function (e, legendItem, legend) { const index = legendItem.datasetIndex; const ci = legend.chart; const dataset = ci.data.datasets[index]; if (!dataset.checked) { dataset.backgroundColor = 'rgba(255, 159, 64, 1)'; dataset.borderWidth = 2; dataset.borderColor = 'rgba(0,0,0, 1)'; dataset.checked = true; } else { dataset.backgroundColor = backgroundColors[index]; dataset.borderWidth = 0; dataset.borderColor = null; dataset.checked = false; } ci.update(); } } } } }); .myChartDiv { max-width: 600px; max-height: 400px; } <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> <html> <body> <div class="myChartDiv"> <canvas id="myChart" width="600" height="400"/> </div> </body> </html>