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

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>