I have a bar chart like this
i need to draw Horizontal dashed line looks below
I am using chart js to create this graph. Kindly help me to draw this base line.
var ctx = document.getElementById("baseLinebar");
var myChart = new Chart(ctx, {
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:false
},
barThickness:40
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}
});
I have a bar chart like this
i need to draw Horizontal dashed line looks below
I am using chart js to create this graph. Kindly help me to draw this base line.
var ctx = document.getElementById("baseLinebar");
var myChart = new Chart(ctx, {
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:false
},
barThickness:40
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}
});
2 Answers
Reset to default 5Here 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);
Try like this.
Chart.js do have mixed chart.
Docs :http://www.chartjs/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./ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<div class="container">
<div>
<canvas id="myChart"></canvas>
</div>
</div>