Numeric Axis in React Chart
To enable a numeric axis in the chart, set the valueType property to Double in the appropriate axis component.
Range
You can control how a numeric axis is displayed by adjusting the following properties in the axis configuration:
minimum: Sets the lowest value shown on the axis.maximum: Sets the highest value shown on the axis.interval: Determines the spacing between tick marks or labels.
Range padding
You can customize the spacing around the minimum and maximum values of an axis using the rangePadding property. This helps improve the readability and visual balance of your charts.
Supported Padding Types
-
None- No padding is applied. The axis range strictly matches the data values. -
Round- Rounds the minimum and maximum values to the nearest whole number or logical boundary for a cleaner look. -
Additional- Adds a fixed amount of extra space beyond the data range to ensure visual breathing room. -
Normal- Applies a moderate, default padding that balances aesthetics and data fit. -
Auto- Automatically determines the best padding based on the data and chart type.
Label format
You can customize how numeric axis labels are displayed using the format property. This feature lets you apply specific number formats such as currency, percentage, or decimal precision, depending on your data presentation needs.
| Format | Description |
|---|---|
| N | Numeric format with specified decimals (e.g., N2 for two decimals). |
| C | Currency format with decimals (e.g., C2 for two decimals). |
| P | Percentage format for 0-1 values (e.g., P2 for 20.00%). |
Custom label format
You can apply custom formatting to axis labels using the format property within the ChartAxisLabel component. This supports dynamic placeholders like {value}, allowing you to append units or symbols—for example, {value}°C will display labels such as 20°C.