Angular Bootstrap Charts

Angular Charts - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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 {
            chartType = 'line';

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

            chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

            chartColors = [
              {
                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,
              }
            ];

            chartOptions: any = {
              responsive: true
            };

            chartClicked(event: any) {
              console.log(event);
            }

            chartHovered(event: any) {
              console.log(event);
            }
          }

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 {
            chartType = 'radar';

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

            chartLabels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];

            chartColors = [
              {
                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,
              }
            ];

            chartOptions: any = {
              responsive: true
            };

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

            chartHovered(event: any): void {
              console.log(event);
            }
          }

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 {
            chartType = 'bar';

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

            chartLabels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

            chartColors = [
              {
                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,
              }
            ];

            chartOptions: any = {
              responsive: true
            };

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

            chartHovered(event: any): void {
              console.log(event);
            }
          }

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 {
            chartType = 'horizontalBar';

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

            chartLabels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

            chartColors = [
              {
                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,
              }
            ];

            chartOptions: any = {
              responsive: true
            };

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

            chartHovered(event: any): void {
              console.log(event);
            }
          }

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 {
          chartType = 'bar';

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

          chartLabels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

          chartColors = [
            {
              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,
            },
          ];

          chartOptions: any = {
            responsive: true,
              scales: {
                xAxes: [{
                  stacked: true
                  }],
                yAxes: [
                {
                  stacked: true
                }
              ]
            }
          }

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

          chartHovered(event: any): void {
            console.log(event);
          }
        }

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 {
            chartType = 'polarArea';

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

            chartLabels = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

            chartColors = [
              {
                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,
              }
            ];

            chartOptions: any = {
              responsive: true
            };

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

            chartHovered(event: any): void {
              console.log(event);
            }
          }

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 {
            chartType = 'pie';

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

            chartLabels = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

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

            chartOptions: any = {
              responsive: true
            };

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

            chartHovered(event: any): void {
              console.log(event);
            }
          }

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 {
            chartType = 'doughnut';

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

            chartLabels = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

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

            chartOptions: any = {
              responsive: true
            };

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

            chartHovered(event: any): void {
              console.log(event);
            }
          }

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 {
            chartType = 'line';

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

            chartLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

            chartColors = [
              {
                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)'
              }
            ];

            chartOptions: any = {
              responsive: true
            };

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

            chartHovered(event: any): void {
              console.log(event);
            }

            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, label: this.chartDatasets[0].label, },
                { data: secondChartData, label: this.chartDatasets[0].label, },
              ];
            }

            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.

        
            
          <div style="display: block">
            <canvas
              mdbChart
              #chart
              [chartType]="chartType"
              [datasets]="chartDatasets"
              [labels]="chartLabels"
              [colors]="chartColors"
              [options]="chartOptions"
              [legend]="true"
              (chartClick)="onChartClick($event)"
            >
            </canvas>
          </div>
        
        
    
        
            
          import { Component, ViewChild } 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;

            chartType = 'bar';

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

            chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

            chartColors = [
              {
                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,
              }
            ];

            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 {
            chartType = 'bar';

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

            chartLabels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

            chartColors = [
              {
                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,
              },
            ];

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

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

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

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. 

        
            
          import { ChartsModule, ChartSimpleModule, WavesModule } from 'ng-uikit-pro-standard'
        
        
    
        
            
          import { ChartsModule, WavesModule } from 'angular-bootstrap-md'
Import example Modules list

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}"