BenJackGill opened a new issue, #19274:
URL: https://github.com/apache/echarts/issues/19274
### What problem does this feature solve?
The current `borderRadius` setting for a stacked bar charts does not allow
us to put a border radius on the top stacked series, whatever series that may
be.
It only allows us to put a `borderRadius` on one particular series. But
sometimes that series will have no value and will not be displayed. During
these times the top stacked series will not be rounded.
Therefore we need a method of using `borderRadius` on the top stacked
series, whatever series that may be at the time.
**Example:**
In the image below the stacked bars on the left have a blue series named
`rank1` which is currently the top stack and correctly rounded using
`borderRadius`.
But theright stacked bars do not have a value for `rank1`. So the top series
in that case is actually `rank2To5` which does not get the `borderRadius`
applied.
[![enter image description here][3]][3]
**Here is the above illustrated with code:**
```lang-TypeScript
const options: ECOption = {
xAxis: {
type: "time",
},
yAxis: {
type: "value",
show: false,
},
dataset: {
dimensions: [
{ name: "date", type: "time" },
{ name: "rank51Plus", type: "number" },
{ name: "rank21To50", type: "number" },
{ name: "rank11To20", type: "number" },
{ name: "rank6To10", type: "number" },
{ name: "rank2To5", type: "number" },
{ name: "rank1", type: "number" },
],
source: rankChartPoints.value,
},
series: [
{
name: "#51+",
type: "bar",
stack: "ranks",
color: mediumRedHex,
encode: {
x: "date",
y: "rank51Plus",
},
},
{
name: "#21-50",
type: "bar",
stack: "ranks",
color: orange6Hex,
encode: {
x: "date",
y: "rank21To50",
},
},
{
name: "#11-20",
type: "bar",
stack: "ranks",
color: amber7Hex,
encode: {
x: "date",
y: "rank11To20",
},
},
{
name: "#6-10",
type: "bar",
stack: "ranks",
color: lime7Hex,
encode: {
x: "date",
y: "rank6To10",
},
},
{
name: "#2-5",
type: "bar",
stack: "ranks",
color: lightGreen7Hex,
encode: {
x: "date",
y: "rank2To5",
},
},
{
name: "#1",
type: "bar",
stack: "ranks",
color: "#00b0ff",
encode: {
x: "date",
y: "rank1",
},
itemStyle: {
borderRadius: [10, 10, 0, 0], // Adding border radius here, but
sometimes this series has no value causing borderRadius to disappear
},
},
],
};
```
And here is a [StackOverflow
question](https://stackoverflow.com/questions/77415824/echarts-stacked-bar-chart-setting-borderradius-on-topmost-bar-only/77416387#77416387)
for the same issue described above.
[1]: https://echarts.apache.org/en/index.html
[2]: https://echarts.apache.org/en/option.html#series-bar
[3]: https://i.stack.imgur.com/KAgRh.png
### What does the proposed API look like?
I propose we allow setting of the `borderRadius` outside of the `series`.
Perhaps somewhere on `yAxis` and `xAxis` which already has other style
elements.
Something like this:
```TypeScript
yAxis: {
stackedBarStyle: {
topSeriesBorderRadius: [10, 10, 0, 0]
}
},
```
```TypeScript
xAxis: {
stackedBarStyle: {
topSeriesBorderRadius: [10, 10, 0, 0]
}
},
```
--
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]
