Contents
- Tooltip format
- RTL
Having trouble getting help?
Contact Support
Contact Support
Localization in EJ2 TypeScript Sparkline control
18 Apr 20234 minutes to read
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.
import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts';
Sparkline.Inject(SparklineTooltip);
let sparkline: Sparkline = new 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]
});
sparkline.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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 15%;">
<div class="spark" id="element" align="center" ></div>
</div>
</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”.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '150px',
width: '150px',
enableRtl: true,
dataSource: [0, 6, 4, 1, 3, 2, 5]
});
sparkline.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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 15%;">
<div class="spark" id="element" align="center" ></div>
</div>
</body>
</html>