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

Question

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

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

@Keith Undeleted it. I thought it was completly impossible so deleted it. — Guy Cohen
– Guy Cohen, Commented Jul 1, 2021 at 10:15

Guy Cohen · Accepted Answer · 2021-06-28 10:13:28Z

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:

Ankit Kumawat · Accepted Answer · 2023-09-18 11:28:28Z

This way you can hide it.

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related