score:0
i was facing the same issue when using chartjs 3.0. i used the following code to get the horizontal line displayed
var horizonallineplugin = {
id : 'horizontalline',
afterdraw: function (chartinstance) {
// var yscale = chartinstance.scales["y-axis-0"];
var yscale = chartinstance.scales['y'];
// var canvas = chartinstance.chart;
var canvas = chartinstance.canvas;
var ctx = chartinstance.ctx;
var index;
var line;
var style;
var yvalue;
if (chartinstance.config._config.options.horizontalline) {
for (index = 0; index < chartinstance.config._config.options.horizontalline.length; index++) {
line = chartinstance.config._config.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(20, yvalue);
// 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.register(horizonallineplugin);
score:3
chartinstance.chart is undefined. not sure is that a migration issue to chart.js ver 3.0...
try the following:
<!doctype html>
<html lang="en">
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.0.0-beta.6/chart.js"></script>
<style>
.container{
position: relative;
width: 50vw;
}
</style>
</head>
<body>
<canvas id="mychart" class="container"></canvas>
<script>
var canvas = document.getelementbyid("mychart");
var ctx = canvas.getcontext("2d");
var horizonallineplugin = {
id: 'horizontalline',
afterdraw: function(chartinstance) {
var yscale = chartinstance.scales["y"];
// chartinstance.chart is undefined
//var canvas = chartinstance.chart;
// console.log(canvas);
// 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;
}
}
};
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "mydataset01",
fill: false,
linetension: 0.1,
backgroundcolor: "rgba(75,192,192,0.4)",
bordercolor: "rgba(75,192,192,1)",
data: [65, 59, 80, 81, 56, 55, 40],
},
]
};
//when uncommenting below line, graph is created without horizontal lines
chart.register(horizonallineplugin);
var mychart = new chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalline": [{
"y": 75.8,
"style": "#ff0000",
"text": "upper-limit"
}, {
"y": 62.3,
"style": "#00ff00",
"text": "avg"
}, {
"y": 48.8,
"style": "#0000ff",
"text": "lower-limit"
}],
}
});
</script>
here is the code above in jsfiddle - working!
Source: stackoverflow.com
Related Query
- How to draw horizontal Lines using chart.js 3.x ? Cannot get it working
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How to Draw Gantt chart using chart js or other libraries
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to draw Horizontal line on Bar Chart Chartjs
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- How to draw multiple color bar in a bar chart using chart.js
- How to get Data from API to display chart using chartjs in Vuejs
- How to get the data attribute of the canvas chart created using chartjs
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Can't draw pie chart using chartjs - TypeError: Cannot create property '_meta' on number '16'
- How to Draw a line on chart without a plot point using chart.js
- How to draw a chart like below 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
- how to draw Line chart using chart.js and datalabels should be shown
- Draw stacked horizontal bar chart with Average line using ChartJS
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- How to run Chart.js samples using source code
- how to modify horizontal bar chart using chart js
- How to use canvasjs to draw column chart using text data
- How do I draw horizontal bars with a label using either ChartJS or D3?
- How to pass Arrays from backing bean to JavaScript to draw a chart using Chart.js in an Ajax call
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Draw horizontal line on chart in chart.js on v2
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How to add an on click event to my Line chart using Chart.js
- Draw horizontal lines in Chart.js 2.0
More Query from same tag
- Chart for Real time data with duplicate x axis
- Pie chart using chart.js
- How to differentiate the data of one topic or another coming from Mercure hub if the client is suscribed to two topics
- Chart.js using the value of certain data in external json file
- Chart.js canvas keeps shifting upwards if I add things below it? (Angular - Chart.JS - NG2Charts)
- Chartjs background color multiple Dataset
- Adding trendlines to existing chart Chart.js
- Chart.js chart doesn't render when using Angular 2
- Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart
- how to make doughnut chart portions, buttons
- Barchart show value to print
- Tooltip backgroundColor depending on chart color ChartJS
- Dynamically Setting Height of Chart
- How to create a variable for chart js datalabel plugin formatter
- ChartJS disable gridlines outside chart area
- react-chartjs-2 fill property not working?
- Chart.js How to actualize canvas due to new x-axis range typed by user
- Chartjs 2.7.3: Set Y data at the correct X position axis
- Change font size and font color in Chartjs Angular 5
- Chartjs v7.0 with plugin zoom, strange effect when use "drag" mode.
- Polar Area onclick event
- not able to move my range slector
- Chart.js2 Radar, how to configure the label padding/spacing?
- Unexpected behavior with chart.js
- Chart.js Start Y-Axis at a defined value
- How to use dates as X axis with Chart.js even when there is no Y axis value related
- Bootstrap Card Render Problem in Google Chrome
- Chart.js Doughnut Chart Rendering Wrong
- Chart.js manipulate each bar in chart with different labels
- Q: Chart.js v2 - x-axis time scale configuration