Search results


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.

<!DOCTYPE html>
<html lang="en">

    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        #sparkline {
            height : 350px;
            display: block;

        <div id='root'>
            <div id='loader'>Loading....</div>
        <script src="app/index.js"></script>
import * as React from 'react';
import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='200px' width='350px' 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 }} type='Area' fill='#b2cfff' dataSource={[30000, 60000, 40000, 10000, 30000, 20000, 50000]}>
    <Inject services={[SparklineTooltip]}/>