To render the data, the Range Selector supports three types of series.
To render a line series, set the seriestype to Line, and
inject the LineSeries module using the RangeNavigator.Inject(LineSeries) method.
To render a line series, use series type as Line and inject the LineSeries module using RangeNavigator.Inject(LineSeries) method. By default, the line series is rendered in the Range Selector.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :tooltip='tooltip'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series :dataSource='data' type='Line' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, LineSeries, DateTime, RangeTooltip } 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')],
tooltip: { enable: true },
labelFormat: 'MMM-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, LineSeries, RangeTooltip]
}
};
</script>To render a step line series, use series type as Area and
inject AreaSeries module using RangeNavigator.Inject(AreaSeries) method.
To render an area series, use series type as Area and inject AreaSeries module using RangeNavigator.Inject(AreaSeries) method.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :tooltip='tooltip'>
<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, RangeTooltip } 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')],
tooltip: { enable: true },
labelFormat: 'MMM-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries, RangeTooltip]
}
};
</script>To render a Step line series, use series type as Step Line and
inject StepLineSeries module using RangeNavigator.Inject(StepLineSeries) method.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :tooltip='tooltip'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series :dataSource='data' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, StepLineSeries, DateTime, RangeTooltip } 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')],
tooltip: { enable: true },
labelFormat: 'MMM-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, StepLineSeries, RangeTooltip]
}
};
</script>