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.52k stars 1.31k forks source link

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

Closed wascou closed 7 months ago

wascou commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

alexfauquette commented 1 year ago

@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 commented 1 year ago

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

github-actions[bot] commented 7 months ago

:warning: 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.