Display only the half of the circle in progressbar

[Chandanesh32]

I've implemented the CircularProgressbar in my project(React),as in the below attached image . But now I wanted to show only the half of the circle irrespective of the value like the below (Where I marked):

. Have tried with stroke-dasharray, stroke-dashoffset

It would be helpful if anyone guides or give your valuable suggestion to fix this.

[oterno]

How about setting the circleRatio to 0.5 and multiplying the value by 2?

<CircularProgressbar value={27.5} circleRatio={1} />

<CircularProgressbar value={27.5 * 2} circleRatio={0.5} />

[Krammig]

Nice reply @oleterno-equinor I was just about to post a request for this.

However mine was slightly different as I am looking for a Horizontal half-circle because I just want to save some page space.

Any thoughts please ? Thanks

[SumitMittal1801]

Nice reply @oleterno-equinor I was just about to post a request for this.

However mine was slightly different as I am looking for a Horizontal half-circle because I just want to save some page space.

Any thoughts please ? Thanks

https://codesandbox.io/s/base-react-circular-progressbar-examples-forked-otop51?file=/index.js

see the second example in it for horizontal semi circle