Light treemap

Treemap styletype: "treemap"

Generate light-mode treemap / market-heatmap images — tiles sized by value, colored red→green by change — on a white card. Fresh data per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Light” variant

{
  "title": "Treemap sample",
  "description": "A market heatmap of a stock portfolio",
  "dimensions": {
    "width": 800,
    "height": 460
  },
  "background": {
    "color": "#ffffff"
  },
  "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,
        "neutralColor": "#cbd5e1",
        "labelColor": "#0f172a"
      }
    }
  ]
}

Treemap examples

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

Light market map

A sector-grouped market heatmap on a white card with dark labels.

API overrides for this example

{
  "treemap.neutralColor": "#cbd5e1",
  "treemap.labelColor": "#0f172a",
  "treemap.data": [
    {
      "label": "AAPL",
      "value": 3120,
      "change": 1.4,
      "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.maxChange": 4
}

Light budget breakdown

A category treemap of spend on a white card.

API overrides for this example

{
  "treemap.neutralColor": "#cbd5e1",
  "treemap.labelColor": "#ffffff",
  "treemap.data": [
    {
      "label": "Engineering",
      "value": 82000
    },
    {
      "label": "Sales",
      "value": 61000
    },
    {
      "label": "Marketing",
      "value": 44000
    },
    {
      "label": "Ops",
      "value": 24000
    }
  ],
  "treemap.colorMode": "category",
  "treemap.colors": [
    "#2563eb",
    "#7c3aed",
    "#c026d3",
    "#0891b2"
  ],
  "treemap.valueFormat": "compact"
}

When to use the light style

Market maps embedded in light-theme reports
Print-friendly portfolio snapshots
Docs and slide graphics

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 this variant'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,
    "treemap.neutralColor": "#cbd5e1",
    "treemap.labelColor": "#0f172a"
}'

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

Other treemap styles

Default CategoryLight

See the treemap component page for the full property reference and FAQs.