Sign in


Sign up


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>
        

Data structure:


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>
        

Data structure:


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>
        

Data structure:


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>
        

Data structure:


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>
        

Data structure:


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>
        

Data structure:


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

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>