Search results

Axis Customization

You can customize axis value types and min and max values of the sparkline.

Change value type of the sparkline

You can change the sparkline value type by setting the valueType property to Numeric, Category, or DateTime.

DateTime

You can assign date-time values to the sparkline by setting the valueType property to DateTime.

razor
datetime.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
 @Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").DataSource(ViewBag.datetime).Type(SparklineType.Column).XName("xDate").YName("yval").ValueType(SparklineValueType.DateTime).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.datetime = DataSource.GetDatetimeData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetDatetimeData()
            {
                List<DataSource> data1 = new List<DataSource>();
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 1), yval = 4  });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 2), yval = 4.5 });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 3), yval = 8  });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 4), yval = 7  });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 5), yval = 6  });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 8), yval = 8  });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 9), yval = 8  });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 10), yval = 6.5 });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 11), yval = 4  });
                data1.Add(new DataSource() { xDate = new DateTime(2018, 1, 12), yval = 5.5 });
                return data1;                
            }
        }
    }
}

Category

You can assign category values to the sparkline by setting valueType to Category.

razor
category.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").DataSource(ViewBag.category).Type(SparklineType.Column).XName("xval").YName("yval").ValueType(SparklineValueType.Category).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.category = 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() { xval = "Robert" , yval = 60});
                data2.Add(new DataSource() { xval = "Andrew", yval = 65 });
                data2.Add(new DataSource() { xval = "Suyama", yval = 70 });
                data2.Add(new DataSource() { xval = "Michael", yval = 80 });
                data2.Add(new DataSource() { xval = "Janet", yval = 55 });
                data2.Add(new DataSource() { xval = "Davolio", yval = 90 });
                data2.Add(new DataSource() { xval = "Fuller", yval = 75 });
                data2.Add(new DataSource() { xval = "Nancy", yval = 85 });
                return data2;
            }
        }
    }
}

Numeric

You can assign numeric values to the sparkline by setting valueType to Numeric.

razor
numeric.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").DataSource(ViewBag.numeric).Type(SparklineType.Column).XName("x").YName("yval").ValueType(SparklineValueType.Numeric).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.numeric = DataSource.GetNumericData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetNumericData()
            {
                List<DataSource> data3 = new List<DataSource>();
                data3.Add(new DataSource() { x = 1, yval = 190});
                data3.Add(new DataSource() { x = 2, yval = 165});
                data3.Add(new DataSource() { x = 3, yval = 158});
                data3.Add(new DataSource() { x = 4, yval = 175});
                data3.Add(new DataSource() { x = 5, yval = 200});
                data3.Add(new DataSource() { x = 6, yval = 180});
                data3.Add(new DataSource() { x = 7, yval = 210});
                return data3;
            }
        }
    }
}

Change min and max values of axis

You can change the min and max values of x-axis by setting the minX and maxX values to the axisSettings property. You can also change the min and max values of y-axis by setting the minY and maxY values to the axisSettings property.

razor
minmax.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").AxisSettings(axis => axis.Value(25)).DataSource(ViewBag.numeric).Type(SparklineType.Column).XName("x").YName("yval").ValueType(SparklineValueType.Numeric).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.numeric = DataSource.GetNumericData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetNumericData()
            {
                List<DataSource> data3 = new List<DataSource>();
                data3.Add(new DataSource() { x = 0, yval = 50});
                data3.Add(new DataSource() { x = 1, yval = 30});
                data3.Add(new DataSource() { x = 2, yval = 20});
                data3.Add(new DataSource() { x = 3, yval = 30});
                data3.Add(new DataSource() { x = 4, yval = 50});
                data3.Add(new DataSource() { x = 5, yval = 40});
                data3.Add(new DataSource() { x = 6, yval = 20});
                data3.Add(new DataSource() { x = 7, yval = 10 });
                data3.Add(new DataSource() { x = 8, yval = 30 });
                data3.Add(new DataSource() { x = 9, yval = 10 });
                data3.Add(new DataSource() { x = 10, yval = 40 });
                return data3;
            }
        }
    }
}

Change value of axis

You can set horizontal axis line value of the sparkline by setting value to the axisSettings property. The following code example shows this.

razor
value.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").AxisSettings(axis => axis.MinY(0).MaxY(150)).DataSource(ViewBag.numeric).Type(SparklineType.Column).XName("x").YName("yval").ValueType(SparklineValueType.Numeric).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.numeric = DataSource.GetNumericData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetNumericData()
            {
                List<DataSource> data3 = new List<DataSource>();
                data3.Add(new DataSource() { x = 0, yval = 50});
                data3.Add(new DataSource() { x = 1, yval = 30});
                data3.Add(new DataSource() { x = 2, yval = 20});
                data3.Add(new DataSource() { x = 3, yval = 30});
                data3.Add(new DataSource() { x = 4, yval = 50});
                data3.Add(new DataSource() { x = 5, yval = 40});
                data3.Add(new DataSource() { x = 6, yval = 20});
                data3.Add(new DataSource() { x = 7, yval = 10 });
                data3.Add(new DataSource() { x = 8, yval = 30 });
                data3.Add(new DataSource() { x = 9, yval = 10 });
                data3.Add(new DataSource() { x = 10, yval = 40 });
                return data3;
            }
        }
    }
}

Axis line customization

Axis of the sparkline can be collapsed using the visible property in lineSettings; this is not applicable for win-loss. You can customize the color, width, opacity, and dashArray of axis line.

razor
axis_line.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").AxisSettings(axis => axis.LineSettings(new SparklineLineSettings { Visible = true, Color = "#ff14ae", DashArray = "5" })).DataSource(ViewBag.numeric).Type(SparklineType.Column).XName("x").YName("yval").ValueType(SparklineValueType.Numeric).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.numeric = DataSource.GetNumericData();
            return View();
        }
        public class DataSource
        {
            public DateTime xDate;
            public double yval;
            public int x;
            public string xval;

            public static List<DataSource> GetNumericData()
            {
                List<DataSource> data3 = new List<DataSource>();
                data3.Add(new DataSource() { x = 0, yval = 50});
                data3.Add(new DataSource() { x = 1, yval = 30});
                data3.Add(new DataSource() { x = 2, yval = 20});
                data3.Add(new DataSource() { x = 3, yval = 30});
                data3.Add(new DataSource() { x = 4, yval = 50});
                data3.Add(new DataSource() { x = 5, yval = 40});
                data3.Add(new DataSource() { x = 6, yval = 20});
                data3.Add(new DataSource() { x = 7, yval = 10 });
                data3.Add(new DataSource() { x = 8, yval = 30 });
                data3.Add(new DataSource() { x = 9, yval = 10 });
                data3.Add(new DataSource() { x = 10, yval = 40 });
                return data3;
            }
        }
    }
}