score:25
Accepted answer
options
with chart.js you have 2 options.
- you could create a mix chart types (example here). this would allow you to add a line charts to create your lines.
- you could create a plugin (see example below).
option 2 would be the one i recommend as it allows you to have more control over the appearance of the lines.
the fix
chart.js now supports plugins. this allows you to add any features you want to your charts!
to create a plugin you will need to run code after an event has occurred and modify the chart/canvas as needed. the following code should give you a good starting point:
var horizonallineplugin = {
afterdraw: function(chartinstance) {
var yvalue;
var yscale = chartinstance.scales["y-axis-0"];
var canvas = chartinstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartinstance.options.horizontalline) {
for (index = 0; index < chartinstance.options.horizontalline.length; index++) {
line = chartinstance.options.horizontalline[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yvalue = yscale.getpixelforvalue(line.y);
} else {
yvalue = 0;
}
ctx.linewidth = 3;
if (yvalue) {
ctx.beginpath();
ctx.moveto(0, yvalue);
ctx.lineto(canvas.width, yvalue);
ctx.strokestyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillstyle = style;
ctx.filltext(line.text, 0, yvalue + ctx.linewidth);
}
}
return;
}
}
};
chart.pluginservice.register(horizonallineplugin);
Source: stackoverflow.com
Related Query
- Draw horizontal line on chart in chart.js on v2
- Draw horizontal lines in Chart.js 2.0
- 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
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- Draw a horizontal bar chart from right to left
- How to draw horizontal Lines using chart.js 3.x ? Cannot get it working
- Angular-chart / line chart with multiple horizontal lines (margins)
- change space between horizontal (grid) lines for line chart
- Chart.js - draw horizontal line in Bar Chart (type bar)
- chart.js-plugin-annotations multiple horizontal lines in one chart
- Draw points and lines inside a bar in bar chart
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- chart js draw line chart by points instead of by lines
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Draw stacked horizontal bar chart with Average line using ChartJS
- Draw vertical and horizonal lines on the radar chart (like x-y axes)
- Is it possible to draw min / max lines on Chart JS
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How can I make two of my lines in Chart JS thicker
- Chart.js - draw horizontal line
- ChartJS - Draw chart with label by month, data by day
- Horizontal stacked bar chart with chart.js
- Horizontal bar chart in chart.js
- How to Draw Gantt chart using chart js or other libraries
- Chart JS Fill Between two lines
- Chart.js v2 is there a way to draw bar chart horizontally?
More Query from same tag
- After rendering one chart when trying to render a new one chart.js gives "Check that a complete date adapter is provided."
- Javascript and Chart.JS - issue with getting unique text in 3 donut hole charts - same text showing for all 3 donut holes
- Reverse tick order
- Chart changes different on zoom when using multiple charts with chart.js and flask
- i can't create a line vertically with react annotation
- Why does chart update fail when its container has ng-show on it?
- Chart.js - Make x-axis grouped by day
- How to show group by data just like sample image using Chart.js?
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- Add a click event to the bar chart of chartjs
- Chart.js not rendering unless i set a timeout
- how to change background in chartjs and remove background lines?
- JavaScript: Add Event Listener to an Event Listener
- react-chartjs-2 TypeError: undefined is not an object (evaluating 'nextDatasets.map')
- react-chartjs-2 Line Chart not updating with State
- Reducing Y-axis in chart.js
- How to Draw Gantt chart using chart js or other libraries
- Display only certain labels with chart.js
- Chartjs: Overlapping values when using Datalabels plugin
- Chart js error in angular: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. Fix?
- Javascript 2D array getting each element
- Order the Time Units on Y-axis + Chart Js
- Bar Chart of ChartJS does not Render
- React Js and Chart Js (Line Chart)
- Disable display of x and y values on ChartJS
- Diplay multiple chart js Diagrams on one page
- How to use HTML in custom tooltip in angular charts?
- Remove Canvas then add new Canvas in same spot
- Is it possible to set top border on ChartJS Doughnut Gauge chart
- Getting Error regarding :Cannot read property 'length' of undefined