El gráfico debajo de App.js tiene un color de fondo. El problema es que el color de fondo también tiene efecto en el otro gráfico de otro componente. ¿Cómo puedo arreglar esto donde solo el gráfico de App.js tiene el color de fondo? He recreado esto en codesandbox: https://codesandbox.io/s/color-the-canvas-fec5y?file=/src/App.js
Esto es lo que he usado para colorear el fondo del gráfico:
useEffect(() => { Chart.register({ id: "custom_canvas_background_color", beforeDraw: (chart) => { const ctx = chart.canvas.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = "lightblue"; ctx.fillRect(0, 0, chart.width, chart.height); ctx.restore(); } }); }, []);De acuerdo con la documentación de complementos de chart.js , el uso de Chart.register registra el complemento globalmente y lo aplica a todos los gráficos. En su lugar, almacene el complemento en una variable
const plugin = { id: "custom_canvas_background_color", beforeDraw: (chart) => { const ctx = chart.canvas.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = "lightBlue"; ctx.fillRect(0, 0, chart.width, chart.height); ctx.restore(); } };Y páselo como accesorio al componente Línea de esta manera:
<Line plugins={[plugin]} />Como señaló Alexandre con Chart.register su complemento se registra globalmente en todos sus gráficos y, dado que codifica un color de fondo, se aplicará a todos los gráficos. Solo puede registrarlo localmente en la instancia de gráfico único como sugirió Alexandre.
El otro enfoque mejor es hacer que backgroundColor sea una variable que pueda establecer en sus opciones. Primero puede verificar si está configurado, si no, no dibuja nada y si está configurado, puede tener un color diferente en diferentes gráficos:
Chart.register({ id: "custom_canvas_background_color", beforeDraw: (chart, args, opts) => { if (!opts.color) { return } const ctx = chart.canvas.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = opts.color; ctx.fillRect(0, 0, chart.width, chart.height); ctx.restore(); } }); const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }] }, options: { plugins: { custom_canvas_background_color: { color: 'lightblue' } } } } const options2 = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'orange' }] }, options: { plugins: { custom_canvas_background_color: { color: 'pink' } } } } const options3 = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'lightblue' }] }, options: {} } const ctx = document.getElementById('chartJSContainer').getContext('2d'); const ctx2 = document.getElementById('chartJSContainer2').getContext('2d'); const ctx3 = document.getElementById('chartJSContainer3').getContext('2d'); new Chart(ctx, options); new Chart(ctx2, options2); new Chart(ctx3, options3); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <canvas id="chartJSContainer2" width="600" height="400"></canvas> <canvas id="chartJSContainer3" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>