Lightweight in Vue Range navigator component
3 Mar 20231 minute to read
By default, when the dataSource
for series
is empty, a lightweight Range Selector will be shown without Chart.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :intervalType='intervalType'
: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",
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>