Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display only the half of the circle in progressbar #197

Open
Chandanesh32 opened this issue Dec 21, 2021 · 3 comments
Open

Display only the half of the circle in progressbar #197

Chandanesh32 opened this issue Dec 21, 2021 · 3 comments

Comments

@Chandanesh32
Copy link

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

.
Have tried with stroke-dasharray, stroke-dashoffset

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

@oterno
Copy link

oterno commented Dec 28, 2021

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} />

image

@Krammig
Copy link

Krammig commented Mar 13, 2022

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants