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

Import statement
Properties