React Chart Highlight Filter
The Ignite UI for React Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts 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. This feature is demonstrated in the following example:
Note that data highlighting feature is supported by the IgrDataChart
and IgrCategoryChart
, but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the highlightedValuesDisplayMode
property to Overlay
if you want to see the highlight. The following will explain the different configurations for the highlight filter feature.
Using Highlight Filter with DataChart
In the IgrDataChart
, much of the highlight filter API happens on the series themselves, mainly by setting the highlightedDataSource
property to a collection representing a subset of the data you want to highlight. The count of the items in the highlightedDataSource
needs to match the count of the data bound to the ItemsSource
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. The sample at the top of this page uses the highlightedDataSource
in the IgrDataChart
to show the overlay.
In the case that the schema does not match between the highlightedDataSource
and the ItemsSource
of the series, you can configure this using the HighlightedValueMemberPath
property on the series. Additionally, if you would like to use the ItemsSource
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 highlightedDataSource
.
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 chartTitle
of the series.
If the DataLegend
or IgrDataToolTipLayer
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.
The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the IgrDataChart
control using the highlightedValuesDataLegendGroup
:
The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the IgrDataChart
control using the highlightedValuesDataLegendGroup
:
The following example demonstrates the usage of the data highlighting overlay feature within the IgrDataChart
control using the HighlightedValueMemberPath
:
Using Highlight Filter in CategoryChart
The IgrCategoryChart
highlight filter happens on the chart by setting the initialHighlightFilter
property. Since the IgrCategoryChart
takes all of the properties on your underlying data item into account by default, you will need to define the initialGroups
on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the initialGroups
to a value path in your underlying data item to group by a path that has duplicate values.
Similar to the IgrDataChart
, the highlightedValuesDisplayMode
property is also exposed on the IgrCategoryChart
. In the case that you do not want to see the overlay, you can set this property to Hidden
.
The following example demonstrates the usage of the data highlighting overlay feature within the IgrCategoryChart
control:
Additional Resources
You can find more information about related chart features in these topics:
API References
The following is a list of API members mentioned in the above sections:
IgrCategoryChart Properties |
IgrDataChart Properties |
---|---|
highlightedDataSource |
highlightedDataSource |
highlightedTitleSuffix |
highlightedTitleSuffix |
CategoryChart.HighlightedValueMemberPath |
Series.HighlightedValueMemberPath |
highlightedValuesDisplayMode |
highlightedValuesDisplayMode |
highlightedValuesFadeOpacity |
highlightedValuesFadeOpacity |
highlightedValuesDisplayMode |
highlightedValuesDisplayMode |
initialHighlightFilter |
|
initialGroups |