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
- Using vue-charts.js, I cannot get hoverOffset to work with doughnut
- Charts in wicket
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- Update charts in chartjs and angular
- Exponential decrease
- Floating clone does not show in chrome if dragged element contains a chartjs component
- chart.js wide bar with time scale
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- Chart.js Update start date with button selector
- Horizontal BarChart with labels and additional text
- loading json file to create chart
- Chart.js pie chart not showing in Google Chrome canvas
- Plot a Line chart using Chart.js with CSV Data
- Why can't I create monthly sales report with Chart.js in Codeigniter
- Chart JS not working with Phonegap
- How to send an array of object as a prop?
- Stacked bar chart with rounded corner of bar using Chart.js
- Test a Chart.js canvas with Protractor
- Can't update chart
- Ionic2 Angular2: I can't seem to get an ng2-chart to appear in my app
- How to ignore same values on ChartJs?
- Horizontal stacked bar chart with chart.js
- How to show dynamic dates with month name of current month and previous month in momentjs?
- Chartjs working with large and small values
- How can I avoid NaN on pie chart label in Chart JS
- How to move Chart.js legend?
- What kind of graph could I use to achieve this with ChartJS (or similar)?
- How to set static labels for ng2-charts bar charts?
- chart.js 3 stacked bar chart - tooltip showing for zero values
- Trying to export chart with Chartjs and React but getting erorr