Treemap component

Datatype: "treemap"

A treemap / market heatmap — tiles sized by value and colored by % change (red→green) or by category, with optional sector grouping. The canonical way to show a portfolio or weighted breakdown at a glance.

Edit it — this is the actual editor panel

Design JSON

{
  "title": "Treemap sample",
  "description": "A market heatmap of a stock portfolio",
  "dimensions": {
    "width": 800,
    "height": 460
  },
  "background": {
    "color": "#0f172a"
  },
  "components": [
    {
      "id": "sample-treemap",
      "key": "treemap",
      "type": "treemap",
      "position": {
        "x": 40,
        "y": 40
      },
      "rotation": 0,
      "size": {
        "width": 720,
        "height": 380
      },
      "dynamic": true,
      "properties": {
        "data": [
          {
            "label": "AAPL",
            "value": 3120,
            "change": 1.4,
            "group": "Tech"
          },
          {
            "label": "MSFT",
            "value": 2980,
            "change": 0.6,
            "group": "Tech"
          },
          {
            "label": "NVDA",
            "value": 2210,
            "change": 3.8,
            "group": "Tech"
          },
          {
            "label": "GOOG",
            "value": 1780,
            "change": -0.9,
            "group": "Tech"
          },
          {
            "label": "JPM",
            "value": 640,
            "change": -1.2,
            "group": "Finance"
          },
          {
            "label": "BAC",
            "value": 320,
            "change": -0.5,
            "group": "Finance"
          },
          {
            "label": "XOM",
            "value": 470,
            "change": 2.1,
            "group": "Energy"
          },
          {
            "label": "CVX",
            "value": 300,
            "change": 1.3,
            "group": "Energy"
          }
        ],
        "colorMode": "change",
        "maxChange": 4,
        "showValues": true,
        "showGroupLabels": true,
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Treemap examples

Real renders of the treemap — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Market heatmap

A sector-grouped stock map sized by market cap, colored by daily % change.

API overrides for this example

{
  "treemap.data": [
    {
      "label": "AAPL",
      "value": 3120,
      "change": 1.4,
      "group": "Tech"
    },
    {
      "label": "MSFT",
      "value": 2980,
      "change": 0.6,
      "group": "Tech"
    },
    {
      "label": "NVDA",
      "value": 2210,
      "change": 3.8,
      "group": "Tech"
    },
    {
      "label": "GOOG",
      "value": 1780,
      "change": -0.9,
      "group": "Tech"
    },
    {
      "label": "JPM",
      "value": 640,
      "change": -1.2,
      "group": "Finance"
    },
    {
      "label": "XOM",
      "value": 470,
      "change": 2.1,
      "group": "Energy"
    }
  ],
  "treemap.colorMode": "change",
  "treemap.maxChange": 4
}

Budget breakdown

Departmental spend sized by amount, colored by a category palette.

API overrides for this example

{
  "treemap.data": [
    {
      "label": "Engineering",
      "value": 82000
    },
    {
      "label": "Sales",
      "value": 61000
    },
    {
      "label": "Marketing",
      "value": 44000
    },
    {
      "label": "Ops",
      "value": 24000
    },
    {
      "label": "Support",
      "value": 18000
    }
  ],
  "treemap.colorMode": "category",
  "treemap.colors": [
    "#2563eb",
    "#7c3aed",
    "#c026d3",
    "#0891b2",
    "#059669"
  ],
  "treemap.valueFormat": "compact",
  "treemap.currencySymbol": "$"
}

All treemap styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

CategoryA weighted breakdown colored by a palette instead of by % change.

LightThe market heatmap on a light card for print and docs.

Use cases

What developers typically build with the treemap component.

Stock portfolio / market heatmaps (sized by market cap, colored by % change)
Sector performance snapshots for market digests
Budget or spend breakdowns sized by amount
Traffic, storage or revenue-mix maps for dashboards

Use it dynamically via the API

Push fresh tiles per render with '<key>.data' (or just '<key>') as [{ label, value, change, group }]; sizes and colors update with them.

Full API request with the sample design's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "treemap.data": [
        {
            "label": "AAPL",
            "value": 3120,
            "change": 1.4,
            "group": "Tech"
        },
        {
            "label": "MSFT",
            "value": 2980,
            "change": 0.6,
            "group": "Tech"
        },
        {
            "label": "NVDA",
            "value": 2210,
            "change": 3.8,
            "group": "Tech"
        },
        {
            "label": "GOOG",
            "value": 1780,
            "change": -0.9,
            "group": "Tech"
        },
        {
            "label": "JPM",
            "value": 640,
            "change": -1.2,
            "group": "Finance"
        },
        {
            "label": "BAC",
            "value": 320,
            "change": -0.5,
            "group": "Finance"
        },
        {
            "label": "XOM",
            "value": 470,
            "change": 2.1,
            "group": "Energy"
        },
        {
            "label": "CVX",
            "value": 300,
            "change": 1.3,
            "group": "Energy"
        }
    ],
    "treemap.colorMode": "change",
    "treemap.maxChange": 4,
    "treemap.showValues": true,
    "treemap.showGroupLabels": true,
    "treemap.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Property reference

Every property the treemap component accepts — in the editor, in design JSON, and as API overrides.

Property	Type	Edits as	Default	Description
data	object[]	text	[]	Tiles: array of { label, value, change?, group?, color? }.
colorMode	'change' \| 'category'	changecategory	"change"	'change' colors tiles red→green by % change; 'category' uses a palette.
positiveColor	color	#16a34a	"#16a34a"	Color for a positive change (full intensity).
negativeColor	color	#dc2626	"#dc2626"	Color for a negative change (full intensity).
neutralColor	color	#475569	"#475569"	Color at zero change / when a tile has no change.
maxChange	number	3	3	The % change that maps to full color intensity.
colors	color[]	text	[]	Category palette (cycled) when colorMode is 'category'.
baseColor	color	#2563eb	"#2563eb"	Single base color for 'category' mode when no palette is set.
labelColor	color	#ffffff	"#ffffff"	Tile text color.
showValues	boolean	true	true	Print the change % or value on each tile.
showGroupLabels	boolean	true	true	Draw the sector/group labels.
valueFormat	'number' \| 'compact' \| 'percent' \| 'currency'	numbercompactpercentcurrency	"compact"	How values are formatted in category mode (1,200 / 1.2K / $1,200).
currencySymbol	string	text	"$"	Symbol used with the 'currency' format.
gap	number	2	2	Padding between tiles (px).
opacity	number	1	1	Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidth	number	0	0	Border thickness in pixels around the component.
borderColor	color	transparent	"transparent"	Border color (any CSS color).
borderStyle	'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'	soliddasheddotteddoublenone	"solid"	Border line style.
borderRadius	number	0	0	Corner radius in pixels.
boxShadow	string	text	—	CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Send '<key>.data' as an array of { label, value, change, group } — value sizes each tile, change colors it, and group nests tiles into labeled sectors.

In the default "change" mode each tile is colored from its change %, scaling from neutral at 0 toward full green (up) or red (down) at maxChange; tune maxChange to the market.

Yes — set colorMode to "category" for a weighted breakdown (budget, storage, traffic mix) colored by a palette or per-tile color instead of by change.