Chartjs-Chartjs dataset from single line to multiple line

by

0👍

You need to define two distinct datasets as follows.

data: {
  labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
  datasets: [{
    label: "Balance1",
    data: [10, 20, 30, 40, 50, 60, 70],
    ...
  }, {
    label: "Balance2",
    data: [15, 30, 15, 30, 15, 30, 15],
    fill: false,
    ...
  }]
}

Please take a loo at below code and see how it works.

new Chart(document.getElementById("chart"), {
  type: 'line',
  data: {
    labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
    datasets: [{
      label: "Balance1",
      data: [10, 20, 30, 40, 50, 60, 70],
      fill: false,
      backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgb(255, 99, 132)",
      pointBorderWidth: 10
    }, {
      label: "Balance2",
      data: [15, 30, 15, 30, 15, 30, 15],
      fill: false,
      backgroundColor: "rgba(54, 162, 235, 0.2)",
      borderColor: "rgb(54, 162, 235)",
      pointBorderWidth: 4,
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

Leave a comment