Rate these docs

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" >