Vue 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.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        tooltip: {
            enabled: true
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart ... >
    <dxo-tooltip
        [enabled]="true">
    </dxo-tooltip>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ... >
        <DxTooltip :enabled="true"/>
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxTooltip
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxTooltip
    }
}
</script>
React
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>
        );
    }
}

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
JavaScript
$(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
HTML
TypeScript
<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
App.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
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