How to add a vertical cursor line in chart.js?
How to add a vertical cursor line in chart.js?
1 answer
by
edmond_brakus ,
10 months ago
@dana
To add a vertical cursor line in Chart.js, you can use the annotation plugin provided by Chart.js. Here are the steps to add a vertical cursor line:
- Create a div element to wrap your chart canvas and give it a unique ID. For example:
1 2 3 |
<div id="chartWrapper"> <canvas id="myChart"></canvas> </div> |
- Include the Chart.js library and the annotation plugin in your HTML document.
1 2 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
- Add the JavaScript code to create your chart and add the vertical cursor line using the annotation plugin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// Get the chart canvas element
var chartCanvas = document.getElementById('myChart');
// Create the chart
var chart = new Chart(chartCanvas, {
type: 'line',
data: {
// Your chart data
},
options: {
// Your chart options
annotation: {
// Add the vertical line annotation
drawTime: 'afterDraw',
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2021-01-01', // Set the date or X-axis value where you want to add the line
borderColor: 'red',
borderWidth: 2,
label: {
enabled: true,
content: 'Cursor Line'
}
}]
}
}
});
|
In the code above, you need to replace '2021-01-01' with the specific date or X-axis value where you want to add the vertical cursor line. You can customize the line color, width, and label according to your needs.
- Finally, add CSS to style the chart wrapper and make it position relative to ensure the cursor line is displayed correctly.
1 2 3 |
#chartWrapper {
position: relative;
}
|
That's it! With these steps, you should be able to add a vertical cursor line to your Chart.js chart.