--- title: "Treemap Maker (Free Image Generator)" description: "Turn a list of labels and values into a market-heatmap treemap image. Free generator, a one-line embed that re-renders on fresh data, and an API for scale." url: "https://www.imejis.io/blogs/tutorials/treemap-image-generator" published: "2026-08-02" --- # Treemap Maker (Free Image Generator) A treemap maker takes one row per tile, a label and a value, and returns a PNG or SVG. Value sizes each tile. An optional percent change tints it red to green. It's the market-heatmap look, made for a snapshot people read, not a live terminal. ## What a treemap shows A treemap packs a weighted breakdown into one picture. Each tile is one item. Its **value** sets the size, so the biggest numbers claim the biggest tiles and the whole thing reads at a glance. See [treemapping](https://en.wikipedia.org/wiki/Treemapping) for the background on the layout. Two coloring modes cover most uses: - **Change mode:** each tile carries a percent change and gets colored from neutral at zero toward full green on a gain or full red on a loss. That's the stock market heatmap. `maxChange` sets how strong a move hits full color, so lower it for a quiet market. - **Category mode:** tiles get colored by a palette instead of by change. That fits a budget by department, disk usage by folder, or a traffic-source mix. Add a **group** to each tile and the map nests them into labeled sector bands: Tech, Finance, Energy, whatever you pass. That's the market-map layout you've seen, sized by weight and grouped by sector. A treemap image is a snapshot for humans. A portfolio recap in a newsletter, a spend breakdown in a report, a heatmap in Slack. Nothing here is financial advice. If you need live quotes and order entry, use a trading platform. For a clean picture of what already happened, an image fits. ## Make one free Open the [treemap generator](/tools/treemap-generator). Enter a row per tile with a label and a value, add a change percent or a group when you have one, then download. No signup, no watermark, and you can export a PNG for docs and email or an SVG when you want it crisp at any size. The input doesn't care what you're mapping. Tickers, departments, folders, all fine. Labels and numbers in, treemap out. ## Embed it anywhere A treemap image embeds like any other image. One line of HTML and it renders inline: ```html Portfolio market heatmap treemap ``` The real trick sits here. Reference a **render URL** instead of a saved file and the map re-renders on every view. Push fresh values at the end of the day and the same URL returns an updated heatmap. You never reopen the email or re-export a thing. A daily portfolio map in a newsletter stays current on its own. Save a static file when you want a fixed snapshot pinned to a date. Use a render URL when the picture should follow new data. ## Generate at scale One map by hand is fine. Fifty, or one every morning, is where the API takes over. The treemap ships as an API component, which means a map is [a component you configure](/components/treemap) and render on demand. One call takes your batch of tiles and returns the image. A few ways people wire it up: - **On a schedule:** a cron job pulls today's numbers, hits the render URL, and drops the heatmap into a morning digest. - **Per request:** your app renders a map on the fly for whatever portfolio or range a user asks for. - **Through an [AI agent over MCP](/agents):** the agent gathers the tiles and calls the render itself, no code on your side. Grab a tested snippet from the [API docs](/apis) so the request shape is settled up front. Lay the map out once, then push tiles at it. ## Start making treemaps Labels and values in, heatmap out. - Build one now in the [treemap generator](/tools/treemap-generator), free, PNG or SVG. - Configure it as an API [component](/components/treemap) and render on demand. - Automate it through the [API](/apis) or an [AI agent](/agents). The free plan covers [100 renders a month](/pricing), enough to build a daily heatmap and see it land before you sign up for more.