How to achieve something like this in Material Ui Charts Barchart,
It hides other labels, yes it can be seen if I enlarge the width, but i want it to still show even on small space and then I will just rotate it.
i have tried sx prop for rotate but some labels are still not showing, all the missing labels is not rendered as I have looked in inspect mode
When tick labels are long and doesn't fit few labels are not rendered by library and skipped alternatively. You can try rotating the labels and that will do the trick and populate all labels if data set is not too long to render. Try this. Add the below prop to 'xAxis' prop of BarChart component from '@mui/x-charts'.
<BarChart
xAxis={[
{
id: 'barCategories',
data: ['My big name 1', 'My big name 2', 'My big name 3', 'My big name 4', 'My big name 5'],
scaleType: 'band',
tickLabelStyle: {
angle: -25,
textAnchor: 'end',
fontSize: 12,
},
},
]}
series={[{data: [2, 5, 3, 4, 6],},]}
width={500}
/>
You can modify the angle as per your convenience so the label fits.