Guy Cohen
Guy Cohen

Reputation: 194

hide xAxes labels from Bar chart with 'react-chartjs-2'

I have built a graph of bar chart with some data. the current result I have is: enter image description here

and what I want is to delete the names below the xAxes in the bar chart. I viewed the react-chartjs-2 documentation and tried to change the options, also viewed Chart.Js documentation.

this is my options right now:

const options = {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true,
        },
      },
    ],
    xAxes: [
      {
        scaleLabel: {
          display: false,
        },
        gridLines: {
          display: false,
        },
      },
    ],
  },
};

Upvotes: 0

Views: 1011

Answers (2)

Ankit Kumawat
Ankit Kumawat

Reputation: 441

This way you can hide it.

 const options = {
    indexAxis: 'y' as const,
    elements: {
        bar: {
            borderWidth: 0,
        },
    },
    scales: {
    x: {
        display: false
    },
       y: {
        display: false
    }
}
}

enter image description here

Upvotes: 0

Guy Cohen
Guy Cohen

Reputation: 194

after a deep search I found the solution:

const options = {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true,
        },
      },
    ],
    xAxes: {
      ticks: {
        display: false,
      },
    },
  },

The problem is in xAxes it was a list instead of object.

after the fix, this is how it looks:

enter image description here

Upvotes: 1

Related Questions