42

I am using Chart.js to generate maps and have customised it to a good extent. But I am not able to remove the vertical grid line no matter what. Has anyone come across a situation like this? Help much appreciated.
enter image description here

JavaScript

    var ChartDataHome = {
        labels: ["", "NOV", "DEC", "JAN", "FEB"],
        datasets: [{
            strokeColor: "rgba(255.255,255,1)",
            pointColor: "rgba(159,209,154,1)",
            pointStrokeColor: "rgba(255,255,255,1.00)",
            data: [4.5, 8.8, 7.5, 9.5, 7.8, 9]
        }]
    };

    var step = 2;
    var max = 10;
    var start = 0;

    ChartOptionsHome = {
        scaleLabel: "<%= value + ' K ' %>",
        pointDot: false,
        bezierCurve: false,
        scaleOverride: true,
        scaleSteps: 10,
        scaleSteps: Math.ceil((max - start) / step),
        scaleStepWidth: step,
        scaleStartValue: start,
        scaleShowGridLines: true,
        scaleGridLineWidth: 0,
        scaleGridLineColor: "rgba(0,0,0,0.1)",
        datasetFill: false,
        animation: true,
        animationSteps: 60,
        scaleFontColor: "#ffffff",
        scaleFontSize: 14,
        scaleLineColor: "rgba(255,255,255,1)",
        datasetStrokeWidth: 6,
        responsive: true,
    }

    if ($("#chartHome")[0]) {
        DrawTheChart(ChartDataHome, ChartOptionsHome, "chartHome", "Line");
    }

7 Answers 7

110

The following applies to Chart.js 2.*.

If you only have one x-axis, whether the vertical grid lines (that are related to this x-axis) are displayed or not, is specified by the boolean value of options.scales.xAxes[0].gridLines.display. To be more precise, the following chart options disable the display of vertical grid lines for the single x-axis case.

options : {
    scales : {
        xAxes : [ {
            gridLines : {
                display : false
            }
        } ]
    }
}
4
  • how to turnoff for both X & Y from one place?
    – techie_28
    Jul 12, 2016 at 9:27
  • @techie_28 This should do the trick: options : { scales : { xAxes : [ { gridLines : { display : false } } ], yAxes : [ { gridLines : { display : false } } ] } }
    – xnakos
    Jul 12, 2016 at 10:33
  • Yes but I was thinking options : { scales : {gridLines : { display : false } } } could disable both of them
    – techie_28
    Jul 12, 2016 at 12:18
  • @techie_28 I do not believe this would be desired (from the development perspective, there would be some serious implications of pushing an option to all children, if the option does not apply to the current option level, and maintaining an option in more that one option levels would be a waste of time). Each axis (do not forget about the possibility of multiple x-axes and y-axes too) has totally separate options. You could have two x-axes (that is why the xAxes is an array) and you could want to show the grid lines of the first x-axis, while hiding the grid lines of the second x-axis.
    – xnakos
    Jul 12, 2016 at 12:59
17

There's a new global option that was released with the new version of Chart.js two days ago.

var options = {
    scaleShowVerticalLines: false
}
1
  • 4
    It's almost self explanatory, but to remove the horizontal lines, scaleShowHorizontalLines: false
    – MrGood
    Oct 28, 2015 at 7:45
16

The Above answers seem outdated since they did not work in ChartJs 3.4.1 (probably lower versions as well) for me.

You can now use the following:

options: {
    scales: {
      x: {
        grid: {
          display: false
        }
      },
    }        
}

It's self-explanatory, but to remove horizontal lines, you can replace the x with y.

0
4
options : {
            scales: {
                yAxes: [{
                    gridLines: {
                        lineWidth: 0,
                        color: "rgba(255,255,255,0)"
                    }
                }]
            }
    };
Charts.js v2.0
2
  • 1
    Please add a description to explain your answer. Apr 29, 2016 at 14:22
  • 7
    Although this code may answer the question, providing additional context regarding why and/or how it answers the question would significantly improve its long-term value. Please edit your answer to add some explanation. Apr 29, 2016 at 14:23
2

try "scaleShowGridLines" : false,

1
  • 1
    Won't that just disable both horizontal and vertical grid lines. I just want the vertical one to disappear. Nov 28, 2014 at 6:15
1

I think you can seperate x and y axis.

  axes: {
        xaxis: {
            ticks: ticks,
            tickOptions: {showGridline:false}
        },
        yaxis: {
            tickOptions: {showGridline:true}
        }
    }

Hope this can help you.

-3

Simply write

 options:{  
 grid:{
    show: false
   }, 
}

It will solve your problem

3
  • 2
    This is incorrect, grid is not a property that is configurable on the root of the options, it also does not have a show prop
    – LeeLenalee
    Mar 24, 2022 at 14:43
  • Hey, @faheem-riaz-bhatti. Your answer may indeed solve the problem, but unfortunately at StackOverflow they require more explanation to why this solves the problem.
    – f.khantsis
    Mar 29, 2022 at 7:05
  • This is not correct. Aug 4, 2022 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.