I'm testing with Chart.js and trying to remove the grid. My code:

function grafica(){
    var chartData = {
        labels: [" ", " ", " "],
        datasets: [
            {
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",//marges
                data: [30, 40, 45]
            }, {
                fillColor: "rgb(210,27,71)",
                strokeColor: "rgb(210,27,71)",//marges
                data: [56, 55, 40]
            }, {
                fillColor: "rgba(210,27,71,0)",
                strokeColor: "rgba(210,27,71,0)",//marges
                data: [0, 0, 0]
            }
        ]
    };
    var ctx = document.getElementById("myChart").getContext("2d");
    var myBar = new Chart(ctx).Bar(chartData, {
        showTooltips: false,
        onAnimationComplete: function () {
            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor;
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
        }
    });
}

How can I do it? I tried some things like add "ctx.gridLines = false;" and "ctx.ticks = false;" but at the moment anything works.

Edit: I did some changes following your instructions but I don't know why anything work. The version I'm using is 2.0.0-alpha

I'm testing with Chart.js and trying to remove the grid. My code:

function grafica(){
    var chartData = {
        labels: [" ", " ", " "],
        datasets: [
            {
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",//marges
                data: [30, 40, 45]
            }, {
                fillColor: "rgb(210,27,71)",
                strokeColor: "rgb(210,27,71)",//marges
                data: [56, 55, 40]
            }, {
                fillColor: "rgba(210,27,71,0)",
                strokeColor: "rgba(210,27,71,0)",//marges
                data: [0, 0, 0]
            }
        ]
    };
    var ctx = document.getElementById("myChart").getContext("2d");
    var myBar = new Chart(ctx).Bar(chartData, {
        showTooltips: false,
        onAnimationComplete: function () {
            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor;
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
        }
    });
}

How can I do it? I tried some things like add "ctx.gridLines = false;" and "ctx.ticks = false;" but at the moment anything works.

Edit: I did some changes following your instructions but I don't know why anything work. The version I'm using is 2.0.0-alpha

• javascript
• chart.js

3 Answers 3

On v3 (Updated docs) is changed to

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

I am now using version 2.0Alpha, same as you.

Updated Documentation Link

Below is an example for a simple bar chart without grid lines.

You need to set the 'gridLines' key on the y and xAxis keys of the options object.

window.onload = function() {

  var ctx = document.getElementById("canvas").getContext("2d");

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [100,99,98,97,96,95,94]
        }]
    };
    
  window.myBar = new Chart(ctx).Bar({
      data: barChartData,
      options: {
          responsive: true,
          scales: {
            xAxes: [{
              gridLines: {
                show: true
              }
            }],
            yAxes: [{
              gridLines: {
                show: false
              }
            }]
          }
      }
  });

}

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.0-alpha/Chart.min.js"></script>

<div>
  <canvas id="canvas"></canvas>
</div>

Try it with:

xAxis: {
    gridLineWidth: 0                
},
yAxis: {
    gridLineWidth: 0,
    minorTickInterval: null
}

Add this to the chart data,