title: How to get rid of axis lines in ChartJS?
body: <p>I've been playing around with ChartJS for two days now and I do not seem to be able to get rid of the light grey axis lines (both vertical as horizontal).</p>
  
  <p><a href="https://i.stack.imgur.com/7OkLU.png" rel="nofollow noreferrer">Screenshot of my chart, indication the lines I'd like to remove</a></p>
  
  <p>As it's a Laravel project, I'm working with ConsoleTV's Charts package.
  The code for the chart is as follows:</p>
  
  <pre><code>$this-&gt;options([
        'legend' =&gt; [
          'display' =&gt; false
        ],
        'scales' =&gt; [
          'xAxes' =&gt; [
            'gridLines'=&gt; [
              'drawOnChartArea' =&gt; 'false',
              'display' =&gt; 'false',
            ],
            'display' =&gt; 'false',
          ],
        ],
        'elements' =&gt; [
          'line' =&gt; [
            'backgroundColor' =&gt; 'rgba(71, 15, 244, 0.2)',
            'borderColor' =&gt; '#470ff4'
          ],
        ],
        'title' =&gt; [
          'display' =&gt; false,
        ]
      ]);
  </code></pre>
  
  <p>...which is rendered into... (one line):</p>
  
  <pre><code>options: {"maintainAspectRatio":false,"scales":{"xAxes":{"gridLines":{"drawOnChartArea":"false","display":"false"},"display":"false"},"yAxes":[{"ticks":{"beginAtZero":true}}]},"legend":{"display":false},"elements":{"line":{"backgroundColor":"rgba(71, 15, 244, 0.2)","borderColor":"#470ff4"}},"title":{"display":false}}
  </code></pre>
  
  <p>I've tried to format it for readability a bit:</p>
  
  <pre><code>options: 
     {"maintainAspectRatio":false,
      "scales":{
        "xAxes":{
          "gridLines": {
            "drawOnChartArea":"false",
            "display":"false"
          },
        "display":"false"
       },
       "yAxes":
         [{"ticks":{
           "beginAtZero":true
           }}
          ]},
       "legend":{"display":false},"elements":{"line":{"backgroundColor":"rgba(71, 15, 244, 0.2)","borderColor":"#470ff4"}},"title":{"display":false}}
  </code></pre>
  
  <p>As you can see, I've tried to set several display values to <code>false</code> already.
  Any help would be appreciated!</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>Edit</strong>
  What hasn't helped so far is adding this line, although I perfectly believe that it should work. It doesn't make sense. I've looked at other solutions as well, however, the answers given do not work.</p>
  
  <p>The order in which scripts are loaded: 
  Head: 1. ChartJS
  Body: 1. The chart canvas, 2. the chart configuration</p>
  
  <pre><code>$this-&gt;options([
            'scales' =&gt; [
              'xAxes' =&gt; [
                'gridLines'=&gt; [
                   'lineWidth' =&gt; 0
                ]
              ],
              'yAxes' =&gt; [
                'gridLines'=&gt; [
                   'lineWidth' =&gt; 0
                ]
              ],
            ],
          ]);
  </code></pre>