Search results

Step Line in Blazor Chart component

08 Apr 2021 / 2 minutes to read

Step

This chart represents a set of points connected by horizontal and vertical lines. To render a step line series, use series Type as StepLine.

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

<SfChart Title="Olympic Medals">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.StepLine">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
        new ChartData { X= "South Korea", Y= 39.4 },
        new ChartData { X= "India", Y= 61.3 },
        new ChartData { X= "Pakistan", Y= 20.4 },
        new ChartData { X= "Germany", Y= 65.1 },
        new ChartData { X= "Australia", Y= 15.8 },
        new ChartData { X= "Italy", Y= 29.2 },
        new ChartData { X= "United Kingdom", Y= 44.6 },
        new ChartData { X= "Saudi Arabia", Y= 9.7 },
        new ChartData { X= "Russia", Y= 40.8 },
        new ChartData { X= "Mexico", Y= 31 },
        new ChartData { X= "Brazil", Y= 75.9 },
        new ChartData { X= "China", Y= 51.4 }
    };
}

Step Line

Note: You can refer to our Blazor Step line Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor Step line Chart Example to know how to render a step line series.

Customization

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

  • Fill – used to change the color of the step line.
  • Width – used to change the width of the step line.
  • Opacity – used to control the transparency of the chart series.
  • DashArray – used to render step line series with dashes.
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="60%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeriesCollection>
    <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Width="3" Opacity="0.5"
                 DashArray="5,5" Fill="blue" Type="ChartSeriesType.StepLine">
    </ChartSeries>
</ChartSeriesCollection>
</SfChart>

@code{
public class ChartData
{
    public string X;
    public double Y;
}
public List<ChartData> MedalDetails = new List<ChartData>
{
    new ChartData { X= "South Korea", Y= 39.4 },
    new ChartData { X= "India", Y= 61.3 },
    new ChartData { X= "Pakistan", Y= 20.4 },
    new ChartData { X= "Germany", Y= 65.1 },
    new ChartData { X= "Australia", Y= 15.8 },
    new ChartData { X= "Italy", Y= 29.2 },
    new ChartData { X= "United Kingdom", Y= 44.6 },
    new ChartData { X= "Saudi Arabia", Y= 9.7 },
    new ChartData { X= "Russia", Y= 40.8 },
    new ChartData { X= "Mexico", Y= 31 },
    new ChartData { X= "Brazil", Y= 75.9 },
    new ChartData { X= "China", Y= 51.4 }
};
}

Custon Step Line

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