Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    The default MarkElement component in mui-x is an SVG path:

    https://github.com/mui/mui-x/blob/c7795d90ce0c300415cf76b136a1496754683309/packages/x-charts/src/LineChart/MarkElement.tsx#L121

    Which means there’s no straightforward way to change its size; the whole shape is encoded in its d attribute. If you follow the link I provided you will see that this attribute’s value is generated via d3‘s symbol function (imported here as d3Symbol); you can read its documentation here, which should help you build your custom mark, which you can provide to the chart with slots API. As far as I know there’s no other way to do that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search