Vue Bootstrap Charts
Vue Charts - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Vue Bootstrap charts are graphical representations of data. They are responsive and easy to customize.
At your disposal are 6 types of charts and multiple options for customization.
Line chart
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
<template>
<mdb-container>
<mdb-line-chart
:data="lineChartData"
:options="lineChartOptions"
:width="600"
:height="300">
</mdb-line-chart>
</mdb-container>
</template>
<script>
import { mdbLineChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbLineChart,
mdbContainer
},
data() {
return {
lineChartData: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255, 99, 132, 0.1)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 0.7,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
backgroundColor: "rgba(151,187,205,0.2)",
borderColor: "rgba(151,187,205,1)",
borderWidth: 0.8,
data: [28, 48, 40, 19, 86, 27, 90]
}
]
},
lineChartOptions: {
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
}
}],
yAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
}
}]
}
}
};
}
}
</script>
Radar chart
A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.
<template>
<mdb-container>
<mdb-radar-chart
:data="radarChartData"
:options="radarChartOptions"
:width="600"
:height="300">
</mdb-radar-chart>
</mdb-container>
</template>
<script>
import { mdbRadarChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbRadarChart,
mdbContainer
},
data() {
return {
radarChartData: {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255, 99, 132, 0.1)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 0.7,
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 0.7,
data: [28, 48, 40, 19, 96, 27, 100]
}
]
},
radarChartOptions: {
responsive: false,
maintainAspectRatio: false
}
};
}
}
</script>
Bar chart
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
<template>
<mdb-container>
<mdb-bar-chart
:data="barChartData"
:options="barChartOptions"
:width="600"
:height="300">
</mdb-bar-chart>
</mdb-container>
</template>
<script>
import { mdbBarChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbBarChart,
mdbContainer
},
data() {
return {
barChartData: {
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,
}]
},
barChartOptions: {
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
barPercentage: 1,
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
}
}],
yAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
}
}]
}
}
};
}
}
</script>
Horizontal Bar chart
Use a horizontal bar chart when you're presenting a long list of results that would become crowded if displayed vertically. Options specified on the x-axis in a bar chart, are applied to the y-axis in a horizontal bar chart.
<template>
<mdb-container>
<mdb-horizontal-bar-chart
:data="horizontalBarChartData"
:options="horizontalBarChartOptions"
:width="600"
:height="300">
</mdb-horizontal-bar-chart>
</mdb-container>
</template>
<script>
import { mdbHorizontalBarChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbHorizontalBarChart,
mdbContainer
},
data() {
return {
horizontalBarChartData: {
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,
}]
},
horizontalBarChartOptions: {
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
barPercentage: 1,
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)",
}
}],
yAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)",
}
}],
}
}
};
}
}
</script>
Scatter chart
Stacked Bar Charts are plotted when multiple Bar Charts with aligned x values are plotted on same axis. Multiple sets of data are represented by one Bar.
<template>
<mdb-container>
<mdb-scatter-chart
:data="scatterChartData"
:options="scatterChartOptions"
:width="600"
:height="300">
</mdb-scatter-chart>
</mdb-container>
</template>
<script>
import { mdbScatterChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbScatterChart,
mdbContainer
},
data() {
return {
scatterChartData: {
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255, 99, 132, 0.1)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 0.7,
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,
}]
}
]
},
scatterChartOptions: {
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)",
}
}],
yAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)",
}
}],
}
},
};
}
}
</script>
Bubble chart
Stacked Bar Charts are plotted when multiple Bar Charts with aligned x values are plotted on same axis. Multiple sets of data are represented by one Bar.
<template>
<mdb-container>
<mdb-bubble-chart
:data="bubbleChartData"
:options="bubbleChartOptions"
:width="600"
:height="300">
</mdb-bubble-chart>
</mdb-container>
</template>
<script>
import { mdbBubbleChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbBubbleChart,
mdbContainer
},
data() {
return {
bubbleChartData: {
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255, 99, 132, 0.1)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 0.7,
data: [{
x: 5,
y: 7,
r: 7
}]
},
{
label: "My Second dataset",
backgroundColor: "rgba(151,187,205,0.2)",
borderColor: "rgba(151,187,205,1)",
borderWidth: 0.8,
data: [{
x: 15,
y: 2,
r: 6
}]
},
{
label: "My Thrid dataset",
backgroundColor: "rgba(255, 206, 86, 0.2)",
borderColor: "rgba(255, 206, 86, 1)",
borderWidth: 0.8,
data: [{
x: 10,
y: 4,
r: 14
}]
}
]
},
bubbleChartOptions: {
responsive: false,
maintainAspectRatio: false,
scales: {
xAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)",
}
}],
yAxes: [{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)",
}
}],
}
},
};
}
}
</script>
Polar Area Chart
Polar area charts segment has the same angle - the radius of the segment differs depending on the value.
<template>
<mdb-container>
<mdb-polar-chart
:data="polarChartData"
:options="polarChartOptions"
:width="600"
:height="300">
</mdb-polar-chart>
</mdb-container>
</template>
<script>
import { mdbPolarChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbPolarChart,
mdbContainer
},
data() {
return {
polarChartData: {
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
datasets: [
{
data: [300, 50, 100, 40, 120],
backgroundColor: ["rgba(247, 70, 74, 0.3)", "rgba(70, 191, 189, 0.3)", "rgba(253, 180, 92, 0.3)", "rgba(148, 159, 177, 0.3)", "rgba(77, 83, 96, 0.3)"],
hoverBackgroundColor: ["rgba(247, 70, 74, 0.4)", "rgba(70, 191, 189, 0.4)", "rgba(253, 180, 92, 0.4)", "rgba(148, 159, 177, 0.4)", "rgba(77, 83, 96, 0.4)"]
}
]
},
polarChartOptions: {
responsive: false,
maintainAspectRatio: false
}
};
}
}
</script>
Pie Chart
A pie chart is a circular chart divided into sectors, each sector (and consequently its central angle and area), is proportional to the quantity it represents. Together, the sectors create a full disk.
<template>
<mdb-container>
<mdb-pie-chart
:data="pieChartData"
:options="pieChartOptions"
:width="600"
:height="300">
</mdb-pie-chart>
</mdb-container>
</template>
<script>
import { mdbPieChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbPieChart,
mdbContainer
},
data() {
return {
pieChartData: {
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"]
}
]
},
pieChartOptions: {
responsive: false,
maintainAspectRatio: false
}
};
}
}
</script>
Doughnut Chart
The doughnut 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 colours of the dataset's arcs are generally set this way.
<template>
<mdb-container>
<mdb-doughnut-chart
:data="doughnutChartData"
:options="doughnutChartOptions"
:width="600"
:height="300">
</mdb-doughnut-chart>
</mdb-container>
</template>
<script>
import { mdbDoughnutChart, mdbContainer } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbDoughnutChart,
mdbContainer
},
data() {
return {
doughnutChartData: {
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"]
}
]
},
doughnutChartOptions: {
responsive: false,
maintainAspectRatio: false
}
};
}
}
</script>
Minimalist charts MDB Pro component
This shows easyPieChart with percent sign shown for each span. I'd like to hide the percent sign from two of the spans.
Sales
ROI
Conversion
<template>
<mdb-container>
<mdb-row>
<mdb-col md="4">
<div class="d-flex justify-content-center">
<mdb-simple-chart :value="value" color="#4CAF50">
{{value}}%
</mdb-simple-chart>
</div>
<div class="d-flex justify-content-center mt-3">
<mdb-badge color="green">Sales <mdb-icon icon="arrow-circle-up"/></mdb-badge>
</div>
</mdb-col>
<mdb-col md="4">
<div class="d-flex justify-content-center">
<mdb-simple-chart :value="value2" color="#F44336">
{{value2}}%
</mdb-simple-chart>
</div>
<div class="d-flex justify-content-center mt-3">
<mdb-badge color="red">ROI <mdb-icon icon="arrow-circle-down"/></mdb-badge>
</div>
</mdb-col>
<mdb-col md="4">
<div class="d-flex justify-content-center">
<mdb-simple-chart :value="value3" color="#9E9E9E">
{{value3}}%
</mdb-simple-chart>
</div>
<div class="d-flex justify-content-center mt-3">
<mdb-badge color="grey">Conversion <mdb-icon icon="minus-square"/></mdb-badge>
</div>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbRow, mdbCol, mdbSimpleChart, mdbBadge, mdbIcon } from 'mdbvue';
export default {
name: 'ChartPage',
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbSimpleChart,
mdbBadge,
mdbIcon
},
data() {
return {
value: 56,
value2: 76,
value3: 100
};
}
}
</script>
Charts - API
In this section you will find advanced information about the Charts component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
<script>
import { mdbLineChart } from 'mdbvue';
</script>
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
data |
Array | |
Chart dataset | <mdb-line-chart :data="..." > |
options |
Array | |
Chart options array | <mdb-line-chart :options="..." > |
height |
Number | 0 |
Chart height | <mdb-line-chart :height="300" > |
width |
Number | 0 |
Chart width | <mdb-line-chart :width="600" > |