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
- Chart js. How to change font styles for "labels" array?
- addData() dropped from latest chart.js 2.1.3 - whats up?
- Why ChartJS's Bar Chart does not render bar for a specific value?
- How to filter data for dxChart
- Why is my Chart.JS canvas not destroying?
- Access data arrays from c# method inside JavaScript inside .cshtml file
- Chartjs - legends take up too much space on mobile devices
- JSON cyclic object value when posting data in ChartJS
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Make the X-Axis labels in chart.js increment by a certain scale
- How do I remove cartesian axes from chart js?
- C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing
- chart js put meter square / superscript on y axis
- React.js made a Custom Line Chart
- Chartjs display label & units when mouse is hover stats
- Get data from sql database in chartjs using codeigniter
- How to add conditional fill color in Chart.js area chart?
- Resizing vue-chartjs height while keeping it responsive
- Unable to hide X-Axis in horizontal stacked chart.js
- ChartJS - Custom tooltip with icon
- Tooltips on multiple charts in chart.js showing the wrong values
- Charts.js scales yaxes ticks min max doesnt work
- Chart Js change text label orientation on Ox axis
- Chart js Bar Time Chart
- Trigger axispointer function on existing chart js via console
- Trying to access key in JSON array
- How to get tooltip on chart.js v1.x?
- Is there a way to align title and legend on the same line?
- Angular2 charts (chart.js) Labels not vertical even though option is set
- Customise size of data points , height and width in Chart.js?