score:3
Accepted answer
Drawing a Horizontal Line at a Specific Y Value
Just utilize the scale.calculateY
to do this
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
Chart.types.Line.extend({
name: "LineWithYLine",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var scale = this.scale
var ctx = this.chart.ctx;
// calculate using the scale
var y = scale.calculateY(this.options.lineAtValue);
// draw line
ctx.save();
ctx.strokeStyle = '#ff0000';
ctx.beginPath();
ctx.moveTo(Math.round(scale.xScalePaddingLeft), y);
ctx.lineTo(this.chart.width, y);
ctx.stroke();
ctx.restore();
}
});
new Chart(ctx).LineWithYLine(data, {
datasetFill: false,
lineAtValue: 7.5
});
If you want to draw a label, you can adjust the line end position to leave space. Then use the same y value to draw text there.
If your chart data points don't cause the scale to stretch enough (eg. the scale is from 0 to 10, but you want to draw a line at 12) use the chart.js options to override the scale.
Fiddle - http://jsfiddle.net/gywzg9e4/
Source: stackoverflow.com
Related Query
- Chart.js - draw horizontal line based on a certain y-value
- Draw horizontal line on chart in chart.js on v2
- 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
- How to draw Horizontal line on Bar Chart Chartjs
- How to use segment property to color line / border color based on value in chart js?
- How to sort XY line chart tooltip items based on value and add thousands separators?
- Chart.js - draw horizontal line in Bar Chart (type bar)
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Chartjs 3 how to draw a horizontal line starting at a specific yAxis value
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- chart.js line chart and "correct" spacing between points? (i.e. horizontal position based on percent of width, not fixed)
- Draw stacked horizontal bar chart with Average line using ChartJS
- How to draw a line in line chart for single value in Charts.JS
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chart.js - draw horizontal line
- How to display value of only one datapoint in line chart
- Obtain max value of y axis of line chart rendered with Chart.js
- ChartJS: Draw vertical line at data point on chart on mouseover
- Map event position to y axis value in chartjs line chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Drawing line chart in chart.js placing dots only when value changes
- Can we draw a Line Chart with both solid and dotted line in it?
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- How to dynamically set ChartJs line chart width based on dataset size?
- chart.js bar chart color change based on value
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Draw a horizontal bar chart from right to left
- How to change line segment color based on label value in chart.js?
More Query from same tag
- ChartJS: Draw line between two data points on hover
- Trying to use axios, vuejs and a dummy api for my chartjs and googlecharts (get requests only)
- how to change thickness of two doughnut charts in chartjs
- Angular: chart.js chart is not displaying
- Pie chart inside doughnut on same canvas
- Chartjs - Stacked bar chart blocking other values
- Chart.js Radar chart multiple datasets
- Chartjs tick color different at zero
- ng2-chart tooltip position change option?
- Not able to add elements to an array in typescript using chart.js and bootstrat charts
- How to get access to Chart instance related to current tooltip callback in Chart.js
- Angular using PrimeNG charjs problem with font colors
- Can't load multiple charts onto a page when looping through dummy array
- how to filter year from datefield in django
- Vue-Chart.js: a chart doesn't begin from zero
- Extend chart.js horizontal bar graph to include a vertical line
- Chart.js won't draw the line on chart line
- Using Chart.js, how do I avoid having tooltips overlap?
- Create a chart on a dynamically created canvas in Angular-chart.js
- ChartJS - Gradient color overlap
- Alter angular js chart wrapper to support drawing custom lines
- How can I force my ChartJS canvas legend to stay in a single column?
- Execute script after loading server side rendered React component
- Html5 web page with chartjs: loading an external json file and create a line chart
- how to change scales title position in chart.js
- ChartJS Unix Time Values changed
- Chartjs numbers on bar chart flash on hover
- Set Animation speed - ChartJS?
- Angular ng2-charts chartsjs-plugin-labels options not working
- Displaying line chart for multiple months using chart.js