How to get rid of axis lines in ChartJS?

Question

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).

Screenshot of my chart, indication the lines I'd like to remove

As it's a Laravel project, I'm working with ConsoleTV's Charts package. The code for the chart is as follows:

$this->options([
      'legend' => [
        'display' => false
      ],
      'scales' => [
        'xAxes' => [
          'gridLines'=> [
            'drawOnChartArea' => 'false',
            'display' => 'false',
          ],
          'display' => 'false',
        ],
      ],
      'elements' => [
        'line' => [
          'backgroundColor' => 'rgba(71, 15, 244, 0.2)',
          'borderColor' => '#470ff4'
        ],
      ],
      'title' => [
        'display' => false,
      ]
    ]);

...which is rendered into... (one line):

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

I've tried to format it for readability a bit:

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

As you can see, I've tried to set several display values to false already. Any help would be appreciated!

Thanks in advance.

Edit 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.

The order in which scripts are loaded: Head: 1. ChartJS Body: 1. The chart canvas, 2. the chart configuration

$this->options([
          'scales' => [
            'xAxes' => [
              'gridLines'=> [
                 'lineWidth' => 0
              ]
            ],
            'yAxes' => [
              'gridLines'=> [
                 'lineWidth' => 0
              ]
            ],
          ],
        ]);

Possible duplicate of [Chart.js v2 - hiding grid lines](https://stackoverflow.com/questions/36676263/chart-js-v2-hiding-grid-lines) — Metalik, Jun 23 '18 at 12:03
Well the point is that the solution offered there doesn't work for me, somehow. — Thierry Maasdam, Jun 23 '18 at 16:47
I have just opened an issue on the Laravel Charts package's GitHub page. https://github.com/ConsoleTVs/Charts/issues/387 — Thierry Maasdam, Jun 24 '18 at 06:40

score 1 · Accepted Answer · answered Jun 26 '18 at 05:45

I found a way to disable the axes on Laravel Charts' (by ConsoleTV) ChartJS. The package itself has two methods to do so.

In the chart's template class, I've added these two functions:

public function __construct()
     {
       parent::__construct();
       // ...

       $this->displayAxes(false);
       $this->minimalist(true);

       // ...
     }

How to get rid of axis lines in ChartJS?

1 Answers1