Step line chart in ASP.NET MVC Charts component

24 Sep 202410 minutes to read

Step line

To render a step line series, use series Type as StepLine.

@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepLine).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      Add();
   })
   .PrimaryXAxis(px => 
      px.Interval(1)
         .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
         .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").Render()
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea", y= 39.4 },
                new AxisLabelData { x= "India", y= 61.3 }, 
                new AxisLabelData { x= "Pakistan", y= 20.4 },
                new AxisLabelData { x= "Germany", y= 65.1 }, 
                new AxisLabelData { x= "Australia", y= 15.8 },
                new AxisLabelData { x= "Italy", y= 29.2 },
                new AxisLabelData { x= "United Kingdom", y= 44.6 },
                new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
                new AxisLabelData { x= "Russia", y= 40.8 },
                new AxisLabelData { x= "Mexico", y= 31 },
                new AxisLabelData { x= "Brazil", y= 75.9 },
                new AxisLabelData { x= "China", y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
        }

Series customization

The following properties can be used to customize the Step Line series.

  • Fill – Specifies the color of the series.
  • Opacity – Specifies the opacity of Fill.
  • Width – Specifies the width for series.
  • DashArray – Specifies the dashes for series.
  • Step – Specifies the position of the step for the series.
@(Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepLine).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Width(3).
      Opacity(0.5).
      DashArray("5,5").
      Fill("blue").
      Step(Syncfusion.EJ2.Charts.StepPosition.Left).
      Add();
   })
   .PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
   .Title("Olympic Medals")
   .Render())
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea",    y= 39.4 },
                new AxisLabelData { x= "India",          y= 61.3 }, 
                new AxisLabelData { x= "Pakistan",       y= 20.4 },
                new AxisLabelData { x= "Germany",        y= 65.1 }, 
                new AxisLabelData { x= "Australia",      y= 15.8 },
                new AxisLabelData { x= "Italy",          y= 29.2 },
                new AxisLabelData { x= "United Kingdom", y= 44.6 },
                new AxisLabelData { x= "Saudi Arabia",   y= 9.7  },
                new AxisLabelData { x= "Russia",         y= 40.8 },
                new AxisLabelData { x= "Mexico",         y= 31   },
                new AxisLabelData { x= "Brazil",         y= 75.9 },
                new AxisLabelData { x= "China",          y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
        }

No risers

You can eliminate the vertical lines between points by using the NoRisers property in a series. This approach is useful for highlighting trends without the distraction of risers.

@Html.EJS().Chart("container").Series(series =>
{
    series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepLine)
        .XName("X")
        .YName("Y")
        .NoRisers(true)
        .Width(4)
        .DataSource(ViewBag.dataSource)
        .Add();
}).PrimaryXAxis(px => px.Title("Year").Minimum(2004).Maximum(2013).Interval(1)
 ).PrimaryYAxis(py => py.Title("Intensity (g/kWh)").Minimum(330).Maximum(450).Interval(30)
 ).Title("CO2 - Intensity Analysis").Render()
public IActionResult Index () 
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { X = 2005,  Y = 370 },
        new ChartData { X = 2006,  Y = 378 },
        new ChartData { X = 2007,  Y = 416 },
        new ChartData { X = 2008,  Y = 404 },
        new ChartData { X = 2009,  Y = 390 },
        new ChartData { X = 2010,  Y = 376 },
        new ChartData { X = 2011,  Y = 365 },
        new ChartData { X = 2012,  Y = 350 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public double X;
    public double Y;
}

See also