# Calendar chart in Figma

> A year of daily values as a grid

A calendar heatmap lays every day of a year out as a cell coloured by value — the contribution-graph layout. It makes weekly rhythm, seasonality and streaks visible in a way no line chart of the same data does.

## Available in 2 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| Google Charts | 5 |
| D3 · Nivo | 1 |

6 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The calendar chart on your canvas is the library's own output, and the Export tab hands developers that same library's configuration plus React, Vue, Angular or Svelte code — so what you design is what gets built.

## Reach for it when

- Daily counts over months or years: activity, incidents, sales, publishing.
- Day-of-week and seasonal patterns are what you are looking for.

## Use something else when

- The series is shorter than a couple of months — a bar chart shows more.
- You need to read exact values; colour is approximate.

## The data it needs

One row per date with its value; gaps are treated as empty days.

| Date | Value |
| --- | --- |
| 2026-01-01 | 3 |
| 2026-01-02 | 7 |
| 2026-01-03 | 0 |

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

All chart types: https://systergon.com/figma-charts/chart-types