RCPawn commented on issue #17763:
URL: https://github.com/apache/echarts/issues/17763#issuecomment-2746021051
**Issue Symptom**
Console warning appears when using `indicator.max: 100` + `alignTicks: true`
in radar chart:
`[ECharts] The ticks may be not readable when set min: 0, max: 100 and
alignTicks: true`
Removing `max` directly breaks data proportions.
---
**Root Cause**
- `alignTicks: true` forces ticks alignment across axes but causes conflicts
with dense `0-100` ranges
- Default `splitNumber` logic may conflict with `max: 100`
---
**Solution**
```javascript
// Problematic config (with warning)
radar: {
indicator: skillNames.map(name => ({ name, max: 100 })),
shape: 'polygon',
splitNumber: 4, // ❌ Mismatched split for 0-100 range
}
// Fixed config (warning-free)
radar: {
indicator: skillNames.map(name => ({ name, max: 100 })), // ✅ Keep scale
shape: 'polygon',
splitNumber: 5, // ✅ 100/5=20 for clean ticks
alignTicks: false, // ✅ Disable forced alignment
axisTick: { show: false },// ✅ Hide crowded ticks
axisLabel: { // ✅ Optimize labels
interval: 'auto', // Auto-calculate interval
formatter: (v) => Math.round(v) // Force integer display
}
}
```
**Key Config Explanations**
1. `splitNumber: 5`
- Divide 0-100 into 5 segments (20 units each)
2. `alignTicks: false`
- Prevent warning by disabling forced tick alignment
3. `axisLabel.formatter`
- Avoid decimal anomalies like `20.0000000001`
---
**Best Practices**
- Ensure all data values ≤ `max: 100`
- Add `splitArea` for better visual hierarchy
- Use `axisTick.length: 3` if tick lines are needed
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
