Special points customization

17 Feb 20227 minutes to read

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.

CSHTML

@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").XName("xval").YName("yval").Type(SparklineType.Column).ValueType(SparklineValueType.Category).HighPointColor("blue").LowPointColor("orange").StartPointColor("green").EndPointColor("green").NegativePointColor("red").DataSource(ViewBag.sparkData).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>

Custom.cs

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.

CSHTML

@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("150px").Width("130px").Type(SparklineType.WinLoss).ValueType(SparklineValueType.Numeric).TiePointColor("blue").DataSource(ViewBag.sparkData).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>

Tie_point.cs

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