Search code examples
reactjsreact-chartjs-2

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

Solution

  • 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