Bootstrap charts

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.


Basic usage

It's easy to get started with MDB charts.

Step 1 - add <canvas> element to your document:

    
<canvas id="myChart" style="max-width: 500px;"></canvas>
    
    

Step 2 - at the bottom of the document, below mdb.js script, place the code with chart settings:


<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>
    

Note: You don't need to set a width via css. You can place the <canvas> element within a grid column. Charts are responsive, so they will adjust the width to the size of the parent.


<div class="col-md-5">
    <canvas id="myChart" ></canvas>
</div>
    

Line chart

                
<canvas id="lineChart"></canvas>
                
            

                //line
                var ctxL = document.getElementById("lineChart").getContext('2d');
                var myLineChart = new Chart(ctxL, {
                  type: 'line',
                  data: {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [{
                        label: "My First dataset",
                        data: [65, 59, 80, 81, 56, 55, 40],
                        backgroundColor: [
                          'rgba(105, 0, 132, .2)',
                        ],
                        borderColor: [
                          'rgba(200, 99, 132, .7)',
                        ],
                        borderWidth: 2
                      },
                      {
                        label: "My Second dataset",
                        data: [28, 48, 40, 19, 86, 27, 90],
                        backgroundColor: [
                          'rgba(0, 137, 132, .2)',
                        ],
                        borderColor: [
                          'rgba(0, 10, 130, .7)',
                        ],
                        borderWidth: 2
                      }
                    ]
                  },
                  options: {
                    responsive: true
                  }
                });
            

Radar Chart

                
<canvas id="radarChart"></canvas>
                
            

                //radar
                var ctxR = document.getElementById("radarChart").getContext('2d');
                var myRadarChart = new Chart(ctxR, {
                  type: 'radar',
                  data: {
                    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                    datasets: [{
                        label: "My First dataset",
                        data: [65, 59, 90, 81, 56, 55, 40],
                        backgroundColor: [
                          'rgba(105, 0, 132, .2)',
                        ],
                        borderColor: [
                          'rgba(200, 99, 132, .7)',
                        ],
                        borderWidth: 2
                      },
                      {
                        label: "My Second dataset",
                        data: [28, 48, 40, 19, 96, 27, 100],
                        backgroundColor: [
                          'rgba(0, 250, 220, .2)',
                        ],
                        borderColor: [
                          'rgba(0, 213, 132, .7)',
                        ],
                        borderWidth: 2
                      }
                    ]
                  },
                  options: {
                    responsive: true
                  }
                });
            

Bar Chart

                        
<canvas id="barChart"></canvas>
                        
                        

//bar
var ctxB = document.getElementById("barChart").getContext('2d');
var myBarChart = new Chart(ctxB, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
            

Polar Area Chart

                        
<canvas id="polarChart"></canvas>
                        
                        

//polar
var ctxPA = document.getElementById("polarChart").getContext('2d');
var myPolarChart = new Chart(ctxPA, {
    type: 'polarArea',
    data: {
        labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
        datasets: [
            {
                data: [300, 50, 100, 40, 120],
                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)"]
            }
        ]
    },
    options: {
        responsive: true
    }
});
            

Pie Chart

                        
<canvas id="pieChart"></canvas>
                        
                        

//pie
var ctxP = document.getElementById("pieChart").getContext('2d');
var myPieChart = new Chart(ctxP, {
    type: 'pie',
    data: {
        labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
        datasets: [
            {
                data: [300, 50, 100, 40, 120],
                backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
            }
        ]
    },
    options: {
        responsive: true
    }
});
            

Doughnut Chart

                        
<canvas id="doughnutChart"></canvas>
                        
                        

//doughnut
var ctxD = document.getElementById("doughnutChart").getContext('2d');
var myLineChart = new Chart(ctxD, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
        datasets: [
            {
                data: [300, 50, 100, 40, 120],
                backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
            }
        ]
    },
    options: {
        responsive: true
    }
});
            

Minimalist charts MDB Pro component

Sales
ROI
Conversion

Step 1: Create a basic markup for the chart with a class .min-chart, id and percentage .


<span class="min-chart" id="chart-sales" data-percent="56"><span class="percent"></span></span>

Step 2: (Optional) Create a label.


<span class="min-chart" id="chart-sales" data-percent="56"><span class="percent"></span></span>
<h5><span class="label green">Sales <i class="fa fa-arrow-circle-up"></i></span></h5>

Step 3: Initialize it.


$(function () {
    $('.min-chart#chart-sales').easyPieChart({
        barColor: "#4caf50",
        onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

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


<div class="text-center">
    <span class="min-chart" id="chart-sales" data-percent="56"><span class="percent"></span></span>
    <h5><span class="label green">Sales <i class="fa fa-arrow-circle-up"></i></span></h5>
</div>