Code

Interactive pyramid chart component with pure CSS and JS

  • by

Let’s say you want to create the food pyramid. You know, — eat 11 servings of whole grains, 9 servings of fruits and vegetable, 6 servings of diary and something like 2 servings of grass, oil and sweets.

Our data are:

 
 
const data = [ 
  { value: 11, title: 'Grains' }, 
  { value: 9, title: 'Fruit & Vegetables' }, 
  { value: 6, title: 'Diary & Meat' }, 
  { value: 2, title: 'Grass, Oil & Sweets' } 
] 
 

We want to see something like this:

See the Pen GEeEvY by Mycolaos (@Mycolaos) on CodePen.

The component should be:

  1. Reusable
  2. Visually a triangle with transparent background
  3. Slice proportions should be correct
  4. Responsive
  5. Easily styled
  6. Can be easily implemented with any library or framework

Read More »Interactive pyramid chart component with pure CSS and JS