score:56
you could use the chart.js annotation plugin to easily draw lines on your chart without having to mess with rendering pixels in your canvas manually (the old approach that is giving you errors). note, the plugin is created/supported by the same team as chart.js and is mentioned in the chart.js docs.
here is an example codepen demonstrating creating a line on a chart.
once you add the plugin, you simply just set annotation
properties in your chart config. here is an example.
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: ["january", "february"],
datasets: [{
label: 'dataset 1',
bordercolor: window.chartcolors.blue,
borderwidth: 2,
fill: false,
data: [2, 10]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'chart.js draw line on chart'
},
tooltips: {
mode: 'index',
intersect: true
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleid: 'y-axis-0',
value: 5,
bordercolor: 'rgb(75, 192, 192)',
borderwidth: 4,
label: {
enabled: false,
content: 'test label'
}
}]
}
}
});
score:2
here's an example of getting it working in a rails view if you're using it with the chartkick gem:
<%=
line_chart profit_per_day_chart_path(staff), xtitle: 'day', ytitle: 'profit',
library: {
annotation: {
annotations: [
{
type: 'line',
mode: 'horizontal',
scaleid: 'y-axis-0',
value: 20,
label: {
content: 'my horizontal line',
enabled: true
}
}
]
}
}
%>
ensure that you've registered the chartjs-plugin-annotation.js plugin with chart.js first:
import chartannotationsplugin from 'chartjs-plugin-annotation';
chart.plugins.register(chartannotationsplugin);
score:6
if you want to draw threshold line,easiest way is that using mixed line chart.
note: make an array filled with threshold value and the length should be same as your dataset.
var datasets = [1, 2, 3];
var ctx = document.getelementbyid('chart').getcontext('2d');
var thresholdvalue = 2;
var thresholdhigharray = new array(datasets.length).fill(thresholdvalue);
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [
{datasets}, thresholdhigharray]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
scales: {
xaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'readings'
}
}],
yaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'reading ( °c )'
}
}]
},
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleid: "x-axis-0",
bordercolor: "red",
label: {
content: "",
enabled: true,
position: "top"
}
}
]
}
});
};
score:6
if you are using the npm package chartjs-plugin-annotation.js, the important thing - which you may forget, is to register the plugin.
so first of all you installed the npm packages (here for react):
npm i react-chartjs-2 (depends on your framework)
npm i chartjs-plugin-annotation (always required)
see vue.js or angular for their framework depending packages.
option 1: global plugin registration
import { line } from 'react-chartjs-2';
import chart from 'chart.js';
import * as chartannotation from 'chartjs-plugin-annotation';
chart.plugins.register([chartannotation]); // global
// ...
render() {
return (
<line data={chartdata} options={chartopts} />
)
}
option 2: per chart plugin registration
import { line } from 'react-chartjs-2';
import * as chartannotation from 'chartjs-plugin-annotation';
// ...
render() {
return (
{/* per chart */}
<line data={chartdata} options={chartopts} plugins={[chartannotation]} />
)
}
chartdata
is equivalent to the data: {
section and chartopts
to options: {
from jordanwillis answer. see this github post for further information.
there are many other plugins available for chart.js.
Source: stackoverflow.com
Related Query
- 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
- Chart.js - draw horizontal line in Bar Chart (type bar)
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- Draw stacked horizontal bar chart with Average line using ChartJS
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chart.js - draw horizontal line
- ChartJS: Draw vertical line at data point on chart on mouseover
- Can we draw a Line Chart with both solid and dotted line in it?
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- Chart.js - draw horizontal line based on a certain y-value
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Draw a horizontal bar chart from right to left
- Angular-chart / line chart with multiple horizontal lines (margins)
- Chart.js horizontal line chart or modified horizontal bar chart
- change space between horizontal (grid) lines for line chart
- Chart.js - Horizontal line on Bar chart interferes with tooltip
- Do not draw line on condition in ChartJS line chart
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- Remove top horizontal line in a horizontal bar chart (Chart.js 2)
- Change horizontal line chart to vertical line
- Chartjs draw line chart where line go back and forth (by chronological order)
- I want to draw a horizontal line
- Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?
- Draw line between starting point and Ending point in semi doughnut chart in chart js
- dynamically update Chart.js draw line chart dataset data
- chart js draw line chart by points instead of by lines
More Query from same tag
- Mixed Diagram (Line/Bar) with two y-Axis won't display data on 2nd Axis
- (Ionic 3) How to make font size of labels in charts.js responsive?
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- Use chartjs with rails
- Force display of ticks on xAxes using chartkick gem and chart.js
- How to Create a Doughnut chart in Angular 12
- How to add variable-pie chart to react project?
- how can i reset chartjs object all instances and recreate it from scratch?
- Query with empty results laravel eloquent
- how to sort tooltip value in Chart.js
- Hide min and max values from y Axis in Chart.js
- Changing color of specific chartjs point
- How to change the z-index of chartjs annotations label?
- How to render a vertical line on hover in chartjs
- Struggling with dynamic data
- int Array with empty value
- Implement Chart.js Plugin Meteor Project
- Chart.js how to change width of color
- Chart JS is using 1,2,3 as y values for my points for the second dataset instead of their passed in labels
- NODEJS API: How to render .pug and send a AJAX response at same time?
- How to adjust the Js Chart's label?
- copy object in Chart.js
- Vuejs with ChartJS populate from API
- What are these line-boxes called in Chart.js, and how do I turn them off?
- How to access or get value of specific graph on chart plot by click event?
- How to make intermittent lines to represent periods of presence and absence on a given line during it's length on Multi Axis chart?
- ChartJS set default options only to specific Canvas, not globally
- Line Chart with null values: How to keep Lines connected?
- Async showing data in pieChart from chart.js with typescript
- Chart.js - x-axis and tooltip label shows "undefined" in Chrome when browser language is NOT English