Angular Chart Highlighting
All Angular Charts support highlighting of visuals such as lines, columns, and markers when the end-user hovers mouse cursor over data items rendered in plot area. Highlighting is supported by the IgxCategoryChartComponent
, IgxFinancialChartComponent
, and IgxDataChartComponent
controls and they have the same API for using the highlighting feature.
Angular Chart Highlighting Example
The following example demonstrates the different highlighting options that are available on the Angular chart. Click on the checkboxes to enable the different highlight types.
Angular Chart Highlighting Modes & Behaviors
All Angular Charts support a variety of highlighting options. highlightingMode
can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. highlightingBehavior
can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the IgxCategoryChartComponent
, IgxFinancialChartComponent
, and IgxDataChartComponent
controls and they have the same API for using the highlighting feature.
Angular Chart Legend Highlighting
All Angular Charts support legend highlighting. legendHighlightingMode
can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the IgxCategoryChartComponent
, IgxFinancialChartComponent
, and IgxDataChartComponent
controls and they have the same API for using the highlighting feature.
Highlight Layers
The Ignite UI for Angular IgxCategoryChartComponent
can enable three types of highlighting when hovering over data items.
Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the
isSeriesHighlightingEnabled
property to true.Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the
isItemHighlightingEnabled
property to true.Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the
isCategoryHighlightingEnabled
property to true.
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:
highlightingMode
highlightingBehavior
LegendHighlightingBehavior
isCategoryHighlightingEnabled
isItemHighlightingEnabled
isSeriesHighlightingEnabled
IgxCategoryChartComponent
IgxDataChartComponent
IgxFinancialChartComponent