Free Stock Heatmap Widget
Visualize the entire stock market in one interactive heatmap. Vunelix's free stock heatmap widget displays stocks as blocks — sized by market cap and colored by daily price change. Apple, Microsoft, Tesla, and other large caps dominate the view while smaller names fill in around them. Filter by country, index, or sector to focus on the stocks that matter to your audience. Covers S&P 500, Nasdaq, Dow Jones, and indices from 50+ countries. Embed it on any website with one HTML snippet — a popular alternative to Finviz and TradingView heatmaps but built specifically for embedding.
Sign up for free, add your website domain, and paste the embed code above into your HTML. Your widget will activate automatically.
Stocks from this country will be shown (e.g. US = NYSE, NASDAQ). Visitors can change it.
Show stocks from a specific index (e.g. S&P 500, NASDAQ 100). "All Indices" shows everything.
Filter by industry sector (e.g. Technology, Healthcare). "All Sectors" shows everything.
How items are arranged in the heatmap. Larger blocks appear first.
What determines each block's color. E.g. "Change 1D %" colors by today's price change.
How many blocks to show. More items = more data but slower load. Visitors can change this.
Automatically refresh data every 1 minute.
Avoid duplicate stocks. Some stocks trade on multiple exchanges — this shows only the main listing (e.g. AAPL on NASDAQ, not also on other exchanges).
Show a dropdown in the toolbar to change the sorting order.
Show a dropdown in the toolbar to change which metric colors the blocks.
Show a dropdown in the toolbar to change how many items are displayed.
Show a dropdown in the toolbar to filter by stock index.
Show a dropdown in the toolbar to filter by market sector.
Show a dropdown in the toolbar to switch between country markets.
Let visitors toggle primary-only listing on/off from the toolbar.
Show a gear icon in the toolbar. Lets visitors change logo, color mode, and block labels.
Show a camera button in the toolbar to download the heatmap as an image.
Show a button in the toolbar to expand the heatmap to fullscreen.
Show zoom in, zoom out, and reset buttons in the toolbar.
Allow visitors to zoom in and out of the heatmap using the mouse scroll wheel.
Show a color scale bar at the bottom of the heatmap explaining what the colors mean.
Show a small info box when the visitor hovers over a heatmap block.
Show a detailed popup with price, change, and links when a visitor clicks on a heatmap block.
Show the company or coin logo inside each colored block.
Round the corners of each colored box in the heatmap grid.
Fixed Steps: each range gets a solid color (e.g. -1% to 0% = light red). Gradient: colors blend smoothly based on exact value.
Text shown inside each block. Symbol = short code (AAPL), Name = full name (Apple Inc).
Number shown below the label. "Selected Metric" shows the same value used for coloring (e.g. Change 1D %).
Show an overview link in the click popup for each heatmap block.
Show a chart link in the click popup for each heatmap block.
Your custom page URL for the overview link in the popup. E.g. yoursite.com/stocks/{{symbol}} becomes yoursite.com/stocks/AAPL. Leave empty for Vunelix page.
Your custom chart page URL in the popup. E.g. yoursite.com/chart/{{ticker}} becomes yoursite.com/chart/NASDAQ:AAPL. Leave empty for Vunelix chart.
Applies to Overview URL only. Chart URL always opens in a new tab.
Save visitor choices (selected tab, time period, and other settings) so they stay the same when the page reloads.
Language used for all text inside the widget.
Auto matches your site's dark/light mode — when visitors switch your site theme, the widget follows automatically. Choose Light or Dark to keep it fixed.
Remove the widget background color so it blends with your page.
If you have your own loading spinner or skeleton on the page, enter its ID or class here (e.g. #my-loader). The widget will remove it once data is ready.
Add your own CSS code to change fonts, colors, spacing, or any other styling in the widget.
Color for positive values (gains, up arrows).
Color for negative values (losses, down arrows).
Main background color of the widget.
Background color for cards, rows, and hover states.
Primary text color for headings and values.
Color for labels, descriptions, and muted text.
Color for borders, dividers, and outlines.
Stock Heatmap — How It Works
Every stock appears as a rectangular block in the heatmap — sized proportionally to its market capitalization. The largest companies take up the biggest areas, giving visitors an instant sense of market structure. Each block is colored by daily price change — green shades for gains, red for losses, neutral for flat. The result is a visual snapshot of the stock market that communicates more in one image than any table or spreadsheet could. Vunelix pulls live data from NYSE, Nasdaq, and global exchanges so this free heatmap widget reflects real market activity.
Indices and Global Coverage
The stock heatmap widget covers major indices including S&P 500, Nasdaq Composite, Dow Jones, FTSE 100, DAX, Nikkei 225, and more from 50+ countries. Select a specific index to focus on — S&P 500 for US large caps, Nasdaq for tech-heavy names, or pick any country to view its top stocks. Switch between indices directly inside the widget without reloading the page.
Sector Performance at a Glance
Stocks are grouped by sector — Technology, Healthcare, Financials, Energy, Consumer, and more. When tech is rallying, the entire tech cluster turns green. When energy is selling off, that section goes red. This sector-level view helps traders spot rotation patterns and identify which parts of the market are driving the day's moves. Most stock screeners show this data in tables — the heatmap shows it visually in seconds.
Key Features
- Stock heatmap widget — market cap-weighted blocks for stocks across all major exchanges.
- Global indices — S&P 500, Nasdaq, Dow Jones, FTSE, DAX, Nikkei, and 50+ country indices.
- Sector grouping — stocks organized by industry sector for quick pattern recognition.
- Interactive — hover any block to see company name, price, market cap, and exact change.
- Filter by country — US, UK, Germany, Japan, India, and dozens more.
- Light and dark themes — auto-detect or set manually to match your site.
How to Embed the Stock Heatmap
Select a country and index — US with S&P 500 is the most popular starting point. Choose the number of stocks to display, pick a color mode, and set light or dark theme. Vunelix updates the preview live as you configure. Copy the embed code and paste it into your HTML.
Works on WordPress, Shopify, Webflow, Wix, Squarespace, Elementor, Framer, and any page that accepts custom HTML. The widget auto-sizes to fill its container.
Who Embeds Stock Heatmaps?
Financial news sites use the stock heatmap as the centerpiece of their market overview pages — one visual that replaces paragraphs about which sectors moved today. Investment research platforms embed it alongside stock screeners to add visual context. Trading communities add it to forums so members check the broad market before discussing individual names. Sites that previously linked to Finviz or TradingView heatmaps now embed Vunelix's widget directly — keeping visitors on their own page instead of sending them elsewhere.