reactjsmaterial-uimui-x-charts

Vertical Barchart Labels MUI X Barchart


enter image description here

How to achieve something like this in Material Ui Charts Barchart,

enter image description here

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


Solution

  • 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.