Charts
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.
* * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method. 
Bar chart
You can initialize simple charts with data-mdb-attributes - it doesn't require any additional JS code.
Note: This method allows only one dataset - more complicated charts require JavaScript initialization.
Via data-mdb-attributes:
The same effect achieved via Javascript initialization:
Line chart
To use our minimalistic line chart, set the type option to line.
Via data-mdb-attributes:
Via JavaScript:
Bar chart horizontal
Change the orientation of your bar chart from vertical to horizontal by setting the indexAxis option to 'y'.
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.
Via data-mdb-attributes:
Via JavaScript:
Doughnut chart
Another type of graph representing data as an area's percentage is a doughnut chart.
Via data-mdb-attributes:
Via JavaScript:
Polar chart
Polar area graph will split the circle into pieces with equal angles and different radius.
Via data-mdb-attributes:
Via JavaScript:
Radar chart
This type of chart will enclose the area based on a dataset's values.
Via data-mdb-attributes:
Via JavaScript:
Bubble chart
This graph visualizes data in a series of "bubbles" with customized coordinates and radius.
Note: As mentioned before, charts with more than one dataset cannot be initialized using data attributes. For more intricate setups, you'll need to handle the initialization using JavaScript.
Scatter chart
Use this chart to represent your data as a series of points with x and y coordinates.
Note: This chart also requires initialization via JavaScript. Initialization via data-mdb-attributes is not possible.
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 constructor.
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.