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