apache / apache/echarts

[Bug] In SVG rendering mode, ECharts does not support gradient colors for axis line styling.

Open
#19,726 3 comments 0 reactions 0 assignees View on GitHub
bug en SVG
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=line-simple&lang=js&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdPqViNceADIRoNVPfQAbN1RMU3h78XvTA3pwEnl72FNQEtL7ujBy8ITEYBAAMdjGk5Nm5eZgATAQAjEV55GU56aHhnAGghKL1MUiwwABm3XhUYIVhERwJHBq0AL5VxUg9fQPZAHQArDzDkbTjmtPtXnO9_YNZq-uNo7QARt6M9ADWU9Z7u8UA7hACYNoVWfWTIf90C9YOQcPgiNF0HEaLIAG6MbxKWgkYH9IxUQiwNr2SGkIRgERY8orHKwEoAZlJJRKABYeGTygAOenlclrWDlGkAdnpJQAbFlbPVoXQksoASQnpMANxAA

### Steps to Reproduce

xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{
lineStyle:{
color:{
type:'linear',
x:0,
y:0,
x2:1,
y2:0,
colorStops:[
{ offset:0,color:'red'},
{offset:0.5,color:'red'},
{offset:0.5,color:'black'}]
},
width:10
}
}
},

### Current Behavior

When configured to use SVG rendering mode, ECharts does not support gradient colors for axis line styling. This limitation is not present in Canvas rendering mode.
![image](https://github.com/apache/echarts/assets/125205627/73d88802-df8d-4d6b-b8ab-20fd27da9a5e)

### Expected Behavior

gradient colors work well in SVG rendering mode.

### Environment

```markdown
- OS:windows11
- Browser:chrome
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.