Search results

Basic Chart in ASP.NET MVC Chart control

26 Oct 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.

razor
line.cs
Copied to clipboard
@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()
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.

razor
stepline.cs
Copied to clipboard
@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()
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.

razor
stacked-line.cs
Copied to clipboard
@Html.EJS().Chart("container-vertical").Series(series =>
 {
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y").DataSource(ViewBag.dataSource).Name("John").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y1").DataSource(ViewBag.dataSource).Name("Peter").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y2").DataSource(ViewBag.dataSource).Name("Steve").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y3").DataSource(ViewBag.dataSource).Name("Charle").DashArray("5,1").Add();
 })
 .PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
 .Render()
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.

razor
stacked-line-100.cs
Copied to clipboard
@Html.EJS().Chart("container-vertical").Series(series =>
 {
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine100)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y").DataSource(ViewBag.dataSource).Name("John").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y1").DataSource(ViewBag.dataSource).Name("Peter").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y2").DataSource(ViewBag.dataSource).Name("Steve").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
     .Marker(mkr => mkr.Visible(true)).XName("x").YName("y3").DataSource(ViewBag.dataSource).Name("Charle").DashArray("5,1").Add();
 })
 .PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
 .Render()
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.

razor
spline.cs
Copied to clipboard
@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()
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.

razor
splinearea.cs
Copied to clipboard
@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()
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.

razor
multi-line.cs
Copied to clipboard
@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()
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.

razor
custom-line.cs
Copied to clipboard
@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()
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.

razor
area.cs
Copied to clipboard
@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()
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.

razor
rangearea.cs
Copied to clipboard
@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()
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.

razor
splinerangearea.cs
Copied to clipboard
@Html.EJS().Chart("container").Series(series =>
{
    series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).Opacity(0.4).XName("x").High("high").Low("low").DataSource(ViewBag.dataSource).Name("England").Add();
    series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).Opacity(0.4).XName("x").High("high1").Low("low1").DataSource(ViewBag.dataSource).Name("India").Add();
}).PrimaryXAxis(px => px.MajorGridLines(mg => mg.Width(0)).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).PrimaryYAxis(py => py.LabelFormat("{value}˚C").Minimum(0).Maximum(40).MajorTickLines(mt => mt.Width(0)).LineStyle(ls => ls.Width(0))
).Render()
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.

razor
stackedarea.cs
Copied to clipboard
@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()
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.

razor
stackedarea100.cs
Copied to clipboard
@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()
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.

razor
steparea.cs
Copied to clipboard
@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()
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.

razor
stacked-step-area.cs
Copied to clipboard
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea).  
   XName("x").
   YName("y").
   DataSource(ViewBag.dataSource)
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea).   
   XName("x").
   YName("y1").
   DataSource(ViewBag.dataSource)
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea).   
   XName("x").
   YName("y2").
   DataSource(ViewBag.dataSource)
   .Add();
   })
  .Render()
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.

razor
multicolor-area.cs
Copied to clipboard
@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()
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.

razor
custom-area.cs
Copied to clipboard
@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()
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.

razor
column.cs
Copied to clipboard
@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()
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.

razor
rangecolumn.cs
Copied to clipboard
@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()
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.

razor
stackedcolumn.cs
Copied to clipboard
@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()
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.

razor
stackedcolumn100.cs
Copied to clipboard
@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()
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.

razor
group.cs
Copied to clipboard
@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()
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.

razor
custom-column.cs
Copied to clipboard
@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").ColumnSpacing(0.5).ColumnWidth(0.5).
   Name("Gold")
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).   
   XName("x").
   YName("yValue").ColumnSpacing(0.5).ColumnWidth(0.5).
   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()
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.

razor
bar.cs
Copied to clipboard
@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()
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.

razor
stackedbar.cs
Copied to clipboard
@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()
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.

razor
stackedbar100.cs
Copied to clipboard
@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()
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.

razor
group.cs
Copied to clipboard
@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()
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.

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

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).   
   XName("x").
   YName("yValue").
   Fill("#FFCCBB").ColumnSpacing(0.5).ColumnWidth(0.5).
   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()
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.

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

Bubble Chart

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

razor
bubble.cs
Copied to clipboard
@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()
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.

razor
bubble-size.cs
Copied to clipboard
@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()
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;
        }