Recipes
Data
Object map (recommended)
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<script setup lang="ts">
const data = {
'2025-01-14': 3,
'2025-01-15': 7,
'2025-03-22': 1,
}
</script>
<template>
<CalendarHeatmap :data="data" />
</template>Array of { date, value }
vue
<script setup lang="ts">
import type { HeatmapDataArray } from 'vue-calendar-activity'
const data: HeatmapDataArray = [
{ date: '2025-01-14', value: 3 },
{ date: '2025-01-15', value: 7 },
]
</script>
<template>
<CalendarHeatmap :data="data" />
</template>Date Range
Range presets
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" range="year" />
<CalendarHeatmap :data="data" range="6months" />
<CalendarHeatmap :data="data" range="3months" />
<CalendarHeatmap :data="data" range="month" />Custom start / end dates
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap
:data="data"
start-date="2025-01-01"
end-date="2025-06-30"
/>Colors
Built-in color presets
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<!-- github (default), blue, orange, red, purple, teal -->
<CalendarHeatmap :data="data" color-preset="blue" />
<CalendarHeatmap :data="data" color-preset="purple" />
<CalendarHeatmap :data="data" color-preset="teal" />Auto-palette from one target color
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" color-to="#0ea5e9" />Gradient scale
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap
:data="data"
scale-mode="gradient"
color-from="#fef9c3"
color-to="#854d0e"
/>Explicit colors per level
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<!-- index 0 = empty day -->
<CalendarHeatmap
:data="data"
:colors="['#f1f5f9', '#bae6fd', '#38bdf8', '#0284c7', '#0c4a6e']"
/>Custom empty (level 0) color
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" color-preset="blue" empty-color="#f8fafc" />More / fewer levels
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" :levels="3" />
<CalendarHeatmap :data="data" :levels="8" />Layout & Style
Vertical orientation
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" orientation="vertical" range="3months" />Cell size and gap
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" :cell-size="16" :cell-gap="4" />Circle cells (Duolingo-style)
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" :cell-size="14" :cell-gap="4" :cell-radius="50" />Dark theme
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" theme="dark" />Minimal — no labels, no legend
vue
<CalendarHeatmap
:data="data"
:show-months="false"
:show-weekdays="false"
:show-legend="false"
:tooltip-enabled="false"
/>Week starts on Sunday
Sun
Mon
Tue
Wed
Thu
Fri
Sat
vue
<CalendarHeatmap :data="data" :week-start="0" />Locale
Built-in Russian locale
Пн
Вт
Ср
Чт
Пт
Сб
Вс
vue
<CalendarHeatmap :data="data" locale="ru" />Custom locale (French)
Lun
Mar
Mer
Jeu
Ven
Sam
Dim
vue
<script setup lang="ts">
import type { HeatmapLocale } from 'vue-calendar-activity'
const locale: HeatmapLocale = {
monthsShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
'Jul','Aoû','Sep','Oct','Nov','Déc'],
weekdaysShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
noDataLabel: 'Aucune activité',
on: 'le',
}
</script>
<template>
<CalendarHeatmap :data="data" :locale="locale" :week-start="1" />
</template>Custom date format in tooltip
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<!-- tokens: YYYY, MM, DD -->
<CalendarHeatmap :data="data" date-format="DD.MM.YYYY" />Interaction
Click to select a day
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { HeatmapDay } from 'vue-calendar-activity'
const selected = ref<HeatmapDay | null>(null)
</script>
<template>
<CalendarHeatmap :data="data" @cell-click="(day) => selected = day" />
<p v-if="selected">{{ selected.date }} — {{ selected.value }}</p>
</template>Reactive / live-updating data
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<script setup lang="ts">
import { ref } from 'vue'
const data = ref<Record<string, number>>({})
function addToday() {
const today = new Date().toISOString().slice(0, 10)
data.value = { ...data.value, [today]: (data.value[today] ?? 0) + 1 }
}
</script>
<template>
<CalendarHeatmap :data="data" />
<button @click="addToday">+1 today</button>
</template>Tooltip
Custom tooltip text (prop)
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<script setup lang="ts">
import type { HeatmapDay } from 'vue-calendar-activity'
function formatter(day: HeatmapDay): string {
if (day.value === 0) return `No commits on ${day.date}`
return `${day.value} commit${day.value !== 1 ? 's' : ''} on ${day.date}`
}
</script>
<template>
<CalendarHeatmap :data="data" :tooltip-formatter="formatter" />
</template>Custom tooltip slot (full HTML)
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data">
<template #tooltip="{ day }">
<div style="text-align:center">
<strong>{{ day.date }}</strong><br />
<span>{{ day.value }} commits</span>
</div>
</template>
</CalendarHeatmap>Today Highlight
Default (ring)
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" today />Both styles
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<!-- ring — inset border -->
<CalendarHeatmap :data="data" :today="{ style: 'ring', color: '#0969da', size: 2 }" />
<!-- fill — overrides heat color -->
<CalendarHeatmap :data="data" :today="{ style: 'fill', color: '#0969da' }" />Custom color
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" :today="{ style: 'ring', color: '#f97316', size: 2 }" />Legend
Legend with label
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<CalendarHeatmap :data="data" :show-legend="true" legend-label="Commits" />Scale
Shared max value across multiple charts
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
vue
<!-- both charts use the same scale -->
<CalendarHeatmap :data="teamA" :max-value="100" legend-label="Team A" />
<CalendarHeatmap :data="teamB" :max-value="100" legend-label="Team B" />