MDBootstrap charts creator

Bar chart

const dataBar = {
  type: "bar",
  data: {
    labels: ["Monday", "Tuesday", "Wednesday", "Thursday"],
    datasets: [{
      label: "Traffic",
      data: [3234, 2234, 3234, 1234],
      backgroundColor: ["rgba(66,133,244,0.6)", "rgba(66,133,244,0.6)",
        "rgba(66,133,244,0.6)", "rgba(66,133,244,0.6)"
      ],
    }, ],
  },
};

new mdb.Chart(document.getElementById("chart-bar"), dataBar);
<canvas id="chart-bar"></canvas>
Dataset
Options

Line chart

const dataLine = {
  type: "line",
  data: {
    labels: ["Monday", "Tuesday", "Wednesday", "Thursday"],
    datasets: [{
      label: "Traffic",
      data: [3234, 2234, 3234, 1234],
      borderColor: "#4285F4",
      backgroundColor: "#4285F4",
      fill: false,
    }, ],
  },
};

new mdb.Chart(document.getElementById("chart-line"), dataLine);
<canvas id="chart-line"></canvas>
Dataset

Pie chart

const dataPie = {
  type: "pie",
  data: {
    labels: ["Monday", "Tuesday", "Wednesday", "Thursday"],
    datasets: [{
      data: [1234, 2234, 3234, 4234],
      backgroundColor: ["rgba(117,169,255,0.6)", "rgba(148,223,215,0.6)",
        "rgba(208,129,222,0.6)", "rgba(247,127,167,0.6)"
      ],
    }, ],
  },
};

new mdb.Chart(document.getElementById("chart-pie"), dataPie);
<canvas id="chart-pie"></canvas>
Dataset