Getting Started with the Vue Range Navigator Component in Vue 2

28 Jul 20267 minutes to read

This section provides a step-by-step guide to creating a Vue 2 application using Vue CLI and integrating the Syncfusion® Vue Range Navigator component. It helps users quickly configure a project and render a Range Navigator.

Prerequisites

Ensure that the development environment meets the requirements listed in System requirements for Syncfusion Vue UI components.

Dependencies

The following are the minimum dependencies required to use the Vue Range Navigator component:

|-- @syncfusion/ej2-vue-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-calendars
    |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-svg-base

Only the @syncfusion/ej2-vue-charts package must be installed directly. Its required dependencies are installed automatically.

Setting Up the Vue 2 Project

Install Vue CLI globally using either npm or yarn, and create a project with the vue create command.

npm

npm install -g @vue/cli
vue create quickstart

yarn

yarn global add @vue/cli
vue create quickstart

When creating the project, select Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

After the project is created, navigate to its directory:

cd quickstart

Add the Syncfusion Vue Package

Syncfusion Vue packages are available on npmjs.com.

Install the @syncfusion/ej2-vue-charts package using either npm or yarn.

npm

npm install @syncfusion/ej2-vue-charts

yarn

yarn add @syncfusion/ej2-vue-charts

Note: npm v5 and later save installed packages to dependencies by default, so the --save option is not required.

Add the Syncfusion Vue Range Navigator Component

Follow these steps to add the Vue Range Navigator component.

Step 1: Import and register the Range Navigator component in the script section of the src/App.vue file.

<script>
import { RangeNavigatorComponent } from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-rangenavigator': RangeNavigatorComponent
  }
};
</script>

Step 2: Define the Range Navigator component in the template section.

<template>
  <div id="app">
      <ejs-rangenavigator></ejs-rangenavigator>
  </div>
</template>

The following is the complete code for the src/App.vue file:

<template>
  <div id="app">
    <ejs-rangenavigator></ejs-rangenavigator>
  </div>
</template>
<script>
import { RangeNavigatorComponent } from '@syncfusion/ej2-vue-charts';

export default {
  name: "App",
  components: {
    'ejs-rangenavigator': RangeNavigatorComponent
  },
  data() {
    return {
    }
  }
}
</script>

Run the Project

Save the changes and start the development server using either npm or yarn.

npm

npm run serve

yarn

yarn run serve

Open the local URL displayed in the terminal (for example, http://localhost:8080), in a browser. At this stage, the application renders an empty Range Navigator because no series or data has been configured.

Module Injection

The Range Navigator component is divided into feature-specific modules. Register the modules required by the application using the component’s provide option.

The following modules are used in this guide:

  • AreaSeries enables the area series type.
  • DateTime enables date-time values on the horizontal axis.
  • RangeTooltip enables tooltip support.

Register the modules in the component’s provide option:

<script>
import {
  RangeNavigatorComponent,
  AreaSeries,
  DateTime,
  RangeTooltip
} from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-rangenavigator': RangeNavigatorComponent
  },
  provide: {
    rangeNavigator: [AreaSeries, DateTime, RangeTooltip]
  }
};
</script>

Register AreaSeries only when an area series is used. Register DateTime when the Range Navigator’s valueType is set to DateTime. Register RangeTooltip when the tooltip is enabled.

Note: Register only the modules used by the application to keep the bundle size smaller.

Populate the Range Navigator with Data

The Range Navigator series uses the following properties to bind data:

  • dataSource specifies the array of data objects.
  • xName maps the horizontal-axis field.
  • yName maps the numeric value field.
  • type specifies the series type.
  • valueType specifies the type of values used on the horizontal axis.

When the data contains JavaScript Date values, set valueType to DateTime and register the DateTime module.

Import and register RangenavigatorSeriesCollectionDirective and RangenavigatorSeriesDirective to declare the series in the Vue template.

<template>
  <div id="app">
    <ejs-rangenavigator :valueType="valueType" :value="value" :labelFormat="labelFormat">
      <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 { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from '@syncfusion/ej2-vue-charts';
import { bitCoinData } from './default_data.js';

export default {
  name: "App",
  components: {
    'ejs-rangenavigator': RangeNavigatorComponent,
    'e-rangenavigator-series': RangenavigatorSeriesDirective,
    'e-rangenavigator-series-collection': RangenavigatorSeriesCollectionDirective
  },
  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>

Each data object must contain the fields assigned to xName and yName. For a date-time axis, the field assigned to xName must contain a valid JavaScript Date value. The field assigned to yName must contain a numeric value.

Troubleshooting

  • The Range Navigator is not rendered. Verify that RangeNavigatorComponent, the series collection, and the series directives are imported and registered. Also, ensure that the component has a valid width and height, and check the browser console for component or data errors.

  • The series type is not registered. Import the module required by the configured series type and add it to the rangeNavigator array in the provide option. When type is set to Area, register the AreaSeries module.

  • No data is displayed. Verify that dataSource contains data, xName and yName match the fields in each data object, and the field assigned to yName contains numeric values. When valueType is set to DateTime, provide valid JavaScript Date objects.

  • Date-time values are not displayed correctly. Set the Range Navigator’s valueType property to DateTime, import and register the DateTime module, and ensure that the data contains valid JavaScript Date objects.

  • The tooltip is not displayed. Import and register the RangeTooltip module, bind the tooltip object using :tooltip="tooltip", and set tooltip.enable to true.

See Also