Vue Bootstrap Charts
Vue Charts - Bootstrap 4 & Material Design
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
<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
<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
<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
<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
<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
<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
<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
<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
<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
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
import { mdbLineChart } from 'mdbvue';
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" > |