I am new to chart.js and trying to add a button that exports my chart to a PDF file.
The chart exports with a black background however, I want to change the background to white.
I have tried adding the below code to change the background but am not sure where I'm going wrong.
How would I change the chart background so it's white when I export to PDF?
const bgColor = {
id: 'bgColor',
beforeDraw: (chart, steps, options) => {
const {ctx, width, height} = chart;
ctx.fillStyle = options.backgroundColor;
ctx.fillRect(0, 0, width, height)
ctx.restore();
}
}
var options = {
responsive: true,
maintainAspectRatio: true,
scale: {
min: 0,
max: 10,
stepSize: 1
},
scales: {
r: {
pointLabels: {
font: {
size: 15
}
}
}
},
plugins: {
bgColor: {
backgroundColor: 'white'
},
legend: {
labels: {
boxWidth: 0,
font: {
size: 30
}
}
}
}
}
const radarChart = new Chart(document.getElementById('radarChart'), {
type: 'radar',
data: data,
options: options
})
This is because you never register your plugin so it does not do anything. You can register it locally to a single chart like this:
const bgColor = {}; // Plugin Code
const chart = new Chart('canvasId', {
data: data,
options: options,
plugins: [bgColor]
});
Or you can register it locally so it applies to all charts like so:
const bgColor = {}; // Plugin Code
Chart.register(bgColor); // V3 syntax
Chart.plugins.register(bgColor) // V2 syntax