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">
@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
.
@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
.
@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.
@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.
@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.
@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;
}
}
}
}