chart types treemap

Treemap chart

• This section describes how to create treemap chart with options.
• You can refer to the Getting started for base installation of Toast UI Chart.

---

Data type

Treemap chart use the tree data with a hierarchy.

Treemap data type

var rawData = {
    series: [
        {
            label: 'Documents',
            children: [
                {
                    label: 'docs',
                    children: [
                        {
                            label: 'pages',
                            value: 1.3
                        },
                        {
                            label: 'keynote',
                            value: 2.5
                        }
                    ]
                },
                {
                    label: 'photos',
                    value: 5.5
                }
            ]
        }, {
            label: 'Desktop',
            value: 4.5
        }
    ]
};

---

Creating a basic chart

A treemap chart is graphical representation of hierarchical data by using rectangles.

Example

tui.chart.treemapChart(container, rawData);

• Sample

---

Using zoomable option

If you want represent information of child node in data tree to screen, you can use zoomable option.

var options = {
    series: {
        zoomable: true // default value is true
    }
}
tui.chart.treemapChart(container, rawData, options);

• Sample

Using useLeafLabel option

If you use useLeafLabel option, you can represent label of leaf node in data tree.

var rawData = {
    series: [
        {
            label: 'Documents',
            children: [
                {
                    label: 'docs',
                    children: [
                        {
                            label: 'pages',
                            value: 1.3
                        },
                        //...
                    ]
                },
                {
                    label: 'photos',
                    value: 5.5
                },
                //...
            ]
        },
        //...
    ]
};
var options = {
    series: {
        zoomable: false,
        useLeafLabel: true // if zoomable option is false, default value is true
    }
}
tui.chart.treemapChart(container, rawData, options);

• Sample

---

Using colorValue property and useColorValue option

value data is representing to size, but colorValue data is representing to color.
If you apply colorValue property, you can use useColorValue option.

var rawData = {
    series: [
        {
            label: 'Asia',
            children: [
                {
                    label: 'South Korea',
                    value: 99909,
                    colorValue: 499.81
                },
                {
                    label: 'Japan',
                    value: 364485,
                    colorValue: 335.61
                },
                //...
            ]
        }
    ]
};
var options = {
    series: {
        useColorValue: true
        zoomable: false, // if useColorValue option is true, default value is false
        useLeafLabel: true  // if zoomable option is false, default value is true
    }
}
tui.chart.treemapChart(container, rawData, options);

• Sample