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
- Adding data to line chart using addData() method in Chart.js
- How to implement chart js using viewbag in mvc razor
- HTML: How to get rid of overlapping
- How can I hide tooltip in Chart.js on a specific data label?
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- Hide Legend in Chart.js V3.7.1
- Chart.js is always increasing height on chart.resize()
- Why my ChartJs only Coloring one section?
- chart.js: Place tooltip for stacked bar charts on top of bar
- Limit Label test
- ChartJS tooltip issue
- Chartjs is disappearing in Ionic tabs when keyboard dismiss
- Why is my Line Chart not displaying (Chart.JS)?
- Why am I getting "plot.new has not been called yet" calling legend() after chartJSRadar()
- How can I hide tick marks on Chart.js?
- SPFx ChartJS Web Part
- Remove padding from chartJs horizontal bar chart
- How to use PrimeNg Chart of Width and Height?
- Hide label on slice of Doghnut/Pie Chart Angular ng2-charts
- ChartJs chart in typescript: Object is possibly undefined in useEffect
- Chart.js plugins overlapping tooltips
- Show chart.js animation only when user scroll on the specific DIV
- Setting ChartJS plugin on vue-chartjs not working
- Make months on x-axis clickable on chart.js line chart
- Angular-chart / line chart with multiple horizontal lines (margins)
- Q: Chart.js v2 - x-axis time scale configuration
- Any way to make the y-axis border longer in chart.js?
- Pie chart inside doughnut on same canvas
- C# How to print html Convas element in PDF document
- Creating a diagonal shaded area in chart.js