Skip to main content

Calendar heatmap chart

info

Charts are available with Avalonia Pro.

Calendar heatmaps render daily values in a week-by-week grid, similar to contribution graphs and activity trackers.

When to use​

  • Activity tracking: Show commits, logins, exercises, or transactions by day.
  • Seasonality review: Spot quiet and active periods across a year.
  • Retention views: Highlight streaks and gaps without a full time-series chart.

Code example​

XAML​

<charts:CalendarHeatmapChart Title="Repository activity"
                               Height="180"
                               ItemsSource="{Binding DailyActivity}"
                               DatePath="Date"
                               ValuePath="Count"
                               WeeksToShow="26" />

Data model (C#)​

using System;

public record DailyCount(DateTime Date, double Count);

public ObservableCollection<DailyCount> DailyActivity { get; } = new()
{
    new(DateTime.Today.AddDays(-3), 5),
    new(DateTime.Today.AddDays(-2), 2),
    new(DateTime.Today.AddDays(-1), 7)
};

Common properties​

PropertyDescriptionDefault
ItemsSourceCollection of daily activity items.null
DatePathPath to the date value for each item.null
ValuePathPath to the numeric intensity value.null
CellSizeSize of each day cell in pixels.12.0
CellGapGap between day cells.2.0
EmptyCellBrushBrush used for days with no value.null
LowBrushBrush used for low intensity values.null
MediumBrushBrush used for medium intensity values.null
HighBrushBrush used for high intensity values.null
MaxBrushBrush used for the highest intensity values.null
ShowMonthLabelsWhether to show month labels above the grid.true
ShowDayLabelsWhether to show day-of-week labels.true
LabelFontSizeFont size used for month labels, day labels, and legend text.10.0
LabelForegroundBrush used for calendar and legend labels. When null, the chart uses the effective label foreground.null
WeeksToShowNumber of weeks to display.52
IsHighlightEnabledEnables hover highlighting for calendar cells.false
ReferenceDateOptional end date used as the calendar anchor.null

See also​

On this page