Удалить отступы и поля холстаchart.js ⇐ CSS

[Anonymous]

Я используюchart.js, чтобы показать линейную диаграмму в компоненте Angular. В коде не добавлено никаких отступов или полей для диаграммы. Я добавил стиль, чтобы установить отступы и поля на ноль как при создании диаграммы в файле .ts, так и в таблицах стилей, и ничего не изменилось. Когда я проверяю элемент в режиме разработчика Chrome, он не показывает никаких отступов или полей, поэтому я думаю, что стиль является внутренним дляchart.js. Ниже приведен снимок экрана с элементом диаграммы, выделенным в режиме разработчика Chrome.


Как видите, слева, снизу и справа от элемента холста диаграммы есть поле или граница, но, как ни странно, его нет сверху. Расстояние между метками оси Y и левой частью диаграммы особенно плохое при просмотре на мобильном телефоне, поэтому мне действительно нужно его удалить. Я потратил часы на то, чтобы каждый элемент, который только мог прийти в голову, имел 0 отступов и 0 полей, пробовал различные изменения в коде и таблицах стилей, а также искал другие статьи в Интернете, включая Stackoverflow, но ни одна из них, похоже, не отвечает на этот конкретный вопрос.
Я также попробовал добавить box-sizing:border-box; в контейнер div, содержащий диаграмму, но это не имело никакого значения, например, как предложено в этой статье:
Почему холстchart.js не учитывает отступы элемента контейнера?
Вот моя конфигурация диаграммы:

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

      this.myChart = new Chart("chartCanvas", {
type: 'line',
data: {
labels: labelVars,
datasets: datasets
},
options: {
elements: {
point: {
radius: 0
},
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false,
enabled: width > 640
},
hover: {
mode: 'nearest',
intersect: true
},
legend: {
display: false,
position: 'bottom',
labels: {
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'week',
tooltipFormat: 'MM/DD/YYYY'
},
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
autoSkip: true,
padding: 0,
maxTicksLimit: this.getTickLimit(),
maxRotation: this.getRotation(),
minRotation: this.getRotation()
},
gridLines: {
display: false,
offsetGridLines: true
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
maxTicksLimit: 6,
beginAtZero: false
}
}]
}
}
});

Вот текущий HTML-код:

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

А вот текущий CSS:

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

  #chartCanvas {
padding-left: 0;
margin-left: 0;
}

.chartContainer {
height: 500px;
margin: 0;
padding: 0;
align-items: left;
align-self: left;
align-content: left;
}

Кто-нибудь еще сталкивался с этой проблемой?

Подробнее здесь: https://stackoverflow.com/questions/749 ... and-margin