Skip to main content
Version: 6.1.2

TreeMap Chart

Apart from high performance data visualization features, LightningChart JS also includes commonly needed standard features, such as TreeMap charts:

TreeMap chart TreeMap chart

// Creation of TreeMap chart
const treeMapChart = lc.TreeMapChart()

Adding data​

const data = [
    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 },
    ],
]
treeMapChart.setData(data)

Node Drilling​

The TreeMap chart allows users to drill down into specific nodes by clicking on them. This feature can be enabled or disabled using the setDrillDownEnabled method.

treeMapChart.setDrillDownEnabled(false)

Programmatically Drilling Down​

The setDrillDownNode method allows you to focus on and render a specific node within the TreeMap. This is particularly useful when dealing with hierarchical data, as it enables a more detailed exploration of subsets of the data. To use this feature, you must first set your data using the setData method. Here’s an example:

const data = [{
    name: 'Level 1',
    children: [
        { name: 'Level 1.1', value: 5 },
        { name: 'Level 1.2', value: 10 },
        { name: 'Level 1.3', children: [
           { name: 'Level 1.3,1', value: 10},
            {name: 'Level 1.3.2', value:  5}
        ] },
    ],}
]

treeMapChart.setData(data)
treeMapChart.setDrillDownNode(data[0].children[2])

Displayed Levels Count​

The setDisplayedLevelsCount method allows you to control the number of levels of children nodes to display in the TreeMap.

treeMapChart.setDisplayedLevelsCount(2)

Initial Path Button Text​

The setInitPathButtonText method allows you to set the text for the back button that returns the view to the first level of nodes.

treeMapChart.setInitPathButtonText('Reset')

Animation​

The setAnimationValues method allows you to enable or disable the animation of nodes' positions and adjust the animation speed.

// Example, enable category position animation and increase speed.
treeMapChart.setAnimationValues(true, 2)

// Disable animation
treeMapChart.setAnimationValues(false)

Disable animations​

const treeMapChart = lc.TreeMapChart({ animationsEnabled: false })

Node colors​

The setNodeColoring method allows you to specify a set of colors to be used for the nodes in the TreeMap.

In this example, the TreeMap nodes will cycle through the colors red, green, and blue.

treeMapChart.setNodeColoring([ColorCSS('red'), ColorCSS('green'), ColorCSS('blue')])

Node colors by value​

The setNodeColoring method can also be used to color nodes based on their values.

treeMapChart.setNodeColoring(
     new PalettedFill({
         lut: new LUT({
             steps: [
                 { value: 0, color: ColorCSS('red') },
                 { value: 20, color: ColorCSS('blue') },
             ],
             interpolate: true,
         }),
     }),
)

Node user interactions​

User interactions on each node can be tracked individually:

treeMapChart.nodes.addEventListener('click', (event, node) => {
    console.log(node)
})

Chart title​

treeMapChart
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/styles-colors-and-fonts).

Background style​

TreeMapChart has 2 different levels of backgrounds:

  • Chart background (entire chart area)
  • Engine background (additional background shared by entire engine)
    • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.
treeMapChart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
treeMapChart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/styles-colors-and-fonts).

Space around chart​

treeMapChart.setPadding({ left: 10, right: 10, top: 10, bottom: 10 })

Cursors​

Please see common Cursors](/6.1.2/features/cursor) section.

Legend​

Please see common Legend](/6.1.2/features/legend) section.

Positioning charts​

Please see common Positioning charts](/6.1.2/more-guides/positioning-charts) section.

Color themes​

Please see common Color themes](/6.1.2/more-guides/themes) section.