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.
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"}} />
)
}