If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import TreeMap, { Tooltip, ITooltipProps } from 'devextreme-react/tree-map';
import { citiesPopulation } from './data.ts';
const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => {
const { data } = arg.node;
return {
text: arg.node.isLeaf()
? `<span class="city">${data.name}</span> (${data.country})<br/>Population: ${arg.valueText}`
: null,
};
};
function App() {
return (
<TreeMap
id="treemap"
dataSource={citiesPopulation}
title="The Most Populated Cities by Continents"
idField="id"
parentField="parentId"
>
<Tooltip
enabled={true}
format="thousands"
customizeTooltip={customizeTooltip}
/>
</TreeMap>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import TreeMap, { Tooltip } from 'devextreme-react/tree-map';
import { citiesPopulation } from './data.js';
const customizeTooltip = (arg) => {
const { data } = arg.node;
return {
text: arg.node.isLeaf()
? `<span class="city">${data.name}</span> (${data.country})<br/>Population: ${arg.valueText}`
: null,
};
};
function App() {
return (
<TreeMap
id="treemap"
dataSource={citiesPopulation}
title="The Most Populated Cities by Continents"
idField="id"
parentField="parentId"
>
<Tooltip
enabled={true}
format="thousands"
customizeTooltip={customizeTooltip}
/>
</TreeMap>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
export const citiesPopulation = [{
id: '1',
name: 'Africa',
}, {
id: '1_1',
parentId: '1',
value: 21324000,
name: 'Lagos',
country: 'Nigeria',
}, {
id: '1_2',
parentId: '1',
value: 9735000,
name: 'Kinshasa',
country: 'Democratic Republic of the Congo',
}, {
id: '1_3',
parentId: '1',
value: 9278441,
name: 'Cairo',
country: 'Egypt',
}, {
id: '2',
name: 'Asia',
}, {
id: '2_1',
parentId: '2',
value: 24256800,
name: 'Shanghai',
country: 'China',
}, {
id: '2_2',
parentId: '2',
value: 23500000,
name: 'Karachi',
country: 'Pakistan',
}, {
id: '2_3',
parentId: '2',
value: 21516000,
name: 'Beijing',
country: 'China',
}, {
id: '2_4',
parentId: '2',
value: 16787941,
name: 'Delhi',
country: 'India',
}, {
id: '2_5',
parentId: '2',
value: 15200000,
name: 'Tianjin',
country: 'China',
}, {
id: '3',
name: 'Australia',
}, {
id: '3_1',
parentId: '3',
value: 4840600,
name: 'Sydney',
country: 'Austraila',
}, {
id: '3_2',
parentId: '3',
value: 4440000,
name: 'Melbourne',
country: 'Austraila',
}, {
id: '4',
name: 'Europe',
}, {
id: '4_1',
parentId: '4',
value: 14160467,
name: 'Istanbul',
country: 'Turkey',
}, {
id: '4_2',
parentId: '4',
value: 12197596,
name: 'Moscow',
country: 'Russia',
}, {
id: '4_3',
parentId: '4',
value: 8538689,
name: 'London',
country: 'United Kingdom',
}, {
id: '4_4',
parentId: '4',
value: 5191690,
name: 'Saint Petersburg',
country: 'Russia',
}, {
id: '4_5',
parentId: '4',
value: 4470800,
name: 'Ankara',
country: 'Turkey',
}, {
id: '4_6',
parentId: '4',
value: 3517424,
name: 'Berlin',
country: 'Germany',
}, {
id: '5',
name: 'North America',
}, {
id: '5_1',
parentId: '5',
value: 8874724,
name: 'Mexico City',
country: 'Mexico',
}, {
id: '5_2',
parentId: '5',
value: 8550405,
name: 'New York City',
country: 'United States',
}, {
id: '5_3',
parentId: '5',
value: 3884307,
name: 'Los Angeles',
country: 'United States',
}, {
id: '5_4',
parentId: '5',
value: 2808503,
name: 'Toronto',
country: 'Canada',
}, {
id: '6',
name: 'South America',
}, {
id: '6_1',
parentId: '6',
value: 11895893,
name: 'São Paulo',
country: 'Brazil',
}, {
id: '6_2',
parentId: '6',
value: 8693387,
name: 'Lima',
country: 'Peru',
}, {
id: '6_3',
parentId: '6',
value: 7776845,
name: 'Bogotá',
country: 'Colombia',
}, {
id: '6_4',
parentId: '6',
value: 6429923,
name: 'Rio de Janeiro',
country: 'Brazil',
}];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const citiesPopulation = [
{
id: '1',
name: 'Africa',
},
{
id: '1_1',
parentId: '1',
value: 21324000,
name: 'Lagos',
country: 'Nigeria',
},
{
id: '1_2',
parentId: '1',
value: 9735000,
name: 'Kinshasa',
country: 'Democratic Republic of the Congo',
},
{
id: '1_3',
parentId: '1',
value: 9278441,
name: 'Cairo',
country: 'Egypt',
},
{
id: '2',
name: 'Asia',
},
{
id: '2_1',
parentId: '2',
value: 24256800,
name: 'Shanghai',
country: 'China',
},
{
id: '2_2',
parentId: '2',
value: 23500000,
name: 'Karachi',
country: 'Pakistan',
},
{
id: '2_3',
parentId: '2',
value: 21516000,
name: 'Beijing',
country: 'China',
},
{
id: '2_4',
parentId: '2',
value: 16787941,
name: 'Delhi',
country: 'India',
},
{
id: '2_5',
parentId: '2',
value: 15200000,
name: 'Tianjin',
country: 'China',
},
{
id: '3',
name: 'Australia',
},
{
id: '3_1',
parentId: '3',
value: 4840600,
name: 'Sydney',
country: 'Austraila',
},
{
id: '3_2',
parentId: '3',
value: 4440000,
name: 'Melbourne',
country: 'Austraila',
},
{
id: '4',
name: 'Europe',
},
{
id: '4_1',
parentId: '4',
value: 14160467,
name: 'Istanbul',
country: 'Turkey',
},
{
id: '4_2',
parentId: '4',
value: 12197596,
name: 'Moscow',
country: 'Russia',
},
{
id: '4_3',
parentId: '4',
value: 8538689,
name: 'London',
country: 'United Kingdom',
},
{
id: '4_4',
parentId: '4',
value: 5191690,
name: 'Saint Petersburg',
country: 'Russia',
},
{
id: '4_5',
parentId: '4',
value: 4470800,
name: 'Ankara',
country: 'Turkey',
},
{
id: '4_6',
parentId: '4',
value: 3517424,
name: 'Berlin',
country: 'Germany',
},
{
id: '5',
name: 'North America',
},
{
id: '5_1',
parentId: '5',
value: 8874724,
name: 'Mexico City',
country: 'Mexico',
},
{
id: '5_2',
parentId: '5',
value: 8550405,
name: 'New York City',
country: 'United States',
},
{
id: '5_3',
parentId: '5',
value: 3884307,
name: 'Los Angeles',
country: 'United States',
},
{
id: '5_4',
parentId: '5',
value: 2808503,
name: 'Toronto',
country: 'Canada',
},
{
id: '6',
name: 'South America',
},
{
id: '6_1',
parentId: '6',
value: 11895893,
name: 'São Paulo',
country: 'Brazil',
},
{
id: '6_2',
parentId: '6',
value: 8693387,
name: 'Lima',
country: 'Peru',
},
{
id: '6_3',
parentId: '6',
value: 7776845,
name: 'Bogotá',
country: 'Colombia',
},
{
id: '6_4',
parentId: '6',
value: 6429923,
name: 'Rio de Janeiro',
country: 'Brazil',
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#treemap {
height: 500px;
}
.city {
font-weight: 500;
}
Once you assign the data source, specify the valueField and labelField properties. If you specify these properties, the component can determine the object fields that indicate TreeMap labels and values in the collection. The default values for these properties are value
and name
, respectively. This demo uses default values, so there is no need to explicitly specify value and label fields.
You can simulate a hierarchical data structure with a plain data structure as shown in this demo. To implement this technique, specify the idField and parentField properties. This demo specifies idField: 'id'
and parentField: 'parentId'
, respectively.
For example, one group of objects in the demo data appears as follows:
xxxxxxxxxx
{
id: '3',
name: 'Australia',
}, {
id: '3_1',
parentId: '3',
value: 4840600,
name: 'Sydney',
country: 'Australia',
}, {
id: '3_2',
parentId: '3',
value: 4440000,
name: 'Melbourne',
country: 'Australia',
},
This group of objects produces a tile with the Australia label. The Australia tile has two nested tiles labeled Sydney and Melbourne.
To make the TreeMap more informative, you can specify a title and implement a tooltip.