ASP.NET MVC
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Markers in ASP.NET MVC Sparkline control

22 Jul 2021 / 1 minute to read

This section explains how to add markers to the sparklines.

Adding marker to the sparkline

To add marker to the sparkline, specify the visible of markerSettings as following values. The visible will accept multiple values too.

  • All - Enables markers for all points.
  • Start - Enables marker for the start point.
  • End - Enables marker for the end point.
  • High - Enables marker for the high point.
  • Low - Enables marker for the low point.
  • Negative - Enables markers for the negative points.

The following code example shows enabling markers for all points.

razor
allpoint.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("350px").AxisSettings(axis => axis.MinX(-1).MaxX(7).MinY(-1).MaxY(7)).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.markerSettings = {
            visible: ['All']
        };
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
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[] { 0, 6, 4, 1, 3, 2, 5 };
            return View();
        }
    }
}

Adding marker to special point

In sparkline, markers can be enabled for particular points such as the start, end, low, high, or negative. The following code examples shows enabling markers for the high and low points.

razor
specialpoint.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("350px").AxisSettings(axis => axis.MinX(-1).MaxX(7).MinY(-1).MaxY(7)).HighPointColor("blue").LowPointColor("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.markerSettings = {
            visible: ['high', 'Low']
        };
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
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[] { 3, 6, 4, 1, 3, 2, 5 };
            return View();
        }
    }
}

Customizing markers

Sparkline markers can be customized in terms of fill color, border color, width, opacity, and size. The following code example shows customizing marker’s fill, border, and size.

razor
custom.cs
Copied to clipboard
@using Syncfusion.EJ2;
<div class="spark" align="center">
@Html.EJS().Sparkline("sparkline").Loaded("loaded").Height("200px").Width("350px").AxisSettings(axis => axis.MinX(-1).MaxX(7).MinY(-1).MaxY(7)).Fill("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.markerSettings = {
            visible: ['all'],
            size: 5,
            fill: 'white',
            border: { color: 'blue', width: 2 }
        };
        args.sparkline.refresh();
    }
</script>
Copied to clipboard
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[] { 3, 6, 4, 1, 3, 2, 5 };
            return View();
        }
    }
}
Previous
Next