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 8 types of charts and multiple options for customization.

Add canvas with mdbChart directive and necessary properties to create new Chart.


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 class="btn btn-primary waves-light" mdbWavesEffect (click)="updateOnlyDatasets()">Update only datasets</button>

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

              </div>
              <div class="col-md-4">
                <button class="btn btn-primary 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 class="btn btn-primary waves-light" mdbWavesEffect (click)="updateChartMonthsLabels()">Update months labels</button>

              </div>
              <div class="col-md-6 text-center">
                <button class="btn btn-primary 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)'
              },
            ];
          }

      

Minimalist charts MDB Pro component

Sales
ROI
Conversion

Step 1: Create a basic markup for the chart with a 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><span class="badge green">Sales <i class="fas fa-arrow-circle-up"></i></span></h5>
      

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



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

      

For example Easy Pie Charts could looks like this 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>
    

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

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