Search results

Step Area in Blazor Chart component

14 Apr 2021 / 2 minutes to read

Step Area

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

steparea.razor
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"/>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Low" Type="ChartSeriesType.StepArea">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>
@code{
    public class ChartData
    {
        public string X { get; set; }
        public double Low { get; set; }
        public double High { get; set; }
    }

    public List<ChartData> WeatherReports = new List<ChartData>
{
         new ChartData { X= "Sun", Low= 2.5, High= 9.8 },
         new ChartData { X= "Mon", Low= 4.7, High= 11.4 },
         new ChartData { X= "Tue", Low= 6.4, High= 14.4 },
         new ChartData { X= "Wed", Low= 9.6, High= 17.2 },
         new ChartData { X= "Thu", Low= 7.5, High= 15.1 },
         new ChartData { X= "Fri", Low= 3.0, High= 10.5 },
         new ChartData { X= "Sat", Low= 1.2, High= 7.9 }
    };
}

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.
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartSeriesCollection>
    <ChartSeries DataSource="@WeatherReports" XName="X" Fill="blue" YName="Low" DashArray="5,5" Opacity="0.5" Type="ChartSeriesType.StepArea">
        <ChartSeriesBorder Width="2" Color="black"></ChartSeriesBorder>
    </ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
    public string X { get; set; }
    public double Low { get; set; }
    public double High { get; set; }
}

public List<ChartData> WeatherReports = new List<ChartData>
{
     new ChartData { X= "Sun", Low= 2.5, High= 9.8 },
     new ChartData { X= "Mon", Low= 4.7, High= 11.4 },
     new ChartData { X= "Tue", Low= 6.4, High= 14.4 },
     new ChartData { X= "Wed", Low= 9.6, High= 17.2 },
     new ChartData { X= "Thu", Low= 7.5, High= 15.1 },
     new ChartData { X= "Fri", Low= 3.0, High= 10.5 },
     new ChartData { X= "Sat", Low= 1.2, High= 7.9 }
};
}

Custom Step Area

Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.

See Also