Localization in Vue Sparkline component
16 Mar 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.
<template>
<div class="control_wrapper">
<div class="spark">
<ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' :containerArea='containerArea' :border='border' fill= '#b2cfff' :padding='padding' lineWidth= 3 format= 'c0' useGroupingSeparator= 'true' :type='type' :tooltipSettings='tooltipSettings' :height='height' :width='width'></ejs-sparkline>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SparklinePlugin,SparklineTooltip } from "@syncfusion/ej2-vue-charts";
Vue.use(SparklinePlugin);
export default {
data: function() {
return {
containerArea: {
border: { color: '#033e96', width: 2 }
},
tooltipSettings: {
visible: true
},
padding: { left: 20, right: 20, bottom: 20, top: 20},
border: { color: '#033e96', width: 2 },
height: '200px',
width: '350px',
type: 'Area',
dataSource: [30000, 60000, 40000, 10000, 30000, 20000, 50000]
}
},
provide:{
sparkline:[SparklineTooltip]
}
}
</script>
<style>
.spark {
width: 100%;
height: 100%;
}
</style>
Rtl
If you set the enableRtl
property to true, then the sparkline will be rendered from rigt-to-left direction.
The following example shows the sparkline is render from “Right-to-left”.
<template>
<div class="control_wrapper">
<div class="spark">
<ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' :enableRtl='enableRtl' :height='height' :width='width'></ejs-sparkline>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SparklinePlugin,SparklineTooltip } from "@syncfusion/ej2-vue-charts";
Vue.use(SparklinePlugin);
export default {
data: function() {
return {
height: '150px',
width: '150px',
enableRtl: true
dataSource: [30000, 60000, 40000, 10000, 30000, 20000, 50000]
}
}
}
</script>
<style>
.spark {
width: 100%;
height: 100%;
}
</style>