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.

MDB 5 - Bootstrap 5 & Material Design 2.0

Video tutorial

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-attirbutes:

The same effect achieved via Javascript initialization:

Line chart

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

Via data-mdb-attirbutes:

Via JavaScript:

Bar chart horizontal

Change the orientation of your bar chart from vertical to horizontal by setting the type option to horizontalBar.

Via data-mdb-attirbutes:

Via JavaScript:

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-attirbutes:

Via JavaScript:

Doughnut chart

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

Via data-mdb-attirbutes:

Via JavaScript:

Polar chart

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

Via data-mdb-attirbutes:

Via JavaScript:

Radar chart

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

Via data-mdb-attirbutes:

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 1 dataset be used via data-mdb-attributes. All more complicated structures require initialization via 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.

HTML
JavaScript


          <canvas id="scatter-chart"></canvas>


          // Chart
          const dataScatter = {
            type: 'scatter',
            data: {
              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 optionsScatter = {
            options: {
              title: {
                display: true,
                text: 'Scatter Chart - Logarithmic X-Axis',
              },
              scales: {
                xAxes: [
                  {
                    type: 'logarithmic',
                    position: 'bottom',
                    ticks: {
                      userCallback: function (tick) {
                        var remain = tick / Math.pow(10, Math.floor(Chart.helpers.log10(tick)));
                        if (remain === 1 || remain === 2 || remain === 5) {
                          return tick.toString() + 'Hz';
                        }
                        return '';
                      },
                    },
                    scaleLabel: {
                      labelString: 'Frequency',
                      display: true,
                    },
                  },
                ],
                yAxes: [
                  {
                    type: 'linear',
                    ticks: {
                      userCallback: function (tick) {
                        return tick.toString() + 'dB';
                      },
                    },
                    scaleLabel: {
                      labelString: 'Voltage',
                      display: true,
                    },
                  },
                ],
              },
            },
          };

          new mdb.Chart(document.getElementById('scatter-chart'), dataScatter, optionsScatter);

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.

HTML
JavaScript


          <canvas id="bar-chart-custom-options"></canvas>


          // Bar chart with custom options
          const dataBarCustomOptions = {
            type: 'bar',
            data: {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              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 optionsBarCustomOptions = {
            options: {
              legend: {
                position: 'top',
                labels: {
                  fontColor: 'green'
                }
              },
              scales: {
                xAxes: [
                  {
                    ticks: {
                      fontColor: '#4285F4',
                    },
                  },
                ],
                yAxes: [
                  {
                    ticks: {
                      fontColor: '#f44242',
                    },
                  },
                ],
              },
            },
          };

          new mdb.Chart(
            document.getElementById('bar-chart-custom-options'),
            dataBarCustomOptions,
            optionsBarCustomOptions
          );

If you want to support our friends from Tailwind Elements you can also check out the Tailwind charts documentation.

Charts - API

In this section, you will find advanced information about the Chart component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Usage

Via data attributes

You can initialize a simple chart without using additional JavaScript code - just set data-mdb-chart to a selected chart's type (f.e. 'line', 'bar').

Note: Scatter and bubble charts has to be initialized with JavaScript.

Name	Type	Description
`data-mdb-chart`	String	Attribute responsible for initialization and defining a type.
`data-mdb-labels`	String	Labels for x-axis
`data-mdb-dataset-label`	String	Label values for datasets
`data-mdb-dataset-background-color`	Color[ ]	A single color or an array of colors for datasets
`data-mdb-dataset-border-color`	Color[ ]	A single border or line color or an array of border colors for datasets
`data-mdb-dataset-border-width`	Number[ ]	Single border thickness or a border thickness table for datasets
`data-mdb-dataset-data`	Number[ ]	Value sets for charts

HTML


        <canvas
        class="col-sm-12 col-md-10 col-xl-8 mb-4"
        data-mdb-chart="bar"
        data-mdb-dataset-label="Traffic"
        data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
        data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
        ></canvas>

Via JavaScript

When using the Chart constructor to initialize an instance, you can specify three parameters. The first argument is a wrapper element for a chart, second is a data object with necessary information about displayed datasets. The last are options - each Chart has its default settings provided by the component, so this parameter is optional.

HTML
JavaScript


        <canvas id="bar-chart"></canvas>


        // Bar chart
        const dataBar = {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
            {
                label: 'Traffic',
                data: [30, 15, 62, 65, 61, 65, 40],

            },
            ],
        },
        };

        new mdb.Chart(document.getElementById('bar-chart'), dataBar);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

HTML
JavaScript


        <canvas id="bar-chart"></canvas>


        // Bar chart
        const dataBar = {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
            {
                label: 'Traffic',
                data: [30, 15, 62, 65, 61, 65, 40],

            },
            ],
        },
        };

        $('#bar-chart').chart(dataBar);

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.
`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.
`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.
`lineTension`	Number	Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.
`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
`steppedLine`	Boolean/String	If the line is shown as a stepped line.

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.
`backgroundColor`	Color/Color[ ]	The fill color of the bar.
`borderColor`	Color/Color[ ]	The color of the bar border.
`borderWidth`	Number/Number[ ]	The stroke width of the bar in pixels.
`borderSkipped`	String	Which edge to skip drawing the border for.
`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.

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
`fill`	Boolean/String	How to fill the area under the line.
`lineTension`	Number	Bezier curve tension of the line. Set to 0 to draw straightlines.
`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.

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.
`borderColor`	Color[ ]	The border color of the arcs in the dataset.
`borderWidth`	Number[ ]	The border width of the arcs in the dataset.
`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.

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.
`borderColor`	Color	The border color of the arcs in the dataset.
`borderWidth`	number	The border width of the arcs in the dataset.
`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)
`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.
`fullWidth`	Boolean	true	Marks that this box should take the full width 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
`reverse`	Boolean	false	Legend will show datasets in reverse order.
`labels`	Object		See documentation about labels in table below.

Legend Label Configuration

Name	Type	Default	Description
`boxWidth`	Number	40	width of coloured box
`fontSize`	Number	12	font size of text
`fontStyle`	String	'normal'	font style of text
`fontColor`	Color	'#666'	Color of text
`fontFamily`	String	"Roboto"	Font family of legend text.
`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.
`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. .

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.
`onProgress`	Function	null	Callback called at the end of an animation.
`onComplete`	Function	null	Callback called on each step of an animation.

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

Methods

Name	Description	Example
`update(data, config)`	Updates chart's data and calls .update(config) method	`instance.update(data, { duration: 800})`
`dispose`	Removes a mdb.Chart instance	`instance.dispose()`
`getInstance`	Static method which allows you to get the chart instance associated to a DOM element.	`Chart.getInstance(chartEl)`

JavaScript


        const instance = new mdb.Chart(el, data, options);

        instance.dispose();

Events

Event handling in Charts differs from other MDB components - in the options parameter you can define which events should be triggered and handlers for some of them (click, hover).

Name	Type	Default	Description
`events`	string[ ]	`['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']`	The `events` option defines the browser events that the chart should listen to for tooltips and hovering.
`onHover`	function	`null`	Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).
`onClick`	function	`null`	Called if the event is of type `'mouseup'` or `'click'`. Called in the context of the chart and passed the event and an array of active elements.

JavaScript


        const eventOption ={
            options: {
            // This chart will not respond to mousemove, etc
            events: ['click']
            }
        };

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

JavaScript


        import { Chart } from 'mdb-ui-kit';