1👍
✅
You can use the following chart plugin to remove those unnecessary overlaying lines :
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
x_axis.ticks.forEach(function(label, index) {
var x = x_axis.getPixelForValue(label);
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.stroke();
ctx.restore();
});
}
});
ᴡᴏʀᴋɪɴɢ ᴅᴇᴍᴏ ⧩
Chart.plugins.register({
beforeDraw: function(chart) {
var ctx = chart.chart.ctx,
x_axis = chart.scales['x-axis-0'],
topY = chart.scales['y-axis-0'].top,
bottomY = chart.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
x_axis.ticks.forEach(function(label, index) {
var x = x_axis.getPixelForValue(label);
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.stroke();
ctx.restore();
});
}
});
var options = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
borderWidth: 2,
borderColor: "#5d5d5d",
pointBorderColor: "#5d5d5d",
pointBackgroundColor: "#5d5d5d",
pointBorderWidth: 5,
type: 'line',
data: [26, 26, 33, 28, 30],
fill: false,
lineTension: 0
}, {
borderWidth: 3,
pointBorderColor: "#b8b8b8",
pointBackgroundColor: "#b8b8b8",
pointBorderWidth: 10,
type: 'line',
data: [26, 26, 29, 28, 29],
fill: false,
lineTension: 0
}, {
data: [0, 0, 0, 0, 0],
fill: false,
lineTension: 0
}]
},
options: {
hover: {
mode: null
},
legend: {
display: false
},
tooltips: {
enabled: false
},
hover: {
mode: null
},
scales: {
xAxes: [{
gridLines: {
// drawBorder: false,
},
}],
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
max: 60,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
Source:stackexchange.com