reactjsmaterial-uimui-x-charts

Change size of MarkElement in MUI x-charts


I want to inject a custom MarkElement via the slots.mark property. How can I change the size of the MarkElement?

const slotsMark = (props: MarkElementProps) => {
    return (
        <MarkElement {...props}/>
    )
}

I managed to change the color via the color property but I did not find a property for the size.


Solution

  • After spending too many hours on this problem, I finally found a way to customise the MarkElement. You can define a custom class in the sx property of the parent:

    <LineChart
        slots={{
            mark: slotsMark,
        }}
        sx={{
            "& .customMarkElement": {
                scale: "2",
            }
        }}
    />
    

    and then you can use the classes property from the MarkElement Component to apply the class properties:

    const slotsMark = (props: MarkElementProps) => {
    
        return (
            <MarkElement {...props} classes={{root: "customMarkElement"}} />
        )
    }