Tmp demo

chart.component.ts

import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core";
import { ChartService } from "src/app/services/chart.service";
import { Chart } from "chart.js";

@Component({
  selector: "app-level-chart",
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: "./level-chart.component.html",
})
export class LevelChartComponent {
  @ViewChild("barCanvas") barCanvas;
  barChart: any;

  constructor(private chartService: ChartService) {
    this.chartService.getChartData().subscribe((data) => {
      setTimeout(() => {
        const scoreYAxis = ["Geen", "Mild", "Matig", "Ernstig"];
        if (this.barChart) this.barChart.destroy();

        this.barChart = new Chart(this.barCanvas.nativeElement, {
          type: "bar",
          data: {
            labels: data.days,
            datasets: [
              {
                label: "Ernst migraine",
                data: data.scoreData,
                backgroundColor: "rgba(209, 122, 41, 0.5)",
              },
            ],
          },
          options: {
            tooltips: {
              callbacks: {
                title: function (toolTipItem) {
                  const split = toolTipItem[0].label.split(",");
                  return split[0] + "," + split[1];
                },
                label: function (tooltipItem) {
                  return scoreYAxis[parseInt(tooltipItem.value)];
                },
              },
            },
            scales: {
              xAxes: [
                {
                  type: "time",
                },
              ],
              yAxes: [
                {
                  ticks: {
                    min: 0,
                    max: 3,
                    stepSize: 1,
                    callback: function (value) {
                      return scoreYAxis[value];
                    },
                  },
                },
              ],
            },
          },
        });
      }, 0);
    });
  }
}