Chart Types in ASP.NET MVC Chart Component
14 Nov 202224 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.
@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.
@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;
}Stacked Line
To render a stacked line series, use series Type as StackingLine.
@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()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.
@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()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.
@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.
@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.
@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.
@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.
@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.
@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();
}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.
@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()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.
@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.
@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.
@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;
}Stacked Step Area
To render a stacked step area series, use series Type as StackingStepArea.
@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()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.
@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 the series
Fill and DashArray of all area type series can be customized using Fill and DashArray properties.
@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;
}Customization of the border
The Width and Fill properties in the Border can be used to customize the border of all area type series.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Border(Width:2).
.Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource1).
Name("Silver").
Border(Width:2).
.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;
}Column Charts
Column
To render a column series, use series Type as Column.
@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.
@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.
@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.
@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.
@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;
}Grouped Column
You can use the GroupName property to group the data points in the column type charts. Data points with same group name are grouped together.
@Html.EJS().Chart("container").PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0))
.Interval(1)
).PrimaryYAxis(py => py.LabelStyle(ls => ls.Color("transparent")).LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)).MajorGridLines(mg => mg.Width(0)).MinorGridLines(mg => mg.Width(0))
).ChartArea(area => area.Border(br => br.Width(0))).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("USA Total").GroupName("USA")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y1")
.Width(2).ColumnWidth(0.5).Opacity(0.4).ColumnSpacing(0.1).Name("USA Gold").GroupName("USA")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y2")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("UK Total").GroupName("UK")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y3")
.Width(2).ColumnWidth(0.5).ColumnSpacing(0.1).Name("UK Gold").GroupName("UK")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y4")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("China Total").GroupName("China")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y5")
.Width(2).ColumnWidth(0.5).ColumnSpacing(0.1).Name("China Gold").GroupName("China")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
}).Title("Olympics Medal Tally").Load("load").Tooltip(tooltip => tooltip.Enable(true)).Render()public ActionResult Index()
{
List<ColumnData> chartData = new List<ColumnData>
{
new ColumnData { Year = "2012", USA_Total = 104, USA_Gold = 46, UK_Total = 65, UK_Gold = 29, China_Total = 91, China_Gold = 38},
new ColumnData { Year = "2016", USA_Total = 121, USA_Gold = 46, UK_Total = 67, UK_Gold = 27, China_Total = 70, China_Gold = 26},
new ColumnData { Year = "2020", USA_Total = 113, USA_Gold = 39, UK_Total = 65, UK_Gold = 22, China_Total = 88, China_Gold = 38},
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnData
{
public string Year;
public double USA_Total;
public double USA_Gold;
public double UK_Total;
public double UK_Gold;
public double China_Total;
public double China_Gold;
}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, refer the PointRender.
@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()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.
@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.
@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.
@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.
@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;
}Grouped Bar
You can use the GroupName property to group the data points in the bar type charts. Data points with same group name are grouped together.
@Html.EJS().Chart("container").PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0))
.Interval(1)
).PrimaryYAxis(py => py.LabelStyle(ls => ls.Color("transparent")).LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)).MajorGridLines(mg => mg.Width(0)).MinorGridLines(mg => mg.Width(0))
).ChartArea(area => area.Border(br => br.Width(0))).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("USA Total").GroupName("USA")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y1")
.Width(2).ColumnWidth(0.5).Opacity(0.4).ColumnSpacing(0.1).Name("USA Gold").GroupName("USA")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y2")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("UK Total").GroupName("UK")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y3")
.Width(2).ColumnWidth(0.5).ColumnSpacing(0.1).Name("UK Gold").GroupName("UK")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y4")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("China Total").GroupName("China")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y5")
.Width(2).ColumnWidth(0.5).ColumnSpacing(0.1).Name("China Gold").GroupName("China")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
}).Title("Olympics Medal Tally").Load("load").Tooltip(tooltip => tooltip.Enable(true)).Render()public ActionResult Index()
{
List<ColumnData> chartData = new List<ColumnData>
{
new ColumnData { Year = "2012", USA_Total = 104, USA_Gold = 46, UK_Total = 65, UK_Gold = 29, China_Total = 91, China_Gold = 38},
new ColumnData { Year = "2016", USA_Total = 121, USA_Gold = 46, UK_Total = 67, UK_Gold = 27, China_Total = 70, China_Gold = 26},
new ColumnData { Year = "2020", USA_Total = 113, USA_Gold = 39, UK_Total = 65, UK_Gold = 22, China_Total = 88, China_Gold = 38},
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnData
{
public string Year;
public double USA_Total;
public double USA_Gold;
public double UK_Total;
public double UK_Gold;
public double China_Total;
public double China_Gold;
}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, refer the PointRender.
@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()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.
@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.
@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.
@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;
}