Search results

Special points customization

You can customize the points by initializing the point colors. The customization options allows to differentiate the start, end, positive, negative, and low points. This customization is only applicable for line, column, and area type sparklines.

tagHelper
custom.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.sparkData" xName="xval" yName="yval"  type="@SparklineType.Column" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Category"
highPointColor="blue" lowPointColor="orange" startPointColor="green" endPointColor="green" negativePointColor="red">
	</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.sparkData = 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() { x = 0, xval = "AUDI", yval = 1});
                data2.Add(new DataSource() { x = 1, xval = "BMW", yval = 5 });
                data2.Add(new DataSource() { x = 2, xval = "BUICK", yval = -1 });
                data2.Add(new DataSource() { x = 3, xval = "CETROEN", yval = -6 });
                data2.Add(new DataSource() { x = 4, xval = "CHEVROLET", yval = 0 });
                data2.Add(new DataSource() { x = 5, xval = "FIAT", yval = 1 });
                data2.Add(new DataSource() { x = 6, xval = "FORD", yval = -2 });
                data2.Add(new DataSource() { x = 7, xval = "HONDA", yval = 7 });
                data2.Add(new DataSource() { x = 8, xval = "HYUNDAI", yval = -9 });
                data2.Add(new DataSource() { x = 9, xval = "JEEP", yval = 0 });
                data2.Add(new DataSource() { x = 10, xval = "KIA", yval = -10 });
                data2.Add(new DataSource() { x = 11, xval = "MAZDA", yval = 3 });
                return data2;
            }
        }
    }
}

Tie point color

Tie point color is used to configure the win-loss series type sparkline’s y-value point color. The following code sample shows the tie point color of sparkline series.

tagHelper
tie_point.cs
@using Syncfusion.EJ2;
<div class="spark" align="center">
    <ejs-sparkline id="sparkline" loaded="loaded" height="150px" width="130px" dataSource="ViewBag.sparkData" xName="xval" yName="yval"  type="@SparklineType.WinLoss" valueType="@Syncfusion.EJ2.Charts.SparklineValueType.Numeric" tiePointColor="blue" ></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.sparkData = new int[] { 12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10 };
            return View();
        }
    }
}