ASP.NET Core

Search results

Basic Chart in ASP.NET Core Chart control

01 Dec 2021 / 5 minutes to read

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();
        }

Spline Range Area

The Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.

To render a spline range area series, use series type as SplineRangeArea.

tagHelper

splinerangearea.cs

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category" edgeLabelPlacement="Shift">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis labelFormat="{value}˚C" minimum="0" maximum="40">
        <e-linestyle width="0"></e-linestyle>
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series name="England" xName="x" high="high" low="low" dataSource="ViewBag.dataSource"
                    opacity="0.4" type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea">
        </e-series>
        <e-series name="India" xName="x" high="high1" low="low1" dataSource="ViewBag.dataSource"
                    opacity="0.4" type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea">
        </e-series>
    </e-series-collection>
</ejs-chart>

public IActionResult Index () {
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x = "Jan", high = 14, low = 4, high1 = 29, low1 = 19 },
        new ChartData { x = "Feb", high = 17, low = 7, high1 = 32, low1 = 22 },
        new ChartData { x = "Mar", high = 20, low = 10, high1 = 35, low1 = 25 },
        new ChartData { x = "Apr", high = 22, low = 12, high1 = 37, low1 = 27 },
        new ChartData { x = "May", high = 20, low = 10, high1 = 35, low1 = 25 },
        new ChartData { x = "Jun", high = 17, low = 7, high1 = 32, low1 = 22 },
        new ChartData { x = "Jul", high = 15, low = 5, high1 = 30, low1 = 20 },
        new ChartData { x = "Aug", high = 17, low = 7, high1 = 32, low1 = 22 },
        new ChartData { x = "Sep", high = 20, low = 10, high1 = 35, low1 = 25 },
        new ChartData { x = "Oct", high = 22, low = 12, high1 = 37, low1 = 27 },
        new ChartData { x = "Nov", high = 20, low = 10, high1 = 35, low1 = 25 },
        new ChartData { x = "Dec", high = 17, low = 7, high1 = 32, low1 = 22 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double high;
    public double low;
    public double high1;
    public double low1;
}

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;
        }

Stacked Step Area

To render a stacked step area series, use series type as StackingStepArea.

tagHelper

stacked-step-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.StackingStepArea">
            </e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea">
            </e-series>
            <e-series dataSource="ViewBag.dataSource" xName="x" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea">
            </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. Width of the column and space between each column can be customized using columnWidth and columnSpacing properties respectively. The columnWidthInPixel property allows to specify the column width in pixel unit. 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" columnSpacing="0.5" columnWidth="0.5" 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. Width of the bar and space between each bar can be customized using columnWidth and columnSpacing properties respectively. The columnWidthInPixel property allows to specify the bar width in pixel unit. 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" columnSpacing="0.5" columnWidth="0.5" 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;
        }

Contents

Line Charts
Area Charts
Column Charts
Bar Charts
Scatter Charts

Contents

Line Charts
Area Charts
Column Charts
Bar Charts
Scatter Charts

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!