Your search did not match any results.
Charts

Colorization

Documentation
The TreeMap widget 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 widget includes nine built-in palettes that ensure the superb appearance.
Apply
Reset
<div class="colorization-option"> Colorization Type: <dx-select-box #selectbox class="selectbox" [items]="colorizationOptions" [width]="200" [value]="colorizationOptions[2].options" displayExpr="name" valueExpr="options"></dx-select-box> </div> <dx-tree-map [dataSource]="salesAmount" title="Sales Amount by Product" valueField="salesAmount" [colorizer]="selectbox.value"> <dxo-tooltip [enabled]="true" format="currency" [customizeTooltip]="customizeTooltip"></dxo-tooltip> </dx-tree-map>
import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxTreeMapModule, DxSelectBoxModule } from 'devextreme-angular'; import { SalesAmount, Service } from './app.service'; interface ColorizationOption { name: string; options: any; } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service] }) export class AppComponent { salesAmount: SalesAmount[]; colorizationOptions: ColorizationOption[] = [{ 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 } }]; constructor(service: Service) { this.salesAmount = service.getSalesAmount(); } customizeTooltip(arg) { var data = arg.node.data; return { text: arg.node.isLeaf() ? ("<b>" + data.name + "</b><br/>Sales Amount: " + arg.valueText) : null }; } } @NgModule({ imports: [ BrowserModule, DxTreeMapModule, DxSelectBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ .colorization-option { line-height: 36px; margin-bottom: 10px; } /deep/ .colorization-option > .selectbox { display: inline-block; vertical-align: top; margin-left: 10px; line-height: normal; }
import { Injectable } from '@angular/core'; export interface SalesAmount { name: string; items: any; } let salesAmount: 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 }] }]; @Injectable() export class Service { getSalesAmount() { return salesAmount; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular 2 and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js', 'typescript': 'npm:typescript@2.0.6/lib/typescript.js', '@angular/core': 'npm:@angular/core@2.4.3/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@2.4.3/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@2.4.3/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.3/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.3/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@2.4.3/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@3.4.3/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@2.4.3/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.0.3', 'devextreme': 'npm:devextreme@16.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@16.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>