Chart.js canvas : can't center it

Question

I'm trying to display a Chart.js graph inside a <canvas>, and this canvas is wrapped inside a <div>. I want the graph to be responsive, have a fixed height of 700px and a width of 80% of the page's width. On top of all, I want this graph to be centered inside the page ! My code is below

HTML

<div class='chartContainer'>
    <canvas id="canvas"></canvas>
</div>

CSS

.chartContainer{
    text-align: center;
}

canvas{
    width: 80% !important;
    height: 700px !important;
    margin: 0;
}

JAVASCRIPT

new Chart(canvasContext, {
    type: 'line',
    data: {
        labels: hourLabels,
        datasets: dataToRender
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
});

My problem is : I can't center it, the <div> takes the whole page but the <canvas> seems to have a margin applied to it even though it doesn't appear inside the DOM console...

Screenshot of the apparent margin

Can anyone point my problem ? Thank you very much :-)

Answer 1

Put this in your CSS

canvas{
    margin: 0 auto;
    }