Facing issue in gauge Chart

I am trying to make a gauge chart using HTML and CSS but I am not able to curve this circle properly, I want to make the circle as image attached. your early help appreciated…

here is my fiddle : https://jsfiddle.net/shahzadsiddiqui8/Lwrnobv0/3/

<div class="sc-gauge">
                                        <div class="sc-background">
                                          <div class="sc-percentage"></div>
                                          <div class="sc-mask"></div>
                                          <span class="sc-value">88</span>
                                        <span class="sc-min">0</span>
                                        <span class="sc-max">100</span>

.sc-gauge  { width:200px; height:200px; }
.sc-background { position:relative; height:100px; margin-bottom:10px; background-color:#ccc; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }
.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#fff; border-radius:150px 150px 0 0 }
.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#f96300; }
.sc-percentage { transform:rotate(158deg); transform-origin:top center; }
.sc-min { float:left; }
.sc-max { float:right; }
.sc-value { position:absolute; top:50%; left:0; width:100%;  font-size:48px; font-weight:700 }


Your chart looks really awesome.
Do you still have the image to show us what you want it to look like?

Threads merged.

I think you would be better using svg for the circles. I’m a complete amateur at drawing with svg but this was my attempt.

Hopefully it will be some use and you can tidy it up. There probably is a much easier way to do the whole thing in svg (including text etc) but I;ll leave that for you to explore :slight_smile:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.