All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
Vue

colorizer

Manages the color settings.

Type:

Object

There are several approaches to colorizing tiles.

  • Colorizing each tile uniquely into the color specified directly in the data object.
  • Colorizing tiles using the colorizer.
  • Specifying a single color for all tiles using the tile.color property.

If for some reason you cannot use the first approach, colorize tiles using the colorizer object. It offers three colorization algorithms: "discrete", "gradient" and "range". For more information on how to use each algorithm, refer to the type property description.

To find out how else you can colorize tiles, see the colorField and tile.color property descriptions.

View Demo

colorCodeField

Specifies the name of the data source field whose values define the color of a tile. Applies only if the type property is "gradient" or "range".

Type:

String

Default Value: undefined

When you use the "gradient" or "range" colorization algorithm, the color of a tile depends on a value. Normally, this value is provided by the value field. However, you can assign another field to provide this value using the colorCodeField property.

colorizeGroups

Specifies whether or not all tiles in a group must be colored uniformly. Applies only if the type property is "discrete".

Type:

Boolean

Default Value: false

When you use a discrete palette, each tile in a group gets a unique color. However, in some cases, you may need to colorize not individual tiles, but the whole groups in different colors. For this purpose, set the colorizeGroups property to true.

palette

Sets the palette to be used to colorize tiles.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

This property accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

Use the VizPalette enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet, and GreenMist.

When implementing a custom palette, take into account the type of a colorizer you use. The "discrete" type accepts an indefinite number of palette colors.

JavaScript
var treeMapOptions = {
    colorizer: {
        // ...
        type: 'discrete',
        palette: ['red', 'blue', 'green', 'yellow', ...]    
    }
}

But the "gradient" and "range" types require strictly two colors.

JavaScript
var treeMapOptions = {
    colorizer: {
        // ...
        type: 'gradient',
        palette: ['red', 'blue'],
        range: [0, 1000]
    }
}
See Also

paletteExtensionMode

Specifies what to do with colors in the palette when their number is less than the number of treemap tiles.

Type:

String

Default Value: 'blend'
Accepted Values: 'alternate' | 'blend' | 'extrapolate'

The following variants are available:

  • "blend"
    Create a blend of two neighboring colors and insert it between these colors in the palette.

  • "alternate"
    Repeat the full set of palette colors, alternating their normal, lightened, and darkened shades in that order.

  • "extrapolate"
    Repeat the full set of palette colors, changing their shade gradually from dark to light.

View Demo

Use the VizPaletteExtensionMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Blend, Alternate, and Extrapolate.

range

Allows you to paint tiles with similar values uniformly. Applies only if the type property is "gradient" or "range".

Type:

Array<Number>

Default Value: undefined

When you use the "gradient" colorization algorithm, assign an array of strictly two values to the range property. Tiles whose values fall into this range will have a tint of one of the two palette colors.

When you use the "range" colorization algorithm, assign an array of several values to the range property. For example, imagine that the array is [0, 1, 2, 3]. As a result, there will be three ranges: 0-1, 1-2, 2-3. Each of them will be assigned a color. The color of a tile will depend on the range its value fall into.

In both algorithms, the tiles that match neither range will have the color specified by the tile.color property.

type

Specifies the colorizing algorithm.

Type:

String

Default Value: undefined
Accepted Values: 'discrete' | 'gradient' | 'none' | 'range'

The TreeMap UI component provides three algorithms for tile colorization: "discrete", "gradient" and "range".

The "discrete" algorithm is the simplest of all. It paints each tile within a group in a color taken from the palette. When there are several groups, colorization begins from scratch in each. Alternatively, you can force the UI component to continue colorization across groups. For this purpose, set the colorizeGroups property to true. It will colorize not each tile, but each group of tiles in a single color taken from the palette.

If you choose the "gradient" algorithm, the palette should contain only two colors that will be used to colorize the smallest and the largest tile respectively. The other tiles will have a tint of either the first or the second color depending on their size. In order to use the "gradient" algorithm, you need to set the range property to an array of strictly two values. Tiles whose values fall out of the range will be painted in the color specified by the tile.color property.

JavaScript
var treeMapOptions = {
    colorizer: {
        // ...
        type: 'gradient',
        palette: ['red', 'blue'],
        range: [0, 1000]
    }
};

The "range" algorithm is similar to "gradient", but the array assigned to the range property should contain more than two values. For example, consider the following code.

JavaScript
var treeMapOptions = {
    colorizer: {
        // ...
        type: 'range',
        palette: ['red', 'blue'],
        range: [0, 300, 700, 1000]
    }
};

As a result, tile values will be split up into three ranges: 0 to 300, 300 to 700 and 700 to 1000. The palette of two colors will generate three tints - one for each range. Thus, tiles of the range 0 - 300 will be colored red, tiles of the range 700 - 1000 will be colored blue, and tiles of the range 300 - 700 - a color in between. Tiles whose values match neither range will be painted in the color specified by the tile.color property.

Use the TreeMapColorizerType enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Discrete, Gradient, Range, and None.