You can customize axis value types and min and max values 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;
}
}
}
}
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;
}
}
}
}
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 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;
}
}
}
}