javascript - Removing axes lines on chart.js - Stack Overflow

admin管理员组

文章数量:1278825

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.

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.

• javascript
• chart.js
• chart.js2

Share Improve this question Follow edited Nov 16, 2017 at 11:12 Ahmet Emre Kilinc 6,9251919 gold badges3636 silver badges4747 bronze badges asked Nov 16, 2017 at 11:08 Josh GomesJosh Gomes 19344 silver badges1616 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

You can set display: false in your axis object

scales: {
  xAxes: [{
    display: false,
    gridLines: {}
  }],
  yAxes: [{
    display: false,
    gridLines: {}
  }]
 }

The other answers are correct for different versions of chart.js, but as of Jan 2020, with version 2.9.3, I was able to resolve the issue by nesting display: false inside of gridlines as follows:

    ...
  , options:
      scales: {
        xAxes: [{
          gridLines: {
              display: false
          },
    ...

Here's a related GitHub issue.

For 4.4.4 it is:

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

本文标签： javascriptRemoving axes lines on chartjsStack Overflow