Pure CSS Pie Charts w/ CSS variables 😎

index.pug

.pie
  .pie__segment(style='--offset: 0; --value: 25; --bg: #db0a5b;')
  .pie__segment(style='--offset: 25; --value: 10; --bg: #22a7f0;')
  .pie__segment(style='--offset: 35; --value: 60; --bg: #2ecc71; --over50: 1;')
  .pie__segment(style='--offset: 95; --value: 5; --bg: #4d05e8;')
.actions
  label Offset
  label Value
  input(type='number', min='0', max='360', step='1', value='0')
  input(type='number', min='0', max='360', step='1', value='25')
  input(type='number', min='0', max='360', step='1', value='25')
  input(type='number', min='0', max='360', step='1', value='10')
  input(type='number', min='0', max='360', step='1', value='35')
  input(type='number', min='0', max='360', step='1', value='60')
  input(type='number', min='0', max='360', step='1', value='95')
  input(type='number', min='0', max='360', step='1', value='5')

pure-css-pie-charts-w-css-variables.markdown

Pure CSS Pie Charts w/ CSS variables 😎

In ~30 lines of CSS you can create pure CSS pie charts leveraging CSS variables. That's pretty cool IMO.

Read how this all works in this accompanying blog post: HOW TO: Pure CSS pie charts in ~30 lines of CSS

Enjoy!

A Pen by Jhey on CodePen.

License.

script.babel

const pie = document.querySelector('.pie')
const actions = document.querySelector('.actions')
const segments = pie.children

const updateSegment = e => {
  const idx = [...actions.children].indexOf(e.target)
  const key = idx % 2 === 0 ? 'offset' : 'value'
  const toUpdate = segments[Math.floor(idx / 2) - 1]
  toUpdate.style.setProperty(`--${key}`, e.target.value)
}
window.addEventListener('input', updateSegment)

style.stylus

// START PIE CHART RELATED FUNCTIONAL STYLES
.pie
  border-radius 100%
  height calc(var(--size, 200) * 1px)
  overflow hidden
  position relative
  width calc(var(--size, 200) * 1px)

  &__segment
    --a calc(var(--over50, 0) * -100%)
    --b calc((1 + var(--over50, 0)) * 100%)
    --degrees calc((var(--offset, 0) / 100) * 360)
    -webkit-clip-path polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    clip-path polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    height 100%
    position absolute
    transform translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
    transform-origin 50% 100%
    width 100%
    z-index calc(1 + var(--over50))

    &:after
    &:before
      background var(--bg, #e74c3c)
      content ''
      height 100%
      position absolute
      width 100%

    &:before
      --degrees calc((var(--value, 45) / 100) * 360)
      transform translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
      transform-origin 50% 0%

    &:after
      opacity var(--over50, 0)
// END PIE CHART STYLES

*
  box-sizing border-box

body
  align-items center
  background #111
  color #fafafa
  display flex
  flex-direction column
  padding 1rem
  font-family 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
  justify-content center
  min-height 100vh

label
  font-size 1rem
  margin-bottom .5rem

input
  min-width 80px

.actions
  display grid
  grid-gap 4px
  grid-template-columns auto auto
  z-index 99