Visualizing Hierarchical Data with a JavaScript Treemap Chart

What is a Treemap Chart and When to Use It

A treemap chart is a useful visualization tool that provides a hierarchical view of numerical data in a clear and compact way. It commonly consists of nested rectangles (also called nodes or tiles) of various sizes and colors helping to break down data into different categories. Treemap charts are very helpful in cases when you need to represent data with a part-to-whole relationship.

Why Building a JavaScript Treemap Chart with DHTMLX

With DHTMLX Chart in your development stack, you can add a JavaScript treemap chart and other popular chart types to your project with minimum time and effort. The list of available charts also includes pie, 3D pie, donut, scatter, line, spline, stacked, area, spline area, bar, X-bar, and radar charts.

Material Design

Google’s Material Design guidelines have become an important ingredient for creating a modern user interface. The design of all widgets included in the DHTMLX Suite library is based on Material style. So with our JavaScript chart library, you won’t have to worry about ensuring a consistent user experience across different platforms, environments, and screen sizes.

Enhanced Customizability

DHTMLX Chart gives you the freedom to realize your own vision on the look and feel of charts by creating your own CSS classes with custom settings.

  • by value range.
const chart = new dhx.Chart("chart_container",{
type: "treeMap",
series: [
//series config
],
legend: {
treeSeries: [
// setting the color for each group, related tiles and legend
{ id: "2021", color: "#2A9D8F" },
{ id: "2020", color: "#78586F" },
{ id: "2019", color: "#E76F51" },
{ id: "2018", color: "#E5A910" },
{ id: "2017", color: "#11A3D0" },
],
halign: "right",
valign: "top",
}
});
<script>
const treeMapData = [
{ id: "2021", name: "2021" },
{ id: "100", value: 50, name: "Outsourcing team", parent: "2021" },
{ id: "101", value: 100, name: "Product team", parent: "2021" },
{ id: "102", value: 10, name: "QA team", parent: "2021" },
{ id: "2020", name: "2020" },
{ id: "200", value: 32, name: "Outsourcing team", parent: "2020" },
{ id: "201", value: 4, name: "QA team", parent: "2020" },
{ id: "202", value: 35, name: "Product team", parent: "2020" },
……// more data
];
</script>
  • less or greater for a range limited by one number
const chart = new dhx.Chart("chart_container",{
type: "treeMap",
series: [
//series config
],
legend: {
type: "range",
treeSeries: [
{ greater: 60000, color: "#237396" },
{ from: 50000, to: 60000, color: "#2780A8" },
{ from: 20000, to: 50000, color: "#3892A3" },
{ from: 6000, to: 20000, color: "#4DA3A0" },
{ less: 20000, color: "#67BF99" },
],
halign: "right",
valign: "top",
}
});

Configuration Options

Before you start adjusting the treemap chart settings to your needs, it is important to take into account the following rules:

  • if the value of one tile is less than approximately 0.5% of the sum of all other values displayed in the treemap chart, it will be barely distinguishable after rendering.
const chart = new dhx.Chart("chart_container",{
type: "treeMap",
series: [
{
value: "value",
text: "name",
direction: "desc", // the arrangement of tiles: "desc" (by default) | "asc"
},
],
legend: {
// legend config
}
});
const chart = new dhx.Chart("chart_container",{
type: "treeMap",
series: [
//series config
],
legend: {
treeSeries: [
// list of treeSeries
],
halign: "right",
valign: "top",
direction: "row", // "row" (by default) | "column"
}
});

Conclusion

As you can see, DHTMLX Chart provides everything you need to speed up the implementation of a treemap chart in JS and adjust it to the requirements of your web application.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store