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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
public IActionResult Index(){
         return View();
}

Bubble Chart

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

tagHelper
bubble.cs
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
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;
        }