Chart.js: Canvas background color

Created on 22 Jun 2016 · 11Comments · Source: chartjs/Chart.js

I'm working on a project that requires the chart.js canvas to be saved as a jpeg. But, regardless of what the css is doing the charts always come out with a black background.

Codpen here:
http://codepen.io/PaulieScanlon/pen/WxoyRE?editors=1010

support

Source

PaulieScanlon

Most helpful comment

@PaulieScanlon the issue is that the canvas defaults to a transparent background.

In your codepen, I added the following before the chart is created and it worked just fine.

Chart.plugins.register({
  beforeDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
  }
});

etimberg on 22 Jun 2016

👍43 🎉15 ❤2 👎1

All 11 comments

@PaulieScanlon the issue is that the canvas defaults to a transparent background.

In your codepen, I added the following before the chart is created and it worked just fine.

Chart.plugins.register({
  beforeDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
  }
});

etimberg on 22 Jun 2016

👍43 🎉15 ❤2 👎1

Oh, amazing! thanks!!

PaulieScanlon on 22 Jun 2016

Hi can u please share the code sample . How did u fix the issue. Would be a great help

nandipritam88 on 2 Dec 2016

👍2

Yeah I need help here as well, How do you set the background color as a rgba value ? I don't find anything in the doc

SmashedBird on 3 Dec 2016

@SmashedBird to set the background color as an rgba value you set the fill property to the rgba string.

ctx.fill = 'rgba(255, 0, 255, 0.5)';

etimberg on 3 Dec 2016

@etimberg I'm having the same issue. Where would I put the code below?

Chart.plugins.register({
beforeDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
}
});

AaronStGermain on 14 Feb 2017

@AaronStGermain it depends on your projects setup but put the plugin register before you create the chart. Apologies but i deleted that codepen long ago and don't have access to the project it related to. Perhaps make a stripped down codepen and we can take a look.

PaulieScanlon on 14 Feb 2017

👍1

@PaulieScanlon Thanks for the quick reply! This is how I create the chart also its a stripped down version. Let me know if you need more. http://codepen.io/anon/pen/YNBJap

AaronStGermain on 14 Feb 2017

Thank you for PaulieScanlon. :)
Suffer a few hours before seeing this article.