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.

tagHelper
datetime.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.datetime" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.DateTime" type="@SparklineType.Column" xName="xDate" 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>
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.

tagHelper
category.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.category" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Category" type="@SparklineType.Column" 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>
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.

tagHelper
numeric.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.numeric" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Numeric" type="@SparklineType.Column" xName="x" 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>
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.

tagHelper
minmax.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.numeric" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Numeric" type="@SparklineType.Column" xName="x" yName="yval">
	 <e-sparkline-axissettings value='25'>
          </e-sparkline-axissettings>
	</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>
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.

tagHelper
value.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.numeric" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Numeric" type="@SparklineType.Column" xName="x" yName="yval">
	 <e-sparkline-axissettings MinY="0" MaxY="150">
          </e-sparkline-axissettings>
	</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>
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.

tagHelper
axis_line.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.numeric" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Numeric" type="@SparklineType.Column" xName="x" yName="yval">
	 <e-sparkline-axissettings>
        <e-axissettings-linesettings Visible = "true" Color = "#ff14ae", DashArray = "5"></e-axissettings-linesettings>
          </e-sparkline-axissettings>
	</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>
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;
            }
        }
    }
}