Tool tip in Vue Range navigator component
28 Jul 202611 minutes to read
The tooltip for sliders are supported by the Range Selector. Sliders are used in the Range Selector to select data from a specific range. The tooltip displays the selected start and end values.
Enable Tooltip
The tooltip is useful to show the selected data. You can enable tooltip by setting the enable property as true in tooltip object and by injecting RangeTooltip module using provide method.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :tooltip='tooltip'>
<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, RangeTooltip } 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 tooltip = { enable: true, displayMode: "Always", format: "MM/dd/yyyy" };
const labelFormat = 'MMM-yy';
const data = bitCoinData;
provide('rangeNavigator', [DateTime, AreaSeries, RangeTooltip]);
</script><template>
<div id="app">
<ejs-rangenavigator :valueType="valueType" :value="value" :labelFormat="labelFormat" :tooltip="tooltip">
<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, RangeTooltip } 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')],
tooltip: { enable: true, displayMode: 'Always', format: 'MM/dd/yyyy' },
labelFormat: 'MMM-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries, RangeTooltip]
}
};
</script>Customization
Tooltip can be customized using the following properties:
- enable - Customizes the visibility of the tooltip.
- fill - Customizes the background color of the tooltip.
- opacity - Customizes the opacity of the tooltip.
- textStyle - Customizes the font size, color, family, style, weight, alignment, and overflow of the tooltip.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :tooltip='tooltip'>
<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, RangeTooltip } 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 tooltip = { enable: true, displayMode: 'Always', fill: 'red', opacity: 0.6, textStyle: { style: 'Italic', color: 'blue', size: '12px' } };
const labelFormat = 'MMM-yy';
const data = bitCoinData;
provide('rangeNavigator', [DateTime, AreaSeries, RangeTooltip]);
</script><template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :tooltip='tooltip'>
<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, RangeTooltip } 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')],
tooltip: { enable: true, displayMode: 'Always', fill: 'red', opacity: 0.6, textStyle: { style: 'Italic', color: 'blue', size: '12px' } },
labelFormat: 'MMM-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries, RangeTooltip]
}
};
</script>Label Format
You can format and parse the date to all globalize format using labelFormat property in an axis. The labelFormat property in the tooltip is used to format and parse the date to all globalize formats.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :tooltip='tooltip'>
<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, RangeTooltip } 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 tooltip = { enable: true, displayMode: 'Always', labelFormat: 'y/M/d' };
const data = bitCoinData;
provide('rangeNavigator', [DateTime, AreaSeries, RangeTooltip]);
</script><template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :tooltip='tooltip'>
<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, RangeTooltip } 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')],
tooltip: { enable: true, displayMode: 'Always', labelFormat: 'y/M/d' },
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries, RangeTooltip]
}
};
</script>The following table shows the results of applying some common date and time formats to the labelFormat property.
| Label Value | Label Format Property Value | Result | Description |
| new Date(2000, 03, 10) | EEEE | Monday | The Date is displayed in day format |
| new Date(2000, 03, 10) | yMd | 04/10/2000 | The Date is displayed in month/date/year format |
| new Date(2000, 03, 10) | MMM | Apr | The Shorthand month for the date is displayed |
| new Date(2000, 03, 10) | hm | 12:00 AM | Time of the date value is displayed as label |
| new Date(2000, 03, 10) | hms | 12:00:00 AM | The Label is displayed in hours:minutes:seconds format |