React Chart - Overview
A tooltip is a small pop-up rectangle displaying information about a series point that the user pauses on. By default, the information is the point value, but it is possible to display anything in a tooltip.
All properties configuring tooltips are collected in the tooltip object. For example, to enable the tooltips, assign true to the enabled property of this object.
- import React from 'react';
- import Chart, {
- Tooltip
- } from 'devextreme-react/chart';
- class App extends React.Component {
- render() {
- return (
- <Chart ... >
- <Tooltip
- enabled={true}
- />
- </Chart>
- );
- }
- }
- export default App;
Properties declared in the tooltip object apply to all tooltips in the Chart. If you want to customize a specific tooltip, assign a function to the customizeTooltip property. This function must return an object with properties for the tooltip that you want to customize.
- import React from 'react';
- import Chart, {
- Tooltip
- } from 'devextreme-react/chart';
- class App extends React.Component {
- render() {
- return (
- <Chart ... >
- <Tooltip
- enabled={true}
- color="yellow"
- customizeTooltip={customizeTooltip}
- />
- </Chart>
- );
- }
- }
- function customizeTooltip(pointInfo) {
- return pointInfo.value > 100 ? { color: "red" } : { };
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.