'eCharts fill area horizontally
I have a line type eCharts graph and I want to fill the area between the line and the y axis. The default area filling behaviour happens vertically, the chart fills out the space between the line and the x axis.
I know I can swap axes in other chart libraries but doesn't look like an option here in eCharts.
These are the options I'm using to set up the chart:
const options = {
tooltip: {
show: false
},
grid: {
show: true,
top: 0,
bottom: 40,
left: 50,
right: 10,
},
xAxis: {
id: 'x',
type: 'value',
min: 0,
max: 4,
},
yAxis: {
id: 'y',
type: 'value',
inverse: true,
min: range?.min,
max: range?.max,
axisLine: {
show: true
},
splitLine: {
show: true
},
axisTick: {
show: true
}
},
series: {
type: 'line',
xAxisId: 'x',
yAxisId: 'y',
symbol: 'none',
smooth: true,
connectNulls: false,
// 2d array like [[1,1000], [3, 1250], ...]
data: filteredData.data,
lineStyle: {
color: '#f00',
},
areaStyle: {
color: '#f00',
origin: 'auto'
}
}
};
Thanks.
Solution 1:[1]
Ok, looks like treating the y axis type as a category instead of value and removing the y axis boundaries did the trick.
yAxis: {
id: 'y',
type: 'category', // category and not value
// y axis boundaries removed
...
Outcome after these changes:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | F C |



