Calendar Chart
Display data over time in a calendar grid layout. Ideal for daily activity, contribution history, and seasonal patterns.
Usage
import { CalendarChart } from "@chartts/react"
<CalendarChart
data={commitHistory}
startDate="2025-01-01"
endDate="2025-12-31"
colorScale={["#0f172a", "#10b981"]}
/>Props
| Prop | Type | Description |
|---|---|---|
| data | { date: string; value: number }[] | Date-value pairs |
| startDate | string | Start date (YYYY-MM-DD) |
| endDate | string | End date (YYYY-MM-DD) |
| colorScale | string[] | Color range from low to high |
| cellSize | number | Cell size in px. Default: 12 |
Features
- GitHub-style contribution grid
- Monthly labels
- Day-of-week labels
- Configurable color scales
- Tooltip with date/value
- Responsive cell sizing
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCombo ChartSankey Diagram