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);