Remove excess lines on y axis using chartjs - chart.js

Question

I wonder how to remove the excess lines on the line chart. I tried to set drawborder to false but of course it just remove the all lines to the axis. I just wanted get rid of the unwanted vertical lines that points to the y axis labels like the image below with red mark.
Template:
<d-chartrecord
:chart-data="datacollection"
v-bind:options="options"
:height="200"
></d-chartrecord>
Script:
export default {
data () {
return {
datacollection: {},
options: {
responsive: true,
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: true,
color: '#D7D7D7'
},
ticks: {
fontSize: 8,
beginAtZero: true
},
gridLines: {
display: true,
}
}],
yAxes: [{
display: true,
ticks: {
fontSize: 8,
beginAtZero: true,
stepSize: 50,
maxTicksLimit: 3
}
}],
}
},
}
},
mounted () {
this.putData()
},
methods: {
putData () {
this.datacollection = {
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
lineTension: 0,
radius: 4,
borderWidth: 1,
borderColor: '#F2A727',
pointBackgroundColor:[ '#fff', '#fff', '#fff', '#fff', '#fff', '#F2A727'],
backgroundColor: 'transparent',
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
}]
}
},
getRandomInt () {
return Math.floor(Math.random() * (95)) + 5
}
}
}

Answer 1

In chart.js, gridLines provides an option tickMarkLength to disable the length beyond the axes, Eg:
yAxes: [{
gridLines: {
tickMarkLength: 0,
},
}]
xAxes: [{
gridLines: {
tickMarkLength: 0,
},
}]

Answer 2

Unfortunately, there isn't any native functionality for this in ChartJS at the moment. You would rather need to create a chart plugin to achieve that.
ᴘʟᴜɢɪɴ (ᴅʀᴀᴡ x-ᴀxɪꜱ ɢʀɪᴅ-ʟɪɴᴇꜱ)
­
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) {
if (index === 0) return;
var x = x_axis.getPixelForValue(label);
ctx.save();
ctx.beginPath();
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
});
}
});
* place this at the top of your script
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
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; // hide original grid-lines
// loop through x-axis ticks
x_axis.ticks.forEach(function(label, index) {
if (index === 0) return;
var x = x_axis.getPixelForValue(label);
ctx.save();
ctx.beginPath();
ctx.strokeStyle = x_axis.options.gridLines.color;
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
ctx.restore();
});
}
});
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false,
tension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Answer 3

in Chart.js (I'm using version 2.9), gridLines also provides an option to disable the tick mark : drawTicks.
scales: {
xAxes: [{
gridLines:{
drawTicks: false
}
}]
}