You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "BenJackGill (via GitHub)" <gi...@apache.org> on 2023/11/04 03:03:17 UTC

[I] Dynamic "borderRadius Application for Top Series in Stacked Bar Charts [echarts]

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: commits-unsubscribe@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [I] Dynamic "borderRadius Application for Top Series in Stacked Bar Charts [echarts]

Posted by "BenJackGill (via GitHub)" <gi...@apache.org>.
BenJackGill closed issue #19274: Dynamic "borderRadius Application for Top Series in Stacked Bar Charts
URL: https://github.com/apache/echarts/issues/19274


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [I] Dynamic "borderRadius Application for Top Series in Stacked Bar Charts [echarts]

Posted by "BenJackGill (via GitHub)" <gi...@apache.org>.
BenJackGill commented on issue #19274:
URL: https://github.com/apache/echarts/issues/19274#issuecomment-1793318172

   Closing this one as a duplicate.


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [I] Dynamic "borderRadius Application for Top Series in Stacked Bar Charts [echarts]

Posted by "BenJackGill (via GitHub)" <gi...@apache.org>.
BenJackGill closed issue #19274: Dynamic "borderRadius Application for Top Series in Stacked Bar Charts
URL: https://github.com/apache/echarts/issues/19274


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [I] Dynamic "borderRadius Application for Top Series in Stacked Bar Charts [echarts]

Posted by "BenJackGill (via GitHub)" <gi...@apache.org>.
BenJackGill commented on issue #19274:
URL: https://github.com/apache/echarts/issues/19274#issuecomment-1793318000

   Sorry I accidentally opened 


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org