-
Notifications
You must be signed in to change notification settings - Fork 123
Description
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:
- All labels are fully visible without truncation
- 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:
- Add a new prop
autoAdjustYAxisWidthto the LineChart component. - Implement an internal calculation for optimal Y-axis width.
- Allow manual override with
minYAxisWidthprop 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:
-
If
autoAdjustYAxisWidthis 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
-
If
minYAxisWidthis also provided, use it as a minimum width:- The chart will use the larger of the calculated width or the provided
minYAxisWidth
- The chart will use the larger of the calculated width or the provided
-
If
autoAdjustYAxisWidthis false, use the providedminYAxisWidthor a default value