5👍
Here we have used horizonalLinePlugin
and register it with the Chart pluginService
. you can use the horizontalLine
as an attribute of option
in config
. Use this fiddle
JS
var config = {
type: 'bar',
data: {
labels: ["25", "60", "15", "30"],
datasets: [{
data: [25, 60, 15, 30],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: true
},
barThickness: 40,
stacked: true
}],
yAxes: [{
gridLines: {
display: true
},
stacked: true
}]
},
horizontalLine: [{
y: 50,
style: "rgba(255, 0, 0, .4)",
text: "max"
}, {
y: 15,
text: "min"
}]
}
};
;
var ctx = document.getElementById("canvas");
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 myChart = new Chart(ctx, config);
0👍
Try like this.
Chart.js do have mixed chart.
Docs :http://www.chartjs.org/docs/#chart-configuration-mixed-chart-types
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['25', '60', '45'],
datasets: [
{
type: 'line',
label: 'Baseline',
data: [15, 15, 15 ]
},
{
type: 'bar',
label: 'Marks',
data: [25, 60, 45],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
.container {
width: 80%;
margin: 15px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<div class="container">
<div>
<canvas id="myChart"></canvas>
</div>
</div>
- [Chartjs]-Chart.js bar chart color change based on value
- [Chartjs]-Detect onHover being complete on a Chart.js doughnut chart
Source:stackexchange.com