Angular Bootstrap charts

Simple, clean and interactive charts


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: 'chart-component-example',
    templateUrl: 'chart.component.html',
})

export class ChartComponentExample {

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

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: 'chart-component-example',
    templateUrl: 'chart.component.html',
})

export class ChartComponentExample {

    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> = ['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 { }
}
  

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: 'chart-component-example',
    templateUrl: 'chart.component.html',
})

export class ChartComponentExample {

    public chartType:string = 'bar';

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

Polar Area Chart


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

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

@Component({
    selector: 'chart-component-example',
    templateUrl: 'chart.component.html',
})

export class ChartComponentExample {

    public chartType:string = 'polarArea';

    public chartData:Array<any> = [300, 50, 100, 40, 120];

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

    public chartColors:Array<any> = [{
        hoverBorderColor: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)'],
        hoverBorderWidth: 0,
        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5","#616774"]
    }];

    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"
        [data]="chartData"
        [labels]="chartLabels"
        [colors]="chartColors"
        [options]="chartOptions"
        [legend]="true"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
    </canvas>
</div>
	

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

@Component({
    selector: 'chart-component-example',
    templateUrl: 'chart.component.html',
})

export class ChartComponentExample {

    public chartType:string = 'pie';

    public chartData:Array<any> = [300, 50, 100, 40, 120];

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

    public chartColors:Array<any> = [{
        hoverBorderColor: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)'],
        hoverBorderWidth: 0,
        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5","#616774"]
    }];

    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"
        [data]="chartData"
        [labels]="chartLabels"
        [colors]="chartColors"
        [options]="chartOptions"
        [legend]="true"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
    </canvas>
</div>
	

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

@Component({
    selector: 'chart-component-example',
    templateUrl: 'chart.component.html',
})

export class ChartComponentExample {

    public chartType:string = 'doughnut';

    public chartData:Array<any> = [300, 50, 100, 40, 120];

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

    public chartColors:Array<any> = [{
        hoverBorderColor: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)'],
        hoverBorderWidth: 0,
        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5","#616774"]
    }];

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

Updating Chart data

The following methods describe how you can dynamically change the appearance of your charts.


<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: 'update-chart',
  templateUrl: './update-chart.component.html',
  styleUrls: ['./update-chart.component.scss'],
})
export class UpdateChartComponent {
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.


<mdb-simple-chart [percent]="56" [barColor]="'4CAF50'"></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="fa fa-arrow-circle-up"></i></span></h5>
        

Step 3: Use .text-center class to center the content.


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

Configuration options:

You can change the apperance of your's chart by using attributes below:

Property Description
barColor The color of the curcular bar.
trackColor The color of the track, or false to disable rendering.
scaleColor The color of the scale lines, false to disable rendering.
scaleLength Length of the scale lines (reduces the radius of the chart).
lineCap Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth Width of the chart line in px.
size Size of the pie chart in px. It will always be a square.
rotate Rotation of the complete chart in degrees.
animate Object with time in milliseconds and boolean for an animation of the bar growing ({ duration: 1000, enabled: true }), or false to deactivate animations. Note, that animate is required for proper working charts component. It's obligatory to add it.

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>
            
        

API Reference:

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.

API Reference for MDB Angular Charts:
// For MDB Angular Pro
import { ChartsModule } from 'ng-uikit-pro-standard'
// For Minimalistic Charts
import { ChartSimpleModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { ChartsModule } from 'angular-bootstrap-md'