0
218
ViewsChart.js Line Graph: Start a line in the middle of a graph
I'm wondering if it is possible to have a graph with multiple lines, but I want one of the lines to start from the middle of the graph, while the rest of the lines still start from all the way at the left. Is this possible? It'd look like this:
The green line is what I am talking about, whether it would be possible for a dataset to start from not all the way at the left
·
Juan Pablo Isaza
1 answers
Answer question0
Yes this is possible, you can achieve this in 2 ways, 1 is to specify each datapoint using its x and y coordinate another one is to place some null values in the start of your data array:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: 3,
y: 6
}, {
x: 4,
y: 8
}, {
x: 5,
y: 2
}, {
x: 6,
y: 12
}],
borderColor: 'orange'
},
{
label: '# of Points2',
data: [null, null, null, 9, 13, 15],
borderColor: 'lightblue'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var 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.0/chart.js"></script>
</body>
·
Juan Pablo Isaza
Report
Answer question