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.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>
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.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Private Consumption" xName="x" width=2 yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
<e-series dataSource="ViewBag.dataSource1" name="Government Consumption" xName="x" width=2 yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
<e-series dataSource="ViewBag.dataSource2" name="Investment" xName="x" width=2 yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
<e-series dataSource="ViewBag.dataSource3" name="Net Foreign Trade" xName="x" width=2 yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
<e-series dataSource="ViewBag.dataSource4" name="GDP" xName="x" width=2 yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-marker visible="true" height="10" width="10"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
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.
<ejs-chart id="container" title="Sales History of Product X and Y" load="load">
<e-chart-primaryxaxis valueType="Category" maximumLabels="1"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Profit ($)"></e-chart-primaryyaxis>
<e-series-collection>
<e-series name="Product X"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" enableComplexProperty="true"></e-series>
<e-series name="Product Y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" enableComplexProperty="true"></e-series>
</e-series-collection>
</ejs-chart>
<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();
}