CODEWITHSUNDEEP
chartschart.js
Matt
Matt

Reputation: 191

Chart.js grid lines not hiding

So I'm struggling to figure out how to hide my grid lines in Chart.js. According to the documentation here, using a false value for all of display, drawOnChartArea, drawTicks should be overkill. For some reason however, the grey lines in the background STILL are being displayed:enter image description here

Here is my options.scales object:

  scales: {
    xAxes: [{
      gridlines: {
        display: false,
        drawOnChartArea: false,
        drawTicks: false
      },
      ticks: {
        display: false
      }
    }],
    yAxes: [{
      gridlines: {
        display: false,
        drawOnChartArea: false,
        drawTicks: false
      },
      ticks: {
        display: false,
        fontFamily: chartsFont,
        fontColor: color
      }
    }]
  }

Help please! I must be missing something obvious, right?

Upvotes: 1

Views: 4893

Answers (2)

Anthony
Anthony

Reputation: 39

vAxis: {
            gridlines: {
                color: 'none'
            }
       },
hAxis: {
            gridlines: {
                 color: 'none'
            }
         }

is working for me. You can try 'transparent' too I think instead of 'none'

Upvotes: 2

Jaydp
Jaydp

Reputation: 1039

Just change "gridlines" to "gridLines"
"L" in caps

You can see the live example on site: http://www.chartjs.org/samples/latest/scales/gridlines-display.html

Upvotes: 3

Related Questions