Angular Chart Overlays
IgxDataChartComponent allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the
IgxValueOverlayComponent. This can help you to visualize data such as the mean or median of a particular series.
Angular Value Overlay Example
The following example depicts a Column Chart with a few horizontal value overlays plotted.
Angular Value Overlay Properties
Unlike other series types that use a
ItemsSource for data binding, the value overlay uses a
ValueMemberPath property to bind a single numeric value. In addition, the value overlay requires you to define a single
axis to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line.
When using a numeric X or Y axis, the
ValueMemberPath property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the
ValueMemberPath should reflect the index of the category at which you want the value overlay to appear.
When using the value overlay with a numeric angle axis, it will appear as a line from the center of the chart and when using a numeric radius axis, it will appear as a circle.
It is also possible to show an axis annotation on a
IgxValueOverlayComponent to show the value of the overlay on the owning axis. In order to show this, you can set the
isAxisAnnotationEnabled property to true.
Angular Value Layer
The Angular charting components also expose the ability to use value lines to call out different focal points of your data, such as minimum, maximum, and average values.
IgxValueLayerComponent in the
IgxFinancialChartComponent components is done by setting the
valueLines property on the chart. This property takes a collection of the
ValueLayerValueMode enumeration. You can mix and match multiple value layers in the same chart by adding multiple
ValueLayerValueMode enumerations to the
valueLines collection of the chart.
IgxDataChartComponent, this is done by adding a
IgxValueLayerComponent to the
IgxSeriesComponent collection of the chart and then setting the
ValueMode property to one of the
ValueLayerValueMode enumerations. Each of these enumerations and what they mean is listed below:
Auto: The default value mode of the
Average: Applies potentially multiple value lines to call out the average value of each series plotted in the chart.
GlobalAverage: Applies a single value line to call out the average of all of the series values in the chart.
GlobalMaximum: Applies a single value line to call out the absolute maximum value of all of the series values in the chart.
GlobalMinimum: Applies a single value line to call out the absolute minimum value of all of the series values in the chart.
Maximum: Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart.
Minimum: Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart.
If you want to prevent any particular series from being taken into account when using the
IgxValueLayerComponent element, you can set the
targetSeries property on the layer. This will force the layer to target the series that you define. You can have as many
IgxValueLayerComponent elements within a single
IgxDataChartComponent as you want.
Angular Financial Overlays
You can also plot built-in financial overlays and indicators in Angular Stock Chart.
You can find more information about related chart types in these topics:
The following is a list of API members mentioned in the above sections: