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