apache / apache/echarts

[Bug] ECharts radar.axisName.rotate and radar.axisName.nameRotate Does Not Rotate the Axis Names

Open
#20,768 7 comments 1 reaction 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
15h 17m
Merged PRs (30d)
5

Description

### Version

5.6.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWsDGwA2wBOAXLANoBEAxAMyUCcAHACIBCpAugDRqxjA6QhFU6dGDwQA5uICmhWKQCGADwgBnUp2GwlqgArAI0MDMFdNYAJ4gpRUioAW8gCbAA7qVOwAvl08bY4sUdBXy5FAEFlFSJiIWELKxsMeSNxfHN1D0dk-WjSAFkYdTkAFQBXKSLSAHUpR0riu1LKgDExSoBlZI7S6DY_dGh5AFspACVgMGTrWABGOh8OLnMI1WjYkUtp0gA3eWxy93RPRfQVGQgpKJJ12EGRm0AXt0BS40B-6MA71IyzTZsAI3k8T7CP54KoQRxgOw2ABsAAYAKSA9BZSbRGYw9iwACsACYMdiYejYNQACwY2iE6iE7H41gLFCeIA&_source=echarts-doc-preview

### Steps to Reproduce

1. Go to this link: https://echarts.apache.org/examples/en/editor.html?c=radar-custom
2. Under the second radar.axisName enter the option nameRotate: 30

```javascript
{
indicator: [
{ text: 'Indicator1', max: 150 },
{ text: 'Indicator2', max: 150 },
{ text: 'Indicator3', max: 150 },
{ text: 'Indicator4', max: 120 },
{ text: 'Indicator5', max: 108 },
{ text: 'Indicator6', max: 72 }
],
center: ['75%', '50%'],
radius: 120,
axisName: {
color: '#fff',
backgroundColor: '#666',
borderRadius: 3,
padding: [3, 5],
nameRotate: 30 // need to rotate the values
}
}
```

### Current Behavior

I am using react-echarts v3.0.2. I am trying to build radars and am trying to rotate the axisNames i.e. the indicators, by an angle. According to the documentation the radar.axisName.rotate and radar.axisName.nameRotate should work.

When I try this on just a bar chart for example (linked above) this doesn't seem to work either. Any help here would be greatly appreciated! I need to deliver these visualisations over the next week!

Ideally I would like to rotate each of the axis names by the angle at which the axes is on. That is the ideal situation.

### Expected Behavior

The expected behaviour is that there is a formatter that I can leverage to set the rotation of the axisName by the axes angle via a method under nameRotate for the axisName under the radar.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked radar-custom reproduction and trace how radar.axisName.rotate and nameRotate are handled in ECharts. Compare the documented behavior with the rendered axis labels, including the requested per-axis-angle behavior. Done means the documented rotation options produce the expected label orientation in the reproduction and the behavior is covered by a regression check.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.