Pie Chart Rings

By default, rings have squared ends. Add .roundStart and/or .roundEnd for rounded ends.

Properties of each ring are controlled by css variables. They can be set in a css file (to affect multiple rings), or within a single ring's style attribute. Declaring <div class='pieChartRing' style='--percent:29; --fillColor:red;'>29%</div> is the expected way to set individual pie chart values.

--diameter
Diameter of pie chart
--percent
Percent that's filled (the data: between 0 and 100)
--borderWidth
Thickness of border
--fillColor
Color of ring
--remainderColor
Background color of ring (can be transparent)
--fontSize
Font size of data in center

Extend the base styling with an extension class that's specific to a page and/or a group of pie charts.

Pie Chart Rings HTML (with individual values in the style attribute)

<div class='pieChartRing' style='--percent:29; --fillColor:red;'>29%</div>

<div class='pieChartRing roundStart roundEnd' style='--percent:64; --fillColor:green; --remainderColor:rgba(0,0,0, 0)'>64%</div>

<div class='pieChartRing roundEnd specificStylingSharedClass goodData' style='--percent:85;'>85%</div>

<div class='pieChartRing roundEnd specificStylingSharedClass badData' style='--percent:5;'>5%</div>

Optional SCSS: Change the properties of all pie chart rings

.pieChartRing {
	--diameter: 72px;
	--borderWidth: 8px;
	--fillColor: #{$darkBlueTransition3};
	--remainderColor: #{$grey5};
	--fontSize: 14pt;
}

Optional Extension Classes: Change the properties for pie charts with an extension class

.specificStylingSharedClass {
	--diameter: 144px;
	--borderWidth: 24px;
	--fontSize: 28pt;
	font-family: $barlowCondensed;
	font-weight: bold;
}

.goodData {
	--fillColor: #{$logo-green-shadow};
	--remainderColor: #{$green5};
}

.badData {
	--fillColor: #{$logo-red-shadow};
	--remainderColor: #{$orange5};
}

The data in the center of the ring can have multiple HTML elements as long as they're all wrapped into a single container. It may be necessary to assign display: flex to the container.

15 %

HTML (with multiple content elements)

<div class='pieChartRing' style='--percent:15;'>
	<div class='data'>
		<span class='value'>15</span>
		<span class='unit'>%</span>
	</div>
</div>

Optional SCSS for multiple content elements

.data {
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;

	.value {
		color: red;
	}

	.unit {
		color: green;
		font-size: 75%;
	}
}