Quería colorear el área del gráfico de mi gráfico de líneas, pero no funciona:
options={{ maintainAspectRatio: false, title: { display: true, fontSize: 20 }, chartArea: { backgroundColor: "blue" },También he recreado esto en codesandbox: https://codesandbox.io/s/practical-shadow-9he5y?file=/src/App.js:914-1118
No existe la opción chartArea.backgroundColor, deberá usar un complemento personalizado para esto:
const plugin = { id: 'background', beforeDraw: (chart, args, opts) => { if (!opts.color) { return; } const { ctx, chartArea } = chart; ctx.fillStyle = opts.color; ctx.fillRect(chartArea.left, chartArea.top, chartArea.width, chartArea.height) } } Chart.register(plugin); const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { plugins: { background: { color: 'cyan' } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>Bifurqué un sandbox tuyo: React Chartjs Canvas Background
Puede registrar complementos en useEffect :
useEffect(() => { Chart.register({ id: "custom_canvas_background_color", beforeDraw: (chart) => { console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"); const ctx = chart.canvas.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = "lightGreen"; ctx.fillRect(0, 0, chart.width, chart.height); ctx.restore(); } });}, []);
También recursos útiles adicionales para usted: