Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Indicate that min/max can not be specified in <ChartsXAxis/> #10905

Closed
wascou opened this issue Nov 5, 2023 · 6 comments
Closed

[charts] Indicate that min/max can not be specified in <ChartsXAxis/> #10905

wascou opened this issue Nov 5, 2023 · 6 comments
Labels
component: charts This is the name of the generic UI component, not the React module! dx Related to developers' experience typescript

Comments

@wascou
Copy link
Contributor

wascou commented Nov 5, 2023

Steps to reproduce

The following is not clear for me, neither in the documentation or through Axis examples.
I built a ResponsiveChartContainer with different sub elements including ChartXAxis and ChartYAxis.

Current behavior

Specifying a min and max value in those don't work in ChartXAxis
Specifying a min and max in the xAxis value of ScatterPlot don't work either.

Expected behavior

Setting a min or max should work

Context

I need domain to align with 0 and the max of x and y.

Your environment

<ResponsiveChartContainer
      height={500}
      series={[
        {
          data: serie.map((v: any) => ({
            x: v.x,
            y: v.y,
            ...v
          })),
          type: "scatter"
        }
      ]}
    >
      <ChartsXAxis
        axisId={DEFAULT_X_AXIS_KEY}
        min={0}
        max={123}
      />
      <ChartsYAxis
        axisId={DEFAULT_Y_AXIS_KEY}
        min={0}
        max={123}
      />
      <ScatterPlot
        xAxis={[
          {
               min: 0, max: 123
          }
        ]}
        yAxis={[
          {
               min: 0, max: 123
          }
        ]}
      />
    </ResponsiveChartContainer>

Search keywords: charts, xaxis, yaxis, domain

@wascou wascou added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 5, 2023
@wascou
Copy link
Contributor Author

wascou commented Nov 5, 2023

Obviously, I found the answer just publishing the issue. Answer is in the definition of xAxis in ResponsiveChartContainer.
Code is here: https://mui.com/x/react-charts/axis/#composition
Maybe an update on the documentation regarding this sentence : "It will provide all the scaling properties to its children, and allows you to use and components as children." I expected the ChartsXAxis component to override props from ResponsiveChartContainer.

@alexfauquette
Copy link
Member

alexfauquette commented Nov 6, 2023

I expected the ChartsXAxis component to override props from ResponsiveChartContainer.

If it was doing so, the data display would not be aligned with axes and the all chart would be wrong 🙈

Would it solve the issue to remove min/max from the ChartsXAxis props type?

@wascou
Copy link
Contributor Author

wascou commented Nov 6, 2023

Yes I guess. At least it let only one choice to people doing composition.

@alexfauquette alexfauquette added typescript dx Related to developers' experience and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 6, 2023
@alexfauquette alexfauquette changed the title Charts - ChartsXAxis / ChartYAxis - Domain control with ChartsContainer [charts] Indicate that min/max can not be specified in <ChartsXAxis/> Nov 6, 2023
@alexfauquette
Copy link
Member

@wascou Where did you find that you can provide min/max ?
I looked at the type definition, and they are not here. I typed min and the only proposed prop is tickMinStep 🤔
Same in the docs API, their is no mention of min for the <ChartsXAxis />

image

@wascou
Copy link
Contributor Author

wascou commented Nov 7, 2023

Hi Alex, actualy it was in this example: https://mui.com/x/react-charts/axis/#axis-sub-domain

Copy link

⚠️ 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.

@wascou: 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.

@oliviertassinari oliviertassinari added the component: charts This is the name of the generic UI component, not the React module! label Jul 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module! dx Related to developers' experience typescript
Projects
None yet
Development

No branches or pull requests

4 participants