Line chart

Bootstrap 5 Line chart component

Responsive Line chart built with Bootstrap 5. Learn how to create a Bootstrap Line Chart and see examples of proper implementation and customization.

Basic example

You can initialize a simple chart with 1 line with data-mdb-chart="line" - it doesn't require any additional JS code.

Edit in sandbox 
        
            
                <canvas
                    data-mdb-chart="line"
                    data-mdb-dataset-label="Traffic"
                    data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
                    data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
                ></canvas>

More than 1 line

If you need more than 1 line, you can do it via JavaScript.

Edit in sandbox 
        
            
                <canvas id="line-chart"></canvas>
                
        
    
        
            
                // Chart 
                const dataLine = {
                type: 'line',
                  data: {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [{
                        label: "My First dataset",
                        data: [65, 59, 80, 81, 56, 55, 40],
                        backgroundColor: [
                          'rgba(105, 0, 132, .2)',
                        ],
                        fill: true,
                        borderColor: [
                          'rgba(255, 99, 132, 0.8)',
                        ],
                        borderWidth: 2,
                        tension: 0.4
                      },
                      {
                        label: "My Second dataset",
                        data: [28, 48, 40, 19, 86, 27, 90],
                        backgroundColor: [
                          'rgba(0, 137, 132, .2)',
                        ],
                        fill: true,
                        borderColor: [
                          'rgba(50, 150, 255, 1)',
                        ],
                        borderWidth: 2,
                        tension: 0.4
                      }
                    ]
                  },
                  options: {
                    responsive: true
                  }
              };
              
              new mdb.Chart(document.getElementById('line-chart'), dataLine);