score:0
hey i don't know if this still helps you, but i wrote a plugin for chartjs which does exactly what you're asking. you may be able to adapt the source code in the repo for your own needs. here's a relevant snippet:
/**
* draw the line height annotation to the highest data point on the chart.
* @param {int} x horizontal coordinate on canvas
* @param {int} bottomy bottom y dimension of the chart
* @param {float} highestdatay highest possible y value on the chart, taking padding and border offsets into consideration.
*/
drawlineheightannotation(x, bottomy, highestdatay) {
let ctx = this.ctx;
let options = this.options;
ctx.save();
ctx.beginpath();
if (!options.nodash) {
ctx.setlinedash([10, 10]);
}
ctx.moveto(x, highestdatay);
ctx.lineto(x, bottomy);
ctx.linewidth = options.lineweight ? options.lineweight : 1.5;
ctx.strokestyle = options.color ? options.color : "#000";
ctx.stroke();
ctx.restore();
}
Source: stackoverflow.com
Related Query
- ChartJS/ ChartJS-plugin annotation set height of vertical line
- How to set dynamic value for horizontal line in annotation plugin for Chart.js
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- How to render a vertical line on hover in chartjs
- chartjs - Drawing vertical line on integer x axis value
- Chart.js How to set line height only to the points?
- ChartJS vertical line not removed on touchend
- How to dynamically set ChartJs line chart width based on dataset size?
- Chart.js - Vertical crosshair (vertical annotation that moves with mouse) in line graph
- annotation line not visible in scatter chart in chartjs
- Chart.js plugin annotation line shadow
- How to set vertical lines for new day on x-axis in ChartJS v3.x
- ChartJS - Moving vertical line is display on top of tooltip
- Vertical line using Chart.js annotations plugin with linear scale on x axis
- Dynamically update value for horizontal line in annotation plugin for Chart.js in Angular 5
- ChartJS 3 get height of stacked vertical bar
- Vertical Line chart with ChartJS
- chartjs with the plugin chartjs-plugin-dragdata can i set fix dropdown values
- Vertical scrubber line using chartjs
- ChartJs - annotation line can not drawn
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- Set Tooltip over line Chartjs
- How to set specific height for chartJs background color in terms of yAxis value
- Chartjs annotation plugin colored box colors get summed after switching back and forth
- Chartjs bar chart blurry when height is set
- Chart.js - annotation Vertical line moves with mouse in Angular 6
- How to shrink the height and increase the line width of a custom Chartjs horizontal line?
- How to add vertical line in bar chart using chartJs and ng2-charts?
- ChartJS set color of Line chart points depending on Y Axis
- Set height of chart in Chart.js
More Query from same tag
- Fetch more data for line chart onZoom/onPan issues
- How to filter hover on a chart in ChartJS?
- what is fastest way to draw chartjs charts
- chart.js update is not a function
- how can i grab a property from an array of JSON objects to use the values of that property as a labels in my chart?
- Why can I not see a data value when hovering over a point on the radar chart?
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- Chartjs remove text striking on legend
- destroy multiple charts on same page
- chart.js load totally new data
- Line chart Change background color of shaded region on hover (Chartjs)
- How to remove square label from tooltip and make its information in one line?
- Charts.js : How to remove the Vertical Black lines in Bar Chart
- Chart.js stacked bar chart text on top of the stacked bars
- How to edit my custom tooltips in my line chart using chart.js?
- ChartJS: subsequent charts hide previous charts
- Is it possible to show labels for all lines?
- How do you insert a linear horizontal line in chart.js
- How can I hide tooltip in Chart.js on a specific data label?
- How to use two Y axes in Chart.js v2?
- Charts.js Dynamic Ticks
- ChartJs Doughnut parsing datasets
- Chart.js and Angular 8 - Dynamically updating Chart.js labels and data from *ngfor
- Chart.js with wrong Y axis
- Issue regards data in charts JS
- Chart.js is not Dynamically Updating when the firebase databse is updating. (Vue.js)
- How to stop resizing chart.js in case hovered and out of boundaries?
- Create ticks at certain time positions on a chartjs cartesian time axis
- How to seprate label and total value using array and pass to view
- Chart to update from a drop down selection