Hello, Do you have any idea how to create such a graph with Wappler?

Wappler General Need Help
1

Hello, Do you have any idea how to create such a graph with Wappler?

Thanks

image

2

I suppose via css...
Take a look at this:

2 Likes
3

Here is a sample code:

<div class="row">
            <div class="col">                
                <div class="pie no-round" style="--p: 25; --c: purple; --b: 25px;"> 25%</div>

                <div class="pie no-round" style="--p: 50; --c: purple; --b: 25px;"> 50%</div>

                <div class="pie no-round" style="--p: 75; --c: purple; --b: 25px;"> 75%</div>

                <div class="pie no-round" style="--p: 100; --c: purple; --b: 25px;"> 100%</div>
            </div>
        </div>

CSS style:

.pie {
  --w:150px;  
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 22px;
  font-weight: bold;
}
.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*0.5%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-transform-origin: center;
           transform-origin: center; 
   -webkit-transform: rotate(-90deg); 
           transform: rotate(-90deg);
}

Result samples:

image
image721×209 7.02 KB

You can play with the color, border-size, font-size etc...