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
- Chart.js error: type lacks a call signature '((...items: number[]) => number) | ((...items: ChartPoint[]) => number)' in Angular
- Chart.js load new data from saved JSON object
- chartjs-plugin-datalabels not showing on stacked horizontal bar
- ChartJS Draw grid line X-Axis and Y-Axis
- zoom and pan on charts in angular
- XMLHTTPRequest Repeating Entries on ChartJS
- npm chart.js is big after minimization
- How to access custom property in dataset object in Bar Chart in React ChartJS 2?
- Add data to line chart js dynamically with multiple lines
- Replace a Canvas Pie Chart Onclick
- ChartJS different background gradient depending on data (line graph)
- chart looking strange on phone´s browser using chart.js
- Add Gridlines using ChartKick in Rails
- space before and after data points in chart.js
- Chart JS + Laravel - How to add 0 to array
- How to make dashed thick lines with dots in ChartJS ? Is it possible?
- Chart.js returns a console error and does not display the chart when using variables as data input
- chart.js stacked graph that overlaps
- Resize the width and height of the ng2-charts
- Chart.js causes Angular 2 error
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- chart.js Radar shows 0 when value is 12
- How implement Chart.js in Angular 2?
- Is there any way to get y of specific x which not belongs to the dataset in Chart.js graph?
- Trouble getting Axis Labels to show up in Chart.js
- Chart to update from a drop down selection
- Can't get event from chartjs-annotation-plugin on mouseenter
- Chart.js line chart set background color
- How to display grouped data in ChartJs
- Change tooltips title at chart.js?