[Chartjs]-How to hide grid lines and x-axis labels in chart.js?

by

1👍

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.org/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.net/Leelenaleee/r26h71fm/2/

1👍

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

Leave a comment