Step line chart in ASP.NET CORE Charts component

20 Dec 20237 minutes to read

Step line

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

<ejs-chart id="container" title="Olympic Medals" width="60%">
    <e-chart-primaryxaxis valueType="Category">
    </e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepLine"></e-series>
    </e-series-collection>
</ejs-chart>
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.
<ejs-chart id="container" title="Olympic Medals">
    <e-chart-primaryxaxis valueType="Category">
    </e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepLine" width="3" opacity="0.5" dashArray="5,5"
            fill="blue" step="@Syncfusion.EJ2.Charts.StepPosition.Left"></e-series>
    </e-series-collection>
</ejs-chart>
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;
        }

See also