score:4

Accepted answer

You must not define data.labels, because they are considered for both datasets. Instead, you should define each data point individually using an object containing x and y properties.

data: [
  { x: '2020-02-24', y: 900 }, 
  { x: '2020-03-24', y: 600 }
]

In the following runnable code snippet, I build such data of individual datasets out of your base data array using filter() and map().

const data = [
  { date: '2020-02-24', type: 'income', amount: 900 },
  { date: '2020-03-15', type: 'expense', amount: 100 },
  { date: '2020-03-20', type: 'expense', amount: 830 },
  { date: '2020-03-25', type: 'expense', amount: 50 },
  { date: '2020-03-28', type: 'expense', amount: 560 },
  { date: '2020-03-24', type: 'income', amount: 600 }
];

var worldChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [
      {
        label: 'Expenses',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: data.filter(o => o.type == 'expense').map(o => ({ x: o.date, y: o.amount }))
      },
      {
        label: 'Income',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 2,
        data: data.filter(o => o.type == 'income').map(o => ({ x: o.date, y: o.amount }))
      }
    ]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'        
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>


Related Query

More Query from same tag