Create d3 Collapsible Tree Chart

This article provides a step by step example of creating a d3 Collapsible Tree chart.

This type of JavaScript Chart is best suited for use with a report that contains data associated with a tree hierarchy. See example

1. Select Report

In this example the Product Category (e.g., wine, wine furniture, wine accessory) is the parent of the Product Subcategory (e.g., champagne, wine rack, bottle opener). Also, the Product Subcategory (e.g., wine rack) is the parent of the specific product (e.g., Bottle Wrought Iron Wine Jail). The first two columns describe this hierarchy using "parent" vs "child" terminology. In addition, note that the top level parent (root) of this hierarchy is signified by an empty value ("") in both the parent and child columns.

The name of the Product Category, Subcategory and Product will be displayed in the chart ("displayName") along with the total units sold ("displayValue") pertaining to that category, subcategory or product.

2. Adjust Display Name for chart columns

Display Names may be changed by clicking on the name in the Display Name column

Ensure that the Display Name for the columns that you will be charting do not contain spaces


3. Add the Chart

  1. Navigate to the Charts and Pivots tab
  2. Click the Add Chart button

4. Set Chart type

  1. Select d3 Collapsible Tree for Chart Type


5. Full Chart Editor Displays

Accept defaults or optionally change values for:

  1. Chart Name
  2. X-axis title
  3. Y-axis title


6. Adjust Custom Charting Variables

  1. Click the gear to edit each of the Custom Charting Variable Values to match the names of your columns
  2. Set the Value to the Display Name used in Step 2 above


NOTE: In this example, the query is written to return column names that match the Custom Charting Variable names exactly, therefore, the variables do not require any modification. (Refer to the first screen shot). In addition, the value returned for the top most "root" is the empty string ("") so the value for "rootValue" above is correct.


More information about Custom Charting Variables can be found here

7. Preview Chart

7.1. Review Chart

Upon successful review,

  1. Close Preview
  2. Update Live Report to complete the chart

8. Chart Displays in Report Viewer