Contents
- Tooltip format
- Rtl
Having trouble getting help?
Contact Support
Contact Support
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>