score:5
Accepted answer
just add the following lines before you draw your line
...
this.clear();
this.draw();
...
by the way, your line doesn't stretch all the way to the bottom. if you want to make it stretch all the way down use 0
and this.chart.height
for your ystart and yend. or you can use the y axis scale to calculate the max and min pixels for the scale (see https://jsfiddle.net/ombaww9t/).
fiddle - https://jsfiddle.net/56s9av1j/
score:5
working version for 2.6.0 (change 'y-axis-0' to the id of you y-axis)
// hook into main event handler
let parenteventhandler = chart.controller.prototype.eventhandler;
chart.controller.prototype.eventhandler = function () {
let ret = parenteventhandler.apply(this, arguments);
let x = arguments[0].x;
let y = arguments[0].y;
this.clear();
this.draw();
let yscale = this.scales['y-axis-0'];
this.chart.ctx.beginpath();
this.chart.ctx.moveto(x, yscale.getpixelforvalue(yscale.max));
this.chart.ctx.strokestyle = "#ff0000";
this.chart.ctx.lineto(x, yscale.getpixelforvalue(yscale.min));
this.chart.ctx.stroke();
return ret;
};
Source: stackoverflow.com
Related Query
- How to render a vertical line on hover in chartjs
- How to add a vertical line on Chart.js when hover a point?
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- Chartjs How to render a custom horizon line under X-Axis
- How to add vertical line in bar chart using chartJs and ng2-charts?
- chartjs show dot point on hover over line chart
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to trigger hover programmatically in chartjs
- Draw a horizontal and vertical line on mouse hover in chart js
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- chartjs - Drawing vertical line on integer x axis value
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJS vertical line not removed on touchend
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- How to draw Horizontal line on Bar Chart Chartjs
- How to dynamically set ChartJs line chart width based on dataset size?
- How do I make line charts overlay over bar charts in chartjs
- How to add ChartJS code in Html2Pdf to view image
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to increase gaps between vertical gridlines in chartjs
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- How to draw multiple line on y axis for same x axis in chartjs v2?
- How to cut line graph in ChartJS
- How to hide some points inside my line graphic in React ChartJS 2?
- how to highlight a specific area on chartjs line chart
- How do I hide line outside the min/max (scale area) in chartjs 2.0?
- How can I keep the vertical lines under the horizontal ruler line is chartjs?
More Query from same tag
- Chart.js number format
- Chart.js letter spacing very awkward
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJS 3.7.1 tooltip callback, get label value for the next index
- How to add commas when showTooltips is false in ChartJS
- Cannot access variables defined in webpack after build from client
- Angular Chart.js Multiple Canvas
- Chart.JS fixing maximum and minumum to a location on screen
- Filling area between two lines - Chart.js v2
- how to put a second pie chart right next to first pie chart inside the bootstrap card
- Chart.js: Widen hover distance for points
- Chartjs 2 - Stacked bar with marker on top
- Chartjs Graph is not showing in colorbox
- Chart.js add border around line chart, and yAxis unit title ([s])
- Chartjs - Loop thru dataset and assign colors
- How to fix bar width in chartjs?
- How to show data from views on chartjs in django?
- can't set ChartJS canvas width
- running an onclick command to show a table in chartsJS
- Chart.js yAxes Ticks stepSize not working (fiddle)
- ChartJS: Adjust Tooltip with sums in body
- How can we type a variable which is a method in TypeScript ? (Using Chart.js)
- this.map.tick is not a function
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
- How I connect chart.js to database in ASP.NET web form?
- Is there a way to align title and legend on the same line?
- React without npm - is it possible to import libraries / modules?
- Send Chart.js as HTML and then render via ajax
- How to align vertical axis area on two charts in chart.js
- chart is not getting updated from the values it received from Jquery