const lcjs = require('@lightningchart/lcjs')

const { lightningChart, Themes } = lcjs

const chart = lightningChart().TreeMapChart({
    legend: { visible: false },
    // theme: Themes.darkGold
})
chart.setTitle('Sector Distribution of Leading Global Companies')
chart.setData([
    {
        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 },
        ],
    },
    {
        name: 'CONSUMER CYCLICAL',
        children: [
            { name: 'AMZN', value: 85.7 },
            { name: 'TSLA', value: 120.46 },
            { name: 'MCD', value: 11.84 },
            { name: 'HD', value: 9.76 },
        ],
    },
    {
        name: 'FINANCIAL',
        children: [
            { name: 'V', value: 27.01 },
            { name: 'JPM', value: 28.42 },
            { name: 'BAC', value: 12.75 },
            { name: 'BRK-B', value: 17.54 },
        ],
    },
])

JavaScript TreeMapChart - Editor

treemap

Simple overview of a TreeMap chart.

This type of chart is particularly useful for presenting hierarchical data in a way that's easy to understand at a glance. It can be used for financial analysis, showing market trends, or comparing the size and performance of companies within and across sectors, for example.

This chart is interactive, enabling users to click on node to drill down for more detailed information.

Below is a sample snippet for generating a TreeMap Chart using predefined data with LightningChart JS:

const treeMapChart = lightningChart().TreeMapChart()
treeMapChart.setData(data)