renderChart()

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();
  }