javascriptchart.jschart.js2

Removing axes lines on chart.js


I have been working with some Chart.js and I have been trying to figure out how to remove the axis lines on a chart.

You can see the grid lines I am trying to remove in this image.

I have managed to remove the grid lines that appear within the chart where the data is represented, but I am having an issue removing these two lines.

You can see the chart.js I have created for the chart below.

var ctx = document.getElementById("volCause").getContext('2d');
var volCause_Doughnut = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
            labels: <?php echo $cause_label_json?>,
        datasets: [{
            backgroundColor: benefactoGraph_colours,
            data: <?php echo $cause_value_json?>

        }]
    },

    options: {
        maintainAspectRatio: false,
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Volunteer Hours',
                },
                gridLines: {
                    display: false,
                },
            }],

            yAxes: [{
                gridLines: {
                    display: false,

                }
            }]

        }

    }
});

Any suggestions would be much appreciated.


Solution

  • You need to set the drawBorder property of grid-lines to false in order to remove those axis lines, like so :

    ...
    scales: {
       xAxes: [{
          scaleLabel: {
             display: true,
             labelString: 'Volunteer Hours',
          },
          gridLines: {
             display: false,
             drawBorder: false //<- set this
          },
       }],
       yAxes: [{
          gridLines: {
             display: false,
             drawBorder: false //<- set this
          }
       }]
    }
    ...