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.

0
Sales
0
ROI
0
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" >