React Charts - Tooltip API

You can use tooltip API members to manage tooltip visibility in code. This demo creates a DevExtreme PieChart and disables its default tooltip. When you click a pie segment or select an item in the "Choose Region" box, a showTooltip() method call displays the corresponding tooltip.

www.wikipedia.org

TS JS

Backend API

import React, { useCallback, useRef, useState } from 'react'; import PieChart, { Series, Tooltip, Size, Legend, } from 'devextreme-react/pie-chart'; import type { PieChartTypes, PieChartRef } from 'devextreme-react/pie-chart'; import { SelectBox } from 'devextreme-react/select-box'; import { populationData, regionLabel } from './data.ts'; const customizeTooltip = (pointInfo: PieChartTypes.PointInfo) => ({ text: `${pointInfo.argumentText}<br/>${pointInfo.valueText}`, }); function App() { const [selectedRegion, setSelectedRegion] = useState(null); const pieChartRef = useRef<PieChartRef>(null); const showTooltip = useCallback((point) => { point.showTooltip(); setSelectedRegion(point.argument); }, [setSelectedRegion]); const onPointClick = useCallback(({ target: point }: PieChartTypes.PointClickEvent): void => { showTooltip(point); }, [showTooltip]); const onRegionChanged = useCallback(({ value }): void => { const point = pieChartRef.current?.instance().getAllSeries()[0].getPointsByArg(value)[0]; showTooltip(point); }, [showTooltip]); return ( <> <PieChart ref={pieChartRef} dataSource={populationData} onPointClick={onPointClick} type="doughnut" palette="Soft Pastel" title="The Population of Continents and Regions" > <Series argumentField="region" /> <Size height={350} /> <Tooltip enabled={false} format="millions" customizeTooltip={customizeTooltip} /> <Legend visible={false} /> </PieChart> <div className="controls-pane"> <SelectBox width={250} dataSource={populationData} inputAttr={regionLabel} displayExpr="region" valueExpr="region" placeholder="Choose region" value={selectedRegion} onValueChanged={onRegionChanged} /> </div> </> ); } export default App;

import React, { useCallback, useRef, useState } from 'react'; import PieChart, { Series, Tooltip, Size, Legend, } from 'devextreme-react/pie-chart'; import { SelectBox } from 'devextreme-react/select-box'; import { populationData, regionLabel } from './data.js'; const customizeTooltip = (pointInfo) => ({ text: `${pointInfo.argumentText}<br/>${pointInfo.valueText}`, }); function App() { const [selectedRegion, setSelectedRegion] = useState(null); const pieChartRef = useRef(null); const showTooltip = useCallback( (point) => { point.showTooltip(); setSelectedRegion(point.argument); }, [setSelectedRegion], ); const onPointClick = useCallback( ({ target: point }) => { showTooltip(point); }, [showTooltip], ); const onRegionChanged = useCallback( ({ value }) => { const point = pieChartRef.current?.instance().getAllSeries()[0].getPointsByArg(value)[0]; showTooltip(point); }, [showTooltip], ); return ( <> <PieChart ref={pieChartRef} dataSource={populationData} onPointClick={onPointClick} type="doughnut" palette="Soft Pastel" title="The Population of Continents and Regions" > <Series argumentField="region" /> <Size height={350} /> <Tooltip enabled={false} format="millions" customizeTooltip={customizeTooltip} /> <Legend visible={false} /> </PieChart> <div className="controls-pane"> <SelectBox width={250} dataSource={populationData} inputAttr={regionLabel} displayExpr="region" valueExpr="region" placeholder="Choose region" value={selectedRegion} onValueChanged={onRegionChanged} /> </div> </> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const populationData = [{ region: 'Asia', val: 4119626293, }, { region: 'Africa', val: 1012956064, }, { region: 'Northern America', val: 344124520, }, { region: 'Latin America and the Caribbean', val: 590946440, }, { region: 'Europe', val: 727082222, }, { region: 'Oceania', val: 35104756, }]; export const regionLabel = { 'aria-label': 'Region' };

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const populationData = [ { region: 'Asia', val: 4119626293, }, { region: 'Africa', val: 1012956064, }, { region: 'Northern America', val: 344124520, }, { region: 'Latin America and the Caribbean', val: 590946440, }, { region: 'Europe', val: 727082222, }, { region: 'Oceania', val: 35104756, }, ]; export const regionLabel = { 'aria-label': 'Region' };

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

.controls-pane { margin-top: 20px; text-align: center; } .dx-selectbox { display: inline-block; }