React Step Line Chart
A step line chart displays data points connected by horizontal and vertical lines, resembling steps. It's used to visualize changes over time, particularly for discrete data or events.
Overview
To visualize data as a stepline chart, set the type property to StepLine within the ChartSeries component.
Data label
To display data labels on the stepline chart, set the visible property to true within the ChartDataLabel component.
Skip missing points
Data points with values of null, undefined, or NaN are treated as empty points in the series. You can customize their appearance and behavior using the emptyPointSettings property in the ChartSeries component. This property supports various modes, including Gap, Zero, Average, and Drop, allowing you to control how empty points are rendered or connected in the chart.
Inverted axes
To switch the X and Y axes in your chart, use the transposed property in the Chart component. When this property is enabled, the chart is rendered in a transposed format, which can enhance readability and data comparison, especially for horizontal spline charts or when working with long category labels.
No risers
In a Step Line chart, vertical lines (called risers) connect horizontal segments to indicate changes between data points.
To render the step series without risers, set the noRisers property to true in the ChartSeries component
Step position
The step property in the ChartSeries component controls the alignment of steps in step-based chart types. The available options are:
Left- Steps originate from the left side of the second point in each pair.Center- Steps are centered between two consecutive data points.Right- Steps begin from the right side of the first point.
By adjusting the step property, you can control the visual flow and interpretative style of your step charts more effectively.
Series customization
You can customize the appearance of the stepline series in the ChartSeries component by setting the following properties:
fill– Sets the color of the line.width– Defines the thickness of the line.opacity– Controls the transparency level of the line.dashArray- Defines the pattern of dashes and gaps in lines.