ASP.NET Core
Demos
Support
Forum
Download
Search results

Chart Types

Essential JS 2 Chart supports 32 types of series.

Line Charts

Line

To render a line series, use series type as Line.

tagHelper
line.cs
<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.Line"></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;
            public double y1;
        }

Step Line

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

tagHelper
stepline.cs
<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;
            public double y1;
        }

Stacked Line

To render a stacked line series, use series type as StackingLine.

tagHelper
stacked-line.cs
<ejs-chart id="container" title="Family Expense for Month">
            <e-chart-primaryxaxis valueType="Category" interval="1">
            </e-chart-primaryxaxis>
           <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" name="John" xName="x" width="2" yName="y" type="StackingLine" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
                <e-series dataSource="ViewBag.dataSource" name="Peter" xName="x" width="2" yName="y1" type="StackingLine" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
                <e-series dataSource="ViewBag.dataSource" name="Steve" xName="x" width="2" yName="y2" type="StackingLine" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
                <e-series dataSource="ViewBag.dataSource" name="Charle" xName="x" width="2" yName="y3" type="StackingLine" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
            </e-series-collection>
        </ejs-chart>
public ActionResult Index()
        {
            List<StackedLineChartData> chartData = new List<StackedLineChartData>
            {
                    new StackedLineChartData { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
                    new StackedLineChartData { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
                    new StackedLineChartData { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
                    new StackedLineChartData { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
                    new StackedLineChartData { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
                    new StackedLineChartData { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
                    new StackedLineChartData { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
                    new StackedLineChartData { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
                    new StackedLineChartData { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
                    new StackedLineChartData { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
                    new StackedLineChartData { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
                    new StackedLineChartData { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class StackedLineChartData
        {
            public string x;
            public double y;
            public double y1;
            public double y2;
            public double y3;
        }

100% Stacked Line

To render a 100% stacked line series, use series type as StackingLine100.

tagHelper
stacked-line-100.cs
<ejs-chart id="container" title="Family Expense for Month">
            <e-chart-primaryxaxis valueType="Category" interval="1">
            </e-chart-primaryxaxis>
           <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" name="John" xName="x" width="2" yName="y" type="StackingLine100" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
                <e-series dataSource="ViewBag.dataSource" name="Peter" xName="x" width="2" yName="y1" type="StackingLine100" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
                <e-series dataSource="ViewBag.dataSource" name="Steve" xName="x" width="2" yName="y2" type="StackingLine100" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
                <e-series dataSource="ViewBag.dataSource" name="Charle" xName="x" width="2" yName="y3" type="StackingLine100" dashArray="5,1">
                    <e-series-marker visible="true"></e-series-marker>
                </e-series>
            </e-series-collection>
        </ejs-chart>
public ActionResult Index()
        {
            List<StackedLineChartData100> chartData = new List<StackedLineChartData100>
            {
                    new StackedLineChartData100 { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
                    new StackedLineChartData100 { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
                    new StackedLineChartData100 { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
                    new StackedLineChartData100 { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
                    new StackedLineChartData100 { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
                    new StackedLineChartData100 { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
                    new StackedLineChartData100 { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
                    new StackedLineChartData100 { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
                    new StackedLineChartData100 { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
                    new StackedLineChartData100 { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
                    new StackedLineChartData100 { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
                    new StackedLineChartData100 { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class StackedLineChartData100
        {
            public string x;
            public double y;
            public double y1;
            public double y2;
            public double y3;
        }

Spline

To render a spline series, use series type as Spline.

tagHelper
spline.cs
<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.Spline"></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;
            public double y1;
        }

Spline Area

To render a spline series, use series type as Spline.

tagHelper
splinearea.cs
<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.SplineArea"></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;
            public double y1;
        }

Multicolored Line

To render a multicolored line series, use the series type as MultiColoredLine. Here, the individual colors to the data can be mapped by using pointColorMapping.

tagHelper
multi-line.cs
<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.MultiColoredLine"
                      pointColorMapping="color"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
             new AxisLabelData { x= "India", y= 61.3, color="green" }, 
             new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
             new AxisLabelData { x= "Germany", y= 65.1, color="crimson" }, 
             new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
             new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
{
            public string x;
            public double y;
            public string color;
        }

Customization of Line Charts

stroke, stroke-width and dashArray of all line type series can be customized by using fill, width and dashArray properties.

tagHelper
custom-line.cs
<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.Line"
             fill="red" width="4" dashArray="5,5"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
             new AxisLabelData { x= "India", y= 61.3, color="green" }, 
             new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
             new AxisLabelData { x= "Germany", y= 65.1, color="crimson" }, 
             new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
             new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
{
            public string x;
            public double y;
            public string color;
        }

Area Charts

Area

To render a area series, use series type as Area.

tagHelper
area.cs
<ejs-chart id="container" 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.Area"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
             new AxisLabelData { x= "India", y= 61.3, color="green" }, 
             new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
             new AxisLabelData { x= "Germany", y= 65.1, color="crimson" }, 
             new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
             new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
{
            public string x;
            public double y;
            public string color;
        }

Range Area

To render a range area series, use series type as RangeArea.

tagHelper
rangearea.cs
<ejs-chart id="container" width="60%" load="window.onload">
        <e-chart-primaryxaxis valueType="DateTime">
        </e-chart-primaryxaxis>
        <e-series-collection>
            <e-series  xName="x" high="high" low="low" type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeArea"></e-series>
        </e-series-collection>
    </ejs-chart>
<script>
    window.onload = function (args) {
        var series = [];
        var value = 70;
        var point;
        for (var i = 1; i < 70; i++) {
            if (Math.random() > .5) {
                value += Math.random();
            }
            else {
                value -= Math.random();
            }
            point = { x: new Date(1930 + i, 5, i), high: value, low: value - 25 };
            series.push(point);
        }
        args.chart.series[0].dataSource = series;
    }
</script>
public ActionResult Index()
        {
            return View();
        }

Stacked Area

To render a stacked area series, use series type as StackingArea.

tagHelper
stackedarea.cs
<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
            </e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
            </e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<PolarData> chartData = new List<PolarData>
            {
          new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
          new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
          new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
          new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
          new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
          new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
          new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
          new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
          new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
          new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PolarData
        {
            public double x;
            public double y;
            public double y1;
            public double y2;
        }

100% Stacked Area

To render a 100% stacked area series, use series type as StackingArea100.

tagHelper
stackedarea100.cs
<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100">
            </e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100">
            </e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100">
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<PolarData> chartData = new List<PolarData>
            {
          new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
          new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
          new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
          new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
          new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
          new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
          new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
          new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
          new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
          new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PolarData
        {
            public double x;
            public double y;
            public double y1;
            public double y2;
        }

Step Area

To render a step area series, use series type as StepArea.

tagHelper
steparea.cs
<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepArea">
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<PolarData> chartData = new List<PolarData>
            {
          new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
          new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
          new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
          new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
          new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
          new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
          new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
          new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
          new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
          new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PolarData
        {
            public double x;
            public double y;
            public double y1;
            public double y2;
        }

Multicolored area

To render a multicolored area series, use the series type as MultiColoredArea. The required segments of the series can be customized using the value, color, and dashArray.

tagHelper
multicolor-area.cs
<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.MultiColoredArea">
                <e-segments>
                    <e-segment value="2007" color="blue"></e-segment>
                    <e-segment value="2009" color="red"></e-segment>
                    <e-segment color="green"></e-segment>
                </e-segments>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
               new ChartData{ x= 2005, y= 28 },
               new ChartData{ x= 2006, y= 25},
               new ChartData{ x= 2007, y= 26 },
               new ChartData{ x= 2008, y= 27 },
               new ChartData{ x= 2009, y= 32}, 
               new ChartData{ x= 2010, y= 35 }, 
               new ChartData{ x= 2011, y= 25 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public double x;
            public double y;
        }

Customization of Area Charts

fill, width and dashArray properties can be customized by fill, width and dashArray properties.

tagHelper
custom-area.cs
<ejs-chart id="container" width="60%">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"
             fill="red" dashArray="5,5">
                <e-series-border color="green" width="4"></e-series-border>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
               new ChartData{ x= 2005, y= 28 },
               new ChartData{ x= 2006, y= 25},
               new ChartData{ x= 2007, y= 26 },
               new ChartData{ x= 2008, y= 27 },
               new ChartData{ x= 2009, y= 32}, 
               new ChartData{ x= 2010, y= 35 }, 
               new ChartData{ x= 2011, y= 25 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public double x;
            public double y;
        }

Column Charts

Column

To render a column series, use series type as Column.

tagHelper
column.cs
<ejs-chart id="container" 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.Column">
            </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;
            public double y1;
        }

Range Column

To render a range column series, use series type as RangeColumn.

tagHelper
rangecolumn.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" name="India" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn"></e-series>
            <e-series dataSource="ViewBag.dataSource1" xName="x" high="high" low="low" name="Germany" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<RangeColumnChartData> chartData = new List<RangeColumnChartData>
            {
               new RangeColumnChartData { x= "Sun", low= 3.1, high= 10.8 },
               new RangeColumnChartData { x= "Mon", low= 5.7, high= 14.4 },
               new RangeColumnChartData { x= "Tue", low= 8.4, high= 16.9 },
               new RangeColumnChartData { x= "Wed", low= 10.6, high= 19.2 },
               new RangeColumnChartData { x= "Thu", low= 8.5, high= 16.1 },
               new RangeColumnChartData { x= "Fri", low= 6.0, high= 12.5 },
               new RangeColumnChartData { x= "Sat", low= 1.5, high= 6.9 }
            };
            ViewBag.dataSource = chartData;
            List<RangeColumnChartData> chartData1 = new List<RangeColumnChartData>
            {
                new RangeColumnChartData { x= "Sun", low= 2.5, high= 9.8 },
                new RangeColumnChartData { x= "Mon", low= 4.7, high= 11.4 },
                new RangeColumnChartData { x= "Tue", low= 6.4, high= 14.4 },
                new RangeColumnChartData { x= "Wed", low= 9.6, high= 17.2 },
                new RangeColumnChartData { x= "Thu", low= 7.5, high= 15.1 },
                new RangeColumnChartData { x= "Fri", low= 3.0, high= 10.5 },
                new RangeColumnChartData { x= "Sat", low= 1.2, high= 7.9 }
            };
            ViewBag.dataSource1 = chartData1;
            return View();
        }
        public class RangeColumnChartData
        {
            public string x;
            public double low;
            public double high;
        }

Stacked Column

To render a stacked column series, use series type as StackingColumn.

tagHelper
stackedcolumn.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="Germany" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

100% Stacked Column

To render a 100% stacked column series, use series type as StackingColumn100.

tagHelper
stackedcolumn100.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100"></e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="Germany" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Stacking Group

You can use the stackingGroup property to group the stacked columns and 100% stacked columns. Columns with same group name are stacked on top of each other.

tagHelper
group.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"
                      stackingGroup="a"></e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="Germany" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"
                      stackingGroup="b"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Customization of Column Charts

fill and border of all column type series can be customized using fill and border properties. For customizing a specify point, please refer the pointRender.

tagHelper
custom-column.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
             fill="skyblue" dashArray="5,3">
                <e-series-border color="green" width="4"></e-series-border>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Bar Charts

Bar

To render a bar series, use series type as Bar.

tagHelper
bar.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Stacked bar

To render a stacked bar series, use series type as StackingBar.

tagHelper
stackedbar.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

100% Stacked Bar

To render a 100% stacked bar series, use series type as StackingBar100.

tagHelper
stackedbar100.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100"></e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Stacking Group

You can use the stackingGroup property to group the stacked bar and 100% stacked bar. Columns with same group name are stacked on top of each other.

tagHelper
group.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"
                      stackingGroup="a"></e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"
                      stackingGroup="b"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Customization of Bar Charts

fill and border of all bar type series can be customized using fill and border. For customizing a specify point, please refer the pointRender.

tagHelper
custom-bar.cs
<ejs-chart id="container" width="60%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
             fill="skyblue" dashArray="5,5">
                <e-series-border color="red" width="3"></e-series-border>
            </e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Scatter Charts

To render a scatter series, use series type as Scatter.

tagHelper
scatter.cs
<ejs-chart id="container" width="60%" load="window.onload">
        <e-series-collection>
            <e-series  xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter"></e-series>
            <e-series  xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter"></e-series>
        </e-series-collection>
    </ejs-chart>
</div>
<script>
    window.onload = function (args) {
        var series1 = [];
        var series2 = [];
        var point1;
        var value = 80;
        var value1 = 70;
        var i;
        for (i = 1; i < 50; i++) {
            if (Math.random() > 0.5) {
                value += Math.random();
            }
            else {
                value -= Math.random();
            }
            value = value < 60 ? 60 : value > 90 ? 90 : value;
            point1 = { x: 120 + (i / 2), y: value.toFixed(1) };
            series1.push(point1);
        }
        for (i = 1; i < 50; i++) {
            if (Math.random() > 0.5) {
                value1 += Math.random();
            }
            else {
                value1 -= Math.random();
            }
            value1 = value1 < 60 ? 60 : value1 > 90 ? 90 : value1;
            point1 = { x: 120 + (i / 2), y: value1.toFixed(1) };
            series2.push(point1);
        }
        args.chart.series[0].dataSource = series1;
        args.chart.series[1].dataSource = series2;
    }
</script>
public IActionResult Index(){
         return View();
}

Bubble Chart

To render a bubble series, use series type as Bubble.

tagHelper
bubble.cs
<ejs-chart id="container" width="60%" load="window.onload">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bubble"
                      size="size"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<BubbleChartData> chartData = new List<BubbleChartData>
            {
                    new BubbleChartData { x= 92.2, y= 7.8, size= 1.347, text= "China" },
                    new BubbleChartData { x= 74, y= 6.5, size= 1.241, text= "India" },
                    new BubbleChartData { x= 90.4, y= 6.0, size= 0.238, text= "Indonesia" },
                    new BubbleChartData { x= 99.4, y= 2.2, size= 0.312, text= "US" },
                    new BubbleChartData { x= 88.6, y= 1.3, size= 0.197, text= "Brazil" },
                    new BubbleChartData { x= 99, y= 0.7, size= 0.0818, text= "Germany" },
                    new BubbleChartData { x= 72, y= 2.0, size= 0.0826, text= "Egypt" },
                    new BubbleChartData { x= 99.6, y= 3.4, size= 0.143, text= "Russia" },
                    new BubbleChartData { x= 99, y= 0.2, size= 0.128, text= "Japan" },
                    new BubbleChartData { x= 86.1, y= 4.0, size= 0.115, text= "Mexico" },
                    new BubbleChartData { x= 92.6, y= 6.6, size= 0.096, text= "Philippines" },
                    new BubbleChartData { x= 61.3, y= 1.45, size= 0.162, text= "Nigeria" },
                    new BubbleChartData { x= 82.2, y= 3.97, size= 0.7, text= "Hong Kong" },
                    new BubbleChartData { x= 79.2, y= 3.9, size= 0.162, text= "Netherland" },
                    new BubbleChartData { x= 72.5, y= 4.5, size= 0.7, text= "Jordan" },
                    new BubbleChartData { x= 81, y= 3.5, size= 0.21, text= "Australia" },
                    new BubbleChartData { x= 66.8, y= 3.9, size= 0.028, text= "Mongolia" },
                    new BubbleChartData { x= 78.4, y= 2.9, size= 0.231, text= "Taiwan" }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class BubbleChartData
        {
            public double x;
            public double y;
            public double size;
            public string text;
        }

Bubble Size Mapping

size property can be used to map the size value specified in data source.

tagHelper
bubble-size.cs
<ejs-chart id="container" width="60%" load="window.onload">
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bubble"
                      size="size"></e-series>
        </e-series-collection>
    </ejs-chart>
public ActionResult Index()
        {
            List<BubbleChartData> chartData = new List<BubbleChartData>
            {
                    new BubbleChartData { x= 92.2, y= 7.8, size= 1.347, text= "China" },
                    new BubbleChartData { x= 74, y= 6.5, size= 1.241, text= "India" },
                    new BubbleChartData { x= 90.4, y= 6.0, size= 0.238, text= "Indonesia" },
                    new BubbleChartData { x= 99.4, y= 2.2, size= 0.312, text= "US" },
                    new BubbleChartData { x= 88.6, y= 1.3, size= 0.197, text= "Brazil" },
                    new BubbleChartData { x= 99, y= 0.7, size= 0.0818, text= "Germany" },
                    new BubbleChartData { x= 72, y= 2.0, size= 0.0826, text= "Egypt" },
                    new BubbleChartData { x= 99.6, y= 3.4, size= 0.143, text= "Russia" },
                    new BubbleChartData { x= 99, y= 0.2, size= 0.128, text= "Japan" },
                    new BubbleChartData { x= 86.1, y= 4.0, size= 0.115, text= "Mexico" },
                    new BubbleChartData { x= 92.6, y= 6.6, size= 0.096, text= "Philippines" },
                    new BubbleChartData { x= 61.3, y= 1.45, size= 0.162, text= "Nigeria" },
                    new BubbleChartData { x= 82.2, y= 3.97, size= 0.7, text= "Hong Kong" },
                    new BubbleChartData { x= 79.2, y= 3.9, size= 0.162, text= "Netherland" },
                    new BubbleChartData { x= 72.5, y= 4.5, size= 0.7, text= "Jordan" },
                    new BubbleChartData { x= 81, y= 3.5, size= 0.21, text= "Australia" },
                    new BubbleChartData { x= 66.8, y= 3.9, size= 0.028, text= "Mongolia" },
                    new BubbleChartData { x= 78.4, y= 2.9, size= 0.231, text= "Taiwan" }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class BubbleChartData
        {
            public double x;
            public double y;
            public double size;
            public string text;
        }
Previous
Next