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.

Show Example:
AngularJS
Knockout
jQuery

In this example, each data source object has two fields providing numeric values. You can assign one of these fields to the colorCodeField option at runtime using the select box under the treemap. Note that the range option will be changed also, because different color code fields require different value ranges.


                                    

                                    

                                    

In this example, each data source object has two fields providing numeric values. You can assign one of these fields to the colorCodeField option at runtime using the select box under the treemap. Note that the range option will be changed also, because different color code fields require different value ranges.


                                    

                                    

                                    

In this example, each data source object has two fields providing numeric values. You can assign one of these fields to the colorCodeField option at runtime using the select box under the treemap. Note that the range option will be changed also, because different color code fields require different value ranges.


                                    

                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the treemap to change the value of the colorizer.colorizeGroups option.


                                    

                                    

In this example, click the check box under the treemap to change the value of the colorizer.colorizeGroups option.


                                    

                                    

In this example, click the check box under the treemap to change the value of the colorizer.colorizeGroups option.


                                    

                                    

palette

Sets the palette to be used for colorizing tiles.

Type: Array|String
Default Value: 'Default'
Accepted Values: 'Default' | 'Soft Pastel' | 'Harmony Light' | 'Pastel' | 'Bright' | 'Soft' | 'Ocean' | 'Vintage' | 'Violet'

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

If the number of tiles is greater than the number of colors in the palette, the colors are repeated with slight modification.

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

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]
    }
}

When using the widget as an ASP.NET MVC Control, you can specify this option using the VizPalette enum. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage and Violet.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the applied palette using the select box under the treemap.


                                    

                                    

                                    

In this example, you can change the applied palette using the select box under the treemap.


                                    

                                    

                                    

In this example, you can change the applied palette using the select box under the treemap.


                                    

                                    

                                    

range

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

Type: Array
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.

Show Example:
AngularJS
Knockout
jQuery

In this example, tiles are colored using the "gradient" colorization algorithm. It requires the range option to be set. You can change the value of this option at runtime using the range slider under the treemap.


                                    

                                    

                                    

In this example, tiles are colored using the "gradient" colorization algorithm. It requires the range option to be set. You can change the value of this option at runtime using the range slider under the treemap.


                                    

                                    

                                    

In this example, tiles are colored using the "gradient" colorization algorithm. It requires the range option to be set. You can change the value of this option at runtime using the range slider under the treemap.


                                    

                                    

                                    

type

Specifies the colorizing algorithm.

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

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.

When using the widget as an ASP.NET MVC Control, you can specify this option using the TreeMapColorizerType enum. This enum accepts the following values: Discrete, Gradient, Range and None.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the applied colorization type using the select box under the treemap.


                                    

                                    

                                    

In this example, you can change the applied colorization type using the select box under the treemap.


                                    

                                    

                                    

In this example, you can change the applied colorization type using the select box under the treemap.