Search results

Chart Types

Essential JS 2 Chart supports 32 types of series.

Line Charts

Line

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

razor
line.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

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

Step Line

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

razor
stepline.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepLine).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

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

Spline

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

razor
spline.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

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

Spline Area

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

razor
splinearea.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineArea).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

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

razor
multi-line.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.MultiColoredLine).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();   
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4, 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.

razor
custom-line.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).  
   XName("x").
   YName("yValue").
   DashArray("20,5").
   Fill("#FF0000").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).   
   XName("x").
   DashArray("10,5").
   Fill("#000000").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4, 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.

razor
area.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4, 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.

razor
rangearea.cs
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeArea).
   Marker(ViewBag.Marker).
   XName("x").
   High("yValue").
   Low("yValue2").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
public ActionResult Index()
        {
            return View();
        }

Stacked Area

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

razor
stackedarea.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackedArea).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackedArea).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
stackedarea100.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackedArea100).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackedArea100).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
steparea.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepArea).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepArea).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
multicolor-area.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).  
   XName("x").
   YName("yValue").
   PointColorMapping("Color").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).   
   XName("x").
   YName("yValue").
   PointColorMapping("Color").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
custom-area.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Fill("FF00FF").
   DashArray("10, 5").
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Fill("FFF0FF").
   DashArray("20, 5").
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
column.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

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

Range Column

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

razor
rangecolumn.cs
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn).
   Marker(ViewBag.Marker).
   XName("x").
   High("yValue").
   Low("yValue2").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
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.

razor
stackedcolumn.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
stackedcolumn100.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
group.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   StackingGroup("first")
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   StackingGroup("second").
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Customization of Column Charts

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

razor
custom-column.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Fill("FF00FF").
   DashArray("10,5").
   Name("Gold")
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Fill("FFEEsFF").
   DashArray("10,5").
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
bar.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Charts("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
stackedbar.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
stackedbar100.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
group.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).  
   XName("x").
   YName("yValue").
   StakingGroup("first").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).   
   XName("x").
   YName("yValue").
   StakingGroup("second").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Customization of Bar Charts

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

razor
custom-bar.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).  
   XName("x").
   YName("yValue").
   Fill("#FFCCBB").
   DashArray("10,5).
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).   
   XName("x").
   YName("yValue").
   Fill("#FFCCBB").
   DashArray("10,5").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
scatter.cs
@section ControlsSection{
@Html.EJS().Charts("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Scatter).   
   XName("x").
   YName("y").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).   
   Title("Olympic Medal Counts - RIO").Load("load").Render()

<script>
function load(args) {
args.chart.series[0].dataSource = [
    { 'x': 115, 'y': 57 }, { 'x': 138, 'y': 57 }, { 'x': 166, 'y': 57 }, { 'x': 122, 'y': 57 },
    { 'x': 126, 'y': 57 }, { 'x': 130, 'y': 57 }, { 'x': 125, 'y': 57 }, { 'x': 144, 'y': 57 },
    { 'x': 150, 'y': 57 }, { 'x': 120, 'y': 57 }, { 'x': 125, 'y': 57 }, { 'x': 130, 'y': 57 },
    { 'x': 103, 'y': 58 }, { 'x': 116, 'y': 58 }, { 'x': 130, 'y': 58 }, { 'x': 126, 'y': 58 },
    { 'x': 136, 'y': 58 }, { 'x': 148, 'y': 58 }, { 'x': 119, 'y': 58 }, { 'x': 141, 'y': 58 },
    { 'x': 159, 'y': 58 }, { 'x': 120, 'y': 58 }, { 'x': 135, 'y': 58 }, { 'x': 163, 'y': 58 },
    { 'x': 119, 'y': 59 }, { 'x': 131, 'y': 59 }, { 'x': 148, 'y': 59 }, { 'x': 123, 'y': 59 },
    { 'x': 137, 'y': 59 }, { 'x': 149, 'y': 59 }, { 'x': 121, 'y': 59 }, { 'x': 142, 'y': 59 },
    { 'x': 160, 'y': 59 }, { 'x': 118, 'y': 59 }, { 'x': 130, 'y': 59 }, { 'x': 146, 'y': 59 },
    { 'x': 119, 'y': 60 }, { 'x': 133, 'y': 60 }, { 'x': 150, 'y': 60 }, { 'x': 133, 'y': 60 },
    { 'x': 149, 'y': 60 }, { 'x': 165, 'y': 60 }, { 'x': 130, 'y': 60 }, { 'x': 139, 'y': 60 },
    { 'x': 154, 'y': 60 }, { 'x': 118, 'y': 60 }, { 'x': 152, 'y': 60 }, { 'x': 154, 'y': 60 },
    { 'x': 130, 'y': 61 }, { 'x': 145, 'y': 61 }, { 'x': 166, 'y': 61 }, { 'x': 131, 'y': 61 },
    { 'x': 143, 'y': 61 }, { 'x': 162, 'y': 61 }, { 'x': 131, 'y': 61 }, { 'x': 145, 'y': 61 },
    { 'x': 162, 'y': 61 }, { 'x': 115, 'y': 61 }, { 'x': 149, 'y': 61 }, { 'x': 183, 'y': 61 },
    { 'x': 121, 'y': 62 }, { 'x': 139, 'y': 62 }, { 'x': 159, 'y': 62 }, { 'x': 135, 'y': 62 },
    { 'x': 152, 'y': 62 }, { 'x': 178, 'y': 62 }, { 'x': 130, 'y': 62 }, { 'x': 153, 'y': 62 },
    { 'x': 172, 'y': 62 }, { 'x': 114, 'y': 62 }, { 'x': 135, 'y': 62 }, { 'x': 154, 'y': 62 },
    { 'x': 126, 'y': 63 }, { 'x': 141, 'y': 63 }, { 'x': 160, 'y': 63 }, { 'x': 135, 'y': 63 },
    { 'x': 149, 'y': 63 }, { 'x': 180, 'y': 63 }, { 'x': 132, 'y': 63 }, { 'x': 144, 'y': 63 },
    { 'x': 163, 'y': 63 }, { 'x': 122, 'y': 63 }, { 'x': 146, 'y': 63 }, { 'x': 156, 'y': 63 },
    { 'x': 133, 'y': 64 }, { 'x': 150, 'y': 64 }, { 'x': 176, 'y': 64 }, { 'x': 133, 'y': 64 },
    { 'x': 149, 'y': 64 }, { 'x': 176, 'y': 64 }, { 'x': 136, 'y': 64 }, { 'x': 157, 'y': 64 },
    { 'x': 174, 'y': 64 }, { 'x': 131, 'y': 64 }, { 'x': 155, 'y': 64 }, { 'x': 191, 'y': 64 },
    { 'x': 136, 'y': 65 }, { 'x': 149, 'y': 65 }, { 'x': 177, 'y': 65 }, { 'x': 143, 'y': 65 },
    { 'x': 149, 'y': 65 }, { 'x': 184, 'y': 65 }, { 'x': 128, 'y': 65 }, { 'x': 146, 'y': 65 },
    { 'x': 157, 'y': 65 }, { 'x': 133, 'y': 65 }, { 'x': 153, 'y': 65 }, { 'x': 173, 'y': 65 },
    { 'x': 141, 'y': 66 }, { 'x': 156, 'y': 66 }, { 'x': 175, 'y': 66 }, { 'x': 125, 'y': 66 },
    { 'x': 138, 'y': 66 }, { 'x': 165, 'y': 66 }, { 'x': 122, 'y': 66 }, { 'x': 164, 'y': 66 },
    { 'x': 182, 'y': 66 }, { 'x': 137, 'y': 66 }, { 'x': 157, 'y': 66 }, { 'x': 176, 'y': 66 },
    { 'x': 149, 'y': 67 }, { 'x': 159, 'y': 67 }, { 'x': 179, 'y': 67 }, { 'x': 156, 'y': 67 },
    { 'x': 179, 'y': 67 }, { 'x': 186, 'y': 67 }, { 'x': 147, 'y': 67 }, { 'x': 166, 'y': 67 },
    { 'x': 185, 'y': 67 }, { 'x': 140, 'y': 67 }, { 'x': 160, 'y': 67 }, { 'x': 180, 'y': 67 },
    { 'x': 145, 'y': 68 }, { 'x': 155, 'y': 68 }, { 'x': 170, 'y': 68 }, { 'x': 129, 'y': 68 },
    { 'x': 164, 'y': 68 }, { 'x': 189, 'y': 68 }, { 'x': 150, 'y': 68 }, { 'x': 157, 'y': 68 },
    { 'x': 183, 'y': 68 }, { 'x': 144, 'y': 68 }, { 'x': 170, 'y': 68 }, { 'x': 180, 'y': 68 }
];
}
</script>

 }
public IActionResult Index(){
         return View();
}

Bubble Chart

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

razor
bubble.cs
@section ControlsSection{    
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bubble).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
}
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.

razor
bubble-size.cs
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.BUbble).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   Size("size").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
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;
        }