mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.09k stars 1.26k forks source link

[charts] `onAxisClick` not working when the chart layout is horizontal #14530

Closed mohamad-selman closed 2 weeks ago

mohamad-selman commented 2 weeks ago

Steps to reproduce

Link to live example: https://stackblitz.com/~/github.com/mohamad-selman/mui-charts-issue-demo

Steps:

  1. Add a BarChart
  2. Set the layout prop to horizontal
  3. Add an onAxisClick callback
  4. Click on any axis

For example:

<BarChart
  height={500}
  layout="horizontal"
  series={[
    { label: "Earnings", data: [35, 44, 24, 34] },
  ]}
  yAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
  onAxisClick={(_ev, d) => console.log(d)}
/>

Current behavior

When clicking on any axis, the second argument of the onAxisClick callback is missing the information about the line/bar elements. The dataIndex is always -1 and axisValue is undefined.

{
    "dataIndex": -1,
    "seriesValues": {}
}

Expected behavior

The second argument should contain data about the clicked axis and items associated with it. For example:

{
    "dataIndex": 1,
    "axisValue": "Q2",
    "seriesValues": {
        "auto-generated-id-0": 44
    }
}

Context

No response

Your environment

System: OS: macOS 14.6.1 Binaries: Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm pnpm: 9.7.1 - /opt/homebrew/bin/pnpm Browsers: Chrome: Not Found Edge: Not Found Safari: 17.6 npmPackages: @emotion/react: ^11.13.0 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/icons-material: ^5.16.7 => 5.16.7 @mui/lab: 5.0.0-alpha.173 => 5.0.0-alpha.173 @mui/material: ^5.16.7 => 5.16.7 @mui/x-charts: ^7.13.0 => 7.16.0 @mui/x-date-pickers: ^7.13.0 => 7.13.0 @types/react: ^18.3.3 => 18.3.3 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: ^5.5.4 => 5.5.4

Search keywords: onAxisClick

alexfauquette commented 2 weeks ago

Thanks for reporting this issue. It's a regression we fixed for tooltip but missed for the axisClick. I'm opening a PR to solve it :+1:

github-actions[bot] commented 2 weeks ago

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.

[!NOTE] We value your feedback @mohamad-selman! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!