Skip to main content
Best answer by konduruc733182

 Hello [mention:b0a0f9da16b441e8aa0eb47e9bf95720:e9ed411860ed4f2ba0265705b8793d05] ,

There is no parameter that accepts this shape as Kumar mentioned. But you can use a card layout and try. The below is something that will give what you want on a progress bar.

{
  a!cardLayout(
    padding: "NONE",
    shape: "ROUNDED",
    marginAbove: "NONE",
    marginBelow: "NONE",
    contents: a!progressBarField(
      labelPosition: "COLLAPSED",
      percentage: 75,
      marginAbove: "NONE",
      style: "THICK"
    )
  )
}

7 replies

kumara0180
August 24, 2024

If they don’t have a parameter to accept the shape, then it would be not possible to change the shape of corners like we have for charts and buttons 

konduruc733182
August 24, 2024

 Hello [mention:b0a0f9da16b441e8aa0eb47e9bf95720:e9ed411860ed4f2ba0265705b8793d05] ,

There is no parameter that accepts this shape as Kumar mentioned. But you can use a card layout and try. The below is something that will give what you want on a progress bar.

{
  a!cardLayout(
    padding: "NONE",
    shape: "ROUNDED",
    marginAbove: "NONE",
    marginBelow: "NONE",
    contents: a!progressBarField(
      labelPosition: "COLLAPSED",
      percentage: 75,
      marginAbove: "NONE",
      style: "THICK"
    )
  )
}

stefanhelzle0001
Brainy
August 24, 2024

The trick here is to make "padding" none. Then the rounded shape of the card hides the square edges of the enclosed component. Adjust the margins of the inner component to remove any remaining space.

pearlf4501
August 26, 2024

Thank you Konduru and Stefan, it worked perfectly for the progress bar!
However, I am struggling to round the corners of the bars in a bar chart. It seems I cannot get rid of the large space that appears above the bar. Any help would be greatly appreciated!