Chartjs-Django and Chart.js: Line-Chart with multiple Datasets

by

0đź‘Ť

You need to define 3 different datasets out of your available data.

This is illustrated in below runnable code snippet. Unfortunately I don’t know much about python. Therefore this is a pure JavaScript solution. I however think that you’ll be able to easily include your python code in order to obtain the same result.

const label = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
const coworker = ['John Doe', 'Jane Doe', 'Michael Smith'];
const data = [[1, 2, 3, 4, 5], [5, 4, 3, 2, 1], [3, 4, 2, 1, 5]];

var myChart = new Chart('chart', {
  type: 'bar',
  data: {
    labels: label,
    datasets: [{
      label: coworker[0],
      data: data[0],
      backgroundColor: 'red'
    },
    {
      label: coworker[1],
      data: data[2],
      backgroundColor: 'blue'
    },
    {
      label: coworker[2],
      data: data[2],
      backgroundColor: 'green'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>

Leave a comment