Series.HintOptions Property

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

NuGet Package: DevExpress.XamarinForms.Charts

Declaration

public SeriesHintOptions HintOptions { get; set; }

Property Value

Type
SeriesHintOptions

Remarks

ChartView can display hints (ChartView.Hint) as tooltips or as a crosshair cursor to show information about a tapped series or data point. A hint requests data to display from a series. Use the series’ HintOptions property to specify which data the series should return for a hint.

Tooltips

This example demonstrates how to set up the chart so that it shows a tooltip for a series point when a user taps it, and configure a tooltip for each series on the chart.

1. Set the chart hint’s Behavior property to the TooltipHintBehavior class instance.

2. Set each series’ HintOptions property to the SeriesHintOptions object and use the PointTextPattern property to specify the tooltip text pattern.
   You can use the following placeholders to specify text patterns for tooltips:

   Placeholder	Description
   {S}	Displays a series name (DisplayName).
   {A}	Displays a series point argument.
   {V}	Displays a series point value.

   Note

   To format these values, you can use default format strings after the $ sign.
   For example, in the {V$#.##} string, V is a placeholder, $ is a format string separator, and #.## is a format string.

Xaml

<ContentPage.Resources>
    <dxc:SeriesHintOptions x:Key="lineSeriesHintOptions" PointTextPattern="{}{A$yyyy}: {V}M"/>
</ContentPage.Resources>

<dxc:ChartView>
    <dxc:ChartView.Hint>
        <dxc:Hint>
            <dxc:Hint.Behavior>
                <dxc:TooltipHintBehavior ShowPointTooltip="True" ShowSeriesTooltip="False"/>
            </dxc:Hint.Behavior>
        </dxc:Hint>
    </dxc:ChartView.Hint>

    <dxc:ChartView.Series>
        <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:LineSeries>
        <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:LineSeries>
        <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:LineSeries>
    </dxc:ChartView.Series>    
</dxc:ChartView>

Crosshair Cursor

This example demonstrates how to set up the chart so that it shows a series point hint as a crosshair cursor, and manage each series interaction with the hint.

1. Set the chart hint’s Behavior property to the CrosshairHintBehavior class instance.

2. Set each series’ HintOptions property to the SeriesCrosshairOptions object and specify this object’s properties:

   • ShowInLabel - to specify whether the crosshair label should provide information for points of the current series.

   • PointTextPattern - to define the text pattern used to show information about the series point within a crosshair label.
     You can use the following placeholders to specify text patterns for items of the crosshair label:

     Placeholder	Description
     {S}	Displays a series name (DisplayName).
     {A}	Displays a series point argument.
     {V}	Displays a series point value.

     Note

     To format these values, you can use default format strings after the $ sign.
     For example, in the {V$#.##} string, V is a placeholder, $ is a format string separator, and #.## is a format string.

   • AxisLineVisible, AxisLabelVisible - to specify whether the crosshair cursor should display axis lines and labels for the series.

Xaml

<ContentPage.Resources>
    <dxc:SeriesCrosshairOptions x:Key="lineSeriesHintOptions"
                                PointTextPattern="{}{S}: {V$##}M"
                                ShowInLabel="True"
                                AxisLabelVisible="True"
                                AxisLineVisible="True"/>
</ContentPage.Resources>

<dxc:ChartView>
    <dxc:ChartView.Hint>
        <dxc:Hint>
            <dxc:Hint.Behavior>
                <dxc:CrosshairHintBehavior GroupHeaderTextPattern="Year: {A$YYYY}" 
                                           MaxSeriesCount="3"/>
            </dxc:Hint.Behavior>
        </dxc:Hint>
    </dxc:ChartView.Hint>

    <dxc:ChartView.Series>
        <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:LineSeries>
        <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:LineSeries>
        <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:LineSeries>
    </dxc:ChartView.Series>    
</dxc:ChartView>

Note

A crosshair cursor also requests data to display from axes. Use the AxisBase.HintOptions property to specify how the hint interacts with the axis.