Vue Charts - Tooltip Customization

To set the tooltip's content, specify the contentTemplate. Inside the template, you can identify the chart series point for which the tooltip is displayed and thus display information related to that point.

en.wikipedia.org

Backend API

<template> <div> <DxPieChart id="pie-chart" :data-source="populationData" palette="Bright" title="Top 10 Most Populated States in US" > <DxSeries argument-field="name" value-field="population" /> <DxExport :enabled="true" /> <DxTooltip :enabled="true" content-template="tooltipTemplate" /> <template #tooltipTemplate="{ data }"> <TooltipTemplate :info="data"/> </template> </DxPieChart> </div> </template> <script setup lang="ts"> import { DxPieChart, DxSeries, DxExport, DxTooltip, } from 'devextreme-vue/pie-chart'; import { populationData } from './data.ts'; import TooltipTemplate from './TooltipTemplate.vue'; </script> <style> #pie-chart { height: 440px; } </style>

<template> <div class="state-tooltip"> <img :src="getImagePath(info.point)"><h4 class="state">{{ info.argument }}</h4> <div class="capital"> <span class="caption">Capital</span>: {{ info.point?.data.capital }} </div> <div> <span class="caption">Population</span>: <span class="population">{{ formatNumber(Number(info.value)) }}</span> people </div> <div> <span class="caption">Area</span>: <span class="area-km">{{ formatNumber(info.point?.data.area) }}</span> km<sup>2</sup> (<span class="area-mi">{{ formatNumber(0.3861 * info.point?.data.area) }}</span> mi<sup>2</sup>) </div> </div> </template> <script setup lang="ts"> import type { DxPieChartTypes } from 'devextreme-vue/pie-chart'; defineProps<{ info: DxPieChartTypes.PointInfo }>(); const getImagePath = ( point: DxPieChartTypes.PointInfo['point'], ) => `../../../../images/flags/${point?.data.name.replace(/\s/, '')}.svg`; const formatNumber = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0, }).format; </script> <style> .state-tooltip { height: 90px; } .state-tooltip > img { width: 60px; height: 40px; display: block; margin: 0 5px 0 0; float: left; border: 1px solid rgba(191, 191, 191, 0.25); } .state-tooltip > h4 { line-height: 40px; font-size: 14px; margin-bottom: 5px; } .state-tooltip .caption { font-weight: 500; } .state-tooltip sup { font-size: 0.8em; vertical-align: super; line-height: 0; } </style>

export const populationData = [{ name: 'California', population: 38802500, capital: 'Sacramento', area: 423967, }, { name: 'Texas', population: 26956958, capital: 'Austin', area: 695662, }, { name: 'Florida', population: 19893297, capital: 'Tallahassee', area: 170312, }, { name: 'New York', population: 19746227, capital: 'Albany', area: 141297, }, { name: 'Illinois', population: 12880580, capital: 'Springfield', area: 149995, }, { name: 'Pennsylvania', population: 12787209, capital: 'Harrisburg', area: 119280, }, { name: 'Ohio', population: 11594163, capital: 'Columbus', area: 116098, }, { name: 'Georgia', population: 10097343, capital: 'Atlanta', area: 153910, }, { name: 'North Carolina', population: 9943964, capital: 'Raleigh', area: 139391, }, { name: 'Michigan', population: 9909877, capital: 'Lansing', area: 250487, }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!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/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>