How to skip labels of a line in multiline graph in chartjs?

Question

I'm trying to create an multiline graph using chartjs. On x-Axis I have dates and on y-Axis i have some amount in integers. I have two lines, one of them for user's expenses and other for income. For income I have data of only 2 dates but having difference of month. My second income point on the graph is not on the correct date, it comes on the next date of expenses.

My data looks like this :

[
  { date: '2020-02-24', type: 'income', amount: 900 },
  { date: '2020-03-20', type: 'expense', amount: 100 },
  { date: '2020-03-20', type: 'expense', amount: 830 },
  { date: '2020-03-21', type: 'expense', amount: 50 },
  { date: '2020-03-22', type: 'expense', amount: 560 },
  { date: '2020-03-24', type: 'expense', amount: 600 }
]

In labels dates of income are 2020-02-24 and 2020-03-24 and rest of the dates are of expenses

Here is my dataset :

{
    labels:[ "2020-02-24", "2020-03-20", "2020-03-20", "2020-03-21", "2020-03-22", "2020-03-24" ],
    datasets: [
      {
        label: 'Expenses',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: [ 100, 830, 50, 560 ],
      },
      {
        label: 'Income',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 2,
        data: [ 900, 600 ],
      }
    ]
  };

Please add a screenshot of the result you want "skip" is a little general term (Hard to answer without more data). — Ezra Siton, Apr 06 '20 at 17:45

score 4 · Accepted Answer · answered Apr 07 '20 at 04:44

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>

Thank you very much! This helps a lot :) – Tushar Tambe Apr 07 '20 at 05:00 — Tushar Tambe, Apr 07 '20 at 05:00

score 0 · Answer 2 · answered Jan 24 '23 at 15:31

 const options = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { title: { display: false, }, ticks: { color: "black", }, },
        x: { ticks: { color: "black", autoSkip: true, }, grid: { display: false, } },
      },
      plugins: { legend: { display: false, }, title: { display: false, }, tooltip: { mode: "index", intersect: false, }, },
      hover: { mode: "nearest", intersect: false, },
    };


const data={{
              labels: chartData?.labels,
              datasets: [{ label: "Orders", type: "bar", barThickness: 12, borderRadius: 20, data: chartData?.data, backgroundColor: "#fb6340", },],
            }}

How to skip labels of a line in multiline graph in chartjs?

2 Answers2