Sparkline Types

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.

CSHTML
Line.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("100px").Width("70%").XName("xval").YName("yval").Type(SparklineType.Line).DataSource(ViewBag.sparkData).Render()
</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>
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.

CSHTML
Column.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("200px").XName("xval").YName("yval").Type(SparklineType.Line).DataSource(ViewBag.sparkData).Render()
</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>
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.

CSHTML
Pie.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("70%").XName("xval").YName("yval").Type(SparklineType.Pie).DataSource(ViewBag.sparkData).Render()
</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>
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.

CSHTML
Winloss.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("100px").Width("70%").XName("xval").YName("yval").Type(SparklineType.WinLoss).DataSource(ViewBag.sparkData).Render()
</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>
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.

CSHTML
Area.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("100px").Width("70%").XName("xval").YName("yval").Type(SparklineType.Area).DataSource(ViewBag.sparkData).Render()
</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>
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;
            }
        }
    }
}

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Sparkline Types