MUI X charts, long chart labels issue

Question

Long labels on MUI X chart are being cut off. I wonder is there any way to fix that behavior? Like put '...' at the end of axis's label and show full string inside a tooltip (by hovering a specific bar)?

There is a screenshot of how it currently looks like (and shouldn't look like). Any ideas?

CodeSandbox link attached - link.

And below is how I want it to look like.

Tried to play with settings that the library offers us as well as changing the margins of chart container. Nothing seems to work well.

Answer 1

You could add margin: {{ right: 250 }} to the chart component as documented on https://mui.com/x/react-charts/styling/#placement.

Answer 2

I had a similar issue and just applied 5px padding:

<LineChart
                sx={{padding:'5px'}}
                width={550}
                height={300}
                series={[
                    { data: history.map(obj => obj.totalPaid), label: 'Total paid' },
                ]}
                xAxis={[{ scaleType: 'point', data: history.map(obj => obj.year) }]}
            />