Search results

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.

razor
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.

razor
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.

razor
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.

razor
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.

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