Charts advanced usage

Vue Bootstrap 5 Charts advanced usage

This documentation provides examples of advanced chart usage.

Note: Read the API tab in the basic chart docs to find all available options and advanced customization

Options

In most cases, working with advanced charts is related to the handling of options.

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

        
            
            <template>
              <MDBChart
                type="bar"
                :data="chartOptionsData"
                :options="chartOptionsOptions"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const chartOptionsData = 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 chartOptionsOptions = ref({
                    scales: {
                      x: {
                        ticks: {
                          color: "#4285F4"
                        }
                      },
                      y: {
                        ticks: {
                          color: "#f44242"
                        }
                      }
                    }
                  });
                  return {
                    chartOptionsData,
                    chartOptionsOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const chartOptionsData = 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 chartOptionsOptions = ref({
                scales: {
                  x: {
                    ticks: {
                      color: "#4285F4"
                    }
                  },
                  y: {
                    ticks: {
                      color: "#f44242"
                    }
                  }
                }
              });
            </script>

Mixed

With MDB it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset. 

        
            
            <template>
              <MDBChart type="bar" :data="chartMixedData" />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const chartMixedData = ref({
                    labels: [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday",
                      "Saturday",
                      "Sunday "
                    ],
                    datasets: [
                      // First dataset (bar)
                      {
                        label: "Impressions",
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                        order: 2
                      },
                      // Second dataset (line)
                      {
                        label: "Impressions (absolute top) %",
                        data: [211, 2543, 2745, 3123, 2765, 1485, 587],
                        type: "line",
                        order: 1,
                        backgroundColor: "rgba(66, 133, 244, 0.0)",
                        borderColor: "#94DFD7",
                        borderWidth: 2,
                        pointBorderColor: "#94DFD7",
                        pointBackgroundColor: "#94DFD7",
                        lineTension: 0.0
                      }
                    ]
                  });
                  return {
                    chartMixedData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const chartMixedData = ref({
                labels: [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday",
                  "Sunday "
                ],
                datasets: [
                  // First dataset (bar)
                  {
                    label: "Impressions",
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                    order: 2
                  },
                  // Second dataset (line)
                  {
                    label: "Impressions (absolute top) %",
                    data: [211, 2543, 2745, 3123, 2765, 1485, 587],
                    type: "line",
                    order: 1,
                    backgroundColor: "rgba(66, 133, 244, 0.0)",
                    borderColor: "#94DFD7",
                    borderWidth: 2,
                    pointBorderColor: "#94DFD7",
                    pointBackgroundColor: "#94DFD7",
                    lineTension: 0.0
                  }
                ]
              });
            </script>

Data labels

Add datalabels property to display values directly on a graph. 

        
            
            <template>
              <MDBChart
                type="pie"
                :data="dataLabelsData"
                :options="dataLabelsOptions"
                datalabels
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const dataLabelsData = ref({
                    labels: ["January", "February", "March", "April", "May"],
                    datasets: [
                      {
                        label: "Traffic",
                        data: [30, 45, 62, 65, 61],
                        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)"
                        ]
                      }
                    ]
                  });
                  const dataLabelsOptions = {
                    plugins: {
                      datalabels: {
                        formatter: value => {
                          let sum = 0;
                          // Assign the data to the variable and format it according to your needs
                          let dataArr = dataLabelsData.value.datasets[0].data;
                          dataArr.map(data => {
                            sum += data;
                          });
                          let percentage = ((value * 100) / sum).toFixed(2) + "%";
                          return percentage;
                        },
                        color: "white",
                        labels: {
                          title: {
                            font: {
                              size: "14"
                            }
                          }
                        }
                      }
                    }
                  };
                  return {
                    dataLabelsData,
                    dataLabelsOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const dataLabelsData = ref({
                labels: ["January", "February", "March", "April", "May"],
                datasets: [
                  {
                    label: "Traffic",
                    data: [30, 45, 62, 65, 61],
                    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)"
                    ]
                  }
                ]
              });
              const dataLabelsOptions = {
                plugins: {
                  datalabels: {
                    formatter: value => {
                      let sum = 0;
                      // Assign the data to the variable and format it according to your needs
                      let dataArr = dataLabelsData.value.datasets[0].data;
                      dataArr.map(data => {
                        sum += data;
                      });
                      let percentage = ((value * 100) / sum).toFixed(2) + "%";
                      return percentage;
                    },
                    color: "white",
                    labels: {
                      title: {
                        font: {
                          size: "14"
                        }
                      }
                    }
                  }
                }
              };
            </script>

Double Y axis

In the example below we created chart with double Y axis with 2 datasets, each one with completely different data range.

Such a construction requires a scale adjustment, so the left axis is assigned and adjusted to the first dataset, and the right axis to the second dataset. 

        
            
            <template>
              <MDBChart
                type="bar"
                :data="doubleYAxisData"
                :options="doubleYAxisOptions"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const doubleYAxisData = ref({
                    labels: [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday",
                      "Saturday",
                      "Sunday "
                    ],
                    datasets: [
                      {
                        label: "Impressions",
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                        order: 1,
                        yAxisID: "y"
                      },
                      {
                        label: "Impressions (absolute top) %",
                        yAxisID: "y2",
                        data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],
                        type: "line",
                        order: 0,
                        backgroundColor: "rgba(66, 133, 244, 0.0)",
                        borderColor: "#94DFD7",
                        borderWidth: 2,
                        pointBorderColor: "#94DFD7",
                        pointBackgroundColor: "#94DFD7",
                        lineTension: 0.0
                      }
                    ]
                  });
                  const doubleYAxisOptions = ref({
                    scales: {
                      y1: {
                        stacked: false,
                        position: "left",
                        grid: {
                          drawOnChartArea: false,
                          drawBorder: false,
                          drawTicks: false
                        },
                        ticks: {
                          display: false
                        }
                      },
                      y2: {
                        stacked: false,
                        position: "right",
                        grid: {
                          drawOnChartArea: false
                        },
                        ticks: {
                          beginAtZero: true
                        }
                      }
                    }
                  });
                  return {
                    doubleYAxisData,
                    doubleYAxisOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const doubleYAxisData = ref({
                labels: [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday",
                  "Sunday "
                ],
                datasets: [
                  {
                    label: "Impressions",
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                    order: 1,
                    yAxisID: "y"
                  },
                  {
                    label: "Impressions (absolute top) %",
                    yAxisID: "y2",
                    data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],
                    type: "line",
                    order: 0,
                    backgroundColor: "rgba(66, 133, 244, 0.0)",
                    borderColor: "#94DFD7",
                    borderWidth: 2,
                    pointBorderColor: "#94DFD7",
                    pointBackgroundColor: "#94DFD7",
                    lineTension: 0.0
                  }
                ]
              });
              const doubleYAxisOptions = ref({
                scales: {
                  y1: {
                    stacked: false,
                    position: "left",
                    grid: {
                      drawOnChartArea: false,
                      drawBorder: false,
                      drawTicks: false
                    },
                    ticks: {
                      display: false
                    }
                  },
                  y2: {
                    stacked: false,
                    position: "right",
                    grid: {
                      drawOnChartArea: false
                    },
                    ticks: {
                      beginAtZero: true
                    }
                  }
                }
              });
            </script>

Funnel

Example of horizontal bar chart with custom options and labels formatting (calculating integers numbers into percentages).

This data visualization is often used to visualize the flow of the website traffic.

        
            
            <template>
              <MDBChart
                type="bar"
                :data="funnelChartData"
                :options="funnelChartOptions"
                datalabels
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const funnelChartData = ref({
                    labels: ["Product views", "Checkout", "Purchases"],
                    datasets: [
                      {
                        data: [2112, 343, 45],
                        barPercentage: 1.24
                      }
                    ]
                  });
                  // Options
                  const funnelChartOptions = ref({
                    indexAxis: "y",
                    scales: {
                      x: {
                        gridLines: {
                          offsetGridLines: true
                        }
                      }
                    },
                    plugins: {
                      legend: {
                        display: false
                      },
                      datalabels: {
                        formatter: value => {
                          let sum = 0;
                          let dataArr = funnelChartData.value.datasets[0].data;
                          dataArr.map(data => {
                            sum += data;
                          });
                          let percentage = ((value * 100) / sum).toFixed(2) + "%";
                          return percentage;
                        },
                        color: "#4f4f4f",
                        labels: {
                          title: {
                            font: {
                              size: "13"
                            },
                            anchor: "end",
                            align: "right"
                          }
                        }
                      }
                    }
                  });
                  return {
                    funnelChartData,
                    funnelChartOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const funnelChartData = ref({
                labels: ["Product views", "Checkout", "Purchases"],
                datasets: [
                  {
                    data: [2112, 343, 45],
                    barPercentage: 1.24
                  }
                ]
              });
              // Options
              const funnelChartOptions = ref({
                indexAxis: "y",
                scales: {
                  x: {
                    gridLines: {
                      offsetGridLines: true
                    }
                  }
                },
                plugins: {
                  legend: {
                    display: false
                  },
                  datalabels: {
                    formatter: value => {
                      let sum = 0;
                      let dataArr = funnelChartData.value.datasets[0].data;
                      dataArr.map(data => {
                        sum += data;
                      });
                      let percentage = ((value * 100) / sum).toFixed(2) + "%";
                      return percentage;
                    },
                    color: "#4f4f4f",
                    labels: {
                      title: {
                        font: {
                          size: "13"
                        },
                        anchor: "end",
                        align: "right"
                      }
                    }
                  }
                }
              });
            </script>

Formatting values on the Y axes

In the example below we simply add "$" before each value on the Y axis.

        
            
            <template>
              <MDBChart
                type="bar"
                :data="formattingValueData"
                :options="formattingValueOptions"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const formattingValueData = ref({
                    labels: [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday",
                      "Saturday",
                      "Sunday "
                    ],
                    datasets: [
                      {
                        label: "Sales",
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                      }
                    ]
                  });
                  // Options
                  const formattingValueOptions = ref({
                    scales: {
                      y: {
                        ticks: {
                          callback: function(value) {
                            return "$" + value;
                          }
                        }
                      }
                    }
                  });
                  return {
                    formattingValueData,
                    formattingValueOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const formattingValueData = ref({
                labels: [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday",
                  "Sunday "
                ],
                datasets: [
                  {
                    label: "Sales",
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                  }
                ]
              });
              // Options
              const formattingValueOptions = ref({
                scales: {
                  y: {
                    ticks: {
                      callback: function(value) {
                        return "$" + value;
                      }
                    }
                  }
                }
              });
            </script>

Formatting values in the tooltips

In the example below we simply add "$" before each value displayed in the tooltips.

Hover the line of the chart to see the tooltip.

        
            
            <template>
              <MDBChart
                type="line"
                :data="formattingTooltipData"
                :options="formattingTooltipOptions"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const formattingTooltipData = ref({
                    labels: [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday",
                      "Saturday",
                      "Sunday "
                    ],
                    datasets: [
                      {
                        label: "Sales",
                        data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                      }
                    ]
                  });
                  // Options
                  const formattingTooltipOptions = ref({
                    plugins: {
                      tooltip: {
                        callbacks: {
                          label: function(value) {
                            return `$ ${value.parsed.y}`;
                          }
                        }
                      }
                    }
                  });
                  return {
                    formattingTooltipData,
                    formattingTooltipOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const formattingTooltipData = ref({
                labels: [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday",
                  "Sunday "
                ],
                datasets: [
                  {
                    label: "Sales",
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
                  }
                ]
              });
              // Options
              const formattingTooltipOptions = ref({
                plugins: {
                  tooltip: {
                    callbacks: {
                      label: function(value) {
                        return `$ ${value.parsed.y}`;
                      }
                    }
                  }
                }
              });
            </script>

Double datasets in a bar chart

Example of the double datasets in a bar chart.

        
            
            <template>
              <MDBChart
                type="bar"
                :data="doubleDatasetsData"
                :options="doubleDatasetsOptions"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const doubleDatasetsData = ref({
                    labels: ["Desktop", "Mobile", "Tablet"],
                    datasets: [
                      {
                        label: "Users",
                        data: [510, 653, 255]
                      },
                      {
                        label: "Page views",
                        data: [1251, 1553, 1355],
                        backgroundColor: "#94DFD7",
                        borderColor: "#94DFD7"
                      }
                    ]
                  });
                  // Options
                  const doubleDatasetsOptions = ref({
                    scales: {
                      y: {
                        stacked: false,
                        ticks: {
                          beginAtZero: true
                        }
                      },
                      x: {
                        stacked: false
                      }
                    }
                  });
                  return {
                    doubleDatasetsData,
                    doubleDatasetsOptions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const doubleDatasetsData = ref({
                labels: ["Desktop", "Mobile", "Tablet"],
                datasets: [
                  {
                    label: "Users",
                    data: [510, 653, 255]
                  },
                  {
                    label: "Page views",
                    data: [1251, 1553, 1355],
                    backgroundColor: "#94DFD7",
                    borderColor: "#94DFD7"
                  }
                ]
              });
              // Options
              const doubleDatasetsOptions = ref({
                scales: {
                  y: {
                    stacked: false,
                    ticks: {
                      beginAtZero: true
                    }
                  },
                  x: {
                    stacked: false
                  }
                }
              });
            </script>

Async data

Example of the fetching data from the JSON file.

        
            
            <template>
              <MDBChart
                type="bar"
                :data="asyncData"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref, onMounted } from "vue";
              export default {
                components: {
                  MDBChart
                },
                setup() {
                  const asyncData = ref({});
                  onMounted(() => {
                    fetch(
                      "https://api.covid19api.com/total/country/poland/status/confirmed?from=2020-10-01T00:00:00Z&to=2020-12-01T00:00:00Z"
                    )
                      .then(data => data.json())
                      .then(data => {
                        const dataset = data.map(obj => obj["Cases"]);
                        const labels = data.map(obj => obj["Date"].substr(0, 10));
                        asyncData.value = {
                          labels,
                          datasets: [
                            {
                              color: "#FFCDD2",
                              data: dataset,
                              label: "Number of cases",
                              borderColor: dataset.color
                            }
                          ]
                        };
                      });
                  });
                  return {
                    asyncData
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBChart } from "mdb-vue-ui-kit";
              import { ref, onMounted } from "vue";

              const asyncData = ref({});
              onMounted(() => {
                fetch(
                  "https://api.covid19api.com/total/country/poland/status/confirmed?from=2020-10-01T00:00:00Z&to=2020-12-01T00:00:00Z"
                )
                  .then(data => data.json())
                  .then(data => {
                    const dataset = data.map(obj => obj["Cases"]);
                    const labels = data.map(obj => obj["Date"].substr(0, 10));
                    asyncData.value = {
                      labels,
                      datasets: [
                        {
                          color: "#FFCDD2",
                          data: dataset,
                          label: "Number of cases",
                          borderColor: dataset.color
                        }
                      ]
                    };
                  });
              });
            </script>