Labels in Vue Range navigator component

13 Jun 202416 minutes to read

Multilevel labels

The multi-level labels for the Range Selector can be enabled by setting the enableGrouping property to true. This is restricted to the DateTime axis alone.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' enableGrouping=true :value='value'
      :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";


let points = [];
let value = 0;
let point = {};
for (let j = 1; j < 1090; j++) {
  value += Math.random() * 10 - 5;
  value = value < 0 ? Math.abs(value) : value;
  point = { x: new Date(2000, 0, j), y: value, z: value + 10 };
  points.push(point);
}

const valueType = "DateTime";
const intervalType = "Quarter";
value = [new Date('2001-01-01'), new Date('2002-01-01')];
const dataSource = points;


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

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' enableGrouping=true :value='value'
      :dataSource='dataSource' xName='x' yName='y'>
    </ejs-rangenavigator>
  </div>
</template>
<script>

import { RangeNavigatorComponent, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent
  },
  data() {
    let points = [];
    let value = 0;
    let point = {};
    for (let j = 1; j < 1090; j++) {
      value += Math.random() * 10 - 5;
      value = value < 0 ? Math.abs(value) : value;
      point = { x: new Date(2000, 0, j), y: value, z: value + 10 };
      points.push(point);
    }
    return {
      valueType: "DateTime",
      intervalType: "Quarter",
      value: [new Date('2001-01-01'), new Date('2002-01-01')],
      dataSource: points,
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Grouping

The multi-level labels can be grouped using the groupBy property with the following interval types:

• Auto
• Years
• Quarter
• Months
• Weeks
• Days
• Hours
• Minutes
• Seconds

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' enableGrouping=true groupBy='Years'
      :value='value' :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";


let points = [];
let value = 0;
let point = {};
for (let j = 1; j < 1090; j++) {
  value += Math.random() * 10 - 5;
  value = value < 0 ? Math.abs(value) : value;
  point = { x: new Date(2000, 0, j), y: value, z: value + 10 };
  points.push(point);
}

const valueType = "DateTime";
const intervalType = "Quarter";
value = [new Date('2001-01-01'), new Date('2002-01-01')];
const dataSource = points;

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

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' enableGrouping=true groupBy='Years'
      :value='value' :dataSource='dataSource' xName='x' yName='y'>
    </ejs-rangenavigator>
  </div>
</template>
<script>

import { RangeNavigatorComponent, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent
  },
  data() {
    let points = [];
    let value = 0;
    let point = {};
    for (let j = 1; j < 1090; j++) {
      value += Math.random() * 10 - 5;
      value = value < 0 ? Math.abs(value) : value;
      point = { x: new Date(2000, 0, j), y: value, z: value + 10 };
      points.push(point);
    }
    return {
      valueType: "DateTime",
      intervalType: "Quarter",
      value: [new Date('2001-01-01'), new Date('2002-01-01')],
      dataSource: points,
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Smart labels

The labelIntersectAction property is used to avoid overlapping of labels. The following code sample shows the setting of labelIntersectAction property to Hide.

Composition API (~/src/App.vue)

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

const valueType = 'DateTime';
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'y/M/d';
const data = bitCoinData;

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

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' labelIntersectAction='Hide'>
      <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-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'y/M/d',
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Label positioning

By default, the labels can be placed outside the Range Selector. It can also be placed inside the Range Selector using the labelPosition property.

Composition API (~/src/App.vue)

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

const valueType = 'DateTime';
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM';
const data = bitCoinData;

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

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' labelPosition='Inside'>
      <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-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'MMM',
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Labels customization

The font size, color, family, etc. can be customized using the labelStyle setting.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' :labelStyle='labelStyle' :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 labelStyle = { color: 'red', size: '10px' };
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>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :intervalType='intervalType' :labelStyle='labelStyle' :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",
      labelStyle: { color: 'red', size: '10px' },
      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>