Lightweight in Vue Range navigator component

13 Jun 20242 minutes 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 setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { GetDateTimeData } from "./default_data.js";

const valueType = "DateTime";
const intervalType = "Months";
const labelFormat = "MMM";
const value = [new Date('2018-06-01'), new Date('2018-07-01')];
const dataSource = GetDateTimeData(new Date('2018-01-01'), new Date('2019-01-01'));

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>
<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 { RangeNavigatorComponent, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { GetDateTimeData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent
  },
  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>

See Also