Category treemap

Treemap styletype: "treemap"

Render treemap images for weighted breakdowns — budget, storage, traffic mix — sized by value and colored by a palette, set per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Category” variant

{
  "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": "category",
        "maxChange": 4,
        "showValues": true,
        "showGroupLabels": true,
        "opacity": 1,
        "colors": [
          "#2563eb",
          "#7c3aed",
          "#c026d3",
          "#0891b2",
          "#059669",
          "#ea580c"
        ]
      }
    }
  ]
}

Treemap examples

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

Storage usage map

Disk usage by folder, sized by GB and colored by a palette.

API overrides for this example

{
  "treemap.colorMode": "category",
  "treemap.colors": [
    "#2563eb",
    "#7c3aed",
    "#c026d3",
    "#0891b2",
    "#059669",
    "#ea580c"
  ],
  "treemap.data": [
    {
      "label": "Media",
      "value": 420
    },
    {
      "label": "Backups",
      "value": 260
    },
    {
      "label": "Databases",
      "value": 180
    },
    {
      "label": "Logs",
      "value": 90
    },
    {
      "label": "Cache",
      "value": 60
    }
  ],
  "treemap.valueFormat": "compact"
}

Traffic sources

Sessions by channel, sized by volume for a growth report.

API overrides for this example

{
  "treemap.colorMode": "category",
  "treemap.colors": [
    "#0ea5e9",
    "#6366f1",
    "#8b5cf6",
    "#ec4899",
    "#f59e0b"
  ],
  "treemap.data": [
    {
      "label": "Organic",
      "value": 52000
    },
    {
      "label": "Direct",
      "value": 31000
    },
    {
      "label": "Referral",
      "value": 18000
    },
    {
      "label": "Social",
      "value": 14000
    },
    {
      "label": "Email",
      "value": 9000
    }
  ],
  "treemap.valueFormat": "compact"
}

When to use the category style

Budget and spend breakdowns
Storage / disk usage maps
Traffic-source or revenue-mix 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": "category",
    "treemap.maxChange": 4,
    "treemap.showValues": true,
    "treemap.showGroupLabels": true,
    "treemap.opacity": 1,
    "treemap.colors": [
        "#2563eb",
        "#7c3aed",
        "#c026d3",
        "#0891b2",
        "#059669",
        "#ea580c"
    ]
}'

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

Other treemap styles

DefaultCategoryLight

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