Chart.js: How can I change the background color to the chartArea?

[echavezNS]

Hi, I've been trying to change the background color without using CSS because it change the background color to the whole square (chart/labels), is there any way to change the background color to just the area I need? (see the image below).

Hopefully someone can help me with this.

[etimberg]

@echavezNS you can write a plugin to do this. The plugin below should work

Chart.plugins.register({
  beforeDraw: function(chartInstance, easing) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = 'red'; // your color here

    var chartArea = chartInstance.chartArea;
    ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
  }
});

[etimberg]

Closing as answered

[codemundo]

@etimberg thanks, it worked

[yuliasevost]

.chart-container {
background-color: #ece9e9;
}

[SinviZ]

@etimberg thanks, it worked