Conditional rounded corners on stacked bar chart

Question

I have a chart with stacked bars A and B

A is on top of B and A have top corners rounded but not B.

But I want B having rounded top corners when A = 0

Answer 1

You can leverage the ZingChart Stacked Bar chart token “%scale-value-value” (or “%vv”) for this. It’s the sum value of the stacked node and all nodes stacked below it. Using a rule, compare this sum value to the “%stack-total” (or “%total”) to determine if the node is the top of the stack, then add your border radius:

“rules”: [
   {
    “rule”: “%vv == %stack-total”,
    “borderRadiusTopLeft”: “10rem”,
    “borderRadiusTopRight”: “10rem”
   }
 ]

Put that rule in your “plot” object and you should be fine. I made a demo in the ZingChart studio if you want to check it out.

Answer 2

An alternative (more or less flexible, depending on the setup) is to use (%node-value)(PLOTINDEX) locator to check for the value of the node "below"

"rules":[
    {
        "rule":"(%node-value)(2) === 0",
        "borderRadiusTopLeft":"10rem",
        "borderRadiusTopRight":"10rem"
    }
]

This basically says: if the value of the corresponding node of the 3rd plot (plot index is 2) is zero, then round the borders.

See: https://app.zingsoft.com/demos/view/ZJ1XMRK3