Open Closed

How to use Chart.js in angular #382


0
lalitChougule created

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

  • ABP Framework version: v3.0.4
  • UI type: Angular
  • Tiered (MVC) or Identity Server Seperated (Angular): no / Yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:

As per this document can we use chart.js in abp ? https://docs.abp.io/en/commercial/latest/startup-templates/application/solution-structure#depended-packages

I am not able to find any document to implement chart.js in abp angular Can you please guide me how to do it ?


1 Answer(s)
  • 1
    Mehmet created
    Support Team

    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.