Skip to content

Tree Map

The Tree Map chart provides a hierarchical view of your data and makes it easy to spot patterns, such as which items are a store's best sellers. The tree branches are represented by rectangles and each sub-branch is shown as a smaller rectangle. The Tree Map displays categories by color and proximity and can easily show lots of data which would be difficult with other chart types. Tree Map charts are good for comparing proportions within the hierarchy. However, Tree Map charts aren't great at showing hierarchical levels between the largest categories and each data point.

The following code shows how to create a simple Tree Map using the ChartFactor Toolkit:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    // Define the metrics to be used
    var metric = cf.Metric("commission", "sum")

    // define attribute to group by
    var group = [
        cf.Attribute("city.keyword")
        .limit(10)
        .sort("desc", metric;
    var myChart = cf.provider('Elasticsearch')
        .source('ticket_sales')
        .groupby(group)
        .metrics(metric)
        .graph('Tree Map')
        .element('chart');

Previous code will render a Tree map like follow:

Tree_Map

Serie label

The metric value (serie label) for each tile of the Tree Map is not visible by default. Please refer to the serie label documentation in the visualization options section for details on how to configure them.

Note

The formatter option in serie label doesn't take effect on Tree Map charts

The Tree Map breadcrumbs show the path to the currently selected element. You can use the breadcrumbs property to hide these breadcrumbs or to configure how breadcrumbs should show. The value of the breadcrumbs property can be a string, boolean or object and you can set it using the .set() function. See the examples below.

1
2
3
4
5
6
    // string type
    .set("breadcrumbs", "false")
    // boolean type
    .set("breadcrumbs", false)
    // object type
    .set("breadcrumbs", { show: false})

When using the object type, you can also set lots of additional properties as specifyed in the Echarts documentation for breadcrumbs.

The following code shows how to configure breadcrumbs using an object to specify several properties such as border color and text styles:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
let provider = cf.provider("Elasticsearch");
let source = provider.source('chicago_taxi_trips');
// Define metrics
let metric0 = cf.Metric("count");
// Define attributes to group by
let group1 = cf.Attribute("community_areas")
    .limit(10)
    .sort("desc", cf.Metric());
// Add metrics and groups to data source
let myData = source.groupby(group1)
                   .metrics(metric0);
// Define Color Palette
let color = cf.Color()
              .palette(["#0095b7", "#a0b774", "#f4c658",
                        "#fe8b3e", "#cf2f23", "#756c56",
                        "#007896", "#47a694", "#f9a94b",
                        "#ff6b30", "#e94d29", "#005b76"
                       ]);

let myChart = myData.graph("Tree Map")
    .set("color", color)
    .set("breadcrumbs", { 
        show: true, 
        left: 'center',
        top: 'top',
        itemStyle: {
            borderColor: "rgba(4, 4, 4, 0.82)",
            borderType: "solid",
            color: "rgba(188, 3, 15, 1)",
            borderWidth: 2,
            textStyle: {
                fontStyle: "italic",
                fontFamily: "monospace",
                fontSize: 13
            }
        }
    })
    .execute();

Previous code will render a Tree map with the breadcrumbs configured like follow:

Tree_Map_Breadcrumbs