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 option.

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 option description.

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

View Demo Watch Video

colorCodeField

Specifies the name of the data source field whose values define the color of a tile. Applies only if the type option 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 option.

colorizeGroups

Specifies whether or not all tiles in a group must be colored uniformly. Applies only if the type option 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 option 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 option 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 option when the widget is used as an ASP.NET MVC 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.

Use the VizPaletteExtensionMode enum to specify this option when the widget is used as an ASP.NET MVC 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 option 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 option. 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 option. 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 option.

type

Specifies the colorizing algorithm.

Type:

String

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

The TreeMap widget 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 widget to continue colorization across groups. For this purpose, set the colorizeGroups option 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 option 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 option.

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 option 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 option.

Use the TreeMapColorizerType enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Discrete, Gradient, Range, and None.