[charts] How to avoid component overflow when using composition

[mckelveygreg]

The problem in depth

We have a bar graph where the significant portion is too small if the range starts at zero.
We'd like to be able to set the range to -1 of the min, and +1 of the max. Granted, we can calculate those values, but I do not know where to set them?

Your environment

`npx @mui/envinfo`

  System:
    OS: macOS 14.3.1
  Binaries:
    Node: 20.11.1 - ~/.local/share/mise/installs/node/20.11.1/bin/node
    npm: 10.2.4 - ~/.local/share/mise/installs/node/20.11.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 122.0.6261.129

Search keywords: bar, range, min, non zero
Order ID: 86237

[alexfauquette]

The min/max properties of the y axis should do the job

yAxis={[{ min: -1000, max: 6000 }]}

https://mui.com/x/react-charts/axis/#axis-sub-domain

[mckelveygreg]

Sorry, I didn't realize how easy it was to make a repro from the demo's in the docs! 🎉
Here is an illustration of my problem: https://stackblitz.com/edit/react-emgvkt?file=Demo.tsx

You'll see that the bars extend above and below the min and the max values. At the very least, I'm looking to adjust the min, so that it is much closer to where our data can show significant changes. So, displaying from 0 does not allow us to see enough change, and setting min for the y axis causes the bars to overflow the bottom of the chart.

[alexfauquette]

Ho, you're using composition. In that case, you will need to clip the content. We have an helper <ChartsClipPath /> for that

<g clipPath={`url(#${clipPathId})`}>
  /* ... all the element that need to stay in the drawing area ... */
</g>
<ChartsClipPath id={clipPathId} />

Here it your example with the fix: https://stackblitz.com/edit/react-emgvkt-1vja5y?file=Demo.tsx

You can refer to the current implementation for more details about what's inside and what's not: https://github.com/mui/mui-x/blob/master/packages/x-charts/src/BarChart/BarChart.tsx

Notice that in our codebase the id is obtained by using useId(). The reason is that if you have multiple charts in the same page each chart needs to get a unique id. Otherwise it will be buggy.

I'm keeping the issue open, to remember we need to document this aspect

[mckelveygreg]

Thank you! This is just what I needed, and it seems to be working great

<ResponsiveChartContainer
  yAxis={[
          {
            labelStyle,
            tickLabelStyle,
            fill: extraColors.medium,
            min,
          },
        ]}
>
  <ChartsAxisHighlight x="band" />
  {/* Clip bars when y axis starts at none zero */}
  <g clipPath={`url(#wp-clip-path)`}>
    <BarPlot />
  </g>
  <AreaPlot />
  <LinePlot />
  <ChartsXAxis disableTicks label="Week Starting Date" />
  <ChartsYAxis disableLine />
  <ChartsClipPath id="wp-clip-path" />
</ResponsiveChartContainer>

[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.

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