Web Components Chart Overlays
The Web Components IgcDataChartComponent
allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the IgcValueOverlayComponent
. This can help you to visualize data such as the mean or median of a particular series.
Web Components Value Overlay Example
The following example depicts a Column Chart with a few horizontal value overlays plotted.
Web Components 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.
IgcValueOverlayComponent
appearance properties are inherited from IgcSeriesComponent
and so brush
and thickness
for example are available and work the same way they do with other types of series.
It is also possible to show an axis annotation on a IgcValueOverlayComponent
to show the value of the overlay on the owning axis. In order to show this, you can set the isAxisAnnotationEnabled
property to true.
Web Components Financial Overlays
You can also plot built-in financial overlays and indicators in Web Components Stock Chart.
Additional Resources
You can find more information about related chart types in these topics:
API References
The following is a list of API members mentioned in the above sections:
IgcDataChartComponent
ItemsSource
IgcValueOverlayComponent
axis
brush
IsAxisAnnotationsEnabled
IgcSeriesComponent
thickness