Chartjs создают контейнер для цельной сетки CSS ⇐ Javascript

[Anonymous]

Я помещаю диаграмму (сделанную с использованием chart.js) в сетку CSS, и я хочу, чтобы диаграмма отвечала на полную ширину своей ячейки сетки. Однако, даже после включения адаптивного и отключения CansageSpectratio для диаграммы, диаграмма не перерисована, чтобы заполнить контейнер, если просмотр достаточно расширен.
для воспроизведения:

Код: Выделить всё

Some other data here



main {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
'chart chart more';
}
#chart-container {
grid-area: chart;
}
#other {
grid-area: more;
}





const chartElement = document.getElementById('chart');
new Chart(chartElement, {
type: 'line',
responsive: true,
maintainAspectRatio: false,
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sample Data',
data: [17, 15, 8, 2, 12, 19]
}]
}
});

< /code>
Вот снимки экрана с сетками, включенными в инструменты разработчика, чтобы проиллюстрировать проблему. src = "https://i.sstatic.net/ojsgfxla.png"/> 
Более широкий просмотр:
 
Если я добавляю ширину: 100%

в контейнер, в изменении размера нет разницы в изменении размера. Если я добавляю ширину: 100% к элементу холста, диаграмма становится искаженной (например, когда вы изменяете размер изображения горизонтально, но не вертикально). Я также добавил следующее в попытке заставить событие Resize для стрельбы на графике после изменения размера окна, без разницы: < /p>
window.addEventListener('beforeprint', () => {
chartElement.resize();
})
< /code>
Я обыскал документацию chart.js для других возможных решений, но не нашел их. Есть ли способ, чтобы график перерисовался, чтобы занять полную ширину ячейки сетки при изменении вида? Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/795 ... -grid-item