[Feature]: (Charts) Auto-adjusting Y-axis width based on content

[MrLepage]

What problem does this feature solve?

Currently, we manually set the Y-axis width using the yAxisWidth prop (e.g., yAxisWidth={30}). This can lead to truncated labels or unnecessary white space depending on the data displayed.

Feature Request

Add a way to make the Y-axis width adapt automatically to its content.

This would ensure that:

1. All labels are fully visible without truncation
2. No excessive white space is left when labels are short

Expected Behavior

The chart component should calculate the optimal width for the Y-axis based on:

• The longest label in the dataset
• The font size and style used for labels
• A minimum padding for readability

Potential Benefits

• Improved readability of charts
• Reduced need for manual adjustments when data changes
• More efficient use of chart space

Additional Context

This feature would be particularly useful for dynamic datasets where label lengths can vary significantly.

Current Workaround

We're currently using a fixed width: yAxisWidth={30}.

What does the proposed API look like?

To address the issue of automatically adjusting the Y-axis width based on content, I propose the following API enhancement:

1. Add a new prop autoAdjustYAxisWidth to the LineChart component.
2. Implement an internal calculation for optimal Y-axis width.
3. Allow manual override with minYAxisWidth prop when needed.

API Usage

Here's how the API would look:

<LineChart
  data={data}
  index="x"
  categories={['y1', 'y2', 'y3', 'y4']}
  autoAdjustYAxisWidth={true} // New prop
  minYAxisWidth={30} // Optional override
  // ... other props
/>

The implementation would work as follows:

1. If autoAdjustYAxisWidth is true (default), calculate the optimal width:

   • Measure the width of the longest Y-axis label
   • Add padding for readability
   • Set a minimum width to ensure consistency

2. If minYAxisWidth is also provided, use it as a minimum width:

   • The chart will use the larger of the calculated width or the provided minYAxisWidth

3. If autoAdjustYAxisWidth is false, use the provided minYAxisWidth or a default value

[severinlandolt]

Hi! We've been circling around this issue for quite some time. There's a nuance to this problem, where we believe that ultimately, it's best if the developer makes the decision.

Relevant discussions for reference: Issue 646 and Pull Request 684.

We had an implementation where the max tick length was set to 60 characters, truncating anything longer. This was done to address an edge case with 200+ character ticks without spaces, which ended up occupying 99% of the chart’s width. The solution also needs to work with orientation = "vertical", where labels/ticks can wrap. However, long words can still cause issues. We’d prefer truncated ticks/labels over a full-length label that makes the chart almost invisible, especially on mobile devices.

Additionally, Recharts' styles are extremely sensitive to any padding changes from the default 20. Changing it requires a different logic, especially if you add a y-axis label.

Finally, we’ve noticed that even if a solution works initially, changing the font family or default font size throws off the calculations. Altering padding adds further complications as mentioned.

In the end, we believe it’s up to the developer to decide on label handling. If your data includes dynamic labels that range between 0 and 60+ characters, we think it’s an issue with the labeling itself, rather than with the y-axis width.

Hope this makes the current state more clear.