score:2
you can extend chart.js to do this. just override the showtooltip
method after initializing the chart.
preview
script
chart.types.line.extend({
name: "linealt",
initialize: function () {
chart.types.line.prototype.initialize.apply(this, arguments);
var originalshowtooltip = this.showtooltip;
this.showtooltip = function (activepoints) {
if (activepoints.length) {
var ctx = this.chart.ctx;
var scale = this.scale;
ctx.save();
ctx.strokestyle = '#aaa';
ctx.beginpath();
ctx.moveto(activepoints[0].x, scale.startpoint);
ctx.lineto(activepoints[0].x, scale.endpoint);
ctx.stroke();
ctx.restore();
}
return originalshowtooltip.apply(this, arguments);
}
}
});
and then
new chart(ctx).linealt(data);
fiddle - http://jsfiddle.net/98gz1fhw/
Source: stackoverflow.com
Related Query
- Vertical scrubber line using chartjs
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Moving vertical line when hovering over the chart using chart.js
- Display line chart with connected dots using chartJS
- How to render a vertical line on hover in chartjs
- chartjs - Drawing vertical line on integer x axis value
- ChartJS vertical line not removed on touchend
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- display vertical axis label in line chart using chart.js
- ChartJS - Moving vertical line is display on top of tooltip
- Vertical line using Chart.js annotations plugin with linear scale on x axis
- 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
- ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1
- Moving vertical line when hovering over the chart using chart.js in v2.9.4
- How to fill a graph by a color till a vertical line using chart.js
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- Draw stacked horizontal bar chart with Average line using ChartJS
- Make Line Chart Dynamic From JSON File Using Chartjs
- How to run Chart.js samples using source code
- Connect 2 line in chart using chartjs
- Creating a real time line chart using chartjs and firebase realtime db
- Chart.js — drawing an arbitrary vertical line
- ChartJS Line Charts - remove color underneath lines
- Chartjs change grid line color
- Chartjs Tooltip Line Breaks
- Remove the vertical line in the chart js line chart
- Chart.js creating a line graph using dates
- create a multi line chart using Chart.js
More Query from same tag
- How to edit style of negative x grid lines on Chart.js?
- Bars on second X Axis not showing
- Chart.JS Format Labels For DataSets Differently
- Ng2-charts set color for one specific value in dataset
- chart.js show no charts in IE11
- How to apply gradient color in chart.js?
- How do I draw horizontal bars with a label using either ChartJS or D3?
- Chart.js - How to set animation speed?
- Custom Legend ChartJS not showing the text decoration: line through
- Chart.js: Some sectors not showing if difference is too big
- Chart JS tooltips diffrent colors for label
- How do we can use chart.js in angular JS?
- Chart.js not drawing on mobile (safari/chrome) fine on desktop
- Cleart Chart data upon ajax call
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- Display values in Pareto chart using Chart.js 2.0.2
- How to get a value from function javascript and print it to the chart
- Chartjs Barchart without borders
- Uncaught type error: mychart.update is not a function
- In chartJS, change label color onhover
- How to set start value as “0” in Chart.js Laravel
- Calculate value in tooltip in ChartJS
- Hovering over line chart shows old chart data issue in chart.js
- Displaying dataset labels in Chart.js line graph
- Chart.js not showing line chart. What am I doing wrong?
- Changing Dataset for a chart in angular 10
- Integrating TideSDK with C *.dll
- In chart.js bar chart, how do I label each bar within a category?
- Chartjs Custom Legend with Time on Y-axis
- Chart.js load new data from saved JSON object