Bootstrap charts
Simple, clean and interactive charts
Standard charts:
Minimalist charts:
Sales
ROI
Conversion
Usage for standard charts
Step 1: Create <canvas> element in your html file ([datasets] for line, bar and radar chart type, [data] for pie, doughnut, polarArea chart type).
<div style="display: block;">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[chartType]="type">
</canvas>
</div>
Step 2: Declare a type for the chart.
public type:string = 'line';
public type:string = 'bar';
public type:string = 'radar';
public type:string = 'pie';
public type:string = 'polarArea';
public type:string = 'doughnut';
Step 3: Declare a data for the chart.
public chartData: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)'
}
];
Step 4: Make a chart responsive.
public chartOptions:any = {
responsive: true,
};
Line Chart
public type:string = 'line';
Data structure:
public chartData: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)'
}
];
Radar Chart
public type:string = 'radar';
Data structure:
public chartData: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)'
}
];
Bar Chart
public type:string = 'bar';
public chartData: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)'
}
];
Polar Area Chart
public type:string = 'polarArea';
Data structure:
public chartLabels:string[] = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartData:number[] = [300, 50, 100, 40, 120];
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"]
}];
Pie Chart
public type:string = 'pie';
Data structure:
public chartLabels:string[] = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartData:number[] = [300, 50, 100, 40, 120];
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"]
}];
Doughnut Chart
public type:string = 'doughnut';
Data structure:
public chartLabels:string[] = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];
public chartData:number[] = [300, 50, 100, 40, 120];
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"]
}];
Usage for minimalist charts Premium component
Sales
ROI
Conversion
Step 1: Create a basic markup for the chart.
<simple-chart [percent]="56" [barColor]="'4CAF50'"></simple-chart>
Step 2: (Optional) Create a label.
<simple-chart [percent]="56" [barColor]="'4CAF50'"></simple-chart>
<h5><span class="label 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">
<simple-chart [percent]="56" [barColor]="'4CAF50'"></simple-chart>
<h5><span class="label green">Sales <i class="fa fa-arrow-circle-up"></i></span></h5>
</div>