Web Components Chart Data Annotations Preview
In the Web Components chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data.
These features are designed to support cartesian axes and does not currently support radius or angle axes.
For example, you can annotates stock prices with stock events and patterns.
Like this sample? Try the complete Ignite UI for Web Components toolkit and begin building your own apps. Download free trial.
Web Components Data Annotation Slice Layer Example
In Web Components, the IgcDataAnnotationSliceLayerComponent renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the IgcDataChartComponent component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer also supports data binding via the dataSource property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the annotationValueMemberPath property.
For example, you can use DataAnnotationSliceLayer to annotate stock prices with important events such as stock split and outcome of earning reports.
Web Components Data Annotation Strip Layer Example
In Web Components, the IgcDataAnnotationStripLayerComponent renders multiple vertical or horizontal strips between 2 values on an axis in the IgcDataChartComponent component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the IgcDataAnnotationStripLayerComponent also supports data binding via the dataSource property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
For example, you can use IgcDataAnnotationStripLayerComponent to annotate chart with stock market crashes and changes in federal interest rates.
Web Components Data Annotation Line Layer Example
In Web Components, IgcDataAnnotationLineLayerComponent renders multiple lines between 2 points in plot area of the IgcDataChartComponent component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the dataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using startValueXMemberPath and startValueYMemberPath properties and the ending points should be mapped using endValueXMemberPath and endValueYMemberPath properties.
For example, you can use DataAnnotationLineLayer to annotate growth and decline patterns in stock prices and 52-week high and low of stock prices on y-axis.
Web Components Data Annotation Rect Layer Example
In Web Components, the IgcDataAnnotationRectLayerComponent renders multiple rectangles defined by starting and ending points in plot area of the IgcDataChartComponent component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the dataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using startValueXMemberPath and startValueYMemberPath properties and the ending points should be mapped using endValueXMemberPath and endValueYMemberPath properties.
For example, you can use DataAnnotationRectLayer to annotate bearish patterns and gaps in stock prices on y-axis.
Web Components Data Annotation Band Layer Example
In Web Components, the IgcDataAnnotationBandLayerComponent renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the IgcDataChartComponent component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the dataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using startValueXMemberPath and startValueYMemberPath properties and the ending points should be mapped using endValueXMemberPath and endValueYMemberPath properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
For example, you can use DataAnnotationBandLayer to annotate range of growth in stock prices.