Skip to main content

Viz - Tree

First Steps

Add dimensions to the Nodes mark cards. To customize the width of the tree, add a measure to the Detail mark card. See the customization options below.

Marks card

Data Format

The data can be hierarchical or in a source/target format.

Customization

Click the format extension button in the mark card to customize the Tree. Three methods are available:

  • Direct: Enter a value directly in the window.
  • Parameter: Select a parameter; its value defines the characteristic.
  • Field: Select a field in the sheet; its values define the element aspects.
NameDefaultAccepted ValuesAdditional Information
background colorwhiteHTML names, hexadecimal, rgb. See color names and codesEx: LightBlue, #ADD8E6, rgb(173, 216, 230).
highlight colorredHTML names, hexadecimal, rgb
widthnoneField valueWidth of the tree diagram.
data colornoneHTML names, hexadecimal, rgb
palettenonetableau 10, tableau 20, colorblind, seattle grays, traffic light, miller stone, superfishel stone, nuriel stone, jewel bright, summer, winter, green-orange-teal, red-blue-brown, purple-pink-gray, hue circle
depth3NumberNumber of layers displayed by default in the tree diagram.
save statefalsetrue, falseIf true, the tree state (if the nodes are open or closed) is saved when the dashboard is closed and restored when reopened.
radial00, 180, 360
orientationeasteast, north, south, west
font size14NumberThe font size of the value are always 2px thinner than the selected font size.
node padding30/70NumberIf the orientation is south or north, the pading is set to 70 by default.
node size3Number
node stroke width1.5NumberWidth of the circle if no field is selected for Width customization.
link colorparentparent, child, none
link width1.5NumberWidth of the link if no field is selected for Width customisation.
proportional labelsfalsetrue, false
hide inter/Mediate labelsfalsetrue, false
display valuesfalsetrue, false

Example

Watch this tutorial video to learn how to create a Tree chart with the Sample - Superstore datasource:

After adding the extension, add data to the Nodes mark cards.

You can further customize the Tree. In this example, a calculated field changes the node color. Add the calculated field to the Detail mark card. Add the Sales measure to customize the tree width. The background is set using the direct method. Set the link color to "child."

Highlight part of the Tree by clicking a node. Double-click a node to display its children.

Watch this video to see how to display a radial tree and show the values of each node.