Charts

Donut chart


.satellite {
border-color: transparent
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-3 ">
      <o-arc class="grow-1x  gap-0 " value="50" style="--o-color: var(--o-red)"></o-arc>
      <o-arc class="grow-1x gap-0  " value="25" style="--o-color: var(--o-orange);"></o-arc>
      <o-arc class="grow-1x  gap-0 " value="15" style="--o-color: var(--o-yellow)"></o-arc>
      <o-arc class="grow-1x  gap-0 " value="5" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="grow-1x  gap-0 " value="5" style="--o-color: var(--o-green)"></o-arc>
    </div>
    <div class="orbit-3 ">
      <div class="satellite angle-90" style="font-size:15px; font-weight: bold;  color: var(--o-red-darker);">50</div>
      <div class="satellite angle-225" style="font-size:15px; font-weight: bold;  color: var(--o-orange-darker);">25</div>
      <div class="satellite angle-295" style="font-size:15px; font-weight: bold;  color: var(--o-yellow-darker);">15</div>
      <div class="satellite angle-333" style="font-size:15px; font-weight: bold;  color: var(--o-blue-darker);">5</div>
      <div class="satellite angle-350" style="font-size:15px; font-weight: bold;  color: var(--o-green-darker);">5</div>
    </div>
  </div>
</div>

.satellite {
border-color: transparent
}

Pie chart

body {
  
}

HTML

<div class="bigbang">
  <div class="gravity-spot">
      <div class="orbit-2 ">
        <o-arc class="grow-2x gap-0" value="10" style="--o-color: var(--o-red)"></o-arc>
        <o-arc class="grow-2x gap-0" value="35" style="--o-color: var(--o-orange);"></o-arc>
        <o-arc class="grow-2x gap-0" value="25" style="--o-color: var(--o-yellow)"></o-arc>
        <o-arc class="grow-2x gap-0" value="15" style="--o-color: var(--o-green)"></o-arc>
        <o-arc class="grow-2x gap-0" value="15" style="--o-color: var(--o-indigo)"></o-arc>
      </div>
  </div>
</div>

Sunburst chart

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-2 " style="font-size: 12px; color: white"> <o-arc class="grow-1x flip" value="55" style="--o-color: var(--o-blue)"> Apple</o-arc> <o-arc class="grow-1x flip" value="20" style="--o-color: var(--o-indigo);">Xiaomi</o-arc> <o-arc class="grow-1x " value="25" style="--o-color: var(--o-pink)">Samsung</o-arc> </div> <div class="orbit-4 range-198 " style="font-size: 9px; color: white"> <o-arc class="grow-0.9x" value="33" style="--o-color: var(--o-blue-light)">Ipad</o-arc> <o-arc class="grow-0.9x flip" value="37" style="--o-color: var(--o-blue-light)"> Watch</o-arc> <o-arc class="grow-0.9x flip" value="23" style="--o-color: var(--o-blue-light)">Iphone</o-arc> <o-arc class="grow-0.9x" value="7" style="--o-color: var(--o-blue-light)"></o-arc> </div> <div class="orbit-6 from-138 range-46 " style="font-size: 8px;"> <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x flip" value="30" style="--o-color: var(--o-blue-lighter) "> 15 Pro</o-arc> <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc> <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc> </div> </div> </div>

body {
  
}

HTML

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-2  " style="font-size: 12px; color: white">
      <o-arc class="grow-1x flip" value="55" style="--o-color: var(--o-blue)"> Apple</o-arc>
      <o-arc class="grow-1x flip"  value="20" style="--o-color: var(--o-indigo);">Xiaomi</o-arc>
      <o-arc class="grow-1x " value="25" style="--o-color: var(--o-pink)">Samsung</o-arc>
    </div>
    <div class="orbit-4 range-198 " style="font-size: 9px; color: white">
      <o-arc class="grow-0.9x" value="33" style="--o-color: var(--o-blue-light)">Ipad</o-arc>
      <o-arc class="grow-0.9x flip" value="37" style="--o-color: var(--o-blue-light)"> Watch</o-arc>
      <o-arc class="grow-0.9x flip" value="23" style="--o-color: var(--o-blue-light)">Iphone</o-arc>
      <o-arc class="grow-0.9x" value="7" style="--o-color: var(--o-blue-light)"></o-arc>
    </div>
    <div class="orbit-6 from-138 range-46 " style="font-size: 8px;">
      <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x flip" value="30" style="--o-color: var(--o-blue-lighter) "> 15 Pro</o-arc>
      <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x" value="5" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="grow-1x" value="10" style="--o-color: var(--o-blue-lighter)"></o-arc>
    </div>
  </div>
</div>

Show & Tell

Join to our Github Discussion and show off what have you done with Orbit.