Localization in React Sparkline component
18 Jan 20233 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 * as React from 'react';
import * as ReactDOM from "react-dom";
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]}/>
</SparklineComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
function App() {
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]} />
</SparklineComponent> );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));