0
221
ViewsHow to plot a line chart which has both the start and points outside the canvas area using Chart.js
I am currently using chart.js "2.9.4" and the "react-chartjs-2 "2.11.1". My goal is to draw a line chart which has only two data points. Both these two data points are outside the canvas.
Here I attached a reference image.
Please help me to find a solution for this issue. Your help will be highly appreciated.
·
Juan Pablo Isaza
1 answers
Answer question0
You can use a scatter chart and define ticks.min and ticks.max options on the x-axis to limit the view. In order to see the line, you need to add showLine: true on the dataset.
Consult the Chart.js documentation for further details about tick configuration.
Please take a look at the runnable code snippet below and see how it works.
new Chart('chart', {
type: 'scatter',
data: {
labels: [2018, 2024],
datasets: [{
data: [{ x: 2018, y: 10 }, { x: 2024, y: 0 }],
borderColor: 'rgb(0, 0, 255)',
showLine: true,
fill: false
}],
},
options: {
responsive: false,
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
min: 2020,
max: 2023,
stepSize: 1
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" width="300" height="200"></canvas>
·
Juan Pablo Isaza
Report
Answer question