Expected behavior a chart component is initialized correctly.

Actual behavior Error initializing the chart

Resources (screenshots, code snippets etc.) I create a bar chart in this way: HTML:

<canvas id="bar-chart" data-mdb-chart-init></canvas>

JS:

var barChart = document.querySelector("#bar-chart");
var processingPerfChart = new mdb.Chart(barChart, { type: 'bar' });

When I load the html file locally in the browser, the chart is not initialized and the console shows the following error:

mdb.umd.min.js:39  Uncaught Error: "undefined" is not a registered controller.
    at Object._get (mdb.umd.min.js:39:61429)
    at Object.getController (mdb.umd.min.js:39:60493)
    at qd.buildOrUpdateControllers (mdb.umd.min.js:39:85223)
    at qd.update (mdb.umd.min.js:39:85984)
    at new qd (mdb.umd.min.js:39:82354)
    at Gp._chartConstructor (mdb.umd.min.js:39:171040)
    at new Gp (mdb.umd.min.js:39:168782)
    at mdb.umd.min.js:44:83240
    at Array.forEach (<anonymous>)
    at Object.advanced (mdb.umd.min.js:44:82964)