如何在 highcharts 中设置堆叠条的边框半径

Question

Hi I am trying to set border radius for stacked bar with two items using

borderRadiusTopLeft: '50%', borderRadiusTopRight: '50%', borderRadiusBottomLeft: '50%', borderRadiusBottomRight: '50%',

which is working good if both the values are >1

issue is when one of the value is 0

I need both sides with radius even if values is 0,

Please find the attachment for graph.

can someone help me please.

Answer 1

Try setting the parent's border-radius , this works for me:

 .bar { width: 200px; height: 20px; display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; }.bar > * { color: white; display: flex; align-items: center; justify-content: center; }.red { background-color: #E37273; flex: var(--red); }.blue { background-color: #29D0CE; flex: var(--blue); }

 <div class="bar" style="--red: 0; --blue: 8;"> <span class="red"></span> <span class="blue">8</span> </div> <br> <div class="bar" style="--red: 5; --blue: 3;"> <span class="red">5</span> <span class="blue">3</span> </div> <br> <div class="bar" style="--red: 8; --blue: 0;"> <span class="red">8</span> <span class="blue"></span> </div>