All examples

Calendar heatmap

A UTC calendar grid shows fictional daily activity with sequential tokens and explicit missing days.

Calendar heatmap

charts-calendar · charts/CalendarHeatmap

charts calendar
Props
  • end
  • start
  • values
  • weekStartsOn

Live example loads in an isolated same-origin preview frame.

Source (charts-calendar/entry.ts) 
import { defineExample } from '../registry.ts';

export const chartsCalendarExample = defineExample({
  id: 'charts-calendar',
  title: 'Calendar heatmap',
  description:
    'A UTC calendar grid shows fictional daily activity with sequential tokens and explicit missing days.',
  tags: ['charts', 'calendar', 'heatmap', 'accessibility'],
  component: 'charts/CalendarHeatmap',
  props: ['start', 'end', 'values', 'weekStartsOn'],
  load: () => import('./CalendarHeatmapDemo.svelte'),
});