Search results

Step Area

Step Area

Like the step line chart, but with the areas connected with lines shaded. To render a step area series, use series Type as StepArea.

steparea.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
        <ChartSeriesCollection>
            <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.StepArea">
            </ChartSeries>
        </ChartSeriesCollection>
</EjsChart>

Step Area

Customization

You can use the following properties to customize the step area series.

  • Fill – used to change the color of the step area.
  • Opacity – used to control the transparency of the chart series.
  • DashArray – used to render step area series with dashes.
  • Border – used to render step area series with border.
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
        <ChartSeriesCollection>
            <ChartSeries DataSource="@WeatherReports" DashArray="5,5" Opacity="0.5" Fill="blue" XName="X" YName="Y" Type="ChartSeriesType.StepArea">
                <ChartSeriesBorder Width="2" Color="black"></ChartSeriesBorder>
            </ChartSeries>
        </ChartSeriesCollection>
</EjsChart>

Custom Step Area

See Also