Free Trial Buy
    Your search did not match any results.
    Tree Map

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { 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, }, }]; const startColorization = colorizationOptions[2]; const treeMap = $('#treemap').dxTreeMap({ dataSource: salesAmount, title: 'Sales Amount by Product', valueField: 'salesAmount', tooltip: { enabled: true, format: 'currency', customizeTooltip(arg) { const { data } = arg.node; return { text: arg.node.isLeaf() ? (`<span class='product'>${data.name }</span><br/>Sales Amount: ${arg.valueText}`) : null, }; }, }, colorizer: startColorization.options, }).dxTreeMap('instance'); $('#colorization').dxSelectBox({ items: colorizationOptions, width: 200, value: startColorization, displayExpr: 'name', onValueChanged(data) { treeMap.option('colorizer', data.value.options); }, }); });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.1.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="treemap"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Colorization Type</span> <div id="colorization" class="selectbox"></div> </div> </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; }
    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, }], }];