Charts

Vue Bootstrap 5 Charts

MDB charts are visual representations of data. They are responsive and easy to customize. At your disposal are eight types of charts with multiple options for customization.

Note: Read the API tab to find all available options and advanced customization.

Note 2: See also advanced charts documentation to see an implementation of the advanced options.


Bar chart

You can initialize simple charts with MDBChart and passing type, data and options properties.

        
            
            <template>
              <MDBChart type="bar" :data="barChartData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const barChartData = ref({
                    labels: [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday",
                      "Saturday",
                      "Sunday"
                    ],
                    datasets: [
                      {
                        label: "Traffic",
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                      }
                    ]
                  });
                  return {
                    barChartData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const barChartData = ref({
                labels: [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday",
                  "Sunday"
                ],
                datasets: [
                  {
                    label: "Traffic",
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                  }
                ]
              });
            </script>
          
        
    

Line chart

To use our minimalistic line chart, set the type property to line.

        
            
            <template>
              <MDBChart type="line" :data="lineChartData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const lineChartData = ref({
                    labels: [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday",
                      "Saturday",
                      "Sunday"
                    ],
                    datasets: [
                      {
                        label: "Traffic",
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                      }
                    ]
                  });
                  return {
                    lineChartData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

               const lineChartData = ref({
                labels: [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday",
                  "Sunday"
                ],
                datasets: [
                  {
                    label: "Traffic",
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                  }
                ]
              });
            </script>
          
        
    

Bar chart horizontal

Change the orientation of your bar chart from vertical to horizontal by adding the indexAxis="y" and proper chart styling options.

        
            
            <template>
              <MDBChart
                type="bar"
                :data="horizontalBarChartData"
                :options="horizontalBarChartOptions"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const horizontalBarChartData = ref({
                    labels: [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday",
                      "Saturday",
                      "Sunday"
                    ],
                    datasets: [
                      {
                        label: "Traffic",
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                      }
                    ]
                  });
                  const horizontalBarChartOptions = ref({
                    indexAxis: "y",
                    scales: {
                      x: {
                        stacked: true,
                        grid: {
                          display: true,
                          drawBorder: true
                        },
                        ticks: {
                          color: "rgba(0,0,0, 0.5)"
                        }
                      },
                      y: {
                        stacked: true,
                        grid: {
                          display: false,
                          drawBorder: false
                        },
                        ticks: {
                          color: "rgba(0,0,0, 0.5)"
                        }
                      }
                    }
                  });
                  return {
                    horizontalBarChartData,
                    horizontalBarChartOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const horizontalBarChartData = ref({
                labels: [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday",
                  "Sunday"
                ],
                datasets: [
                  {
                    label: "Traffic",
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                  }
                ]
              });
              const horizontalBarChartOptions = ref({
                indexAxis: "y",
                scales: {
                  x: {
                    stacked: true,
                    grid: {
                      display: true,
                      drawBorder: true
                    },
                    ticks: {
                      color: "rgba(0,0,0, 0.5)"
                    }
                  },
                  y: {
                    stacked: true,
                    grid: {
                      display: false,
                      drawBorder: false
                    },
                    ticks: {
                      color: "rgba(0,0,0, 0.5)"
                    }
                  }
                }
              });
            </script>
          
        
    

Pie chart

A chart with the type pie splits the circle into several pieces to represent a dataset's values as an area's percentage.

        
            
            <template>
              <MDBChart type="pie" :data="pieChartData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const pieChartData = ref({
                    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                    datasets: [
                      {
                        label: 'Traffic',
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                        backgroundColor: [
                          'rgba(63, 81, 181, 0.5)',
                          'rgba(77, 182, 172, 0.5)',
                          'rgba(66, 133, 244, 0.5)',
                          'rgba(156, 39, 176, 0.5)',
                          'rgba(233, 30, 99, 0.5)',
                          'rgba(66, 73, 244, 0.4)',
                          'rgba(66, 133, 244, 0.2)',
                        ],
                      },
                    ],
                  });
                  return {
                    pieChartData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const pieChartData = ref({
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                datasets: [
                  {
                    label: 'Traffic',
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                    backgroundColor: [
                      'rgba(63, 81, 181, 0.5)',
                      'rgba(77, 182, 172, 0.5)',
                      'rgba(66, 133, 244, 0.5)',
                      'rgba(156, 39, 176, 0.5)',
                      'rgba(233, 30, 99, 0.5)',
                      'rgba(66, 73, 244, 0.4)',
                      'rgba(66, 133, 244, 0.2)',
                    ],
                  },
                ],
              });
            </script>
          
        
    

Doughnut chart

Another type of graph representing data as an area's percentage is a doughnut chart.

        
            
            <template>
              <MDBChart type="doughnut" :data="doughnutChartData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const doughnutChartData = ref({
                    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                    datasets: [
                      {
                        label: 'Traffic',
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                        backgroundColor: [
                          'rgba(63, 81, 181, 0.5)',
                          'rgba(77, 182, 172, 0.5)',
                          'rgba(66, 133, 244, 0.5)',
                          'rgba(156, 39, 176, 0.5)',
                          'rgba(233, 30, 99, 0.5)',
                          'rgba(66, 73, 244, 0.4)',
                          'rgba(66, 133, 244, 0.2)',
                        ],
                      },
                    ],
                  });
                  return {
                    doughnutChartData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const doughnutChartData = ref({
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                datasets: [
                  {
                    label: 'Traffic',
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                    backgroundColor: [
                      'rgba(63, 81, 181, 0.5)',
                      'rgba(77, 182, 172, 0.5)',
                      'rgba(66, 133, 244, 0.5)',
                      'rgba(156, 39, 176, 0.5)',
                      'rgba(233, 30, 99, 0.5)',
                      'rgba(66, 73, 244, 0.4)',
                      'rgba(66, 133, 244, 0.2)',
                    ],
                  },
                ],
              });
            </script>
          
        
    

Polar chart

Polar area graph will split the circle into pieces with equal angles and different radius.

        
            
            <template>
              <MDBChart type="polarArea" :data="polarAreaChartData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const polarAreaChartData = ref({
                    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                    datasets: [
                      {
                        label: 'Traffic',
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                        backgroundColor: [
                          'rgba(63, 81, 181, 0.5)',
                          'rgba(77, 182, 172, 0.5)',
                          'rgba(66, 133, 244, 0.5)',
                          'rgba(156, 39, 176, 0.5)',
                          'rgba(233, 30, 99, 0.5)',
                          'rgba(66, 73, 244, 0.4)',
                          'rgba(66, 133, 244, 0.2)',
                        ],
                      },
                    ],
                  });
                  return {
                    polarAreaChartData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const polarAreaChartData = ref({
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                datasets: [
                  {
                    label: 'Traffic',
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                    backgroundColor: [
                      'rgba(63, 81, 181, 0.5)',
                      'rgba(77, 182, 172, 0.5)',
                      'rgba(66, 133, 244, 0.5)',
                      'rgba(156, 39, 176, 0.5)',
                      'rgba(233, 30, 99, 0.5)',
                      'rgba(66, 73, 244, 0.4)',
                      'rgba(66, 133, 244, 0.2)',
                    ],
                  },
                ],
              });
            </script>
          
        
    

Radar chart

This type of chart will enclose the area based on a dataset's values.

        
            
            <template>
              <MDBChart type="radar" :data="radarChartData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const radarChartData = ref({
                    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                    datasets: [
                      {
                        label: 'Traffic',
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                        backgroundColor: [
                          'rgba(63, 81, 181, 0.5)',
                          'rgba(77, 182, 172, 0.5)',
                          'rgba(66, 133, 244, 0.5)',
                          'rgba(156, 39, 176, 0.5)',
                          'rgba(233, 30, 99, 0.5)',
                          'rgba(66, 73, 244, 0.4)',
                          'rgba(66, 133, 244, 0.2)',
                        ],
                      },
                    ],
                  });
                  return {
                    radarChartData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const radarChartData = ref({
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                datasets: [
                  {
                    label: 'Traffic',
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                    backgroundColor: [
                      'rgba(63, 81, 181, 0.5)',
                      'rgba(77, 182, 172, 0.5)',
                      'rgba(66, 133, 244, 0.5)',
                      'rgba(156, 39, 176, 0.5)',
                      'rgba(233, 30, 99, 0.5)',
                      'rgba(66, 73, 244, 0.4)',
                      'rgba(66, 133, 244, 0.2)',
                    ],
                  },
                ],
              });
            </script>
          
        
    

Bubble chart

This graph visualizes data in a series of "bubbles" with customized coordinates and radius.

        
            
            <template>
              <MDBChart type="bubble" :data="bubbleChartData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const bubbleChartData = ref({
                    datasets: [
                      {
                        label: 'John',
                        data: [
                          {
                            x: 3,
                            y: 7,
                            r: 10,
                          },
                        ],
                        backgroundColor: '#ff6384',
                        hoverBackgroundColor: '#ff6384',
                      },
                      {
                        label: 'Peter',
                        data: [
                          {
                            x: 5,
                            y: 7,
                            r: 10,
                          },
                        ],
                        backgroundColor: '#44e4ee',
                        hoverBackgroundColor: '#44e4ee',
                      },
                      {
                        label: 'Donald',
                        data: [
                          {
                            x: 7,
                            y: 7,
                            r: 10,
                          },
                        ],
                        backgroundColor: '#62088A',
                        hoverBackgroundColor: '#62088A',
                      },
                    ],
                  });
                  return {
                    bubbleChartData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const bubbleChartData = ref({
                datasets: [
                  {
                    label: 'John',
                    data: [
                      {
                        x: 3,
                        y: 7,
                        r: 10,
                      },
                    ],
                    backgroundColor: '#ff6384',
                    hoverBackgroundColor: '#ff6384',
                  },
                  {
                    label: 'Peter',
                    data: [
                      {
                        x: 5,
                        y: 7,
                        r: 10,
                      },
                    ],
                    backgroundColor: '#44e4ee',
                    hoverBackgroundColor: '#44e4ee',
                  },
                  {
                    label: 'Donald',
                    data: [
                      {
                        x: 7,
                        y: 7,
                        r: 10,
                      },
                    ],
                    backgroundColor: '#62088A',
                    hoverBackgroundColor: '#62088A',
                  },
                ],
              });
            </script>
          
        
    

Scatter chart

Use this chart to represent your data as a series of points with x and y coordinates.

        
            
            <template>
              <MDBChart
                type="scatter"
                :data="scatterChartData"
                :options="scatterChartOptions"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const scatterChartData = ref({
                    datasets: [
                      {
                        borderColor: "#4285F4",
                        backgroundColor: "rgba(66, 133, 244, 0.5)",
                        label: "V(node2)",
                        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.0,
                            y: -1.445
                          },
                          {
                            x: 12.6,
                            y: -2.11
                          },
                          {
                            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.0,
                            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
                          }
                        ]
                      }
                    ]
                  });
                  const scatterChartOptions = ref({
                    plugins: {
                      title: {
                        display: true,
                        text: "Scatter Chart - Logarithmic X-Axis"
                      }
                    },
                    scales: {
                      x: {
                        type: "logarithmic",
                        position: "bottom",
                        ticks: {
                          callback: function(tick) {
                            let remain = tick / Math.pow(10, Math.floor(Math.log10(tick)));
                            if (remain === 1 || remain === 2 || remain === 5) {
                              return tick.toString() + "Hz";
                            }
                            return "";
                          }
                        },
                        title: {
                          text: "Frequency",
                          display: true
                        }
                      },
                      y: {
                        type: "linear",
                        ticks: {
                          callback: function(tick) {
                            return tick.toString() + "dB";
                          }
                        },
                        title: {
                          text: "Voltage",
                          display: true
                        }
                      }
                    }
                  });
                  return {
                    scatterChartData,
                    scatterChartOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
                  
              const scatterChartData = ref({
                datasets: [
                  {
                    borderColor: "#4285F4",
                    backgroundColor: "rgba(66, 133, 244, 0.5)",
                    label: "V(node2)",
                    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.0,
                        y: -1.445
                      },
                      {
                        x: 12.6,
                        y: -2.11
                      },
                      {
                        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.0,
                        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
                      }
                    ]
                  }
                ]
              });
              const scatterChartOptions = ref({
                plugins: {
                  title: {
                    display: true,
                    text: "Scatter Chart - Logarithmic X-Axis"
                  }
                },
                scales: {
                  x: {
                    type: "logarithmic",
                    position: "bottom",
                    ticks: {
                      callback: function(tick) {
                        let remain = tick / Math.pow(10, Math.floor(Math.log10(tick)));
                        if (remain === 1 || remain === 2 || remain === 5) {
                          return tick.toString() + "Hz";
                        }
                        return "";
                      }
                    },
                    title: {
                      text: "Frequency",
                      display: true
                    }
                  },
                  y: {
                    type: "linear",
                    ticks: {
                      callback: function(tick: number) {
                        return tick.toString() + "dB";
                      }
                    },
                    title: {
                      text: "Voltage",
                      display: true
                    }
                  }
                }
              });
            </script>
          
        
    

Bar chart with custom options

MDB provides default options for each chart - you can easily change that by passing an object with your custom options to the Chart component

Note: Read API tab to learn more about available options.

        
            
            <template>
              <MDBChart
                type="bar"
                :data="customBarChartData"
                :options="customBarChartOptions"
                canvasClass="col-sm-12 col-md-10 col-xl-8 mb-4"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const customBarChartData = ref({
                    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                    datasets: [
                      {
                        label: 'Traffic',
                        data: [30, 15, 62, 65, 61, 6],
                        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,
                      },
                    ],
                  });
                  const customBarChartOptions = ref({
                    scales: {
                      x: {
                        ticks: {
                          color: "#4285F4"
                        }
                      },
                      y: {
                        ticks: {
                          color: "#f44242"
                        }
                      }
                    },
                    plugins: {
                      legend: {
                        labels: {
                          color: "green",
                          position: 'top',
                        },
                      },
                    },
                  });
                  return {
                    customBarChartData,
                    customBarChartOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const customBarChartData = ref({
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                datasets: [
                  {
                    label: 'Traffic',
                    data: [30, 15, 62, 65, 61, 6],
                    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,
                  },
                ],
              });
              const customBarChartOptions = ref({
                scales: {
                  x: {
                    ticks: {
                      color: "#4285F4"
                    }
                  },
                  y: {
                    ticks: {
                      color: "#f44242"
                    }
                  }
                },
                plugins: {
                  legend: {
                    labels: {
                      color: "green",
                      position: 'top',
                    },
                  },
                },
              });
            </script>
          
        
    

Bar chart with custom tooltip

Set custom text format inside a tooltip by using plugins option.

        
            
        <template>
          <MDBChart
            type="bar"
            :data="dataBarCustomTooltip"
            :options="optionsBarCustomTooltip"
            canvasClass="col-sm-12 col-md-10 col-xl-8 mb-4"
          />
        </template>
      
        
    
        
            
        <script>
          import { MDBChart } from "mdb-vue-ui-kit";
          import { ref } from "vue";
          export default {
            components: {
              MDBChart
            },
            setup() {

            const dataBarCustomTooltip = {
              labels: ["January", "February", "March", "April", "May", "June", "July"],
              datasets: [
                {
                  label: "Traffic",
                  data: [30, 15, 62, 65, 61, 65, 40],
                },
              ],
            };

            const optionsBarCustomTooltip = {
              plugins: {
                tooltip: {
                  callbacks: {
                    label: function (context) {
                      let label = context.dataset.label || "";
                      label = `${label}: ${context.formattedValue} users`;
                      return label;
                    },
                  },
                },
              },
            };
              return {
                dataBarCustomTooltip,
                optionsBarCustomTooltip
              };
            }
          };
        </script>
      
        
    
        
            
        <script setup lang="ts">
          import { MDBChart } from "mdb-vue-ui-kit";
          import { ref } from "vue";

          const dataBarCustomTooltip = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
              {
                label: "Traffic",
                data: [30, 15, 62, 65, 61, 65, 40],
              },
            ],
          };

          const optionsBarCustomTooltip = {
            plugins: {
              tooltip: {
                callbacks: {
                  label: function (context) {
                    let label = context.dataset.label || "";
                    label = `${label}: ${context.formattedValue} users`;
                    return label;
                  },
                },
              },
            },
          };
        </script>
      
        
    

Charts - API


Import

        
            
          <script>
            import {
              MDBChart
            } from 'mdb-vue-ui-kit';
          </script>
        
        
    

Properties

Name Type Default Description
data Array Chart dataset
options Array Chart options array

Options

Line options

The line chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.

Name Type Description
label String The label for the dataset that appears in the legend and tooltips.
indexAxis String The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines.
xAxisID String The ID of the x-axis to plot this dataset on. If not specified, this defaults to the ID of the first found x-axis
yAxisID String The ID of the y-axis to plot this dataset on. If not specified, this defaults to the ID of the first found y-axis.
backgroundColor Color The fill color under the line.
borderColor Color The color of the line.
borderWidth Number The width of the line in pixels.
borderDash Number The length and spacing of dashes.
borderDashOffset Number Offset for line dashes.
borderCapStyle String Cap style of the line.
borderJoinStyle String Line joint style.
clip Number | Object How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
cubicInterpolationMode String The algorithm used to interpolate a smooth curve from the discrete data points.
fill Boolean/String How to fill the area under the line.
order Number The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
pointBackgroundColor Color/Color[ ] The fill color for points.
pointBorderColor Color/Color[ ] The border color for points.
pointBorderWidth Number/Number[ ] The width of the point border in pixels.
pointRadius Number/Number[ ] The radius of the point shape. If set to 0, the point is not rendered.
pointStyle String/String[ ]/Image/Image[ ] Style of the point.
pointRotation Number/Number[ ] The rotation of the point in degrees.
pointHitRadius Number/Number[ ] The pixel size of the non-displayed point that reacts to mouse events.
pointHoverBackgroundColor Color/Color[ ] Point background color when hovered.
pointHoverBorderColor Color/Color[ ] Point border color when hovered.
pointHoverBorderWidth Number/Number[ ] The border width of a point when hovered over.
pointHoverRadius Number/Number[ ] The radius of the point when hovered over.
showLine Boolean If false, the line is not drawn for this dataset.
spanGaps Boolean If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line
stack String The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Defaults to 'line'.
stepped Boolean/String If the line is shown as a stepped line.
tension Number Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.

Bar options

The bar chart allows specifying several properties for each dataset. Besides, some of them can be defined as an array - this way the first value applies to the first bar, the second to the second bar, etc.

Name Type Description
label String The label for the dataset which appears in the legend and tooltips.
xAxisID String The ID of the x-axis to plot this dataset on. If not specified, this defaults to the ID of the first found x-axis
yAxisID String The ID of the y-axis to plot this dataset on. If not specified, this defaults to the ID of the first found y-axis.
indexAxis String The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines.
base Number Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value.
backgroundColor Color/Color[ ] The fill color of the bar.
barPercentage Number/Number[ ] Define percent of the available width each bar should take within its category width.
borderColor Color/Color[ ] The color of the bar border.
borderWidth Number/Number[ ] The stroke width of the bar in pixels.
borderRadius Number/Number[ ] The border radius of the bar in pixels.
borderSkipped String Which edge to skip drawing the border for.
clip Number | Object How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
grouped Boolean Defines whether the bars should be grouped on index axis. When true, all the datasets at same index value will be placed next to each other centering on that index value. When false, each bar is placed on its actual index-axis value.
hoverBackgroundColor Color/Color[ ] The fill colour of the bars when hovered.
hoverBorderColor Color/Color[ ] The stroke colour of the bars when hovered.
hoverBorderWidth Number/Number[ ] The stroke width of the bars when hovered.
hoverBorderRadius Number/Number[ ] The border radius of the bars when hovered.
minBarLength Number/Number[ ] Sets minimum lenght of the bar in pixels.
order Number The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
pointStyle String | Image Style of the point on the legend. Defaults to 'circle'
skipNull Boolean If true, null or undefined values will not be used for spacing calculations when determining bar size.
stack String The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Defaults to 'line'.

Radar chart

The radar chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.

Name Type Description
label String The label for the dataset which appears in the legend and tooltips.
backgroundColor Color The fill color under the line.
borderColor Color The color of the line.
borderWidth Number The width of the line in pixels.
borderDash Number[ ] Length and spacing of dashes. S
borderDashOffset Number Offset for line dashes.
borderCapStyle String Cap style of the line
borderJoinStyle String Line joint style
clip Number | Object How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
fill Boolean/String How to fill the area under the line.
order Number The drawing order of dataset.
pointBackgroundColor Color/Color[ ] The fill color for points.
pointBorderColor Color/Color[ ] The border color for points.
pointBorderWidth Number/Number[ ] The width of the point border in pixels.
pointRadius Number/Number[ ] TThe radius of the point shape. If set to 0, the point is not rendered.
pointRotation Number/Number[ ] The rotation of the point in degrees.
pointStyle String/String[ ]/Image/Image[ ] Style of the point.
pointHitRadius Number/Number[ ] The pixel size of the non-displayed point that reacts to mouse events.
pointHoverBackgroundColor Color/Color[ ] Point background color when hovered.
pointHoverBorderColor Color/Color[ ] Point border color when hovered.
pointHoverBorderWidth Number/Number[ ] Border width of point when hovered.
pointHoverRadius Number/Number[ ] The radius of the point when hovered.
spanGaps Boolean If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line
tension Number Bezier curve tension of the line. Set to 0 to draw straightlines.

Doughnut and Pie

In Doughnut and Pie charts passing an array of values to an option will apply each of them to a corresponding entry in a dataset.

Name Type Description
backgroundColor Color[ ] The fill color of the arcs in the dataset.
borderAlign String When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap.
borderColor Color[ ] The border color of the arcs in the dataset.
borderRadius Number/Number[ ] The border radius of the arcs in pixels.
borderWidth Number[ ] The border width of the arcs in the dataset.
circumference Number[ ] Per-dataset override for the sweep that the arcs cover.
clip Number | Object How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
hoverBackgroundColor Color[ ] The fill colour of the arcs when hovered.
hoverBorderColor Color[ ] The stroke colour of the arcs when hovered.
hoverBorderWidth Number[ ] The stroke width of the arcs when hovered.
hoverOffset Number[ ] The offset of the arcs when hovered.
offset Number[ ] The offset of the arcs in pixels
rotation Number[ ] Per-dataset override for the starting angle to draw arcs from
weight Number[ ] The relative thickness of the dataset.

Polar Area chart

Polar area charts are similar to pie charts, but each segment has the same angle and differs in the radius (depending on the value).

Name Type Description
backgroundColor Color The fill color of the arcs in the dataset.
borderAlign String When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all the borders do not overlap.
borderColor Color The border color of the arcs in the dataset.
borderWidth number The border width of the arcs in the dataset.
clip Number | Object How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
hoverBackgroundColor Color The fill colour of the arcs when hovered.
hoverBorderColor Color The stroke colour of the arcs when hovered.
hoverBorderWidth number The stroke width of the arcs when hovered.

Bubble chart

A bubble chart displays a series of points with x and y coordinates. The z coordinate determines the size of each bubble.

Name Type Description
backgroundColor Color bubble background color
borderColor Color bubble border color
borderWidth Number bubble border width (in pixels)
clip Number | Object How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
hoverBackgroundColor Color bubble background color when hovered
hoverBorderColor Color bubble border color when hovered
hoverBorderWidth Number bubble border width when hovered (in pixels)
hoverRadius Number bubble additional radius when hovered (in pixels)
hitRadius Number bubble additional radius for hit detection (in pixels).
label String The label for the dataset which appears in the legend and tooltips.
order Number The drawing order of dataset.
pointStyle String bubble shape style.
rotation Number bubble rotation (in degrees).
radius Number bubble radius (in pixels).

Scatter chart

Scatter chart displays the dataset as a series of points with z and y coordinates.

The scatter chart supports the same properties as the line chart.


Legend

Name Type Default Description
display Boolean true showing legend
position String 'top' Position of the legend.
align String 'center' Alignement position of the legend
maxHeight Number Maximum height of the legend in pixels
maxWidth Number Maximum width of the legend in pixels
fullSize Boolean true Marks that this box should take the full width'length of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
onClick Function

A callback that is called when a click event is registered on a label item

onHover Function

A callback that is called when a 'mousemove' event is registered on top of a label item

onLeave Function

A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item.

reverse Boolean false

Legend will show datasets in reverse order.

labels Object

See documentation about labels in table below.

rtl Boolean

Set true for rendering the legends from right to left.

textDirection String

This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas

title Object

See documentation about label's title


Legend Label Configuration

Name Type Default Description
boxWidth Number 40 width of coloured box
boxHeight Number font.size Height of the coloured box
color Color Color of label and the strikethrough.
font Font Takes all font related options: 'family', 'size', 'style', 'weight', 'lineHeight'
padding Number 10

Padding between rows of colored boxes. .

generateLabels Function

Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box.

filter Function null

Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data.

sort Function null

Sorts legend items. Receives 3 parameters, two Legend Items and the chart data.

pointStyle

If specified, this style of point is used for the legend. Only used if usePointStyle is true.

usePointStyle Boolean false

Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).

backgroundColor Style/Null Null

Background color of datalabels. .


Legend Title Configuration

Name Type Default Description
color Color Color of text
display Boolean false Is the legend title displayed
font Font Takes all font related options: 'family', 'size', 'style', 'weight', 'lineHeight'
padding Padding 0

Padding around the title.

text String

The string title


Animation

You can customize the chart's animation with the following options:

Name Type Default Description
duration Number 1000 The number of milliseconds an animation takes
easing String easeOutQuart Easing function to use.
delay Number undefined Delay before starting the animations.
loop Boolean undefined

If set to true, the animations loop endlessly.


Easing

Available options:

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce