How to display more data in the tooltip in MAUI Chart (SfCartesianChart)?

1 min read

.NET MAUI Chart provides the support to display the needed information from its model of populated items source along with the Tooltip UI customization with the help of TooltipTemplate in the chart series as shown in the following code example.

Here, it displays both a country's name and population details in the tooltip. By default, it displays the corresponding y-axis value of that segment.

<chart:SfCartesianChart>
    <chart:SfCartesianChart.BindingContext>
        <local:ViewModel/>
    </chart:SfCartesianChart.BindingContext>
 
    <chart:SfCartesianChart.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="tooltipTemplate">
                <HorizontalStackLayout>
                    <!--Template has BindingContext as its Segment named Item. From it, you can access the corresponding Model data-->
                    <Label Text="{Binding Item.Country}" TextColor="White" FontSize="12"/>
                    <Label Text=" : " TextColor="White" FontSize="12"/>
                    <Label Text="{Binding Item.Population}" TextColor="White" FontSize="12"/>
                </HorizontalStackLayout>
            </DataTemplate>
        </ResourceDictionary>
    </chart:SfCartesianChart.Resources>
 
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>
 
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
 
    <chart:ColumnSeries ItemsSource="{Binding Data}"
                        XBindingPath="Country" YBindingPath="Population"
                        EnableTooltip="True"
                        TooltipTemplate="{StaticResource tooltipTemplate}">
    </chart:ColumnSeries>
</chart:SfCartesianChart>

Output

MAUI chart tooltip with more data.

View sample in GitHub

Did you find this information helpful?

Yes

Comments (0)

How to display more data in the tooltip in MAUI Chart (SfCartesianChart)?

Output

Access denied