Version

Chart Highlight Filter

This topic explains, with code examples, how to use the data highlighting feature in the XamDataChart™ control.

Introduction

The XamDataChart control supports a data highlighting overlay that can enhance the visualization of the series plotted in the chart by allowing you to view a subset of the data plotted. When enabled, this will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types. This can help you to visualize things like target values versus actual values with your data set.

Using Highlight Filter with XamDataChart

In the XamDataChart, much of the highlight filter API happens on the series themselves, mainly by setting the HighlightedItemsSource property to a collection representing a subset of the data you want to highlight. The count of the items in the HighlightedItemsSource needs to match the count of the data bound to the data source of the series that you are looking to highlight, and in the case of category series, it will use the ValueMemberPath that you have defined as the highlight path by default.

In the case that the schema does not match between the HighlightedItemsSource and the data source of the series, you can configure this using the HighlightedValueMemberPath property on the series. Additionally, if you would like to use the data source of the series itself as the highlight source and have a path on your data item that represents the subset, you can do this. This is done by simply setting the HighlightedValueMemberPath property to that path and not providing a HighlightedItemsSource.

The reduced opacity of the column and area series types is configurable by setting the HighlightedValuesFadeOpacity property on the series. You can also set the HighlightedValuesDisplayMode property to Hidden if you do not wish to see the overlay at all.

The part of the series shown by the highlight filter will be represented in the legend and tooltip layers of the chart separately. You can configure the title that this is given in the tooltip and legend by setting the HighlightedTitleSuffix. This will append the value that you provide to the end of the Title of the series.

If the DataLegend or DataToolTipLayer is used then the highlighted series will appear grouped. This can be managed by setting the HighlightedValuesDataLegendGroup property on the series to categorize them appropriately.

Code Example

The code snippet below demonstrates usage of the highlight filter feature in the XamDataChart control.

In XAML:

<ig:XamDataChart x:Name="chart" Grid.Row="2" >
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding Data}" Label="{}{Category}"/>
        <ig:NumericYAxis x:Name="yAxis" MinimumValue="0" />
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ColumnSeries XAxis="{Binding ElementName=xAxis}"
                         YAxis="{Binding ElementName=yAxis}"
                         ItemsSource="{Binding Data}"
                         ValueMemberPath="Total"
                         HighlightedValuesDisplayMode="Overlay"
                         HighlightedValueMemberPath="Mobile"
                         HighlightedTitleSuffix=" - Mobile"
                         Title="Online Traffic By Device Data"/>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

In C#:

ColumnSeries series = new ColumnSeries()
{
    XAxis = xAxis,
    YAxis = yAxis,
    ItemsSource = data,
    ValueMemberPath = "Total",
    HighlightedValuesDisplayMode = SeriesHighlightedValuesDisplayMode.Overlay,
    HighlightedValueMemberPath = "Mobile",
    HighlightedTitleSuffix = " - Mobile",
    Title = "Online Traffic By Device Data"
};

chart.Series.Add(series);

In Visual Basic:

Dim series As ColumnSeries = New ColumnSeries() With {
    .XAxis = xAxis,
    .YAxis = yAxis,
    .ItemsSource = vm.Data,
    .ValueMemberPath = "Total",
    .HighlightedValuesDisplayMode = SeriesHighlightedValuesDisplayMode.Overlay,
    .HighlightedValueMemberPath = "Mobile",
    .HighlightedTitleSuffix = " - Mobile",
    .Title = "Online Traffic By Device Data"
}

chart.Series.Add(series)

Related Content