Rate this 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",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            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",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
          },
          {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            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>

      

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