in src/app/components/area-chart/area-chart.component.ts [107:175]
renderChart(chartData: AreaDataItem[] = []) {
if (!this.chartContainerId) {
return;
}
const ctx = (document.getElementById(this.chartContainerId) as HTMLCanvasElement).getContext(
'2d'
);
if (this.areaChart) {
this.areaChart.destroy();
}
this.areaChart = new Chart(ctx!, {
type: 'line',
data: {
datasets: [
{
data: chartData,
backgroundColor: 'rgba(114, 189, 215, 0.5)',
borderColor: 'rgb(114, 189, 215)',
label: this.tooltipLabel,
fill: 'start',
pointBackgroundColor: 'rgb(114, 189, 215)',
pointHoverRadius: 5,
},
],
},
options: {
responsive: true,
spanGaps: false,
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
},
plugins: {
filler: {
propagate: false,
},
legend: {
display: true,
},
title: {
display: false,
},
tooltip: {
position: 'nearest',
},
},
scales: {
x: {
type: 'timeseries',
time: {
unit: 'minute',
},
},
y: {
ticks: {
stepSize: 1,
},
},
},
},
});
this.areaChart.update();
}