Tritium UI

TritiumHeatmapChart

Color a grid of row and column values so dense matrices are easy to scan.

Tutorial PDF

TritiumHeatmapChart

Key features

Bind a HeatmapSeries with column, row, and value property paths.
Paint cells on a two- or three-color scale (low, optional mid, high).
Show or hide cell value labels and axis labels.
Show a legend and tooltips, and animate the first draw.
Show an empty-state message when there is no data.
Select a cell and handle SeriesPointSelected.
Export the chart to a PNG stream or file.

Platforms

Android, iOS, Mac Catalyst, and Windows 10 version 19041 and later (.NET 10 MAUI).

Main API

Series . The heatmap series (column, row, and value paths).
MinColor . Color at the low end of the scale; MaxColor is the high end.
ShowDataLabels . Prints each cell value on the tile.
SeriesPointSelected . Fires when the user selects a cell.

Basic example

Declare this namespace on the page.

xmlns:charts="clr-namespace:Tritium.Maui.Charts;assembly=Tritium.Maui.Charts"
<charts:TritiumHeatmapChart ShowDataLabels="True" ShowAxisLabels="True">
    <charts:TritiumHeatmapChart.Series>
        <charts:HeatmapSeries ItemsSource="{Binding Cells}"
                              ColumnBindingPath="Hour"
                              RowBindingPath="Day"
                              ValueBindingPath="Load" />
    </charts:TritiumHeatmapChart.Series>
</charts:TritiumHeatmapChart>

Add the package source from your license, then reference the package that includes this control. These packages are not on the public NuGet Gallery.

Ask Tritium

How-to help and product fit for FleetPro, Tritium UI, and Tritium Reporting.

Ask how to use a feature, or tell us your company, platforms, team size, and use case. Pricing and upgrades go to sales.

Search the FAQ