ChartJS Line Chart

Multiple Line Chart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

CSS

canvas { background-color : #eee;
}

JavaScript

const data = [
  {labels: "01/01/2020 00:00:00", data: 7433, category: "A"},
  {labels: "01/01/2020 00:00:00", data:  774, category: "B"},
  {labels: "01/01/2020 00:00:00", data: 5993, category: "C"},
  {labels: "30/01/2020 00:00:00", data: 7624, category: "A"},
  {labels: "30/01/2020 00:00:00", data:  900, category: "B"},
  {labels: "30/01/2020 00:00:00", data: 5865, category: "C"},
  {labels: "18/02/2020 00:00:00", data: 7161, category: "A"},
  {labels: "18/02/2020 00:00:00", data: 1005, category: "B"},
  {labels: "18/02/2020 00:00:00", data: 5940, category: "C"},
]
function randomize_data() { data.forEach(el => el.data += Math.floor(Math.random()*700)-150) }

const myChart = new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels  : [],
    datasets: [
      {
        label          : 'A',
        data           : [],
        backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)' ],
        borderColor    : [ 'rgba(255, 99, 132, 1  )', 'rgba(255, 99, 132, 1  )', 'rgba(255, 99, 132, 1  )' ],
        borderWidth    : 2
      },
      {
        label          : 'B',
        data           : [],
        backgroundColor: [ 'rgba(255, 159, 64, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 159, 64, 0.2)' ],
        borderColor    : [ 'rgba(255, 159, 64, 1  )', 'rgba(255, 159, 64, 1  )', 'rgba(255, 159, 64, 1  )' ],
        borderWidth    : 2
      },
      {
        label          : 'C',
        data           : [],
        backgroundColor: [ 'rgba(159, 255, 64, 0.2)', 'rgba(159, 255, 64, 0.2)', 'rgba(159, 255, 64, 0.2)' ],
        borderColor    : [ 'rgba(159, 255, 64, 1  )', 'rgba(159, 255, 64, 1  )', 'rgba(159, 255, 64, 1  )' ],
        borderWidth    : 2
      },
    ],
  },
  options: {
    scales: {
      yAxes: [{ stacked: true, ticks: { beginAtZero: true } }],
      xAxes: [{ stacked: true, ticks: { beginAtZero: true } }],
    }
  }
})

// callback to update the chart
function...