Axis Customization
17 Feb 202224 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.
@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.
@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.
@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.
@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.
@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.
@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;
}
}
}
}