Tool tip in React Range navigator component

22 Jul 202610 minutes to read

Enable tooltip

The tooltip is useful for showing the selected data. Enable the tooltip by setting the enable property to true in the tooltip object, and by injecting the RangeTooltip module into the services as shown below.

import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject } from "@syncfusion/ej2-react-charts";
import * as React from "react";

function App() {
  return (
    <RangeNavigatorComponent id="charts" tooltip=>
      <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    </RangeNavigatorComponent>
  );
}

export default App;
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from '../default-data';

function App() {
  const data = bitCoinData;
  const tooltip = { enable: true, displayMode: 'Always' };
  return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={tooltip}>
    <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    <RangenavigatorSeriesCollectionDirective>
      <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} />
    </RangenavigatorSeriesCollectionDirective>
  </RangeNavigatorComponent>;
}

export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import {
  AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from '../default-data';

function App() {

  const data: object[] = bitCoinData;
  const tooltip: RangeTooltipSettingsModel = { enable: true, displayMode: 'Always' };

  return <RangeNavigatorComponent id='charts'
    valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
    tooltip={tooltip}>
    <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    <RangenavigatorSeriesCollectionDirective>
      <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} />
    </RangenavigatorSeriesCollectionDirective>
  </RangeNavigatorComponent>

}

export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

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.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default-data.ts';
function App() {
  const data = bitCoinData;
  const tooltip = { enable: true, displayMode: 'Always', fill: 'red', opacity: 0.6, textStyle: { style: 'Italic', color: 'blue', size: '12px' } };

  return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={tooltip}>
    <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    <RangenavigatorSeriesCollectionDirective>
      <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} />
    </RangenavigatorSeriesCollectionDirective>
  </RangeNavigatorComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
  AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default-data.ts';

function App() {

  const data: object[] = bitCoinData;
  const tooltip: RangeTooltipSettingsModel = { enable: true, displayMode: 'Always', fill: 'red', opacity: 0.6, textStyle: { style: 'Italic', color: 'blue', size: '12px' } };

  return <RangeNavigatorComponent id='charts'
    valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
    tooltip={tooltip}>
    <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    <RangenavigatorSeriesCollectionDirective>
      <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} />
    </RangenavigatorSeriesCollectionDirective>
  </RangeNavigatorComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Label Format

The labelFormat property in the tooltip is used to format and parse the date to all globalize formats.

import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default-data.ts';
function App() {
  const data = bitCoinData;
  const tooltip = { enable: true, displayMode: 'Always', labelFormat: 'y/M/d' };

  return <RangeNavigatorComponent id='charts' valueType='DateTime' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={tooltip}>
    <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    <RangenavigatorSeriesCollectionDirective>
      <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} />
    </RangenavigatorSeriesCollectionDirective>
  </RangeNavigatorComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
  AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default-data.ts';

function App() {

  const data: object[] = bitCoinData;
  const tooltip: RangeTooltipSettingsModel = { enable: true, displayMode: 'Always', labelFormat: 'y/M/d' };

  return <RangeNavigatorComponent id='charts'
    valueType='DateTime' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
    tooltip={tooltip}>
    <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    <RangenavigatorSeriesCollectionDirective>
      <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} />
    </RangenavigatorSeriesCollectionDirective>
  </RangeNavigatorComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

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