Colorization
Documentation
The TreeMap component provides a flexible system of tile colorization. You can assign colors to tiles depending on their values or the group they belong to. If colors are specified in your data source, you can use them as well. Finally, the TreeMap includes nine built-in palettes that ensure the superb appearance.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import TreeMap, { Tooltip } from 'devextreme-react/tree-map';
import SelectBox from 'devextreme-react/select-box';
import { salesAmount, colorizationOptions } from './data.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
typeOptions: colorizationOptions[2].options,
};
this.setType = this.setType.bind(this);
}
render() {
return (
<React.Fragment>
<TreeMap
id="treemap"
dataSource={salesAmount}
title="Sales Amount by Product"
valueField="salesAmount"
colorizer={this.state.typeOptions}
>
<Tooltip
enabled={true}
customizeTooltip={customizeTooltip}
format="currency"
/>
</TreeMap>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Colorization Type </span>
<SelectBox
dataSource={colorizationOptions}
displayExpr="name"
valueExpr="options"
width={200}
value={this.state.typeOptions}
onValueChanged={this.setType}
/>
</div>
</div>
</React.Fragment>
);
}
setType(data) {
this.setState({
typeOptions: data.value,
});
}
}
function customizeTooltip(arg) {
const { data } = arg.node;
return {
text: arg.node.isLeaf() ? `<span class='product'>${data.name}</span><br/>Sales Amount: ${arg.valueText}` : null,
};
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
<!DOCTYPE html>
<html>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.product {
font-weight: 500;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
export const colorizationOptions = [{
name: 'Discrete',
options: {
type: 'discrete',
palette: 'Harmony Light',
colorizeGroups: false,
},
}, {
name: 'Grouped',
options: {
type: 'discrete',
palette: 'Harmony Light',
colorizeGroups: true,
},
}, {
name: 'Range',
options: {
type: 'range',
palette: ['#fbd600', '#78299a'],
range: [0, 50000, 100000, 150000, 200000, 250000],
colorCodeField: 'salesAmount',
colorizeGroups: false,
},
}, {
name: 'Gradient',
options: {
type: 'gradient',
palette: ['#fbd600', '#78299a'],
range: [10000, 250000],
colorCodeField: 'salesAmount',
colorizeGroups: false,
},
}];
export const salesAmount = [{
name: 'Monitors',
items: [{
name: 'DesktopLCD 19',
salesAmount: 23420,
}, {
name: 'DesktopLCD 21',
salesAmount: 113900,
}, {
name: 'DesktopLED 19',
salesAmount: 49170,
}, {
name: 'DesktopLED 21',
salesAmount: 81200,
}],
}, {
name: 'Projectors',
items: [{
name: 'Projector Plus',
salesAmount: 99000,
}, {
name: 'Projector PlusHD',
salesAmount: 152250,
}],
}, {
name: 'Televisions',
items: [{
name: 'SuperLCD 55',
salesAmount: 147150,
}, {
name: 'SuperLCD 42',
salesAmount: 103200,
}, {
name: 'SuperLCD 70',
salesAmount: 56000,
}, {
name: 'SuperLED 42',
salesAmount: 159500,
}, {
name: 'SuperLED 50',
salesAmount: 233600,
}, {
name: 'SuperPlasma 50',
salesAmount: 184800,
}, {
name: 'SuperPlasma 65',
salesAmount: 178500,
}],
}, {
name: 'Video Players',
items: [{
name: 'HD Video Player',
salesAmount: 63690,
}, {
name: 'SuperHD Video Player',
salesAmount: 74000,
}],
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'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@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@21.2.7/cjs',
'devextreme-react': 'npm:devextreme-react@21.2.7',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.14/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.47/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.0.13/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@2.3.14',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// 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',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@2.3.14/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);