[Chartjs]-ChartJS Draw grid line X-Axis and Y-Axis

by

2👍

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
});

Leave a comment