web
mobile
Edit these docs Rate these docs

Angular Bootstrap Charts

Angular charts - Bootstrap 4 & Material Design

Angular Bootstrap charts are graphical representations of data. They are responsive and easy to customize.

At your disposal are eight types of charts and multiple options for customization.

To create new chart, just add a canvas with a mdbChart directive and necessary properties.


Line chart



        <div style="display: block">
          <canvas mdbChart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
          selector: 'line-chart',
          templateUrl: './line-chart.component.html',
          styleUrls: ['./line-chart.component.scss'],
        })
        export class LineChartComponent {
          public chartType: string = 'line';

          public chartDatasets: Array<any> = [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
            { data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }
          ];

          public chartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

          public chartColors: Array<any> = [
            {
              backgroundColor: 'rgba(105, 0, 132, .2)',
              borderColor: 'rgba(200, 99, 132, .7)',
              borderWidth: 2,
            },
            {
              backgroundColor: 'rgba(0, 137, 132, .2)',
              borderColor: 'rgba(0, 10, 130, .7)',
              borderWidth: 2,
            }
          ];

          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }
        }

      

Radar chart



        <div style="display: block">
          <canvas mdbChart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
          selector: 'radar-chart',
          templateUrl: './radar-chart.component.html',
          styleUrls: ['./radar-chart.component.scss'],
        })
        export class RadarChartComponent {
          public chartType: string = 'radar';

          public chartDatasets: Array<any> = [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
            { data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }
          ];

          public chartLabels: Array<any> = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];

          public chartColors: Array<any> = [
            {
              backgroundColor: 'rgba(105, 0, 132, .2)',
              borderColor: 'rgba(200, 99, 132, .7)',
              borderWidth: 2,
            },
            {
              backgroundColor: 'rgba(0, 250, 220, .2)',
              borderColor: 'rgba(0, 213, 132, .7)',
              borderWidth: 2,
            }
          ];

          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }

      

Bar chart



        <div style="display: block">
          <canvas mdbChart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
          selector: 'bar-chart',
          templateUrl: './bar-chart.component.html',
          styleUrls: ['./bar-chart.component.scss'],
        })
        export class BarChartComponent {
          public chartType: string = 'bar';

          public chartDatasets: Array<any> = [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
          ];
        
          public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
        
          public chartColors: Array<any> = [
            {
              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: 2,
            }
          ];
        
          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }

      

Horizontal Bar Chart



        <div style="display: block">
          <canvas mdbChart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
          selector: 'horizontal-bar-chart',
          templateUrl: './horizontal-bar-chart.component.html',
          styleUrls: ['./horizontal-bar-chart.component.scss'],
        })
        export class HorizontalBarComponent {
          public chartType: string = 'horizontalBar';

          public chartDatasets: Array<any> = [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
          ];

          public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

          public chartColors: Array<any> = [
            {
              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: 2,
            }
          ];

          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }

      

Stacked Bar Chart



        <div style="display: block">
          <canvas mdbChart
                  [chartType]="chartType"
                  [datasets]="chartDatasets"
                  [labels]="chartLabels"
                  [colors]="chartColors"
                  [options]="chartOptions"
                  [legend]="true"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
        selector: 'stacked-bar-chart',
        templateUrl: './stacked-bar-chart.component.html',
        styleUrls: ['./stacked-bar-chart.component.scss'],
        })
        export class StackedBarComponent {
        public chartType: string = 'bar';

        public chartDatasets: Array<any> = [
          { data: [65, 59, -157, 81, 56, 55, 40], label: 'My First dataset' },
          { data: [11, 12, -157, 13, 14, 15, 16], label: 'My Second dataset' },
        ];

        public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

          public chartColors: Array<any> = [
            {
              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: 2,
            },
            {
              backgroundColor: [
                'rgba(255, 125, 158, 0.2)',
                'rgba(3, 111, 184, 0.2)',
                'rgba(255, 255, 137, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(126, 243, 243, 0.2)',
                'rgba(255, 210, 115, 0.2)'
              ],
              borderColor: [
                'rgba(255, 125, 158, 1)',
                'rgba(3, 111, 184, 1)',
                'rgba(255, 255, 137, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(126, 243, 243, 1)',
                'rgba(255, 210, 115, 1)'
              ],
              borderWidth: 2,
            },
            ];

            public chartOptions: any = {
              responsive: true,
                scales: {
                  xAxes: [{
                    stacked: true
                    }],
                  yAxes: [
                  {
                    stacked: true
                  }
                ]
              }
            };
            public chartClicked(e: any): void { }
            public chartHovered(e: any): void { }

      

Polar Area Chart



        <div style="display: block">
          <canvas mdbChart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
          selector: 'polarArea-bar-chart',
          templateUrl: './polarArea-bar-chart.component.html',
          styleUrls: ['./polarArea-bar-chart.component.scss'],
        })
        export class PolarAreaChartComponent {
          public chartType: string = 'polarArea';

          public chartDatasets: Array<any> = [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }
          ];

          public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

          public chartColors: Array<any> = [
            {
              backgroundColor: [
                'rgba(219, 0, 0, 0.1)',
                'rgba(0, 165, 2, 0.1)',
                'rgba(255, 195, 15, 0.2)',
                'rgba(55, 59, 66, 0.1)',
                'rgba(0, 0, 0, 0.3)'
              ],
              hoverBackgroundColor: [
                'rgba(219, 0, 0, 0.2)',
                'rgba(0, 165, 2, 0.2)',
                'rgba(255, 195, 15, 0.3)',
                'rgba(55, 59, 66, 0.1)',
                'rgba(0, 0, 0, 0.4)'
              ],
              borderWidth: 2,
            }
          ];

          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }

      

Pie Chart



        <div style="display: block">
          <canvas mdbChart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
          selector: 'pie-chart',
          templateUrl: './pie-chart.component.html',
          styleUrls: ['./pie-chart.component.scss'],
        })
        export class PieChartComponent {
          public chartType: string = 'pie';

          public chartDatasets: Array<any> = [
            { data: [300, 50, 100, 40, 120], label: 'My First dataset' }
          ];

          public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

          public chartColors: Array<any> = [
            {
              backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
              hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
              borderWidth: 2,
            }
          ];

          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }

      

Doughnut Chart



        <div style="display: block">
          <canvas mdbChart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">
          </canvas>
        </div>

      


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

        @Component({
          selector: 'doughnut-bar-chart',
          templateUrl: './doughnut-bar-chart.component.html',
          styleUrls: ['./doughnut-bar-chart.component.scss'],
        })
        export class DoughnutChartArea {
          public chartType: string = 'doughnut';

          public chartDatasets: Array<any> = [
            { data: [300, 50, 100, 40, 120], label: 'My First dataset' }
          ];

          public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

          public chartColors: Array<any> = [
            {
              backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
              hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
              borderWidth: 2,
            }
          ];

          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }

      

Updating chart data



        <div class="row">
          <div class="col-md-6 mx-auto my-5">
            <div style="display: block">
              <canvas mdbChart [chartType]="chartType" [datasets]="chartDatasets" [labels]="chartLabels" [colors]="chartColors" [options]="chartOptions"
                [legend]="true" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
              </canvas>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 mx-auto text-center">
            <div class="row">
              <div class="col-md-4">
                <button mdbBtn color="primary" class="waves-light" mdbWavesEffect (click)="updateOnlyDatasets()">Update only datasets</button>

              </div>
              <div class="col-md-4">
                <button mdbBtn color="primary" class="waves-light" mdbWavesEffect (click)="updateOnlyLabels()">Update only labels</button>

              </div>
              <div class="col-md-4">
                <button mdbBtn color="primary" class="waves-light" mdbWavesEffect (click)="updateDatasetsAndLabels()">Update datasets and labels</button>

              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 mx-auto">
            <div class="row">
              <div class="col-md-6 text-center">
                <button mdbBtn color="primary" class="waves-light" mdbWavesEffect (click)="updateChartMonthsLabels()">Update months labels</button>

              </div>
              <div class="col-md-6 text-center">
                <button mdbBtn color="primary" class="waves-light" mdbWavesEffect (click)="updateChartColors()">Update chart colors</button>
              </div>
            </div>
          </div>
        </div>

      


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

        @Component({
          selector: 'doughnut-bar-chart',
          templateUrl: './doughnut-bar-chart.component.html',
          styleUrls: ['./doughnut-bar-chart.component.scss'],
        })
        export class DoughnutChartArea {
          public chartType: string = 'line';

          public chartDatasets: Array<any> = [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
            { data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }
          ];

          public chartLabels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

          public chartColors: Array<any> = [
            {
              backgroundColor: 'rgba(220,220,220,0.2)',
              borderColor: 'rgba(220,220,220,1)',
              borderWidth: 2,
              pointBackgroundColor: 'rgba(220,220,220,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(220,220,220,1)'
            },
            {
              backgroundColor: 'rgba(151,187,205,0.2)',
              borderColor: 'rgba(151,187,205,1)',
              borderWidth: 2,
              pointBackgroundColor: 'rgba(151,187,205,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(151,187,205,1)'
            }
          ];

          public chartOptions: any = {
            responsive: true
          };
          public chartClicked(e: any): void { }
          public chartHovered(e: any): void { }

          updateOnlyDatasets() {
            const firstChartData = [
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
            ];
            const secondChartData = [
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
            ];
            // This line will update only data in your Chart
            this.chartDatasets = [
              { data: firstChartData },
              { data: secondChartData },
            ];
          }

          updateOnlyLabels() {
            // This line will update only label in your Chart
            // Note that if you need to update only label, you have to put some data into data property
            this.chartDatasets = [
              { data: this.chartDatasets[0].data, label: 'Label no. ' + Math.floor(Math.random() * 10), },
              { data: this.chartDatasets[1].data, label: 'Label no. ' + Math.floor(Math.random() * 10), },
            ];
          }

          updateDatasetsAndLabels() {
            const firstChartData = [
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
            ];
            const secondChartData = [
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
              Math.floor(Math.random() * 10),
            ];

            // This line will update both data and label in Chart
            this.chartDatasets = [
              { data: firstChartData, label: 'Label no. ' + Math.floor(Math.random() * 10), },
              { data: secondChartData, label: 'Label no. ' + Math.floor(Math.random() * 10), },
            ];
          }

          updateChartMonthsLabels() {
            this.chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
          }

          updateChartColors() {
            this.chartColors = [
              {
                backgroundColor: 'rgba(159,248,227,0.2)',
                borderColor: 'rgba(15,239,187,1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(220,220,220,1)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgba(220,220,220,1)'
              },
              {
                backgroundColor: 'rgba(15,239,75,0.2)',
                borderColor: 'rgba(9,143,45,1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(220,220,220,1)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgba(220,220,220,1)'
              },
            ];
          }

      

Getting point data on click

Use the getPointDataAtEvent method from the mdbChart directive to retrieve the value of the clicked point. It is required to use the - hover: {mode: 'nearest', intersec: true} option.



        <canvas mdbChart #chart
                [chartType]="chartType"
                [datasets]="chartDatasets"
                [labels]="chartLabels"
                [colors]="chartColors"
                [options]="chartOptions"
                [legend]="true"
                (chartClick)="onChartClick($event)">
        </canvas>

      


        import { Component } from '@angular/core';
        import {BaseChartDirective} from 'PATH/TO/MDB/ANGULAR';

        @Component({
        selector: 'bar-chart',
        templateUrl: './bar-chart.component.html',
        styleUrls: ['./bar-chart.component.scss'],
        })
        export class BarChart {
        @ViewChild(BaseChartDirective, {static: true}) chart: BaseChartDirective;
          public chartType: string = 'bar';

          public chartDatasets: Array&lt;any&gt; = [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
            { data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' }
          ];

          public chartLabels: Array&lt;any&gt; = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

            public chartColors: Array&lt;any&gt; = [
              {
                backgroundColor: 'rgba(105, 0, 132, .2)',
                borderColor: 'rgba(200, 99, 132, .7)',
                borderWidth: 2,
              },
              {
                backgroundColor: 'rgba(0, 137, 132, .2)',
                borderColor: 'rgba(0, 10, 130, .7)',
                borderWidth: 2,
              }
              ];

              public chartOptions: any = {
                responsive: true,
                hover: {
                  mode: 'nearest',
                  intersec: true,
                },
              };

              onChartClick(event: any) {
                console.log(this.chart.getPointDataAtEvent(event));
              }
            }

      

Minimalist charts MDB Pro component

Sales
ROI
Conversion

Formatted charts

Example of how you can format the displayed number values during hover, and how you can format the Y-axis.

Live Demo

Step 1: Create a basic markup for the chart using mdb-simple-chart, percent, barColor, and animate.



        <mdb-simple-chart [percent]="56" [barColor]="'4CAF50'" [animate]="{duration: 1000, enabled: true}"></mdb-simple-chart>

      

Step 2: (Optional) Create a label.


        <mdb-simple-chart [percent]="56" [barColor]="'4CAF50'"></mdb-simple-chart>
        <h5>
          <mdb-badge color="green">Sales <mdb-icon fas icon="arrow-circle-up"></mdb-icon></mdb-badge>
        </h5>
      

Step 3: (Optional) Add .text-center if you want centered text.



        <div class="text-center">
          <mdb-simple-chart [percent]="56" [barColor]="'4CAF50'"></mdb-simple-chart>
          <h5>
            <mdb-badge color="green">Sales <mdb-icon fas icon="arrow-circle-up"></mdb-icon></mdb-badge>
          </h5>
       </div>

      

For example Easy Pie Charts could look like the example below:


      <mdb-simple-chart percent="85" barColor="ef1e25" trackColor="f2f2f2" scaleColor="303030" scaleLength="1" lineCap="round" lineWidth="5"
      trackWidth="10" size="110" rotate="0" [animate]="{duration: 1000, enabled: true}"></mdb-simple-chart>
    

Display values on chart MDB Pro component

You can display value of every point of the chart with the Chart.js plugin for data labels.

1. Install the plugin with npm install command:

npm install chartjs-plugin-datalabels --save

2. Add new import to the script array in angular.json file:


      "scripts": [
        "node_modules/chart.js/dist/Chart.js",
        "node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js",
      ]
    

3. Add plugin configuration object to chartOptions (example code for bar chart):


      <div style="display: block">
        <canvas mdbChart
            [chartType]="chartType"
            [datasets]="chartDatasets"
            [labels]="chartLabels"
            [colors]="chartColors"
            [options]="chartOptions"
            [legend]="true"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
        </canvas>
      </div>
    

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

@Component({
  selector: 'bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss'],
})
export class BarChartComponent {
  public chartType = 'bar';

  public chartDatasets: Array<any> = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' },
  ];

  public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  public chartColors: Array<any> = [
    {
      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: 2,
    },
  ];

  public chartOptions: any = {
    responsive: true,
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
        font: {
          size: 20,
        }
      }
    }
  };

  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }
    
Edit these docs Rate these docs

Angular Charts - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of charts component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// For MDB Angular Pro
  import { ChartsModule, ChartSimpleModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
  import { ChartsModule, WavesModule } from 'angular-bootstrap-md'

Directives

BaseChartDirective

Selector: mdbChart

Type: BaseChartDirective


Charts Inputs

Name Type Default Description Example
datasets any[] - Input for filling chart with datasets. [datasets]="dataset"
labels any[] - Input for filling chart with labels. [labels]="label"
options any {legend: {display: false}} Input for filling chart with options. [options]="{}"
chartType string - Input for determine chart type. [chartType]="'bar'"
colors any[] - Input for filling chart with colors. [colors]="color"
legend boolean false Input for determining if chart will have legend or not. [legend]="false"

Events

Name Type Description Example
chartClick any Will be emitted when click event will be activated on the chart. (chartClick)="onChartClick($event)"
chartHover any Will be emitted when hober event will be activated on the chart. (chartHover)="onChartHover($event)"

Methods

Below methods are available in BaseChartDirective

Name Description
getPointDataAtEvent(event) Returns clicked chart point's data. As parameter, pass chart event from (chartClick) or (chartHover).

Components

SimpleChartComponent

Selector: mdb-simple-chart

Type: SimpleChartComponent


Easy Charts Inputs

Name Type Default Description Example
customText string ' ' Input for filling easy-chart with custom text. customText="Chart"
percent number null Input for providing easy-chart percent value. percent="50"
barColor string '#ef1e25' The color of the curcular bar. barColor="303030"
trackColor string '#f9f9f9' The color of the track, or false to disable rendering. trackColor="f9f9f9"
scaleColor string 'dfe0e0' The color of the scale lines, false to disable rendering. scaleColor="dfe0e0"
scaleLength number 5 Length of the scale lines (reduces the radius of the chart). scaleLength="3"
lineCap string ' ' Defines how the ending of the bar line looks like. Possible values are: butt, round and square. lineCap="round"
lineWidth number 3 Width of the chart line in px. lineWidth="5"
size number 110 Size of the pie chart in px. It will always be a square. size="Chart"
rotate number 0 Rotation of the complete chart in degrees. rotate="Chart"
animate {duration: number, enabled: boolean} {duration: 1000, enabled: true} Object with time in milliseconds and boolean for an animation of the bar growing, or false to deactivate animations. This property is REQUIRED to use. [animate]="{duration: 1000, enabled: true}"