Холст Chart.js и ширина диаграммы перезаписываются при перерисовке

Question

Мои графики, которые я сделал с помощью chart.js, растут каждый раз, когда я перерисовываю их, и я не знаю почему.Мой код для диаграммы Cavas:

let tempChart = document.getElementById("tempChart").getContext('2d');
let pressureChart = document.getElementById("pressureChart").getContext('2d');
let O3Chart = document.getElementById("O3Chart").getContext('2d');
let PM1Chart = document.getElementById("PM1Chart").getContext('2d');

<canvas id="tempChart"></canvas>
<canvas id="pressureChart"></canvas>
<canvas id="O3Chart"></canvas>
<canvas id="PM1Chart"></canvas>

Этот код я вызываю каждый раз, когда хочу нарисовать или перерисовать график:

function createChart(chartLabels, chartData, chart, label, backgroundcolor, beginAtZero, borderColor) {

    let LineChart = new Chart(chart, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [{
                label: label,
                data: chartData,
                backgroundColor: backgroundcolor,
                pointRadius: 0,
                borderColor: borderColor
        }]
        },
        options: {
            responsive: false,
            scales: {
                yAxes: [{
                        ticks: {
                            beginAtZero: beginAtZero
                        }
                }
                ]
            }
        }
    })

}

CSS холста перед однократным запуском createChart:

    width: 45%;
    padding: 20px 20px;
    border-bottom: 1px solid #dedede;

CSS после запуска createChart:

    display: block;
    height: 341px;
    width: 683px;

Я проверил этот код с пустыми и полными массивами для своих меток и данных, и в обоих случаях диаграмма увеличивается каждый раз, когда я вызываю функцию createChart.

Answer 1

Похоже, что используемая вами библиотека (chart.js) переопределяет эти значения css по умолчанию.

Один из вариантов - установить эти значения обратно на правильные значения в конце функции createChart.

Например:

tempChart.style.width = 45%;

Другой вариант - добавить к ним большую мощность в таблице стилей, !important, но это зависит от того, как действует (chart.js).