ChartJS Draw grid line X-Axis and Y-Axis - chart.js

Question

I'm trying out chart.js for the first time. It has an option to show or hide vertical or horizontal grid lines i.e. scaleShowHorizontalLines: true/false or scaleShowVerticalLines: true/false. But it doesn't draw grid line on the actual x-axis or y-axis. How would I go about drawing the grid line for the x-axis or the y-axis?

Answer 1

But it doesn't draw grid line on the actual x-axis or y-axis.
Setting scaleShowHorizontalLines or scaleShowVerticalLines doesn't hide the x or y axis.
However if you do want to hide it (or make it visible) without hiding the scale labels, you can do
var myChart = new Chart(ctx).Line(data, {
scaleLineColor: 'rgba(0, 0, 0, 0)',
...
to hide the axes. Or to override any global configuration and show the axes (you can put in any color).
var myChart = new Chart(ctx).Line(data, {
scaleLineColor: 'rgba(0, 0, 0, 1)',
...
If you are not seeing the x and y axis AND their labels, you probably have showScale globally configured false
var myChart = new Chart(ctx).Line(data, {
showScale: true,
...
Drawing Only the X Axis without the Y Axis
If you want to draw the x axis and not the y axis, you have to hide both and draw the x axis yourself, like so
Chart.types.Bar.extend({
name: "BarAlt",
intialize: function () {
Chart.types.Bar.intialize.draw.apply(this, arguments);
},
draw: function () {
Chart.types.Bar.prototype.draw.apply(this, arguments);
var ctx = this.chart.ctx;
ctx.save();
ctx.lineWidth = this.scale.lineWidth;
ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo(this.scale.xScalePaddingLeft, this.scale.calculateY(0));
ctx.lineTo(this.chart.width, this.scale.calculateY(0));
ctx.stroke();
ctx.closePath();
ctx.restore();
}
});
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(254, 164, 0, 1)",
strokeColor: "rgba(254, 164, 0, 1)",
highlightFill: "rgba(254, 164, 0, 1)",
highlightStroke: "rgba(254, 164, 0, 1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).BarAlt(data, {
scaleFontColor: '#fff',
scaleGridLineColor: 'rgba(255, 255, 255, 0.4)',
scaleLineColor: 'rgba(0, 0, 0, 0)',
scaleShowVerticalLines: false
});