Charts
Bootstrap charts
Bootstrap charts are graphical representations of data. They are responsive and easy to customize.
At your disposal are eight types of charts with multiple options for customization.
If you need additional help, please read our tutorial about creating and customizing charts from scratch.
Basic usage
It's easy to get started with MDB charts.
Step 1 - add the
<canvas> element to your document:
<canvas id="myChart" style="max-width: 500px;"></canvas>
Step 2 - at the bottom of the document, below the
mdb.js script, place the code with chart settings, such as:
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
}
}]
}
}
});
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
}
}]
}
}
});
Horizontal Bar Chart
<canvas id="horizontalBar"></canvas>
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
}
}]
}
}
});
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
}
});
Bubble Chart
<canvas id="bubbleChart"></canvas>
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"
}]
}
})
Scatter Chart
<canvas id="scatterChart"></canvas>
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
}
}]
}
}
});
Chart with labels
<canvas id="labelChart"></canvas>
var ctxP = document.getElementById("labelChart").getContext('2d');
var myPieChart = new Chart(ctxP, {
plugins: [ChartDataLabels],
type: 'pie',
data: {
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
datasets: [{
data: [210, 130, 120, 160, 120],
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
}]
},
options: {
responsive: true,
legend: {
position: 'right',
labels: {
padding: 20,
boxWidth: 10
}
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return percentage;
},
color: 'white',
labels: {
title: {
font: {
size: '16'
}
}
}
}
}
}
});
Options
Charts have plenty of options that 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 that 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[] | The 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 | The 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 straight lines. 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[] | The border width of a point when hovered over. |
| pointHoverRadius | Number/Number[] | The radius of the point when hovered over. |
| 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 documentation 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). |
| backgroundColor | Style/Null | Null |
Background color of datalabels. . |
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 of the components and features are a part of the MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.
It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.
Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.
Click the button below to learn more about the MDBootstrap Pro package.
MDBootstrap ProTutorials
If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.
5 min Quick Start Full Bootstrap TutorialCompilation & Customization
To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.
If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.
Compilation & Customization tutorialMap 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
Integrations with Angular, React or Vue
Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.
About MDB Angular About MDB React About MDB VueExclusive resources
MDBootstrap is a platform for web creators and MDB packages are only a part of it.
If you sign up you'll gain free access to other useful tools & resources including:
- Community developed components & design projects
- Technical support & community forum
- CLI interface & free project hosting
- Helpful articles & news agregators
...and much more!
Don't hesitate and sign up now!
Sign up nowCharts 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:
topleftbottomright
<canvas id="barLegend"></canvas>
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
}
}
}
});
<canvas id="barLegend-1"></canvas>
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)'
}
}
}
});
Exmaple of using animation
<canvas id="animationChart"></canvas>
<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
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);
}
}
}
});
<canvas id="animationChart-1"></canvas>
<progress id="animationProgress-1" max="1" value="0" style="width: 100%"></progress>
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);
}
}
}
});