Portland Community College | Portland, Oregon Portland Community College


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.


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.

Responsive behavior

No change.

Development info
  • Stylesheet location: /source-v6/styles/components/_page-specific.scss
  • There isn’t currently a way to add charts in the WordPress editor without accessing the source code.
  • The Google API creates the pie chart image based on the colors and percentages you provide. The chart is an image, not live data.
  • <img src="https://chart.apis.google.com/chart?cht=p&amp;chs=200x200&amp;chma=0,0,0,0|0,0&amp;chco=ffbb00&amp;chd=t:48,34,4,11,3" alt="" class="graphic">
    • 200x200 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.
  • Make sure to add the percentages and text below for accessibility, and as a key for the pie chart image.
    • <dl>
        <!-- match the corresponding pie chart slice color -->
        <dt style="border-color: #FFBB00;">48%</dt>
        <!-- match the corresponding pie chart slice size -->
        <dd>No previous college</dd>

Pie chart example

New Students (Background Education) Chart

No previous college
Some college
Associate’s degree
Bachelor’s Degree
Master’s / Doctoral degree