ASP.NET MVC
Demos
Support
Forum
Download
Search results

Chart Series

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.

razor
multiple-series.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@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 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.

razor
combination.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@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;
        }
    }
}
Previous
Next