Search results

Localization

The sparkline control supports localization. The default culture for localization is en-US. You can change the culture using the setCulture method.

Tooltip format

Sparkline tooltip supports localization. The following code sample shows tooltip text with currency format based on culture.

Source
Preview
index.js
index.html
//Initialize Sparkline component
var sparklineInstance = new ej.charts.Sparkline({
    containerArea: {
        border: { color: '#033e96', width: 2 }
    },
    tooltipSettings: {
        visible: true
    },
    // To specify currency format
    format: 'c0',
    useGroupingSeparator: true,
    lineWidth: 3,
    padding: { left: 20, right: 20, bottom: 20, top: 20},
    border: { color: '#033e96', width: 2 },
    height: '200px',
    width: '350px',
    type: 'Area',
    fill: '#b2cfff',
    dataSource: [30000, 60000, 40000, 10000, 30000, 20000, 50000]
});
//Render initialized Sparkline
sparklineInstance.appendTo("#element");
<!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-charts/styles/material.css" rel="stylesheet">
    
    
<script src="https://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>

RTL

If you set the enableRtl property to true, then the sparkline will be rendered from right-to-left direction.

The following example shows the sparkline is render from “Right-to-left”.

Source
Preview
index.js
index.html
//Initialize Sparkline component
var sparklineInstance = new ej.charts.Sparkline({
   height: '150px',
    width: '150px',
    enableRtl: true,    
    dataSource:   [0, 6, 4, 1, 3, 2, 5],        
});
//Render initialized Sparkline
sparklineInstance.appendTo("#element");
<!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-charts/styles/material.css" rel="stylesheet">
    
    
<script src="https://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>