How to use Chart.js in angular #382

1 Answer(s)

• 

  1

  Mehmet created 3 years ago

  Hi @lalitChougule

  @abp/ng.theme-shared package loads the chart.js lazily. You should subscribe to the chartJsLoaded$ observable to catch the chart.js load event as shown below:

  import { chartJsLoaded$ } from '@abp/ng.theme.shared';
  import { Component, ElementRef, ViewChild } from '@angular/core';
  
  declare const Chart;
  
  @Component({
    template: `
      <canvas #canvas width="400" height="400"></canvas>
    `,
  })
  export class YourComponent {
    @ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement>;
    chart: any;
  
  
    ngAfterViewInit() {
      chartJsLoaded$.subscribe(() => {
        setTimeout(() => {
          const ctx = this.canvas.nativeElement.getContext('2d');
          this.chart = new Chart(ctx, {
            type: 'bar',
            data: {
              labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
              datasets: [
                {
                  label: '# of Votes',
                  data: [12, 19, 3, 5, 2, 3],
                  backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                  ],
                  borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                  ],
                  borderWidth: 1,
                },
              ],
            },
            options: {
              scales: {
                yAxes: [
                  {
                    ticks: {
                      beginAtZero: true,
                    },
                  },
                ],
              },
            },
          });
        }, 0);
      });
    }
  }
  

  I hope this helps you. We will create an article or doc about chart.js usage in the Angular UI.

  Save Cancel

  1