Multiple Series in ASP.NET Core Chart control

20 Apr 2021 / 1 minute to read

Multiple Series

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.

tagHelper

multiple-series.cs

<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 Series

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.

tagHelper

combination.cs

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

Enable Complex Property in Series

By setting enableComplexProperty value as true in series you can bind complex data to the chart.

tagHelper

complex.cs

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

Contents

Multiple Series
Combination Series
Enable Complex Property in Series

Contents

Multiple Series
Combination Series
Enable Complex Property in Series

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!