Search code examples
zingchart

Conditional rounded corners on stacked bar chart


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

enter image description here


Solution

  • 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.