Skip to main content

Donut Chart

These donut charts can only display eight values or less. If using as markup, the label attribute is required for accessibility, it should describe what is in the dataset. This is included by default with the Drupal block.

Component Library​

Include the following script to use the donut chart component on your non-Drupal website or application.

<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/donut-chart.js"></script>

Blue (Default)​

  • 10% Freshman
  • 14% Sophomore
  • 22% Junior
  • 35% Senior
  • 7% Post Bac
  • 2% Grad Student
  • 5% Alumni
  • 5% Other
  • 10% Freshman
  • 14% Sophomore
  • 22% Junior
  • 35% Senior
  • 7% Post Bac
  • 2% Grad Student
  • 5% Alumni
  • 5% Other

Light Blue​

  • 5% A
  • 2% B
  • 30% C
  • 8% D
  • 7% E
  • 2% F
  • 12% G
  • 34% H
  • 5% A
  • 2% B
  • 30% C
  • 8% D
  • 7% E
  • 2% F
  • 12% G
  • 34% H

Green​

  • 9.1% Freshman
  • 14.8% Sophomore
  • 21.9% Junior
  • 35.2% Senior
  • 6.25% Post Bac
  • 2.75% Grad Student
  • 4.5% Alumni
  • 5.5% Other
  • 9.1% Freshman
  • 14.8% Sophomore
  • 21.9% Junior
  • 35.2% Senior
  • 6.25% Post Bac
  • 2.75% Grad Student
  • 4.5% Alumni
  • 5.5% Other