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.
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.
- <template>
- <DxPieChart ... >
- <DxTooltip :enabled="true"/>
- </DxPieChart>
- </template>
- <script>
- import DxPieChart, {
- DxTooltip
- } from 'devextreme-vue/pie-chart';
- export default {
- components: {
- DxPieChart,
- DxTooltip
- }
- }
- </script>
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.
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.