Stock Sector Heatmap — Free Embed
Each block represents a company — sized by market cap, colored by how much its stock price moved today. Tech giants like Apple and Microsoft take up the most space, while smaller names fill in around them. Visitors scan entire sectors in a second instead of scrolling through tables.
Sign up for free, add your website domain, and paste the embed code above into your HTML. Your widget will activate automatically.
- United States
![]()
- United Kingdom
![]()
- China
![]()
- Japan
![]()
- Germany
![]()
- India
![]()
- France
![]()
- Canada
![]()
- Australia
![]()
- South Korea
![]()
- Italy
![]()
- Brazil
![]()
- Spain
![]()
- Netherlands
![]()
- Switzerland
![]()
- Sweden
![]()
- Singapore
![]()
- Hong Kong
![]()
- United Arab Emirates
![]()
- Saudi Arabia
![]()
- Pakistan
![]()
- Argentina
![]()
- Austria
![]()
- Bangladesh
![]()
- Belgium
![]()
- Colombia
![]()
- Cyprus
![]()
- Czech Republic
![]()
- Denmark
![]()
- Egypt
![]()
- Finland
![]()
- Hungary
![]()
- Ireland
![]()
- Israel
![]()
- Sri Lanka
![]()
- Mexico
![]()
- Malaysia
![]()
- Nigeria
![]()
- Norway
![]()
- Poland
![]()
- Portugal
![]()
- Qatar
![]()
- Russia
![]()
- Turkey
![]()
- Taiwan
![]()
- South Africa
![]()
Show only primary exchange listings for each stock.
Make items clickable. When enabled, each item links to its detail page or a custom URL.
Make items clickable. When enabled, each item links to its detail page or a custom URL.
Enter a URL and click the buttons below to insert placeholders.
Enter a URL and click the buttons below to insert placeholders.
Applies to Overview URL only. Chart URL always opens in a new tab.
Automatically refresh data every 1 minute.
Save user selections (preset, time period) in browser localStorage so they persist across page reloads.
Remove the widget background color so it blends with your page.
How the Stock Heatmap Works
Companies appear as rectangular blocks, sized proportionally to their market capitalization. Apple, Microsoft, and Amazon take up the largest areas because they're the biggest by market cap. Each block is colored by its daily price change — shades of green for gains, shades of red for losses, and gray for flat movement. The result is a visual snapshot of the entire market that communicates more in one image than a spreadsheet ever could.
Key Features
- S&P 500 and Nasdaq coverage — hundreds of equities from the largest US exchanges.
- Market cap weighting — block sizes reflect real market importance, not alphabetical order.
- Sector grouping — tech, healthcare, financials, energy, and more grouped visually.
- Color-coded price changes — intensity reflects the magnitude of the move.
- Interactive hover — mouse over any block to see the company name, price, and exact change.
Setup and Embed
Select the market index you want to visualize — S&P 500 gives you large-cap US equities, Nasdaq focuses on tech-heavy names. Choose a theme, then review the preview. The heatmap is fully interactive even in preview mode. Once it looks right, copy the snippet. It's one custom HTML element plus one script file — no CSS imports, no framework, no build process.
Paste it into Shopify theme Liquid files, Framer embed blocks, WordPress (Gutenberg HTML block), Webflow, Wix, Squarespace, or any hand-coded page. The widget sizes itself to fill the container it sits in.
Ideal For
Financial news sites use stock heatmaps as the centerpiece of their market overview pages — one visual that replaces paragraphs of text about "which sectors are up today." Investment research platforms embed it alongside stock screeners to give users spatial context. Trading communities add it to their forums and dashboards so members can check the broad market before diving into individual names. It's one of the most engaging financial widgets because people genuinely stop and look at it.