Rate this docs

Charts

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>

      


        <script>
          //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
            }
          });

        </script>
      

Radar chart



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

      


        <script>
          //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
            }
          });

        </script>

      

Bar chart



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

      


        <script>
          //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
                  }
                }]
              }
            }
          });

        </script>

      

Horizontal Bar Chart


        <canvas id="horizontalBar"></canvas>
      


        <script>
          new Chart(document.getElementById("horizontalBar"), {
            "type": "horizontalBar",
            "data": {
              "labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],
              "datasets": [{
                "label": "My First Dataset",
                "data": [22, 33, 55, 12, 86, 23, 14],
                "fill": false,
                "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)",
                  "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)",
                  "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"
                ],
                "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",
                  "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"
                ],
                "borderWidth": 1
              }]
            },
            "options": {
              "scales": {
                "xAxes": [{
                  "ticks": {
                    "beginAtZero": true
                  }
                }]
              }
            }
          });

        </script>

      

Polar Area Chart



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

      


        <script>
          //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
            }
          });

        </script>

      

Pie Chart



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

      


        <script>
          //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
            }
          });

        </script>

      

Doughnut Chart



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

      


        <script>
          //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
            }
          });

        </script>

      

Bubble Chart


        <canvas id="bubbleChart"></canvas>
      

        <script>
          var ctxBc = document.getElementById('bubbleChart').getContext('2d');
          var bubbleChart = new Chart(ctxBc, {
            type: 'bubble',
            data: {
              datasets: [{
                label: 'John',
                data: [{
                  x: 3,
                  y: 7,
                  r: 10
                }],
                backgroundColor: "#ff6384",
                hoverBackgroundColor: "#ff6384"
              }, {
                label: 'Peter',
                data: [{
                  x: 5,
                  y: 7,
                  r: 10
                }],
                backgroundColor: "#44e4ee",
                hoverBackgroundColor: "#44e4ee"
              }, {
                label: 'Donald',
                data: [{
                  x: 7,
                  y: 7,
                  r: 10
                }],
                backgroundColor: "#62088A",
                hoverBackgroundColor: "#62088A"
              }]
            }
          })

        </script>
      

Scatter Chart



        <canvas id="scatterChart"></canvas>

      


        <script>
          var ctxSc = document.getElementById('scatterChart').getContext('2d');
          var scatterData = {
            datasets: [{
              borderColor: 'rgba(99,0,125, .2)',
              backgroundColor: 'rgba(99,0,125, .5)',
              label: 'V(node2)',
              data: [{
                x: 1,
                y: -1.711e-2,
              }, {
                x: 1.26,
                y: -2.708e-2,
              }, {
                x: 1.58,
                y: -4.285e-2,
              }, {
                x: 2.0,
                y: -6.772e-2,
              }, {
                x: 2.51,
                y: -1.068e-1,
              }, {
                x: 3.16,
                y: -1.681e-1,
              }, {
                x: 3.98,
                y: -2.635e-1,
              }, {
                x: 5.01,
                y: -4.106e-1,
              }, {
                x: 6.31,
                y: -6.339e-1,
              }, {
                x: 7.94,
                y: -9.659e-1,
              }, {
                x: 10.00,
                y: -1.445,
              }, {
                x: 12.6,
                y: -2.110,
              }, {
                x: 15.8,
                y: -2.992,
              }, {
                x: 20.0,
                y: -4.102,
              }, {
                x: 25.1,
                y: -5.429,
              }, {
                x: 31.6,
                y: -6.944,
              }, {
                x: 39.8,
                y: -8.607,
              }, {
                x: 50.1,
                y: -1.038e1,
              }, {
                x: 63.1,
                y: -1.223e1,
              }, {
                x: 79.4,
                y: -1.413e1,
              }, {
                x: 100.00,
                y: -1.607e1,
              }, {
                x: 126,
                y: -1.803e1,
              }, {
                x: 158,
                y: -2e1,
              }, {
                x: 200,
                y: -2.199e1,
              }, {
                x: 251,
                y: -2.398e1,
              }, {
                x: 316,
                y: -2.597e1,
              }, {
                x: 398,
                y: -2.797e1,
              }, {
                x: 501,
                y: -2.996e1,
              }, {
                x: 631,
                y: -3.196e1,
              }, {
                x: 794,
                y: -3.396e1,
              }, {
                x: 1000,
                y: -3.596e1,
              }]
            }]
          }

          var config1 = new Chart.Scatter(ctxSc, {
            data: scatterData,
            options: {
              title: {
                display: true,
                text: 'Scatter Chart - Logarithmic X-Axis'
              },
              scales: {
                xAxes: [{
                  type: 'logarithmic',
                  position: 'bottom',
                  ticks: {
                    userCallback: function (tick) {
                      var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
                      if (remain === 1 || remain === 2 || remain === 5) {
                        return tick.toString() + 'Hz';
                      }
                      return '';
                    },
                  },
                  scaleLabel: {
                    labelString: 'Frequency',
                    display: true,
                  }
                }],
                yAxes: [{
                  type: 'linear',
                  ticks: {
                    userCallback: function (tick) {
                      return tick.toString() + 'dB';
                    }
                  },
                  scaleLabel: {
                    labelString: 'Voltage',
                    display: true
                  }
                }]
              }
            }
          });

        </script>

      

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 badge">Sales <i class="fa fa-arrow-circle-up"></i></span></h5>
      

Step 3: Initialize it.



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

        </script>

      

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 badge">Sales <i class="fa fa-arrow-circle-up"></i></span></h5>
        </div>

      

Options

Charts have a plenty of options what can you use.


Line options

The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.

All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.

Name Type Description
label String The label for the dataset which appears in the legend and tooltips.
xAxisID String The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
yAxisID String The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
backgroundColor Color The fill color under the line.
borderColor Color The color of the line.
borderWidth Number The width of the line in pixels.
borderDash Number[] Length and spacing of dashes.
borderDashOffset Number Offset for line dashes.
borderCapStyle String Cap style of the line.
borderJoinStyle String Line joint style.
cubicInterpolationMode String Algorithm used to interpolate a smooth curve from the discrete data points.
fill Boolean/String How to fill the area under the line.
lineTension Number Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
pointBackgroundColor Color/Color[] The fill color for points.
pointBorderColor Color/Color[] The border color for points.
pointBorderWidth Number/Number[] The width of the point border in pixels.
pointRadius Number/Number[] The radius of the point shape. If set to 0, the point is not rendered.
pointStyle String/String[]/Image/Image[] Style of the point.
pointRotation Number/Number[] The rotation of the point in degrees.
pointHitRadius Number/Number[] The pixel size of the non-displayed point that reacts to mouse events.
pointHoverBackgroundColor Color/Color[] Point background color when hovered.
pointHoverBorderColor Color/Color[] Point border color when hovered.
pointHoverBorderWidth Number/Number[] Border width of point when hovered.
pointHoverRadius Number/Number[] The radius of the point when hovered.
showLine Boolean If false, the line is not drawn for this dataset.
spanGaps Boolean If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line
steppedLine Boolean/String If the line is shown as a stepped line.

Bar options

The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bars is generally set this way.

Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.

Name Type Description
label String The label for the dataset which appears in the legend and tooltips.
xAxisID String The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
yAxisID String The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
backgroundColor Color/Color[] The fill color of the bar.
borderColor Color/Color[] The color of the bar border.
borderWidth Number/Number[] The stroke width of the bar in pixels.
borderSkipped String Which edge to skip drawing the border for.
hoverBackgroundColor Color/Color[] The fill colour of the bars when hovered.
hoverBorderColor Color/Color[] The stroke colour of the bars when hovered.
hoverBorderWidth Number/Number[] The stroke width of the bars when hovered.

Radar options

The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.

All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.

Name Type Description
label String The label for the dataset which appears in the legend and tooltips.
backgroundColor Color The fill color under the line.
borderColor Color The color of the line.
borderWidth Number The width of the line in pixels.
borderDash Number[] Length and spacing of dashes. S
borderDashOffset Number Offset for line dashes.
borderCapStyle String Cap style of the line
borderJoinStyle String Line joint style
fill Boolean/String How to fill the area under the line.
lineTension Number Bezier curve tension of the line. Set to 0 to draw straightlines.
pointBackgroundColor Color/Color[] The fill color for points.
pointBorderColor Color/Color[] The border color for points.
pointBorderWidth Number/Number[] The width of the point border in pixels.
pointRadius Number/Number[] TThe radius of the point shape. If set to 0, the point is not rendered.
pointRotation Number/Number[] The rotation of the point in degrees.
pointStyle String/String[]/Image/Image[] Style of the point.
pointHitRadius Number/Number[] The pixel size of the non-displayed point that reacts to mouse events.
pointHoverBackgroundColor Color/Color[] Point background color when hovered.
pointHoverBorderColor Color/Color[] Point border color when hovered.
pointHoverBorderWidth Number/Number[] Border width of point when hovered.
pointHoverRadius Number/Number[] The radius of the point when hovered.

Doughnut and Pie options

Name Type Description
backgroundColor Color[] The fill color of the arcs in the dataset.
borderColor Color[] The border color of the arcs in the dataset.
borderWidth Number[] The border width of the arcs in the dataset.
hoverBackgroundColor Color[] The fill colour of the arcs when hovered.
hoverBorderColor Color[] The stroke colour of the arcs when hovered.
hoverBorderWidth Number[] The stroke width of the arcs when hovered.

Legend

Charts displays data about the dataset that are appering on the chart.

Name Type Default Description
display Boolean true showing legend
position string 'top' Position of the legend.
fullWidth Boolean true Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
onClick Function

A callback that is called when a click event is registered on a label item

onHover Function

A callback that is called when a 'mousemove' event is registered on top of a label item

reverse Boolean false

Legend will show datasets in reverse order.

labels Object

See docmentation about labels here.


Legend Label Configuration

The legend label configuration is nested below the legend configuration using the labels key.

Name Type Default Description
boxWidth Number 40 width of coloured box
fontSize Number 12 font size of text
fontStyle String 'normal' font style of text
fontColor Color '#666'

Color of text

fontFamily String "Roboto"

Font family of legend text.

padding Number 10

Padding between rows of colored boxes. .

generateLabels Function

Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box.

filter Function null

Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data.

usePointStyle Boolean false

Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).


Animation

Charts animates out of the box. A number of options are provided to configure how the animiaton looks and how long it takes.

Name Type Default Description
duration Number 1000 The number of milliseconds an animation takes
easing String easeOutQuart Easing function to use.
onProgress Function null Callback called at the end of an animation.
onComplete Function null

Callback called on each step of an animation.


Available options of easing

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Charts examples & customization


Exmaples of using legends

Examples bellow have a difrent legends.

First chart has a legend bellow chart with color and font size. Second chart has legend set to false so nothig is showing.

Legend can has a different options for where it can be display, like:

  • top
  • left
  • bottom
  • right

          <canvas id="barLegend"></canvas>
        

          <script>
            var ctxBl = document.getElementById('barLegend').getContext('2d');
            var dataBl = {
              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
              datasets: [{
                label: '% of Votes',
                data: [2, 4, 8, 16, 32, 64],
                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
              }]
            }
            var chart = new Chart(ctxBl, {
              type: 'bar',
              data: dataBl,
              options: {
                legend: {
                  display: false,
                  labels: {
                    fontColor: 'rgb(2, 111, 22)',
                    fontSize: 16
                  }
                }
              }
            });

          </script>
        

          <canvas id="barLegend-1"></canvas>
        

          <script>
            var ctxBl1 = document.getElementById('barLegend-1').getContext('2d');
            var dataBl1 = {
              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
              datasets: [{
                label: '% of Votes',
                data: [2, 4, 8, 16, 32, 64],
                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
              }]
            }
            var chart = new Chart(ctxBl1, {
              type: 'bar',
              data: dataBl1,
              options: {
                legend: {
                  display: false,
                  labels: {
                    fontColor: 'rgb(2, 111, 22)'
                  }
                }
              }
            });

          </script>
        

Exmaple of using animation



          <canvas id="animationChart"></canvas>
          <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>

        

          <script>
            var progress = document.getElementById('animationProgress');
            var ctxA = document.getElementById("animationChart").getContext('2d');

            var config = new Chart(ctxA, {
              type: 'line',
              data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                  label: 'My First dataset',
                  borderColor: 'rgba(235,22,21, .2)',
                  backgroundColor: 'rgba(235,22,21, .5)',
                  data: [3, 22, 3, 46, 12, 72],
                }, {
                  label: 'My Second dataset ',
                  borderColor: 'rgba(99,0,125, .2)',
                  backgroundColor: 'rgba(99,0,125, .5)',
                  data: [33, 16, 10, 16, 24, 3],
                }]
              },
              options: {
                title: {
                  display: true,
                  text: 'First example of animation'
                },
                animation: {
                  duration: 5000,
                  onProgress: function (animation) {
                    progress.value = animation.currentStep / animation.numSteps;
                  },
                  onComplete: function () {
                    window.setTimeout(function () {
                      progress.value = 0;
                    }, 2000);
                  }
                }
              }
            });

          </script>
        


          <canvas id="animationChart-1"></canvas>
          <progress id="animationProgress-1" max="1" value="0" style="width: 100%"></progress>

        

          <script>
            var progress1 = document.getElementById('animationProgress-1');
            var ctxA1 = document.getElementById("animationChart-1").getContext('2d');

            var config1 = new Chart(ctxA1, {
              type: 'line',
              data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                  label: 'My First dataset',
                  borderColor: 'rgba(235,22,21, .2)',
                  backgroundColor: 'rgba(235,22,21, .5)',
                  data: [33, 16, 10, 16, 24, 3],
                }, {
                  label: 'My Second dataset ',
                  borderColor: 'rgba(99,0,125, .2)',
                  backgroundColor: 'rgba(99,0,125, .5)',
                  data: [3, 22, 3, 46, 12, 72],
                }]
              },
              options: {
                title: {
                  display: true,
                  text: 'First example of animation'
                },
                animation: {
                  duration: 2000,
                  onProgress: function (animation1) {
                    progress1.value = animation1.currentStep / animation1.numSteps;
                  },
                  onComplete: function () {
                    window.setTimeout(function () {
                      progress1.value = 0;
                    }, 1000);
                  }
                }
              }
            });

          </script>