- var data = { 2018: 29, 2017: 26, 2016: 20 };
- var darr = [], val;

style
	- for(var p in data) {
		| #o#{p}:checked ~ .pie { --p: #{data[p]} }
	- }

.wrap
	- for(var p in data) {
		- if(!val) val = data[p];
		input(id=`o${p}` name='o' type='radio' checked=val == data[p])
		label(for=`o${p}`) #{p}
		- darr.push(`${data[p]}% for year ${p}`)
	- }
	.pie(aria-label=`Value as pie chart. ${darr.join(', ')}.` 
			 role='graphics-document group')

$d: 20rem;
$c: #ecf081 #b3cc57;

body {
  display: flex;
	align-items: center;
	justify-content: center;
  margin: 0;
  min-height: 100vh;
	background: #ffbe40;
	font-size: 1em;
	font-family: trebuchet ms, verdana, sans-serif;
	line-height: 1.5
}

.wrap {
	display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  width: $d
}

[type='radio'] {
  position: absolute;
  left: -100vw;
	
	+ label {
    margin: 3em .5em .5em;
    padding: .25em .5em;
    border-radius: 5px;
    box-shadow: 1px 1px nth($c, 2);
    background: nth($c, 1);
    font-size: 1.25em;
    text-shadow: 1px 1px #fff;
    cursor: pointer
  }
	
  &:checked + label {
		box-shadow: inset -1px -1px nth($c, 1);
		background: nth($c, 2);
		color: #fff;
		text-shadow: 1px 1px #000
  }
}

.pie {
	width: 0;
  padding: 1.5em 50%;
	border-radius: 5px;
  --stop-list: #ab3e5b calc(var(--p)*1%), #ef746f 0%;
	background: linear-gradient(90deg, var(--stop-list));
	transition: --p .5s;
	
	&:after {
		position: absolute;
		transform: translate(-50%, -50%) var(--pos, #{unquote(' ')});
		color: #fff;
		font-size: 2em;
		counter-reset: p var(--p);
		content: counter(p) '%'
	}
	
	@supports (background: conic-gradient(tan, red)) {
		padding: 50%;
		border-radius: 50%;
		--a: calc(.5*var(--p)/100*1turn - 90deg);
		--pos: rotate(var(--a)) 
					 translate(#{.25*$d}) 
					 rotate(calc(-1*var(--a)));
		background: conic-gradient(var(--stop-list))
	}
}

CSS.registerProperty({
	name: '--p', 
	syntax: '<integer>',
	initialValue: 0, 
	inherits: true
});