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.