Charts > Waffle chart ​

A waffle chart is a visual representation of data using a grid of small equal-sized squares or rectangles, where each unit typically represents a

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Animation

Style

Component API ​

This chart is built using SVG and d3, and GSAP for animation.

It consists of 100 squares and each square represents 1% of data. Each color is a category. Since only whole squares can be colored, the values are rounded and there might be rounding errors (sum is 99 or 101). In these cases, a percentage point is added or subtracted from the biggest category. In the future we should make this more precise and support drawing partial squares.

Data ​

Values are percentages.

[
  {
    id: "data-1",
    name: "Data 1",
    values: {
      val1: {
        id: "val-1",
        name: "Val 1",
        value: 75,
        count: 3,
        color: "#eee",
      },
      val2: {
        id: "val-2",
        name: "Val 2",
        value: 25,
        count: 1,
        color: "#ccc",
      },
    },
  },
];

Props ​

Dependencies ​

• d3
• GSAP

Featured in ​

• Santa Coloma
• UNIDO IDR