score:0
Accepted answer
i found the solution myself. here it is
<div class="row">
<div class="col-12 border">
<canvas id="mychart"></canvas>
</div>
</div>
<script src="./assets/charts/dist/chart.js"></script>
<!----------------------mychart---------------------->
<script>
var canvas = document.getelementbyid("mychart");
var ctx = canvas.getcontext("2d");
var horizonallineplugin = {
afterdraw: function(chartinstance) {
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);
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
fill: false,
linetension: 0.1,
backgroundcolor: "rgba(75,192,192,0.4)",
bordercolor: "rgba(75,192,192,1)",
bordercapstyle: 'butt',
borderdash: [],
borderdashoffset: 0.0,
borderjoinstyle: 'miter',
pointbordercolor: "rgba(75,192,192,1)",
pointbackgroundcolor: "#fff",
pointborderwidth: 1,
pointhoverradius: 5,
pointhoverbackgroundcolor: "rgba(75,192,192,1)",
pointhoverbordercolor: "rgba(220,220,220,1)",
pointhoverborderwidth: 2,
pointradius: 4,
pointhitradius: 10,
data: [65, 59, 80, 81, 56, 55, 48],
}]
};
var mychart = new chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalline": [{
"y": 82,
"style": "rgba(255, 0, 0, .4)",
"text": "max"
}, {
"y": 50,
"style": "#00ffff",
"text": "min"
}]
}
});
</script>
Source: stackoverflow.com
Related Query
- Chart.js How can i make a horizontal lines like this?
- How can I make two of my lines in Chart JS thicker
- How to make dynamic chart with the next view? What libraries allows to customise exactly this like in my design?
- How can I make lines fully connected in a multi-line chart even when one dataset is more sparse than another?
- How can I get A radar chart like this by chart.js
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make a stepline or stepped chart in chart.js or D3?
- How can I make line on chart thinner?
- ChartJS: how to make a bar chart with a horizontal guideline:
- How can I keep the vertical lines under the horizontal ruler line is chartjs?
- How can I make small grid lines above ChartJS labels?
- How can I make streaming chart with react?
- How can I achieve something like this image with chart.js(react-chartjs-2)?
- How do I destroy/update Chart Data in this chart.js code example?
- how to make realtime update chart like in package express-status-monitor?
- How to make labels on both side from horizontal bar chart js
- how can I make selected data is highlighted on chart js?
- Can I make a horizontal bar chart with two category axes?
- How can i do this chart in react?
- Chart.js variable data how can i make this work?
- How to create a donut chart like this in chart.js
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to display data labels outside in pie chart with lines in ionic
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- how to make a chart.js bar chart scrollable
- How to draw Horizontal line on Bar Chart Chartjs
- Chart js: how can I align the legend and the title
- how to programmatically make a line chart point active/highlighted
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
More Query from same tag
- Multidimensional Charts.js (array of arrays)
- Overlapping Bar Chart using Chart.js
- How to convert (convas chart) to either (Chart , or system.drawing.image , or stream , or []byte ) where I can use it in c# to generate pdf
- Update a chart dynamically with socket.io in real time
- How to make `fillColor` as gradient in chart.js?
- Hiding Chart.js line, but showing it's data in the tooltip
- Changing line color below specific value in Chart.js
- ChartJS creating var takes each character and outputs undefined
- create Chart using Chartjs and PHP
- Laravel 5 Chart Js rendering multiple charts in blade template error
- Chartjs : Remove specific labels
- how to manipulate with the y-axis values in chartjs
- How can I effectively adjust the dimensions of a canvas element?
- ChartJs multiaxis chart show different label bottom and top
- Chart.js scatter charts: Is there a way to indicate that datapoints of two data sets are on top of each other?
- Problem in passing values using props in react.js while using chart.js
- Define backgroundColor from data in chartJS
- How to plot line chart with multiple datas, but only 2 labels?
- Determining which chart the user has clicked on
- chart.js automatic x axis distributed in time milliseconds
- How to add label on chart.js on each point
- Scatterplot with 4 labels (Opposite Diagram) in any js library?
- Displaying line chart for multiple months using chart.js
- Chart.js line chart is cut off at the top?
- Order the Time Units on Y-axis + Chart Js
- How do I create a stacked horizontal bar chart with Chart.js in React?
- How to use the tooltipTemplate on Chart.JS 2.0
- Stacked bar chart starting from 0 - ChartJS React
- How to install Chart.js in Laravel?
- Chart.js V2 formatting / styling labels