Charts advanced usage

Bootstrap 5 Charts advanced usage

This documentation provides examples of advanced chart usage.

Note: Read the API tab in the basic chart docs to find all available options and advanced customization

Required ES init: Chart *
* 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.

Options

In most cases, working with advanced charts is related to the handling of 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.

Edit in sandbox 
        
            
          <canvas id="chart-options-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });
          
          // Data
          const dataChartOptionsExample = {
            type: 'bar',
            data: {
              labels: ['January', 'February', 'March', 'April', 'May', 'June'],
              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,
                },
              ],
            },
          };
    
          // Options
          const optionsChartOptionsExample = {
            options: {
              scales: {
                x:
                  {
                    ticks: {
                      color: '#4285F4',
                    },
                  },
                y:
                  {
                    ticks: {
                      color: '#f44242',
                    },
                  },
              },
            },
          };
    
          new Chart(
            document.getElementById('chart-options-example'),
            dataChartOptionsExample,
            optionsChartOptionsExample
          );
        
        
    
        
             
          // Data
          const dataChartOptionsExample = {
            type: 'bar',
            data: {
              labels: ['January', 'February', 'March', 'April', 'May', 'June'],
              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,
                },
              ],
            },
          };
    
          // Options
          const optionsChartOptionsExample = {
            options: {
              scales: {
                x:
                  {
                    ticks: {
                      color: '#4285F4',
                    },
                  },
                y:
                  {
                    ticks: {
                      color: '#f44242',
                    },
                  },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-options-example'),
            dataChartOptionsExample,
            optionsChartOptionsExample
          );

Mixed

With MDB it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.

Edit in sandbox 
        
            
          <canvas id="chart-mixed-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });

          // Data
          const dataMixedChartExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                // First dataset (bar)
                {
                  label: 'Impressions',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                  order: 2,
                },
                // Second dataset (line)
                {
                  label: 'Impressions (absolute top) %',
                  data: [211, 2543, 2745, 3123, 2765, 1485, 587],
                  type: 'line',
                  order: 1,
                  backgroundColor: 'rgba(66, 133, 244, 0.0)',
                  borderColor: '#94DFD7',
                  borderWidth: 2,
                  pointBorderColor: '#94DFD7',
                  pointBackgroundColor: '#94DFD7',
                  lineTension: 0.0,
                },
              ],
            },
          };

          new Chart(document.getElementById('chart-mixed-example'), dataMixedChartExample);
        
        
    
        
            
          // Data
          const dataMixedChartExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                // First dataset (bar)
                {
                  label: 'Impressions',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                  order: 2,
                },
                // Second dataset (line)
                {
                  label: 'Impressions (absolute top) %',
                  data: [211, 2543, 2745, 3123, 2765, 1485, 587],
                  type: 'line',
                  order: 1,
                  backgroundColor: 'rgba(66, 133, 244, 0.0)',
                  borderColor: '#94DFD7',
                  borderWidth: 2,
                  pointBorderColor: '#94DFD7',
                  pointBackgroundColor: '#94DFD7',
                  lineTension: 0.0,
                },
              ],
            },
          };

          new mdb.Chart(document.getElementById('chart-mixed-example'), dataMixedChartExample);

Double Y axis

In the example below we created chart with double Y axis with 2 datasets, each one with completely different data range.

In this setup, we need to tweak the scale. The left axis is set up and adjusted for the first dataset, while the right axis is designated for the second dataset.

Edit in sandbox 
        
            
          <canvas id="chart-double-y-axis-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });

          // Data
          const dataChartDobuleYAxisExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Impressions',
                  yAxisID: 'y',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                  order: 2,
                },
                {
                  label: 'Impressions (absolute top) %',
                  yAxisID: 'y1',
                  data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],
                  type: 'line',
                  order: 1,
                  backgroundColor: 'rgba(66, 133, 244, 0.0)',
                  borderColor: '#94DFD7',
                  borderWidth: 2,
                  pointBorderColor: '#94DFD7',
                  pointBackgroundColor: '#94DFD7',
                  lineTension: 0.0,
                },
              ],
            },
          };
        
          // Options
          const optionsChartDobuleYAxisExample = {
            options: {
              scales: {
                y:
                  {
                    display: true,
                    position: 'left',
                  },
                y1:
                  {
                    display: true,
                    position: 'right',
                    grid: {
                      drawOnChartArea: false,
                    },
                    ticks: {
                      beginAtZero: true,
                    },
                  },
              },
            },
          };
    
          new Chart(
            document.getElementById('chart-double-y-axis-example'),
            dataChartDobuleYAxisExample,
            optionsChartDobuleYAxisExample
          );
        
        
    
        
            
          // Data
          const dataChartDobuleYAxisExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Impressions',
                  yAxisID: 'y',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                  order: 2,
                },
                {
                  label: 'Impressions (absolute top) %',
                  yAxisID: 'y1',
                  data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],
                  type: 'line',
                  order: 1,
                  backgroundColor: 'rgba(66, 133, 244, 0.0)',
                  borderColor: '#94DFD7',
                  borderWidth: 2,
                  pointBorderColor: '#94DFD7',
                  pointBackgroundColor: '#94DFD7',
                  lineTension: 0.0,
                },
              ],
            },
          };
        
          // Options
          const optionsChartDobuleYAxisExample = {
            options: {
              scales: {
                y:
                  {
                    display: true,
                    position: 'left',
                  },
                y1:
                  {
                    display: true,
                    position: 'right',
                    grid: {
                      drawOnChartArea: false,
                    },
                    ticks: {
                      beginAtZero: true,
                    },
                  },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-double-y-axis-example'),
            dataChartDobuleYAxisExample,
            optionsChartDobuleYAxisExample
          );

Funnel

Example of horizontal bar chart with custom options and labels formatting (calculating integers numbers into percentages).

This data visualization is often used to visualize the flow of the website traffic.

Edit in sandbox 
        
            
          <canvas id="chart-funnel-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });

          // Data
          const dataChartFunnelExample = {
            type: 'bar',
            data: {
              labels: ['Product views', 'Checkout', 'Purchases'],
              datasets: [
                {
                  data: [2112, 343, 45],
                  barPercentage: 1.24,
                },
              ],
            },
          };
        
          // Options
          const optionsChartFunnelExample = {
            dataLabelsPlugin: true,
            options: {
              indexAxis: 'y',
              scales: {
                x:
                  {
                    grid: {
                      offsetGridLines: true,
                    },
                  },
              },
              plugins: {
                legend: {
                  display: false,
                },
                datalabels: {
                  formatter: (value, ctx) => {
                    let sum = 0;
                    let dataArr = dataChartFunnelExample.data.datasets[0].data;
                    dataArr.map((data) => {
                      sum += data;
                    });
                    let percentage = ((value * 100) / sum).toFixed(2) + '%';
                    return percentage;
                  },
                  color: '#4f4f4f',
                  labels: {
                    title: {
                      font: {
                        size: '13',
                      },
                      anchor: 'end',
                      align: 'right',
                    },
                  },
                },
              },
            },
          };
        
          new Chart(
            document.getElementById('chart-funnel-example'),
            dataChartFunnelExample,
            optionsChartFunnelExample
          );
        
        
    
        
            
          // Data
          const dataChartFunnelExample = {
            type: 'bar',
            data: {
              labels: ['Product views', 'Checkout', 'Purchases'],
              datasets: [
                {
                  data: [2112, 343, 45],
                  barPercentage: 1.24,
                },
              ],
            },
          };
        
          // Options
          const optionsChartFunnelExample = {
            dataLabelsPlugin: true,
            options: {
              indexAxis: 'y',
              scales: {
                x:
                  {
                    grid: {
                      offsetGridLines: true,
                    },
                  },
              },
              plugins: {
                legend: {
                  display: false,
                },
                datalabels: {
                  formatter: (value, ctx) => {
                    let sum = 0;
                    let dataArr = dataChartFunnelExample.data.datasets[0].data;
                    dataArr.map((data) => {
                      sum += data;
                    });
                    let percentage = ((value * 100) / sum).toFixed(2) + '%';
                    return percentage;
                  },
                  color: '#4f4f4f',
                  labels: {
                    title: {
                      font: {
                        size: '13',
                      },
                      anchor: 'end',
                      align: 'right',
                    },
                  },
                },
              },
            },
          };
        
          new mdb.Chart(
            document.getElementById('chart-funnel-example'),
            dataChartFunnelExample,
            optionsChartFunnelExample
          );

Formatting values on the Y axes

In the example below we simply add "$" before each value on the Y axis.

Edit in sandbox 
        
            
          <canvas id="chart-values-formatting-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });

          // Data
          const dataChartValuesFormattingExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Sales',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ],
            },
          };
    
          // Options
          const optionsChartValuesFormattingExample = {
            options: {
              scales: {
                y:
                  {
                    ticks: {
                      callback: function (value, index, values) {
                        return '$' + value;
                      },
                    },
                  },
              },
            },
          };
    
          new Chart(
            document.getElementById('chart-values-formatting-example'),
            dataChartValuesFormattingExample,
            optionsChartValuesFormattingExample
          );
        
        
    
        
            
          // Data
          const dataChartValuesFormattingExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Sales',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ],
            },
          };
    
          // Options
          const optionsChartValuesFormattingExample = {
            options: {
              scales: {
                y:
                  {
                    ticks: {
                      callback: function (value, index, values) {
                        return '$' + value;
                      },
                    },
                  },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-values-formatting-example'),
            dataChartValuesFormattingExample,
            optionsChartValuesFormattingExample
          );

Formatting values in the tooltips

In the example below we simply add "$" before each value displayed in the tooltips.

Hover over the chart line to view the tooltip.

Edit in sandbox 
        
            
          <canvas id="chart-tooltips-formatting-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });

          // Data
          const dataChartTooltipsFormattingExample = {
            type: 'line',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Sales',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ],
            },
          };
    
          // Options
          const optionsChartTooltipsFormattingExample = {
            options: {
              plugins: {
                tooltip: {
                  callbacks: {
                    label: function (context) {
                      return ' $' + context.formattedValue;
                    },
                  },
                },
              },
            },
          };
    
          new Chart(
            document.getElementById('chart-tooltips-formatting-example'),
            dataChartTooltipsFormattingExample,
            optionsChartTooltipsFormattingExample
          );
        
        
    
        
            
          // Data
          const dataChartTooltipsFormattingExample = {
            type: 'line',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Sales',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ],
            },
          };
    
          // Options
          const optionsChartTooltipsFormattingExample = {
            options: {
              plugins: {
                tooltip: {
                  callbacks: {
                    label: function (context) {
                      return ' $' + context.formattedValue;
                    },
                  },
                },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-tooltips-formatting-example'),
            dataChartTooltipsFormattingExample,
            optionsChartTooltipsFormattingExample
          );

Double datasets in a bar chart

Example of the double datasets in a bar chart.

Edit in sandbox 
        
            
          <canvas id="chart-bar-double-datasets-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });

          // Data
          const dataChartBarDoubleDatasetsExample = {
            type: 'bar',
            data: {
              labels: ['Desktop', 'Mobile', 'Tablet'],
              datasets: [
                {
                  label: 'Users',
                  data: [510, 653, 255],
                },
                {
                  label: 'Page views',
                  data: [1251, 1553, 1355],
                  backgroundColor: '#94DFD7',
                  borderColor: '#94DFD7',
                },
              ],
            },
          };
    
          // Options
          const optionsChartBarDoubleDatasetsExample = {
            options: {
              scales: {
                y:
                  {
                    stacked: false,
                    ticks: {
                      beginAtZero: true,
                    },
                  },
                x:
                  {
                    stacked: false,
                  },
              },
            },
          };
    
          new Chart(
            document.getElementById('chart-bar-double-datasets-example'),
            dataChartBarDoubleDatasetsExample,
            optionsChartBarDoubleDatasetsExample
          );
        
        
    
        
            
          // Data
          const dataChartBarDoubleDatasetsExample = {
            type: 'bar',
            data: {
              labels: ['Desktop', 'Mobile', 'Tablet'],
              datasets: [
                {
                  label: 'Users',
                  data: [510, 653, 255],
                },
                {
                  label: 'Page views',
                  data: [1251, 1553, 1355],
                  backgroundColor: '#94DFD7',
                  borderColor: '#94DFD7',
                },
              ],
            },
          };
    
          // Options
          const optionsChartBarDoubleDatasetsExample = {
            options: {
              scales: {
                y:
                  {
                    stacked: false,
                    ticks: {
                      beginAtZero: true,
                    },
                  },
                x:
                  {
                    stacked: false,
                  },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-bar-double-datasets-example'),
            dataChartBarDoubleDatasetsExample,
            optionsChartBarDoubleDatasetsExample
          );

Async data

Example of the fetching data from the JSON file.

Edit in sandbox 
        
            
          <canvas id="chart-async-data-example"></canvas>
        
        
    
        
            
          // Initialization for ES Users
          import { Chart, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chart });

          const chart = document.getElementById('chart-async-data-example');
          const chartInstance = new Chart(chart, { type: 'bar' });
          
          fetch(
            'https://disease.sh/v3/covid-19/historical/Poland?lastdays=all'
          )
            .then((data) => data.json())
            .then((data) => {
              const dataPoland = data.timeline['cases'];
              const dataset = Object.entries(dataPoland).map((item) => item[1]);
              const labels = Object.keys(dataPoland);

              chartInstance.update({
                labels,
                datasets: [
                  {
                    color: '#FFCDD2',
                    data: dataset,
                    label: 'Number of cases',
                    pointRadius: 0,
                    borderColor: dataset.color,
                  },
                ],
              }, {});
            });
        
        
    
        
            
          const chart = document.getElementById('chart-async-data-example');
          const chartInstance = new mdb.Chart(chart, { type: 'bar' });

          fetch(
            'https://disease.sh/v3/covid-19/historical/Poland?lastdays=all'
          )
            .then((data) => data.json())
            .then((data) => {
              const dataPoland = data.timeline['cases'];
              const dataset = Object.entries(dataPoland).map((item) => item[1]);
              const labels = Object.keys(dataPoland);

              chartInstance.update({
                labels,
                datasets: [
                  {
                    color: '#FFCDD2',
                    data: dataset,
                    label: 'Number of cases',
                    pointRadius: 0,
                    borderColor: dataset.color,
                  },
                ],
              }, {});
            });