React PieChart - Overview

A tooltip is a small pop-up rectangle displaying information about a series point that the user pauses on. The information is the point value by default, but it is possible to display anything in a tooltip.

DevExtreme HTML5 JavaScript PieChart 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.

App.js
  • import React from 'react';
  • import PieChart, {
  • Tooltip
  • } from 'devextreme-react/pie-chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <PieChart ... >
  • <Tooltip enabled={true} />
  • </PieChart>
  • );
  • }
  • }

Properties declared in the tooltip object apply to all tooltips in the PieChart. 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.

App.js
  • import React from 'react';
  • import PieChart, {
  • Tooltip
  • } from 'devextreme-react/pie-chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <PieChart ...
  • <DxTooltip
  • enabled={true}
  • customizeTooltip={customizeTooltip}
  • color="yellow"
  • />
  • </PieChart>
  • );
  • }
  • }
  •  
  • // Tooltips of all points with the value more than 100 turn red
  • // Other tooltips remain yellow
  • function customizeTooltip(pointInfo) {
  • return pointInfo.value > 100 ? { color: 'red' } : { };
  • }

View Demo

See Also