Charts
About this component
For now, the only type of chart we have on the website are simple pie charts. Charts are difficult to make accessible, and this limits our ability to use them. The only place they’re currently used is on the demographics page.
The charts include an accessible text version which also serves as the color key.
Styling
The pie charts are circular and have slices that add up to equal 100% of the circle. Each slice is a slightly different shade (darker or lighter) of the same color.
How to use for Pie charts
Add in the HTML (see “development info”).
Development info for Pie charts
Stylesheet location:
/_source/styles/components/_charts.scss
Chart
In this example, 200 is the size of the image, ffbb00 is the darkest color (it generates the lighter colors based on this), and 48,34,4,11,3 are the slice sizes – adjust these to create your chart.
<img src="https://www.pcc.edu/feeds/chart?d=48,34,4,11,3&width=200&hex=ffbbo" alt="" >
Key
Make sure to add the percentages and text below for accessibility, and as a key for the pie chart image.
<dl> <dt style="border-color: #FFBB00;">48%</dt> <!-- match the corresponding slice color and size --> <dd>No previous college</dd> </dl>
Example of Pie charts
Enrollment by program area
- 61%
- Transfer
- 23%
- Career Tech
- 7%
- Pre-College
- 5%
- ESOL
- 3%
- Community Ed