my charts.js chart not being displayed in a modal.

[vapid creek]

i am using chart.js in my app in the modal but it aint being displayed. what could be the cause?

[torn surge]

A problem with your code. Please read #how-to-get-help

[vapid creek]

  private initGraph() {
    this.downtimeChart = new Chart('chart', {
      type: 'doughnut',
      data: {
        labels: ['Porucha stroja', 'Problém s kvalitou', 'Nedostatok materiálu', 'Nastavenie stroja', 'Príprava', 'Iné', 'Produkcia'],
        datasets: [
          {
            data: [3, 4, 3, 5, 2, 3, 75],
            borderWidth: 0,
            backgroundColor: [
              '#E04958', '#5197FD', '#D3D8DE', '#FD9843', '#FFC721', 'black', 'green'
            ],
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          tooltip: {
            callbacks: {
              label: function (tooltipItem) {
                const label = tooltipItem.label || '';
                const value = tooltipItem.raw;
                return `${label}: ${value}`;
              },
            }
          },
          legend: {
            display: false,
            position: 'top',
          },
        },
      },
    });
  }

          <canvas id="graph">{{ downtimeChart }}</canvas>

[vapid creek]

hope this helps

[torn surge]

Yeah, that can't work. Interpolation in Angular is used to display strings. So that would just transform your Chart object into a string by calling the toString() method, probably returning something like [object Object], and display that.
You need to read the documentation of chart.js to understand how it works. See https://www.chartjs.org/docs/latest/getting-started/. Note how the first argument of the Chart constructor is an HTMLCanvsElement whare you want to display that chart.
In Angular, you would use a viewChild to get it, and call afterNextRender to pass the canvas to your chart.
Something like

@Component({
  template: '<canvas #chart></canvas>'
})
class MyComponent {
  readonly canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('chart');
  
  constructor() {
    afterNextRender(() => {
      new Chart(this.canvas().nativeElement, { ... });
    });
  }
}

[vapid creek]

thats weird because i have a same setup of charts in a different component. it works there. i thought maybe it wont work like this because now i am using it in a modal

[torn surge]

You're passing the id of an element in your code. This ID is 'chart'. But there is no such ID in your template.

But even then, that would only work if the element with that ID already exists in the DOM. And using afterNextRender makes sure the canvas exists.

[vapid creek]

thx, will try

[vapid creek]

im sorry but this approach aint working, i used afterNextRender and still it aint working. here is the code:

  constructor(
    private _downtimeService: DowntimeService,
  ) {
    afterNextRender(() => {
      this.initGraph()
    })
  }

private initGraph() {
  const canvas = document.getElementById('downtimeChart') as HTMLCanvasElement;

    new Chart(canvas, {content of the graph}
}

          <canvas id="downtimeChart"></canvas>

 @ViewChild('chartCanvas', { static: false }) chartCanvas!: ElementRef<HTMLCanvasElement>;

[torn surge]

I don't get why you're not using the code I suggested instead of using getElementById, but anyway, without a complete minimal reproduction, it's hard to help more.

[vapid creek]

  @ViewChild('chartCanvas', { static: false }) chartCanvas!: ElementRef<HTMLCanvasElement>;

  constructor(
    private _downtimeService: DowntimeService,
  ) {
    afterNextRender(() => {
      this.initGraph()
    })
  }

  private initGraph() {
    const canvas = document.getElementById('downtimeChart') as HTMLCanvasElement;

    new Chart(canvas, {
      type: 'doughnut',
      data: {
        labels: ['Porucha stroja', 'Problém s kvalitou', 'Nedostatok materiálu', 'Nastavenie stroja', 'Príprava', 'Iné', 'Produkcia'],
        datasets: [
          {
            data: [3, 4, 3, 5, 2, 3, 75],
            borderWidth: 0,
            backgroundColor: [
              '#E04958', '#5197FD', '#D3D8DE', '#FD9843', '#FFC721', 'black', 'green'
            ],
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          tooltip: {
            callbacks: {
              label: function (tooltipItem) {
                const label = tooltipItem.label || '';
                const value = tooltipItem.raw;
                return `${label}: ${value}`;
              },
            }
          },
          legend: {
            display: false,
            position: 'top',
          },
        },
      },
    });
  }

          <canvas id="downtimeChart"></canvas>

this is the minimal reproduction

idk what more u need

[torn surge]

Read #how-to-get-help to learn how to use stackblitz to provide an actual minimal reproduction.

[vapid creek]

i would spend a good 2 hours creating that stackblits

[vapid creek]

i provided the code for the graphs. i dont think anything other is needed the graph is being rendered in modal

[torn surge]

And you find it more logical that I spend those two hours to do it, to help you fix your issue?