You can add multiple series to the chart by using Series property.
The series are rendered in the order as it is added to the series array.
@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 IActionResult Column()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
public double silver;
public double bronze;
}Combination of different types like Line, column etc, can be rendered in a chart.
Bar series cannot be combined with any other series as the axis orientation is different from other series.
@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.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()using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Charts;
namespace EJ2CoreSampleBrowser.Controllers.Chart
{
public partial class ChartController : Controller
{
public IActionResult Column()
{
List<CombinationSeriesData> chartData = new List<CombinationSeriesData>
{
new CombinationSeriesData { x= "2007", y= 1 },
new CombinationSeriesData { x= "2008", y= 0.25 },
new CombinationSeriesData { x= "2009", y= 0.1 },
new CombinationSeriesData { x= "2010", y= 1 },
new CombinationSeriesData { x= "2011", y= 0.1 },
new CombinationSeriesData { x= "2012", y= -0.25 },
new CombinationSeriesData { x= "2013", y= 0.25 },
new CombinationSeriesData { x= "2014", y= 0.6 }
};
ViewBag.dataSource = chartData;
List<CombinationSeriesData> chartData1 = new List<CombinationSeriesData>
{
new CombinationSeriesData { x= "2007", y= 0.5 },
new CombinationSeriesData { x= "2008", y= 0.35 },
new CombinationSeriesData { x= "2009", y= 0.9 },
new CombinationSeriesData { x= "2010", y= 0.5 },
new CombinationSeriesData { x= "2011", y= 0.25 },
new CombinationSeriesData { x= "2012", y= -0.5 },
new CombinationSeriesData { x= "2013", y= 0.5 },
new CombinationSeriesData { x= "2014", y= 0.6 }
};
ViewBag.dataSource1 = chartData1;
List<CombinationSeriesData> chartData2 = new List<CombinationSeriesData>
{
new CombinationSeriesData { x= "2007", y= 1.5 },
new CombinationSeriesData { x= "2008", y= 0.35 },
new CombinationSeriesData { x= "2009", y= -2.7 },
new CombinationSeriesData { x= "2010", y= 0.5 },
new CombinationSeriesData { x= "2011", y= 0.25 },
new CombinationSeriesData { x= "2012", y= -0.1 },
new CombinationSeriesData { x= "2013", y= -0.3 },
new CombinationSeriesData { x= "2014", y= -0.6 }
};
ViewBag.dataSource2 = chartData2;
List<CombinationSeriesData> chartData3 = new List<CombinationSeriesData>
{
new CombinationSeriesData { x= "2007", y= -1 },
new CombinationSeriesData { x= "2008", y= -.35 },
new CombinationSeriesData { x= "2009", y= -0.3 },
new CombinationSeriesData { x= "2010", y= -0.5 },
new CombinationSeriesData { x= "2011", y= 1 },
new CombinationSeriesData { x= "2012", y= -0.4 },
new CombinationSeriesData { x= "2013", y= 0.1 },
new CombinationSeriesData { x= "2014", y= -0.6 }
};
ViewBag.dataSource3 = chartData3;
List<CombinationSeriesData> chartData4 = new List<CombinationSeriesData>
{
new CombinationSeriesData { x= "2007", y= 2 },
new CombinationSeriesData { x= "2008", y= 0.1 },
new CombinationSeriesData { x= "2009", y= -2.7 },
new CombinationSeriesData { x= "2010", y= 1.8 },
new CombinationSeriesData { x= "2011", y= 2 },
new CombinationSeriesData { x= "2012", y= 0.4 },
new CombinationSeriesData { x= "2013", y= 0.9 },
new CombinationSeriesData { x= "2014", y= 0.4 }
};
ViewBag.dataSource4 = chartData4;
return View();
}
public class CombinationSeriesData
{
public string x;
public double y;
}
}
}By setting EnableComplexProperty value as true in series you can bind complex data to the chart.
@Html.EJS().Chart("container").PrimaryXAxis(px => px.Title("data").
ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Series(series =>
{
series.Type(
Syncfusion.EJ2.Charts.ChartSeriesType.Column
).Name("Product X").EnableComplexProperty(true).Add();
series.Type(
Syncfusion.EJ2.Charts.ChartSeriesType.Column
).Name("Product Y").EnableComplexProperty(true).Add();
}
).PrimaryYAxis(py => py.Title("Profit ($)")).Load("load").Title("Sales History of Product X").Render()
<script>
var load = function (args) {
var data = [
{ group: { x: 'Aaa', y: 10 }, y: 20 },
{ group: { x: 'Baa', y: 30 }, y: 10 }
];
args.chart.series[0].dataSource = data;
args.chart.series[1].dataSource = data;
args.chart.series[0].xName = "group.x";
args.chart.series[0].yName = "group.y";
args.chart.series[1].xName = "group.x";
args.chart.series[1].yName = "y";
}
</script>public ActionResult Index()
{
return View();
}