The navigator can be customized using the “navigatorStyleSettings” property. The “selectedRegionColor” property is used to specify the color for selected region whereas the “unSelectedRegionColor” property is used to specify the color for unselected region.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :navigatorStyleSettings='navigatorStyleSettings'>
<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-yy',
navigatorStyleSettings: {
unselectedRegionColor: 'skyblue',
selectedRegionColor: 'pink'
},
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>The thumb property provides options to customize the border, fill, size, and type of thumb. The types of thumb can be “Circle” and “Rectangle”.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :navigatorStyleSettings='navigatorStyleSettings'>
<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-yy',
navigatorStyleSettings: {
thumb:{
type: 'Rectangle',
border: { width: 2, color: 'red'},
fill: 'pink'
}
},
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>Using the “navigatorBorder” property, you can customize the “width” and “color” of the range navigator.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :navigatorBorder='navigatorBorder'>
<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-yy',
navigatorBorder : { width: 4, color: 'green'},
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>If the “enableDeferredUpdate” property is set to true, then the changed event will be fired after dragging the slider. If the “enableDeferredUpdate” is false, then the changed event will be fired when dragging the slider. By default, the “enableDeferredUpdate” is set to false.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :navigatorBorder='navigatorBorder'>
<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-yy',
navigatorBorder : { width: 4, color: 'green'},
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>The “allowSnapping” property toggles the placement of the slider exactly to the left or on the nearest interval.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :allowSnapping='allowSnapping'>
<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-yy',
allowSnapping: true,
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>The speed of the animation can be controlled using the “animationDuration” property. The default value of the “animationDuration” property is 500 milliseconds.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' animationDuration=2000>
<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-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>