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

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 ],
}
]
};

Answer 1

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>

Answer 2

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", },],
}}