Angular TreeMap - colorizer

Manages the color settings.

Selector: dxo-colorizer
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>

|

Palette

Default Value: 'Material'

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

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.

Default Value: 'blend'

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

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.

Default Value: undefined

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.