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.
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.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... tooltip: { enabled: true } }); });
Angular
<dx-pie-chart ... > <dxo-tooltip [enabled]="true"> </dxo-tooltip> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... > <DxTooltip :enabled="true"/> </DxPieChart> </template> <script> import DxPieChart, { DxTooltip } from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart, DxTooltip } } </script>
React
import React from 'react'; import PieChart, { Tooltip } from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... > <Tooltip enabled={true} /> </PieChart> ); } }
Propertiesdeclared 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.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... tooltip: { enabled: true, color: 'yellow', // Tooltips of all points with the value more than 100 turn red // Other tooltips remain yellow customizeTooltip: function (pointInfo) { return pointInfo.value > 100 ? { color: 'red' } : { }; } } }); });
Angular
<dx-pie-chart ... > <dxo-tooltip [enabled]="true" color="yellow" [customizeTooltip]="customizeTooltip"> </dxo-tooltip> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // Tooltips of all points with the value more than 100 turn red // Other tooltips remain yellow customizeTooltip (pointInfo: any) { return pointInfo.value > 100 ? { color: 'red' } : { }; }; } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... :customize-label="customizeLabel"> <DxSeries> <DxTooltip :enabled="true" :customize-tooltip="customizeTooltip" color="yellow" /> </DxSeries> </DxPieChart> </template> <script> import DxPieChart, { DxTooltip } from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart, DxTooltip }, methods: { // Tooltips of all points with the value more than 100 turn red // Other tooltips remain yellow customizeTooltip(pointInfo) { return pointInfo.value > 100 ? { color: 'red' } : { }; } } } </script>
React
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' } : { }; }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.