Search results

Sparkline Types in ASP.NET Core Sparkline control

20 Apr 2021 / 1 minute to read

Different types of shapes can be used to represent the sparkline. You can change the sparkline type by setting the type property. Sparkline supports the following types:

  • Line
  • Column
  • Win-Loss
  • Pie
  • Area

The following code sample shows different types of sparklines.

Line

The Line type is used to render the sparkline series as line.

tagHelper
line.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="100px" width="70%" type="@SparklineType.Line" dataSource="ViewBag.sparkData" xName="xval" yName="yval" ></ejs-sparkline>
</div>
<style>
    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    function loaded(args)
    { 
        window.sparkline = args.sparkline;
        args.sparkline.loaded = null;
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.sparkData = DataSource.GetCategoryData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetCategoryData()
            {
                List<DataSource> data2 = new List<DataSource>();
                data2.Add(new DataSource() { x = 0, xval = "2005", yval = 20090440 });
                data2.Add(new DataSource() { x = 1, xval = "2006", yval = 20264080 });
                data2.Add(new DataSource() { x = 2, xval = "2007", yval = 20434180 });
                data2.Add(new DataSource() { x = 3, xval = "2008", yval = 21007310 });
                data2.Add(new DataSource() { x = 4, xval = "2009", yval = 21262640 });
                data2.Add(new DataSource() { x = 5, xval = "2010", yval = 21515750 });
                data2.Add(new DataSource() { x = 6, xval = "2011", yval = 21766710 });
                data2.Add(new DataSource() { x = 7, xval = "2012", yval = 22015580 });
                data2.Add(new DataSource() { x = 8, xval = "2013", yval = 22262500 });
                data2.Add(new DataSource() { x = 9, xval = "2014", yval = 22507620 });
                return data2;
            }
        }
    }
}

Column

The Column type is used to render the sparkline series as column.

tagHelper
column.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="200px" type="@SparklineType.Column" dataSource="ViewBag.sparkData" xName="xval" yName="yval" ></ejs-sparkline>
</div>
<style>
    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    function loaded(args)
    { 
        window.sparkline = args.sparkline;
        args.sparkline.loaded = null;
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.sparkData = DataSource.GetCategoryData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetCategoryData()
            {
                List<DataSource> data2 = new List<DataSource>();
                data2.Add(new DataSource() { x = 0, xval = "2005", yval = 20090440 });
                data2.Add(new DataSource() { x = 1, xval = "2006", yval = 20264080 });
                data2.Add(new DataSource() { x = 2, xval = "2007", yval = 20434180 });
                data2.Add(new DataSource() { x = 3, xval = "2008", yval = 21007310 });
                data2.Add(new DataSource() { x = 4, xval = "2009", yval = 21262640 });
                data2.Add(new DataSource() { x = 5, xval = "2010", yval = 21515750 });
                data2.Add(new DataSource() { x = 6, xval = "2011", yval = 21766710 });
                data2.Add(new DataSource() { x = 7, xval = "2012", yval = 22015580 });
                data2.Add(new DataSource() { x = 8, xval = "2013", yval = 22262500 });
                data2.Add(new DataSource() { x = 9, xval = "2014", yval = 22507620 });
                return data2;
            }
        }
    }
}

Pie

The Pie type is used to render the sparkline series as pie.

tagHelper
pie.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="200px" width="70%" type="@SparklineType.Pie" dataSource="ViewBag.sparkData" xName="xval" yName="yval" ></ejs-sparkline>
</div>
<style>
    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    function loaded(args)
    { 
        window.sparkline = args.sparkline;
        args.sparkline.loaded = null;
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.sparkData = DataSource.GetCategoryData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetCategoryData()
            {
                List<DataSource> data2 = new List<DataSource>();
                data2.Add(new DataSource() { x = 0, xval = "2005", yval = 20090440 });
                data2.Add(new DataSource() { x = 1, xval = "2006", yval = 20264080 });
                data2.Add(new DataSource() { x = 2, xval = "2007", yval = 20434180 });
                data2.Add(new DataSource() { x = 3, xval = "2008", yval = 21007310 });
                data2.Add(new DataSource() { x = 4, xval = "2009", yval = 21262640 });
                data2.Add(new DataSource() { x = 5, xval = "2010", yval = 21515750 });
                data2.Add(new DataSource() { x = 6, xval = "2011", yval = 21766710 });
                data2.Add(new DataSource() { x = 7, xval = "2012", yval = 22015580 });
                data2.Add(new DataSource() { x = 8, xval = "2013", yval = 22262500 });
                data2.Add(new DataSource() { x = 9, xval = "2014", yval = 22507620 });
                return data2;
            }
        }
    }
}

Win Loss

The WinLoss type is used to render the sparkline series as Win Loss.

tagHelper
winloss.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="100px" width="70%" type="@SparklineType.WinLoss" dataSource="ViewBag.sparkData" xName="xval" yName="yval" ></ejs-sparkline>
</div>
<style>
    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    function loaded(args)
    { 
        window.sparkline = args.sparkline;
        args.sparkline.loaded = null;
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.sparkData = DataSource.GetCategoryData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetCategoryData()
            {
                List<DataSource> data2 = new List<DataSource>();
                data2.Add(new DataSource() { x = 0, xval = "2005", yval = 20090440 });
                data2.Add(new DataSource() { x = 1, xval = "2006", yval = 20264080 });
                data2.Add(new DataSource() { x = 2, xval = "2007", yval = -20434180 });
                data2.Add(new DataSource() { x = 3, xval = "2008", yval = 21007310 });
                data2.Add(new DataSource() { x = 4, xval = "2009", yval = 21262640 });
                data2.Add(new DataSource() { x = 5, xval = "2010", yval = -21515750 });
                data2.Add(new DataSource() { x = 6, xval = "2011", yval = 21766710 });
                data2.Add(new DataSource() { x = 7, xval = "2012", yval = 22015580 });
                data2.Add(new DataSource() { x = 8, xval = "2013", yval = -22262500 });
                data2.Add(new DataSource() { x = 9, xval = "2014", yval = 22507620 });
                return data2;
            }
        }
    }
}

Area

The Area type is used to render the sparkline series as area.

tagHelper
area.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="100px" width="70%" type="@SparklineType.Area" dataSource="ViewBag.sparkData" xName="xval" yName="yval" ></ejs-sparkline>
</div>
<style>
    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    function loaded(args)
    { 
        window.sparkline = args.sparkline;
        args.sparkline.loaded = null;
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.sparkData = DataSource.GetCategoryData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetCategoryData()
            {
                List<DataSource> data2 = new List<DataSource>();
                data2.Add(new DataSource() { x = 0, xval = "2005", yval = 20090440 });
                data2.Add(new DataSource() { x = 1, xval = "2006", yval = 20264080 });
                data2.Add(new DataSource() { x = 2, xval = "2007", yval = 20434180 });
                data2.Add(new DataSource() { x = 3, xval = "2008", yval = 21007310 });
                data2.Add(new DataSource() { x = 4, xval = "2009", yval = 21262640 });
                data2.Add(new DataSource() { x = 5, xval = "2010", yval = 21515750 });
                data2.Add(new DataSource() { x = 6, xval = "2011", yval = 21766710 });
                data2.Add(new DataSource() { x = 7, xval = "2012", yval = 22015580 });
                data2.Add(new DataSource() { x = 8, xval = "2013", yval = 22262500 });
                data2.Add(new DataSource() { x = 9, xval = "2014", yval = 22507620 });
                return data2;
            }
        }
    }
}