Charts

Angular 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.


In order to use chart directive in your application, install chart.js (v3) library and import it in angular.json file. Read the API tab to find more information about required imports.

Bar chart

Bar Chart groups data items from data sources into categories and renders them as vertical bars or rectangles.

        
            
            <canvas
              mdbChart
              [type]="'bar'"
              [datasets]="datasets"
              [labels]="labels"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              datasets = [
                {
                  label: 'Traffic',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ];

              labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            }
          
        
    

Line chart

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

        
            
            <canvas
              mdbChart
              [type]="'line'"
              [datasets]="datasets"
              [labels]="labels"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              datasets = [
                {
                  label: 'Traffic',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ];

              labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            }
          
        
    

Bar chart horizontal

Change the orientation of your bar chart from vertical to horizontal by setting the indexAxis option to y.

        
            
            <canvas
              mdbChart
              [type]="'bar'"
              [datasets]="datasets"
              [labels]="labels"
              [options]="horizontalBarOptions"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              datasets = [
                {
                  label: 'Traffic',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ];

              labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

              horizontalBarOptions = {
                indexAxis: 'y',
                scales: {
                  x: {
                    stacked: true,
                    grid: {
                      display: true,
                      borderDash: [2],
                      zeroLineColor: 'rgba(0,0,0,0)',
                      zeroLineBorderDash: [2],
                      zeroLineBorderDashOffset: [2],
                    },
                    ticks: {
                      color: 'rgba(0,0,0, 0.5)',
                    },
                  },
                  y: {
                    stacked: true,
                    grid: {
                      display: false,
                    },
                    ticks: {
                      color: 'rgba(0,0,0, 0.5)',
                    },
                  },
                },
              };
            }
          
        
    

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.

        
            
            <canvas
              mdbChart
              [type]="'pie'"
              [datasets]="datasets"
              [labels]="labels"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              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)',
                  ],
                },
              ];

              labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            }
          
        
    

Doughnut chart

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

        
            
            <canvas
              mdbChart
              [type]="'doughnut'"
              [datasets]="datasets"
              [labels]="labels"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              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)',
                  ],
                },
              ];

              labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            }
          
        
    

Polar chart

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

        
            
            <canvas
              mdbChart
              [type]="'polarArea'"
              [datasets]="datasets"
              [labels]="labels"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              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)',
                  ],
                },
              ];

              labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            }
          
        
    

Radar chart

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

        
            
            <canvas
              mdbChart
              [type]="'radar'"
              [datasets]="datasets"
              [labels]="labels"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              datasets = [
                {
                  label: 'Traffic',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ];

              labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            }
          
        
    

Bubble chart

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

        
            
            <canvas
              mdbChart
              [type]="'bubble'"
              [datasets]="datasets"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              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',
                },
              ];
            }
          
        
    

Scatter chart

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

        
            
            <canvas
              mdbChart
              [type]="'scatter'"
              [datasets]="datasets"
              [options]="options"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { log10 } from 'chart.js/helpers';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              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,
                    },
                  ],
                },
              ];

              options = {
                plugins: {
                  title: {
                    display: true,
                    text: 'Scatter Chart - Logarithmic X-Axis',
                  },
                },
                scales: {
                  x: {
                    type: 'logarithmic',
                    position: 'bottom',
                    ticks: {
                      callback: (tick: number) => {
                        const remain = tick / Math.pow(10, Math.floor(log10(tick)));
                        if (remain === 1 || remain === 2 || remain === 5) {
                          return tick.toString() + 'Hz';
                        }
                        return '';
                      },
                    },
                    scaleLabel: {
                      labelString: 'Frequency',
                      display: true,
                    },
                  },
                  y: {
                    type: 'linear',
                    ticks: {
                      callback: (tick: number) => {
                        return tick.toString() + 'dB';
                      },
                    },
                    scaleLabel: {
                      labelString: 'Voltage',
                      display: true,
                    },
                  },
                },
              };
            }
          
        
    

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 [options] input.

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

        
            
            <canvas
              mdbChart
              [type]="'bar'"
              [datasets]="datasets"
              [labels]="labels"
              [options]="options"
            ></canvas>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              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,
                },
              ];

              labels = ['January', 'February', 'March', 'April', 'May', 'June'];

              options = {
                plugins: {
                legend: {
                  labels: {
                    color: 'green',
                    position: 'top',
                  }
                },
                scales: {
                  x:
                    {
                      ticks: {
                        color: '#4285F4',
                      },
                    },
                  y:
                    {
                      ticks: {
                        color: '#f44242',
                      },
                    },
                },
              }};
            }
          
        
    

Bar chart with custom tooltip

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

        
            
              <canvas
                mdbChart
                [type]="'bar'"
                [datasets]="datasets"
                [labels]="labels"
                [options]="options"
              ></canvas>
            
        
    
        
            
              import { Component } from '@angular/core';
  
              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                datasets = [
                {
                  label: 'Traffic',
                  data: [30, 15, 62, 65, 61, 65, 40],
                },
              ];
            
              labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
            
              options = {
                plugins: {
                  tooltip: {
                    callbacks: {
                      label: function (context) {
                        let label = context.dataset.label || '';
                        label = `${label}: ${context.formattedValue} users`;
                        return label;
                      },
                    },
                  },
                },
              };
            }
            
        
    

Charts - API


Import

        
            
          import { MdbChartModule } from 'mdb-angular-ui-kit/charts';
          …
          @NgModule ({
            ...
            imports: [MdbChartModule],
            ...
          })
        
        
    
        
            
          ...
          "scripts": [
            "node_modules/chart.js/dist/chart.js",
          ]
          ...
      
        
    

Inputs

Name Type Default Description
datasets - - Changes charts datasets
labels string[] - Changes chart labels
options - - Changes chart options

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

Outputs

Name Type Description
chartClick EventEmitter<any> Event fired on chart click
chartHover EventEmitter<any> Event fired on chart hover
        
            
              <canvas
                mdbChart
                [type]="'bar'"
                [datasets]="datasets"
                [labels]="labels"
                (chartClick)="onChartClick($event)"
                (chartHover)="onChartHover($event)"
              ></canvas>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              }) export class AppComponent {
                datasets = [
                  {
                    label: 'Traffic',
                    data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                  },
                ];

                labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

                onChartClick(event: any): void {
                  console.log('chart click', event);
                }

                onChartHover(event: any): void {
                  console.log('chart hover', event);
                }
              }