JavaScript/jQuery TreeMap - colorizer

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

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.

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.

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

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG 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.

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

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

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

See Also

• Palettes
• colorizer.paletteExtensionMode
• DevExpress.viz.generateColors(palette, count, options)

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.

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.

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.

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.

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.