Charts

Bootstrap charts

Bootstrap charts are graphical representations of data. They are responsive and easy to customize.

At your disposal are eight types of charts with multiple options for customization.

Bar chart

Initialization with data attributes.

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

Line chart

<div id="line-chart"></div>
// Line chart
const dataLine = {
  type: 'line',
  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('line-chart'), dataLine);

Bar chart

<div id="bar-chart"></div>
// 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);

Bar chart horizontal

<div id="bar-chart-horizontal"></div>
//  Bar chart horizontal
const dataBarHorizontal = {
  type: 'horizontalBar',
  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-horizontal'), dataBarHorizontal);

Pie chart

<div id="pie-chart"></div>
// Pie chart
const dataPie = {
  type: 'pie',
  data: {
    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)',
        ],
      },
    ],
  },
};

new mdb.Chart(document.getElementById('pie-chart'), dataPie);

Doughnut chart

<div id="doughnut-chart"></div>
// Doughnut chart
const dataDoughnut = {
  type: 'doughnut',
  data: {
    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)',
        ],
      },
    ],
  },
};

new mdb.Chart(document.getElementById('doughnut-chart'), dataDoughnut);

Polar chart

<div id="polar-chart"></div>
// Polar chart
const dataPolar = {
  type: 'polarArea',
  data: {
    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)',
        ],
      },
    ],
  },
};

new mdb.Chart(document.getElementById('polar-chart'), dataPolar);

Radar chart

<div id="radar-chart"></div>
// Radar chart
const dataRadar = {
  type: 'radar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Traffic',
        data: [30, 15, 62, 65, 61, 65, 40],
        backgroundColor: 'rgba(66, 133, 244, 0.5)',
        borderColor: '#4285F4',
        borderWidth: 2,
        pointBorderColor: '#4285F4',
        pointBackgroundColor: '#4285F4',
      },
    ],
  },
};

new mdb.Chart(document.getElementById('radar-chart'), dataRadar);

Bubble chart

<div id="bubble-chart"></div>
// Bubble chart
const dataBubble = {
  type: 'bubble',
  data: {
    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',
      },
    ],
  },
};

new mdb.Chart(document.getElementById('bubble-chart'), dataBubble);

Scatter chart

<div id="scatter-chart"></div>
// Scatter 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);

Pie chart with DataLabels plugin

<div id="pie-chart-with-plugin"></div>


<!--
Add below line after MDB javascript <script> tags and before your js file:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
-->
// Unregister chart plugin to add it only to a few examples
Chart.plugins.unregister(ChartDataLabels);

// Pie chart with plugin
const dataPieWithPlugin = {
  plugins: [ChartDataLabels],
  type: 'pie',
  data: {
    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 optionsPieWithPlugin = {
  options: {
    plugins: {
      datalabels: {
        formatter: (value, ctx) =&gt; {
          let sum = 0;
          let dataArr = dataPieWithPlugin.data.datasets[0].data;
          dataArr.map((data) =&gt; {
            sum += data;
          });
          let percentage = ((value * 100) / sum).toFixed(2) + '%';
          return percentage;
        },
        color: 'white',
        labels: {
          title: {
            font: {
              size: '14',
            },
          },
        },
      },
    },
  },
};

new mdb.Chart(
  document.getElementById('pie-chart-with-plugin'),
  dataPieWithPlugin,
  optionsPieWithPlugin
);

Bar chart with custom options

<div id="bar-chart-custom-options"></div>
// 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: {
    scales: {
      xAxes: [
        {
          ticks: {
            fontColor: '#4285F4',
          },
        },
      ],
      yAxes: [
        {
          ticks: {
            fontColor: '#f44242',
          },
        },
      ],
    },
  },
};

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

Charts - API

In this section, you will find advanced information about the Line, Bar, Pie, Doughnut, Polar, Radar, Bubble, Scatter components. 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

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

Via JavaScript

<div id="bar-chart"></div>
// 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

<div id="bar-chart"></div>
// 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').charts(dataBar);

Methods

Name Parameters 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()

Data attributes

You can initialize basic charts with not extensive options without using JavaScript. The data-type attribute is responsible for initialization via HTML if its value is valid.

Name Type Description
data-chart String the attribute is responsible for initialization and is read as a type. Bubble and scatter chart can't be initialized via data attribute.
data-labels String Labels for x-axis
data-dataset-label String label values ​​for datasets
data-dataset-background-color Color[ ] It can be a single color or an array of colors for datasets
data-dataset-border-color Color[ ] It can be a single border or line color or an array of border colors for datasets
data-dataset-border-width Number[ ] It can be a single border thickness or a border thickness table for datasets
data-dataset-data Number[ ] value sets for charts

Options

Charts have plenty of options that can you use.

Line options

The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.

All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.

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 a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bars is generally set this way.

Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.

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 a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.

All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.

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

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 - the radius of the segment differs depending on the value. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

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 is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.

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 charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.

The scatter chart supports all of the same properties as the line chart

Legend

Charts displays data about the dataset that are appering on the chart.

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

The legend label configuration is nested below the legend configuration using the labels key.

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

Charts animates out of the box. A number of options are provided to configure how the animiaton looks and how long it takes.

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.

Available options of easing

  • 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

Events

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.

Event Option

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