Treemaps
Note: See our Treemap Gallery for inspiration on all the different treemap chart possibilities.
Treemap Chart Type
To specify the chart type, add a type
attribute to the chart object. Our standard treemap chart is specified by the treemap
value.
{ type: 'treemap', }
Data Format
Treemap charts support data in the form of a series
array of objects. Unlike other JS charts, JavaScript treemaps use the children
array to define the hierarchy and the value
attribute to define the associated data.
{ series: [ // Array of objects { text:(Parent1), // String children: [ // Array of objects { text:(Parent1 -> Child1), // String value:val1 // Number }, { text:(Parent1 -> Child2), // String children: [ // Array of objects { text:(Parent1 -> Child2 -> Child1), // String value:val1 //Number } ] } ] } ] }

Chart-Specific Properties
Treemaps include a number of unique chart-specific properties that allow you to manipulate its appearance and behaviors. They can be implemented into your chart by placing them within the options
object.
Aspect Type
Use the aspect-type
attribute to style the chart's rectangles.
Random
Setting 'aspect-type': "random"
lets the library choose a random color pallette to display each time the chart renders. This is the default for treemap charts so setting this value is optional.
{ options: { 'aspect-type': "random" } }

Color Start/End
The color-start
attribute sets the starting color of the color transition used when aspect-type
is set to transition
. The color-end
attribute sets the ending color of the color transition used when aspect-type
is set to transition
.
{ options: { 'aspect-type': "transition", 'color-start': "#c00", 'color-end': "#300" } }

Palette
The palette
attribute defines a custom palette used if aspect-type
is set to palette
. It can hold an array of strings representing colors or an array of objects having various styling attributes, such as complex background colors, background images, or gradient definitions.
{ options: { 'aspect-type': "palette", palette: [ "#c98411", "#281300", "#991e00", "#470000", "#ff921f", "#feb950", "#704700", "#8a773c" ] } }

Box
The box
attribute sets the styling for the treemap boxes (nodes).
{ options: { box: { 'border-color': "red" } } }

Hover State
The hover-state
attribute sets the styling for the hover-state of the boxes (nodes).
{ options: { 'hover-state': { alpha:1, 'background-color': "black" } } }

Split Type
The split-type
attribute sets the splitting algorithm that draws the treemap. Changing this will adjust how the treemap displays the boxes. Set to balanced
by default, you can change the value to: horizontal
, vertical
, balancedv2
, squarify
, squarifyv2
, random
, or alternate
.
{ options: { 'split-type': "alternate" //balanced (default), balancedv2, horizontal, vertical, squarify, squarifyv2, random, alternate }, }

Alpha Aspect
The alpha-aspect
attribute sets whether alpha will also be applied on the nodes based on the value-aspect
values. Enter a value of true
or false
.
{ options: { alpha-aspect: true } }

Min Alpha
The min-alpha
attribute sets the minimum value of the alpha applied to the nodes if alpha-aspect
is set to true.
{ options: { alpha-aspect: true, min-alpha:0.2, } }

Max Children
The max-children
attributes sets the maximum number of children each node can have.
{ options: { 'max-children': [8,2,4] } }

Max Depth
The max-depth
attribute sets the maximum depth. Child nodes with levels higher than this setting will be ignored.
{ options: { 'max-depth':2 } }

Further Customization
JavaScript Rules
Define a function that returns an object containing styling attributes to be applied to each node.
{ options: { 'aspect-type': "myfunc()" } }

Tooltip Box
The tooltip-box
attribute sets the styling for the tooltip that appears over the final nodes (without children).
{ options: { 'tooltip-box': { 'background-color': "red", 'text-align': "left" } } }

Tooltip Group
The tooltip-group
attribute sets the styling for the tooltip that appears over the nodes that have at least one child.
{ options: { 'tooltip-group': { 'background-color': "red", 'text-align': "left" } } }

Summary
Have questions about how treemap charts work? We're happy to help! Email support@zingchart.com or start a chat right here on this page for support.