LightningChart JSHow to Create a powerful JavaScript Treemap Visualization in 2024 with LightningChart JS
TutorialCreate a Treemap in JavaScript for categorical data visualization.
Written by a human | Updated on April 23rd, 2025
JS Treemap Chart
Today we will create a JS treemap chart using LightningChart JS. This exercise will be quick and quite easy and, conveniently, LightningChart JS will take care of the heavy lifting of the coding, so we only focus on assigning the data to the chart. In this exercise, we will work with Node JS and version 5.2 of LightningChart JS. I recommend that you do not skip the LightningChart JS installation section.
You should keep in mind that you will need to get an LC JS license too (free!), if you have any questions, you can contact our support team for more information. Before starting with the code, it is worth looking at some theory behind the JS treemap chart.
Tree Mapping Charts
Tree mapping charts are a form of visualization in which the structure is represented hierarchically by nesting rectangles. It is useful to identify data patterns as tree branches are described in a rectangle in size according to the data volume.
This idea was born from computer scientist Ben Shneiderman who was trying to create a way to view an extensive file directory that he had on a computer, and that would not take up so much space on the screen. This helped improve the space, making it easier to read and understand.
When to use the Tree Mapping graph?
In Ben’s case, we can think about this chart when we have a huge amount of data to display and organize. Its branches and subbranches make it easier for us to compare and categorize patterns. In this chart we can have layers, which subcategorize the data categories, allowing n levels of information to be displayed without ceasing to be related.
Treemap Graph Characteristics
One of the aspects of treemap graphs is the color themes and how these colors are directly related to the data represented. In other words, we can start from a scale of very light colors as the first level and descend towards darker colors. Leaving the viewer to concentrate on the lighter colors. A second characteristic is the rectangles (a.k.a. branches or nodes). The larger the rectangle, the greater the amount of data it represents.
Also, a node can be subcategorized, giving it the name of a “leaf”. The way these nodes are arranged goes from the upper left corner of the chart, moving to the lower right corner:
How to read a treemap chart.
As the last and third characteristic we have the hierarchy, thus representing the layers that we can find within the chart. Layers may be represented when classifying primary data with secondary data, nesting the rectangles forming hierarchical levels, and forming groups and subgroups on the map.
The treemap chart is often useful in representing a large amount of outlier data within a limited space, showing trends and subgroups containing a category, colors, and sizes that make identifying patterns much easier.
This chart is useful for a client portfolio analysis, e.g., to see market segmentation in geographic areas or financial analysis that helps with showing different stock brands, exchange rates, etc. Well, having read this, we can start working on our project!
Project Overview
The following JavaScript TreeMap chart was recently introduced in LightningChart v.5.2 and is an interactive treemap graph with different UI features that make it feel like a more robust treemap standalone application than just another treemap in JavaScript.
Download the project to follow the tutorial
Template Setup
1. Download the template provided to follow the tutorial.
2. After downloading the template, you’ll see a file tree like this:
3. Open a new terminal and run the npm install command
CHART.ts
I advise you to check the most recent versions of LightningChart JS and XYData. I recommend that you review the most recent versions and update them. This is because some LightningChart JS tools do not exist in previous versions. In the Treemap in JavaScript project’s package.json file you can find the LightningChart JS dependencies:
"dependencies": {
"@arction/lcjs": "^5.1.0",
"@arction/xydata": "^1.4.0",
"webgl-obj-loader": "^2.0.8",
}1. Importing libraries
To begin with this JS treemap project, we will start by importing the necessary libraries to create our chart.
// Import LightningChartJS
const lcjs = require('@arction/lcjs')
const { lightningChart, BarChartSorting, LegendBoxBuilders, Themes } = lcjs2. Add license key (free)
Once the LightningChart JS libraries are installed, we will import them into our chart.ts file. Note you will need a trial license, which is free. We would then add it to a variable that will be used for creating the JS treemap chart object.
let license = undefined
try {
license = 'xxxxxxxxxxxxx'
} catch (e) {}3. Properties
}).TreeMapChart({
theme: Themes.turquoiseHexagon,
})–TreeMapChart: this class is for visualizing the treemap in JavaScript.
– Theme: defines the look and feel of your JS treemap chart. Note that you must specify the color theme of the chart components beforehand.
– setTitle: sets the name at the top of the chart.
Creating Dataset
setData method, which requires an array with TreeMapUserNodes, which are nodes with the values name and value data.treeMap.setData([
{ name: 'Category 1', value: 10},
{ name: 'Category 2', value: 12},
{ name: 'Category 3', children: [
{ name: 'Category 3.1', value: 6},
{ name: 'Category 3.2', value: 12},
]},
])These nodes can have more nested nodes, generating a much more complex treemap. In the code of our chart, we can find nested arrays:
{
name: 'TECHNOLOGY',
children: [
{ name: 'MSFT', value: 60.34 },
{ name: 'AAPL', value: 52.75 },
{ name: 'ORCL', value: 31.25 },
{ name: 'ADBE', value: 81.71 },
{ name: 'NVDA', value: 252.82 },
{ name: 'AVGO', value: 104.86 },
{ name: 'CRM', value: 104.83 },
{ name: 'INTU', value: 66.01 },
],
},
{
name: 'COMMUNICATION SERVICES',
children: [
{ name: 'GOOG', value: 63.0 },
{ name: 'META', value: 206.14 },
{ name: 'NFLX', value: 75.84 },
{ name: 'DIS', value: 7.27 },
],
},Basically, you would need a source that delivers a JSON object with the format used in this example, and with the help of the setData method, the hierarchies in our chart would be created.
Conclusion
Finally, to run the treemap in JavaScript, you’ll just need to open up a new terminal and run the NPM START command and you’ll be able to visualize the JS treemap chart application on your local server, usually HTTP://localhost:8080/
Although the treemap chart seems to be too simple to create, it does not minimize its importance for analyzing hierarchical data. This type of chart allows us to identify the relationship and patterns of two or more elements located in a set of data grouped by categories.
It is much easier to identify the importance and rank of each layer within this map, thanks to the use of boxes or rectangles whose dimension represents the number of values per layer. When I was reading about the JS treemap, I read that making these charts can be quite complex and, in some cases, imprecise.
Typically, this type of map requires software that allows maps to be generated based on exact calculations, considering that the dimensions must be precise not to affect the real dimensions of each layer and category.
This is where LightningChart JS helps us with the most difficult job, since we only need to provide the numerical values per layer/category so that it generates the map immediately. Obviously, we must be very careful with the structure of our nodes since a structure with errors can prevent our map from being generated.
Although it was a simple development, it is nice to know that the implementation of this JS treemap and other chart types of charts can be carried out simply thanks to LC JS. Remember that we have a wide variety of tutorials and articles to help you create your own projects.
Also remember that you can download all the templates and experiment with them. Thank you!
Omar Urbano
Software Engineer
Continue learning with LightningChart
How to Create a Strip Chart
Written by a human | Updated on April 9th, 2025What is a Strip chart application and what are the modern equivalents to it? Before computers exist or were taking their first steps, a Strip chart was a way to visualize an analog electrical signal. Voltage was...
Data Visualization Template for Electron JS | LightningChart®
Updated on April 4th, 2025 | Written by humanAre you already building cross-platform applications with Electron JS? In some of our previous articles, we’ve worked on TypeScript projects where we created pie charts and vibration chart applications. And as we...
Bar chart race JavaScript
Updated on April 14th, 2025 | Written by humanBar chart race JavaScript When I wrote this article, the COVID-19 pandemic was at its peak point. Today, things are much better thanks to vaccinations that continued their steady positive global effect. With this bar...
If you have any questions, feel free to contact us!
©LightningChart Ltd 2026. All rights reserved.