React Charts - API - Display a Tooltip

This demo illustrates how to show and hide the point’s tooltip with the API. To test this feature, select a continent from the drop-down menu under the PieChart or click a point directly in the PieChart.

www.wikipedia.org

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React, { useCallback, useRef, useState } from 'react'; import PieChart, { Series, Tooltip, Size, Legend, PieChartTypes, PieChartRef } from 'devextreme-react/pie-chart'; import { SelectBox } from 'devextreme-react/select-box'; import { populationData, regionLabel } from './data.ts'; const customizeTooltip = (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) => { showTooltip(point); }, [showTooltip]); const onRegionChanged = useCallback(({ value }) => { const point = pieChartRef.current.instance().getAllSeries()[0].getPointsByArg(value)[0]; showTooltip(point); }, [showTooltip]); return ( <React.Fragment> <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> </React.Fragment> ); } 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 ( <React.Fragment> <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> </React.Fragment> ); } 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/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

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