[charts] Having the legend on the left crop the axis values

[alexfauquette]

Applying the DEFAULT_LEGEND_FACING_MARGIN to the left or bottom results in a too small space to ds)lay axis content

I played a bit with it in codesandbox The red are LtR and the blue are RtL mode.

I agree it would be better if the left margin was not impacted by the legend such that 2 digits number can still be displayed. Might even be worst with axil label

Originally posted by @alexfauquette in #16315 (comment)

[JCQuintas]

This was a conscious decision. I opted to have the "default" behaviour be visually pleasant, rather than have a somewhat bad experience for everyone.

I believe we could decouple the margin from the axis rendering, eg: the margin should contain solely "white-space", and the axis should be rendered in what is the current "chart-area", though we could divide it up in other sections.

This way we can have a reasonable single default for every side, and if there is an issue with how the user renders their axis, they can change their data/axisconfig instead of messing with margins.

It might create an issue with rendering though, if we need to know the size of the rendered axis before being able to plot the chart 🤔

An option would be to have margin and axisSize, where axisSize: { top/left/etc } is only applied to the sides that render an axis.

[alexfauquette]

This was a conscious decision. I opted to have the "default" behaviour be visually pleasant, rather than have a somewhat bad experience for everyone.

Maybe we need to define what we are talking about because I hunderstood the opposite from #16315 (comment)

My issue is that if a legend is added to the left, the left margin is reduced.

For me the default behavior would to always reduce the right margin. Like what currently happened in RTL mode

[JCQuintas]

I think I get your point.

My point is that there is a bigger issue in which the axes render inside the margin. Which is the real underlying issue here.

The idea would be to simply render the axis in it's own designated area, and only render/calculate that area when the axis is rendered, rather than have a "global margin"

[alexfauquette]

The idea would be to simply render the axis in it's own designated area

I agree with the idea. I would be amazing. But I've doubts about the feasibility

[JCQuintas]

I agree with the idea. I would be amazing. But I've doubts about the feasibility

What are your concerns?

[alexfauquette]

1. Knowing where axis will be plot looks feasible for "configuration" libraries like Echarts. For us it's feasible for "single components" For composition it looks complicate
2. It needs to be fast since it blocks all the other plugins, and getting axis size requires text size which is not free in terms of performances

It's also a question of dev exp. The drawing area is a notion of the context and axes are part of the rendering. When writing the initial version, I preferred to have a dumb feature for margin and keep the data flow from context to rendering, than trying to create something that depending on how you render the chart impacts the context.

For me the presence of ChartsXaxis should not impact the margin. Otherwise it looks like black magic and we are never sure what is a feature or a bug when user do customization

<ChartContainer>
  <ChartsXaxis axisId="..." />
</ChartContainer>