I’m using Chart.js and react-to create a line chart, but I’ve noticed a small issue with the background fill. The line chart extends to the edges of the canvas as expected, but the background fill leaves a tiny gap of about 1px from the edge on all sides (top, bottom, left, and right). It almost looks like there is a 1px padding, but I haven’t set any padding properties. How can I ensure the background fill extends all the way to the edges of the canvas?
I have tried explicitly adding padding as 0. Changing beginAtZero
values and much more but with no luck.
<code> <Line
data={{
labels: convertLabelsForChart(questionsData),
datasets: convertDataForChart(questionsData),
}}
options={{
scales: {
y: {
beginAtZero: true,
grid: { display: false },
display: false,
},
x: {
grid: { display: false },
display: false,
},
},
elements: {
point: { radius: 0 },
line: {
borderColor: 'rgba(17, 83, 228)',
fill: true,
backgroundColor: 'rgba(6, 49, 143, 1)',
},
},
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
},
}}
/>
</code>
<code> <Line
data={{
labels: convertLabelsForChart(questionsData),
datasets: convertDataForChart(questionsData),
}}
options={{
scales: {
y: {
beginAtZero: true,
grid: { display: false },
display: false,
},
x: {
grid: { display: false },
display: false,
},
},
elements: {
point: { radius: 0 },
line: {
borderColor: 'rgba(17, 83, 228)',
fill: true,
backgroundColor: 'rgba(6, 49, 143, 1)',
},
},
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
},
}}
/>
</code>
<Line
data={{
labels: convertLabelsForChart(questionsData),
datasets: convertDataForChart(questionsData),
}}
options={{
scales: {
y: {
beginAtZero: true,
grid: { display: false },
display: false,
},
x: {
grid: { display: false },
display: false,
},
},
elements: {
point: { radius: 0 },
line: {
borderColor: 'rgba(17, 83, 228)',
fill: true,
backgroundColor: 'rgba(6, 49, 143, 1)',
},
},
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
},
}}
/>