React Step Chart

The Ignite UI for React 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.

React Step Area Chart

You can create React Step Area Chart in the IgrCategoryChart control by setting chartType property to StepArea enum, as shown in the example below.

React Step Line Chart

The React 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 IgrCategoryChart control by binding your data and setting chartType property to StepLine value, as shown in the example below.

React 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 IgrCategoryChart control as demonstrated below.

Additional Resources

You can find more information about related chart types in these topics:

• Area Chart
• Line Chart
• Chart Markers

API References

The following table lists API members mentioned in the above sections:

• IgrCategoryChart
• chartType
• StepArea
• StepLine
• brushes
• outlines
• markerBrushes
• markerOutlines
• markerTypes