Labels in Vue Range navigator component
3 Mar 20239 minutes to read
Multilevel labels
The multi-level labels for the Range Selector can be enabled by setting the enableGrouping
property to true. This is restricted to the DateTime axis alone.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' enableGrouping=true
:value='value' :dataSource='dataSource'
xName='x' yName='y'>
</ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { GetDateTimeData } from "./default_data.js";
Vue.use(RangeNavigatorPlugin);
export default {
data() {
let points = [];
let value = 0;
let point = {};
for (let j = 1; j < 1090; j++) {
value += Math.random() * 10 - 5;
value = value < 0 ? Math.abs(value) : value;
point = { x: new Date(2000, 0, j), y: value, z: value + 10 };
points.push(point);
}
return {
valueType: "DateTime",
intervalType: "Quarter",
value: [new Date('2001-01-01'), new Date('2002-01-01')],
dataSource: points,
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>
Grouping
The multi-level labels can be grouped using the groupBy
property with the following interval types:
- Auto
- Years
- Quarter
- Months
- Weeks
- Days
- Hours
- Minutes
- Seconds
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' enableGrouping=true groupBy='Years'
:value='value' :dataSource='dataSource'
xName='x' yName='y'>
</ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { GetDateTimeData } from "./default_data.js";
Vue.use(RangeNavigatorPlugin);
export default {
data() {
let points = [];
let value = 0;
let point = {};
for (let j = 1; j < 1090; j++) {
value += Math.random() * 10 - 5;
value = value < 0 ? Math.abs(value) : value;
point = { x: new Date(2000, 0, j), y: value, z: value + 10 };
points.push(point);
}
return {
valueType: "DateTime",
intervalType: "Quarter",
value: [new Date('2001-01-01'), new Date('2002-01-01')],
dataSource: points,
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>
Smart labels
The labelIntersectAction
property is used to avoid overlapping of labels. The following code sample shows the setting of labelIntersectAction
property to Hide.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' labelIntersectAction='Hide'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";
Vue.use(RangeNavigatorPlugin);
export default {
data() {
return {
valueType: 'DateTime',
value: [new Date('2017-09-01'), new Date('2018-02-01')],
labelFormat:'y/M/d',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>
Label positioning
By default, the labels can be placed outside the Range Selector. It can also be placed inside the Range Selector using the labelPosition
property.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' labelPosition='Inside'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";
Vue.use(RangeNavigatorPlugin);
export default {
data() {
return {
valueType: 'DateTime',
value: [new Date('2017-09-01'), new Date('2018-02-01')],
labelFormat: 'MMM',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>
Labels customization
The font size, color, family, etc. can be customized using the labelStyle
setting.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' :labelStyle='labelStyle'
:value='value' :labelFormat='labelFormat' :dataSource='dataSource'
xName='x' yName='y'>
</ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { GetDateTimeData } from "./default_data.js";
Vue.use(RangeNavigatorPlugin);
export default {
data() {
return {
valueType: "DateTime",
intervalType: "Months",
labelFormat: "MMM",
labelStyle: { color: 'red', size:'10px'}
value: [new Date('2018-06-01'), new Date('2018-07-01')],
dataSource: GetDateTimeData(new Date('2018-01-01'), new Date('2019-01-01')),
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>