A quarter of conversations
import { CalendarHeatmap, ChartPanel } from '@arbol-ai/ui/charts';
import type { HeatmapDay } from '@arbol-ai/ui/charts';
const QUARTER: HeatmapDay[] = Array.from({ length: 91 }, (_, index) => {
const date = new Date(2026, 7, 9 + index);
const isWeekend = date.getDay() === 0 || date.getDay() === 6;
return { date, value: isWeekend ? (index % 5) * 3 : 40 + ((index * 17) % 37) };
});
<ChartPanel eyebrow="Last 13 weeks" title="Conversations per day">
<CalendarHeatmap aria-label="Conversations per day, last 13 weeks" data={QUARTER} />
</ChartPanel>Source
The examples above are src/charts/calendar-heatmap.examples.tsx, which the library’s tests render too.