Search results

LightWeight RangeNavigator in Vue Range Navigator component

20 Apr 2021 / 1 minute to read

By default, when the dataSource for series property in RangeNavigator is empty, a light weight Range navigator will get initialized without chart. The following code example shows the basic lightweight range navigator.

Copied to clipboard
    <div id="app">
      <ejs-rangenavigator :valueType='valueType' :intervalType='intervalType'
        :value='value' :labelFormat='labelFormat' :dataSource='dataSource'
        xName='x' yName='y'>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { GetDateTimeData  } from "./default_data.js";


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]

See Also