Configuring the Treemap

FusionCharts Suite XT lets you configure the functionality of your treemap. There are various ways in which you can customize your treemap—for example, you can set the tiling algorithm (decide how the chart will be divided into nodes), enable/disable the use of a navigation bar to traverse through the chart, set custom colors for the nodes, customize all the texts in the chart canvas, customize the data labels separately, set glowing effect and so on.

This treemap shows the global population by continent as of 2015 with their literacy rate.

In the above chart when a child node is clicked, the clicked node and its subtree replaces the current root node. For example, when any node under Southeast Asia Region is clicked, the chart view changes to what is shown in the image below:

Observe that all the parent nodes are visible in the navigation bar and you can switch to any of them directly by clicking them.

Given below is a brief description of the attribute used to render the treemap with a navigation bar :

Attribute Name

Description

showNavigationBar

This attribute displays the navigation bar which will either show the traversed path and will provide an ability to switch to any traversed parent in a click or a previous toolbar that only allows to go back one step or at root level.

Coloring the Treemap Data Plots

In a data-driven treemap, color ranges are used to define colors for data plots based on their values. For a treemap, data plot colors can be defined:

automatically, depending on the data value, using the colorRange object

manually, using the fillColor attribute

The data plot color in the sample treemap used so far is assigned using the colorRange object. The colorRange object is used to define the numeric ranges for the gradient legend. A color is then assigned to a data plot based on where the value of the sValue attribute falls within the numeric range.

Customizing Individual Data Plots

Given below is a brief description of attributes that can be used to customize individual data plots:

Attribute Name

Description

fillColor

Sets the hex code for the color to be used for the data plot. The fillColor attribute belongs to the data object.

fontColor

Sets the hex code for the color to be used for the data plot label. The fontColor attribute belongs to the data object.

Only the font color can be customized for individual data plots. Other font customizations like the font family or the font size are not available at the individual data plot level.

Customizing All Text Within the Chart Canvas

The base font customization attributes affect all text on the chart, including all the captions and sub-captions.

Given below is a brief description of the base font customization attributes:

Attribute Name

Description

baseFont

Sets the font family for the text

Note: The base font attributes affect all text on the chart, including all the captions and sub-captions.

baseFontSize

Sets the font size for the text

Note: The base font attributes affect all text on the chart, including all the captions and sub-captions.

baseFontColor

Sets the hex code for the text color

Note: The base font attributes affect all text on the chart, including all the captions and sub-captions.

Customizing Only the Data Labels

The label font customization attributes affect only the data labels.

Given below is a brief description of the label font customization attributes:

Attribute Name

Description

labelFont

Sets the font family for the label text

Note: The label font attributes affect only the data labels on the chart.

labelFontSize

Sets the font size for the label text

Note: The label font attributes affect only the data labels on the chart.

labelFontColor

Sets the hex code for the label text color

Note: The label font attributes affect only the data labels on the chart.

labelFontBold

Set this attribute to 1 to enable bold formatting for the label text, set it to 0 (default) to disable it.

Note: The label font attributes affect only the data labels on the chart.

labelFontItalic

Set this attribute to 1 to render label text in italics, set it to 0 (default) to render it in normal formatting.

Note: The label font attributes affect only the data labels on the chart.

Applying the Glow Effect to Data Labels

The glow effect in treemap labels is the application of background color to the data labels, in a color different from the labelFontColor.

The glow effect is useful when the data label font color and the rectangle fill color is the same or similar, especially when the chart is rendered with a gradient legend.