I'm using chart.js v3.2.0 and I want to disable the grid lines and x-axis labels. I've tried various examples from other stack overflow posts but none seem to work.

/

html

<div style = "width: 600px; height: 400px;">
    <canvas id="chartJSContainer" width="1" height="400"></canvas>
</div>

js

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132,1)'
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)'
            }
        ]
  },
  options: {
        scales: {
          xAxes: [{
            display: false,
            ticks: {
              display: false //this will remove only the label
            }
          }],
          yAxes: [{
            display:false
          }]      
        },
        responsive: true,
        maintainAspectRatio: false
    }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

Does anyone know how to do it?

Thanks

I'm using chart.js v3.2.0 and I want to disable the grid lines and x-axis labels. I've tried various examples from other stack overflow posts but none seem to work.

https://jsfiddle/gcp95hjf/1/

html

<div style = "width: 600px; height: 400px;">
    <canvas id="chartJSContainer" width="1" height="400"></canvas>
</div>

js

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132,1)'
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)'
            }
        ]
  },
  options: {
        scales: {
          xAxes: [{
            display: false,
            ticks: {
              display: false //this will remove only the label
            }
          }],
          yAxes: [{
            display:false
          }]      
        },
        responsive: true,
        maintainAspectRatio: false
    }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

Does anyone know how to do it?

Thanks

• javascript
• chart.js

Share Improve this question Follow edited May 2, 2021 at 18:55 omega asked May 2, 2021 at 18:41 omegaomega 44.1k9090 gold badges286286 silver badges523523 bronze badges 2

• Pretty strange, even on their official websites example parameters are also not getting applied. – Himanshu Saxena Commented May 2, 2021 at 18:53
• Maybe the documentation is not updated for the new v3 version? – omega Commented May 2, 2021 at 18:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Chart.js v3 has multiple breaking changes, one of them is how you define the scales, it is stated in the migration guide and shown in a lot of the examples (https://www.chartjs/docs/3.2.1/getting-started/v3-migration.html)

You will have to change scales: { yAxes: [], xAxes: []} to scales: { y: {}, x: {}}

Working fiddle: https://jsfiddle/Leelenaleee/r26h71fm/2/

Hide GridLines on Both Axis -

ChartJS v2 (older version) -

scales: {
    x: [
      {
        gridLines: {
          display: false,
        },
      },
    ],

    y: [
      {
        gridLines: {
          display: false,
        },
      },
    ],
  },

Newer Version ChartJS v3 -

scales: {
    x: {
      grid: {
        display: false,
      },
    },

    y: {
      grid: {
        display: false,
      },
    },
  },