I'm currently developing a Covid-19 tracking web application and I am using chartJS to showcase data from an API. In my CSS, I have assigned a background color to all elements with an asterisk (*), but for some reason there are empty spaces around the Canvas element. Upon inspecting it in Chrome, I noticed that a white background color is being automatically applied to the body, which I did not specify. How can I remove this auto-applied background color? Thank you in advance. :)
https://i.sstatic.net/TqlGP.png
JS CODE
var ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: date,
datasets: [
{
label: 'Total',
data: total,
borderColor: '#cf0000',
fill: false,
},
{
label: 'Recovered',
data: recovered,
borderColor: '#4ca1a3',
fill: false,
},
{
label: 'Deaths',
data: deaths,
borderColor: '#907fa4',
fill: false,
},
HTML CODE
<div class="container">
<h1 class="text-center mt-3 heading">COVID-19 Tracker</h1>
<canvas id="myChart"></canvas>
</div>
CSS
* {
margin: 0;
padding: 0;
background-color: #e7d4b5;
}