Chart Component

ABP Chart component exposed by @abp/ng.components/chart.js is based on charts.js v3+. You don't need to install the chart.js package. Since the @abp/ng.components is dependent on the chart.js, the package is already installed in your project.

Chart component loads chart.js script lazy. So it does not increase the bundle size.

How to Use

First of all, need to import the ChartModule to your feature module as follows:

// your-feature.module.ts

import { ChartModule } from "@abp/ng.components/chart.js";
import { ChartDemoComponent } from "./chart-demo.component";

@NgModule({
  imports: [
    ChartModule,
    // ...
  ],
  declarations: [ChartDemoComponent],
  // ...
})
export class YourFeatureModule {}

Then, abp-chart component can be used. See an example:

// chart-demo.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-chart-demo",
  template: ` <abp-chart type="pie" [data]="data"></abp-chart> `,
})
export class ChartDemoComponent {
  data = {
    labels: ["Data 1", "Data 2", "Data 3"],
    datasets: [
      {
        label: "Dataset 1",
        data: [40, 15, 45],
        backgroundColor: ["#ff7675", "#fdcb6e", "#0984e3"],
      },
    ],
  };
}

Important Note: Changing the chart data without creating a new data instance does not trigger change detection. In order to chart to redraw itself, a new data object needs to be created.

See the result:

pie-chart

Examples

Doughnut

import { Component } from "@angular/core";

@Component({
  selector: "app-chart-demo",
  template: `
    <abp-chart
      type="doughnut"
      [data]="data"
      [options]="options"
      width="400px"
      height="400px"
      [plugins]="myPlugin"
    ></abp-chart>
  `,
})
export class ChartDemoComponent {
  data = {
    labels: ["Data 1", "Data 2", "Data 3"],
    datasets: [
      {
        label: "Dataset 1",
        data: [40, 15, 45],
        backgroundColor: ["#a0e6c3", "#f0ea4c", "#5b9dc3"],
      },
    ],
  };

  options = {
    plugins: {
      title: {
        display: true,
        text: "Doughnut Chart",
        fontSize: 16,
      },
      legend: {
        position: "bottom",
      },
    },
  };

  myPlugin = [
    {
      afterRender: (chart, args, options) => {
        console.log("chart has been rendered");
      },
    },
  ];
}

Result:

Doughnut Chart

Bar

import { Component } from "@angular/core";

@Component({
  selector: "app-chart-demo",
  template: `
    <abp-chart
      type="bar"
      [data]="data"
      width="400px"
      height="400px"
    ></abp-chart>
  `,
})
export class ChartDemoComponent {
  data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "First dataset",
        backgroundColor: "#42A5F5",
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        label: "Second dataset",
        backgroundColor: "#FFA726",
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ],
  };
}

Result:

Bar Chart

Radar

import { Component } from "@angular/core";

@Component({
  selector: "app-chart-demo",
  template: `
    <abp-chart
      type="radar"
      [data]="data"
      width="400px"
      height="400px"
    ></abp-chart>

    <button class="btn btn-primary-outline mt-4" (click)="addDataset()">
      Add dataset
    </button>
  `,
})
export class ChartDemoComponent {
  data = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ],
    datasets: [
      {
        label: "Dataset 1",
        backgroundColor: "rgba(179,181,198,0.2)",
        borderColor: "rgba(179,181,198,1)",
        data: [65, 59, 90, 81, 56, 55, 40, 35, 82, 51, 62, 95],
      },
      {
        label: "Dataset 2",
        backgroundColor: "rgba(255,99,132,0.2)",
        borderColor: "rgba(255,99,132,1)",
        data: [28, 48, 40, 58, 96, 27, 100, 44, 85, 77, 71, 39],
      },
    ],
  };

  addDataset() {
    this.data = {
      ...this.data,
      datasets: [
        ...this.data.datasets,
        {
          label: "Dataset 3",
          backgroundColor: "rgba(54,162,235,0.2)",
          borderColor: "rgba(54, 162, 235, 1)",
          data: [90, 95, 98, 91, 99, 96, 89, 95, 98, 93, 92, 90],
        },
      ],
    };
  }
}

Result:

Bar Chart

See the chart.js samples for more examples.

API

abp-chart

Properties

Name Description Type Default
[type] Type of the chart. string null
[data] Chart data to display any null
[options] Chart options to customize any null
[plugins] Chart plugins to customize behavior any null
[width] Width of the chart string null
[height] Height of the chart string null
[responsive] Whether the chart is responsive boolean true
(dataSelect) A callback that executes when an element on the chart is clicked EventEmitter<any> -
(initialized) A callback that executes when the chart is initialized EventEmitter<boolean> -

Methods

Name Description Parameters
refresh Redraws the chart -
reinit Destroys the chart then creates it again -
getBase64Image Returns a base 64 encoded string of the chart in it's current state -
generateLegend Returns an HTML string of a legend for the chart -
getCanvas Returns the canvas HTML element -

Contributors


Last updated: July 31, 2024 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .NET and ABP Framework

17 Oct, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More