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.
Line chart
To use our minimalistic line chart, set the type property to line.
Bar chart horizontal
Change the orientation of your bar chart from vertical to horizontal by adding the indexAxis="y" and proper chart styling options.
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.
Doughnut chart
Another type of graph representing data as an area's percentage is a doughnut chart.
Polar chart
Polar area graph will split the circle into pieces with equal angles and different radius.
Radar chart
This type of chart will enclose the area based on a dataset's values.
Bubble chart
This graph visualizes data in a series of "bubbles" with customized coordinates and radius.
Scatter chart
Use this chart to represent your data as a series of points with x and y coordinates.
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.
Bar chart with custom tooltip
Set custom text format inside a tooltip by using plugins option.