Angular Step Chart
The Ignite UI for Angular Step Chart belongs to a group of category charts that render as a collection of points connected by continuous vertical and horizontal lines. Values are represented on the y-axis and categories are displayed on the x-axis. Step Chart emphasizes the amount of change over a period of time or compares multiple items.
Angular Step Area Chart
You can create Angular Step Area Chart in the IgxCategoryChartComponent
control by setting chartType
property to StepArea
enum, as shown in the example below.
Angular Step Line Chart
The Angular Step Line Chart is very similar to Step Area Chart, except that the area below lines are filled in.
You can create Step Line Chart in the IgxCategoryChartComponent
control by binding your data and setting chartType
property to StepLine
value, as shown in the example below.
Angular Step Chart Styling
If you need Step Charts with more features such as composite other series, you can configure the markerTypes
, markerBrushes
, markerOutlines
, lines' brushes
, and lines' outlines
properties on the IgxCategoryChartComponent
control as demonstrated below.
Additional Resources
You can find more information about related chart types in these topics:
API References
The following table lists API members mentioned in the above sections:
IgxCategoryChartComponent
chartType
StepArea
StepLine
brushes
outlines
markerBrushes
markerOutlines
markerTypes