Search results

Axis Customization

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].

Source
Preview
index.html
index.css
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-sparkline/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div class="spark" id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}
.spark { 
    border: 1px solid rgb(209, 209, 209); 
    border-radius: 2px; 
    width: 100%; 
    height: 100%;
}

Category

You can assign category values to the sparkline by setting [valueType] to [Category].

Source
Preview
index.html
index.css
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-sparkline/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div class="spark" id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}
.spark { 
    border: 1px solid rgb(209, 209, 209); 
    border-radius: 2px; 
    width: 100%; 
    height: 100%;
}

Numeric

You can assign numeric values to the sparkline by setting [valueType] to [Numeric].

Source
Preview
index.html
index.css
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-sparkline/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div class="spark" id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}
.spark { 
    border: 1px solid rgb(209, 209, 209); 
    border-radius: 2px; 
    width: 100%; 
    height: 100%;
}

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.

Source
Preview
index.html
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-sparkline/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div class="spark" id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.html
index.css
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-sparkline/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div class="spark" id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}
.spark { 
    border: 1px solid rgb(209, 209, 209); 
    border-radius: 2px; 
    width: 100%; 
    height: 100%;
}

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.

Source
Preview
index.html
index.css
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-sparkline/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div class="spark" id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}
.spark { 
    border: 1px solid rgb(209, 209, 209); 
    border-radius: 2px; 
    width: 100%; 
    height: 100%;
}