Axis Customization in ASP.NET Core Sparkline control

30 Jul 2021 / 2 minutes to read

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

Contents

Change value type of the sparkline
Change min and max values of axis
Change value of axis
Axis line customization

Contents

Change value type of the sparkline
Change min and max values of axis
Change value of axis
Axis line customization

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!