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
- Chart.js legend is undefined
- Highlighting point in all datasets on hover over
- How can I pass my sqlite data to django, and make chart?
- How to only draw the graph and the Xaxis gridlines using chart.js
- Set minimum and maximum axis values on chart
- ChartJS shows up and disappears
- Displaying JSON data with Chartjs
- Replace a Canvas Pie Chart Onclick
- Increase padding between legend and chart with react-chartjs-2
- Async showing data in pieChart from chart.js with typescript
- I am not able to show dotted circle for percentage
- How to parse "hh:mm:ss" strings to time in Charts.js 3.x
- copy object in Chart.js
- ChartJs - width scale of chart area and label area
- How to set dynamic value for horizontal line in annotation plugin for Chart.js
- hide label on doughnut chart of chartjs
- Reopening a "ChartJS" chart in a new window (VS, C#, ChartJS)
- Vue-Chartjs not rendering graph
- White space at start and end of data with time scale in chart.js
- How to set a minimum width on the values in a doughnut chart?
- Pass data to Chart Js Laravel
- Chart.js More than 1 charts on same web page
- Send Chart.js as HTML and then render via ajax
- Chartjs isn't rendering bar chart, even though chart variable shows correctly when console logged
- how can conditionally show/hide gridlines on the yAxis using Chart.js?
- How to filter chart.js by month
- ChartJS 2.7.0 updating and exporting as png
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- can't call any function inside of onClick function chart.js
- Chart.js unwanted canvas resizing