Contribution Graph

The ContributionGraph component plots a value per day across a year as a calendar heatmap — the familiar GitHub "contributions" grid. Use it for commit activity, usage density, streaks, publishing cadence or any per-day metric where the pattern over time matters more than exact values.

Example

Each column is a week, each cell a day; color intensity scales with the day's count. Hover a cell for its value.

<script setup lang="ts">
// Sparse list of { date, count }. Missing days render as empty (level 0).
const data = [
  { date: '2025-01-06', count: 3 },
  { date: '2025-01-07', count: 8 },
  { date: '2025-01-09', count: 1 }
  // ...one entry per active day across the year
]
</script>

<template>
  <ContributionGraph
    :data="data"
    color="var(--ui-success)"
  />
</template>

nuxt-charts add ContributionGraph

Data

Pass a sparse array of { date, count } objects. Dates use the YYYY-MM-DD format and only active days need an entry — any day without one is rendered as the empty (level 0) state. The grid starts on the Sunday of the earliest date's week so every column is a full seven-day week.

Props