score:24
There is no native functionality for this yet, rather you would have to create a chart plugin to accomplish so.
ᴘʟᴜɢɪɴ (ᴅʀᴀᴡ ᴠᴇʀᴛɪᴄᴀʟ ʟɪɴᴇ ᴏɴ ᴍᴏᴜꜱᴇᴏᴠᴇʀ ᴀᴛ ᴅᴀᴛᴀ-ᴘᴏɪɴᴛ) :
Chart.plugins.register({
afterDatasetsDraw: function(chart) {
if (chart.tooltip._active && chart.tooltip._active.length) {
var activePoint = chart.tooltip._active[0],
ctx = chart.ctx,
y_axis = chart.scales['y-axis-0'],
x = activePoint.tooltipPosition().x,
topY = y_axis.top,
bottomY = y_axis.bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#07C';
ctx.stroke();
ctx.restore();
}
}
});
* add this plugin at the beginning of your script
ᴅᴇᴍᴏ ⧩
Chart.plugins.register({
afterDatasetsDraw: function(chart) {
if (chart.tooltip._active && chart.tooltip._active.length) {
var activePoint = chart.tooltip._active[0],
ctx = chart.ctx,
y_axis = chart.scales['y-axis-0'],
x = activePoint.tooltipPosition().x,
topY = y_axis.top,
bottomY = y_axis.bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#07C';
ctx.stroke();
ctx.restore();
}
}
});
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" height="200"></canvas>
score:0
Even though there is an accepted answer, I thought I might contribute a plugin I wrote which specifically addresses this question.
The chartjs line height annotation plugin
https://www.npmjs.com/package/chartjs-plugin-lineheight-annotation
There are a few exportable classes which can help you calculate to the top of the datapoint if you need. Additionally, there is a simple API which you can add to your chart's options object
/// default values
lineHeightAnnotation: {
// defaults to have line to the highest data point on every tick
always: true,
// optionally, only have line draw to the highest datapoint nearest the user's hover position
hover: false,
// colors of the line
color: '#000',
// name of yAxis
yAxis: 'y-axis-0',
// weight of the line
lineWeight: 1.5,
/// sets shadow for ALL lines on the canvas
shadow: {
// color of the shadow
color: 'rgba(0,0,0,0.35)',
// blur of the shadow
blur: 10,
/// shadow offset
offset: {
// x offset
x: 0,
// y offset
y: 3
}
},
// dash defaults at [10, 10]
noDash: true,
}
Source: stackoverflow.com
Related Query
- ChartJS: Draw vertical line at data point on chart on mouseover
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- chartjs show dot point on hover over line chart
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Draw a horizontal and vertical line on mouse hover in chart js
- Show data dynamically in line chart - ChartJS
- ChartJS - Line chart issue with only 1 point
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to draw Horizontal line on Bar Chart Chartjs
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS getting an unwanted line between first data point and last data point
- Empty circle - only point strok in line chart for ChartJS
- Do not draw line on condition in ChartJS line chart
- assigning line chart data in chartjs
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Vertical Line chart with ChartJS
- Real-time line chart with ChartJS using Ajax data
- Chartjs draw line chart where line go back and forth (by chronological order)
- plot a point on top on line chart in chartjs
- ChartJS dynamic line chart ghosting back to old data when hovered on
- Draw line between starting point and Ending point in semi doughnut chart in chart js
- dynamically update Chart.js draw line chart dataset data
- ChartJS vertical bar chart - measure percentage of the data in each column based on a specified max
- How to Draw a line on chart without a plot point using chart.js
- Show label for every data point in line chart
- How to bind data from Controler to chartjs line chart to create it as dynamic?
- Draw stacked horizontal bar chart with Average line using ChartJS
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
More Query from same tag
- ChartJS display legend
- ChartJS: Percentage labels
- mongoose.Schema for IoT Data Array and fetch the data to chart.js
- Parsing JSON data into Chart.js bar chart
- Chart.js v3 after using of zoom plugin instance persist in memory
- How to wait for data in useEffect hook before displaying it?
- Code doesn't work after updating chart.js versioning
- chartjs: bars smaller than actual column, tooltip doesn't display
- Importing data from Model into a View gives me an error I cannot solve
- New Chart.js Chart onclick
- Graphing the timestamp and data from mysql
- How to retrieve data from mysql to chart.js
- Chart.js boxplot: adding additional reference value?
- how to group the chart
- How to remove numbering on PolarArea circles?
- Animate datasets separately
- How to hide other section of chartjs on click of lengend
- Can "Bar" be placed center of vertical grid line in Chart.js?
- Remove specific label
- Google Pie Chart Is Not Responsive
- Get last 6 month name in Array for Chartjs
- Adding data to Chart.js line graph from array
- How to add labels for only some of the data point?
- Show nested objects in Chart.js
- Can i set dynamic step size on stepped line chart in chart.js?
- Chart.js <frame> or <iframe> elements do not have a title
- Border behind grid line
- Multiple charts on same page not working - ng2-charts
- Line chart issue. Chart JS
- Image-Chart ChartJs Ticks Callback not Working?