[charts] Is it possible to have a customised highlighted MarkElement for LineChart?

[brnguyenn]

The problem in depth 🔍

The goal is to have the highlighted mark visually different as well as the ability for an onClick event. e.g:

Your environment 🌎

No response

Search keywords: MarkElement, LineChart
Order ID: 79128

[michelengelen]

@alexfauquette Please correct me if I am wrong.

It is possible to inject a custom MarkElement component into the charts using the slots.mark prop. If I am not mistaken it needs to be a path component, though. This essentially can take an onClick prop.

I tested this and it is possible to do that, but it is pretty hard to hit the path with that click. @alexfauquette Maybe we can improve on this one and provide a bigger invisible click-area and allow for an onClick handler to be passed as props?

[alexfauquette]

For the line mark, it's a bit special. You have a lineHighlight slot that renders on top of the usual mark when it's highlight.

The reason behind this choice is to allow rendering a line, and a mark highlight without having to render all marks.

I assume the lineHighlight his blocking you click.

If I am not mistaken it needs to be a path component, though. This essentially can take an onClick prop.

What make you think it needs to be a path?

For the lineHighlight it's default component is defined here: https://github.com/mui/mui-x/blob/029d4c106455d2b3f62816663f4f179445dd4aec/packages/x-charts/src/LineChart/LineHighlightElement.tsx

You get the x/y coordinate in props, and then can put whatever SVG element thanks to the CSS translate.

[michelengelen]

If I am not mistaken it needs to be a path component, though. This essentially can take an onClick prop.

What make you think it needs to be a path?

I thought it had to be a path due to this type definition:

mui-x/packages/x-charts/src/LineChart/MarkElement.tsx

Lines 91 to 102 in 029d4c1

	export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> &
	React.ComponentPropsWithoutRef<'path'> & {
	/**
	* The shape of the marker.
	*/
	shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
	/**
	* The index to the element in the series' data array.
	*/
	dataIndex: number;
	highlightScope?: Partial<HighlightScope>;
	};

But when it can be any valid svg element its even better. Thanks for pointing that out

[brnguyenn]

Thank you for your replies @michelengelen and @alexfauquette