[charts] onMarkClick not working

[josh-thompson13]

The problem in depth

I'm trying to build a chart. The line chart has two data sets. I'm trying to click on one data point to get its value but I am not getting any response from onMarkClick prop. The onAxisClick prop is returning me data but obviously as it is the axis click it is returning me both values.

Here is my code. Note that only onAxisClick is logging to my console when I click a data point. I have tried removing all of the other onClick events to see if they are overriding one another, but even onMarkClick by itself is not working.

<LineChart
                            xAxis={[
                                {
                                    data: xAxisValues,
                                    scaleType: "point",
                                },
                            ]}
                            bottomAxis={{
                                tickLabelStyle: {
                                    angle: atrXDegreesOfRotation ?? 0,
                                    textAnchor: "middle",
                                },
                            }}
                            grid={{ vertical: true, horizontal: true }}
                            series={chartDataSet}
                            margin={{}} // TODO: This need to be an object created outside of the component.
                            slotProps={{
                                legend: {},
                            }}
                            onAreaClick={(event, d) => console.log("HIT1")}
                            onMarkClick={(event, d) => console.log("HIT2")}
                            onLineClick={(event, d) => console.log("HIT3")}
                            onAxisClick={(event, d) => console.log("HIT4", event.target, d)}

                           
                        />`

Here is what the series I pass in looks like:

`interface ChartSeriesData {
    data: number[];
    label: string | undefined;
    curve: CurveType; 
    color: string;
    area: boolean;
    datakey: string;
}

Your environment

System:
OS: macOS 13.0
Binaries:
Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
pnpm: 9.1.3 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 126.0.6478.126
Edge: Not Found
Safari: 16.1
npmPackages:
@emotion/react: 11.11.4 => 11.11.4
@emotion/styled: 11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.19
@mui/icons-material: 5.15.20 => 5.15.20
@mui/material: 5.15.19 => 5.15.19
@mui/private-theming: 5.15.14
@mui/styled-engine-sc: 6.0.0-alpha.18
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-charts: 7.7.1 => 7.7.1
@mui/x-data-grid: 7.6.2
@mui/x-data-grid-pro: 7.6.2 => 7.6.2
@mui/x-date-pickers: 7.6.2
@mui/x-date-pickers-pro: 7.6.2 => 7.6.2
@mui/x-license: 7.6.1
@types/react: 18.3.3 => 18.3.3
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
styled-components: 6.1.11 => 6.1.11
typescript: 5.5.2 => 5.5.2

Search keywords: On mark click not working
Order ID: 91932

[alexfauquette]

We had a breaking change in the last release. Can you try to downgrade the package to a previous version?

The regression fix will be available in the next release (tomorrow)

[michelengelen]

@alexfauquette is there a ticket for that regression we can link here?

[JCQuintas]

@michelengelen there is the fix PR: #13609

[michelengelen]

Then we can close this! Thanks!

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@josh-thompson13: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.