Im using chart.js and I have a line chart.I want to add a second line/dataset that starts from where the first line ends.
Ive seen people do this by adding null in the data property inside the datasets like this:
type: "line",
data: {
labels: ["January,"February","March","April","May","June","July","August"],
datasets: [
{
label: "My First Dataset",
data:[4,5,6,7,8],
fill: false,
borderColor: "rgb(75, 192, 192)",
tension: 0.3,
},
{ label: "My First Dataset",
data:[null,null,null,null,null,9,10,11],
fill: false,
borderColor: "rgb(75, 192, 192)",
tension: 0.3,
},
],
},
});
is there a different way to achieve this?
Yes, you can use object notation like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: "Red",
y: 5
}, {
x: "Blue",
y: 3
}, {
x: "Yellow",
y: 8
}],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: "Yellow",
y: 8
}, {
x: "Green",
y: 5
}, {
x: "Purple",
y: 3
}, {
x: "Orange",
y: 8
}],
borderColor: 'orange'
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>