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: [
                    {
                      label: "Traffic",
                      data: [3234, 2234, 3234, 1234],
                      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