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
- How to call a JavaScript file inside a PHP if/else statement?
- Control which lines have points?
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- How to add an event when clicking a bubble in bubble chart?
- Why are the default Chart.js legend boxes transparent rectangles?
- Chartjs - resize an image positioned in a column
- Chart.js load new data
- Change background transparency of Chart.js chart
- how to add simple option to chartjs correctly
- Chart.js stacked line chart with differently styled sections
- How to create dynamic charts with Django and Chart.js?
- How to create range based ticks in chart js? (like in attached image)
- React Chart.js onClick for custom legends
- Dynamic maximum y-axis value on Chart.js
- Line Chart: background of RangeSlider
- How to reduce the distance between yAxes in Chart.js?
- Chartjs bar chart appears empty when page loads
- Two chart for the same set of data - Chart.js
- ChartJS, merge legends for multiple charts
- hide label on doughnut chart of chartjs
- Redraw Chart.js Chart with Json_encoded array from ajax request
- ChartJS - Graphic with multiple values on the same date
- ChartJS hover tooltip colors not showing their correct color
- Chart.js showing different graphs with select
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Chart.js dynamic bar width
- Increase space between largest bar and top grid line in charts.js
- How to hide the labels of graphs that are not toggled in ChartJS
- Chartjs tooltip out of page
- How can I change color of only one column in Barchart using Chart.js