World Market Summary Widget
Markets do not move together — one region rallies while another slips, and the fastest way to see that is on a map. This free widget colours every country by how its main stock index is performing today: green for rising, red for falling, deeper shades for bigger moves. Switch to the list for exact figures, ranked from the biggest gainer down. Embed it on any investing, news, or finance site.
Sign up for free, add your website domain, and paste the embed code above into your HTML. Your widget will activate automatically.
Whether the widget opens on the world map or the list. Visitors can switch if the toggle is shown.
How the list is sorted. By performance puts the biggest gainer at the top and changes through the day; alphabetical keeps every country in the same place.
Which countries the widget covers. Leave empty for the entire world.
Countries pinned to the top of the list, in the order set here. The rest follow below in the chosen list order.
Let visitors switch between the map and the list. Turn off to lock the widget to the starting view.
The colour scale under the map, from red (falling) to green (rising).
Allow visitors to zoom the map with the mouse scroll wheel. Off by default so scrolling the page does not get caught on the map — the zoom buttons and pinch always work.
What the hover card shows — a price chart, the performance grid (1W to 1Y), or both.
Auto matches your site's language — when visitors switch it, the widget follows. Pick a language to keep it fixed.
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.
The World at a Glance
Thirty markets, each shown by its headline index — the S&P 500 for the United States, the DAX for Germany, the Nikkei for Japan, SENSEX for India. The colour scale runs from about -3% to +3%, so a quiet day looks calm and a sell-off is obvious immediately.
Map or List
The map answers where; the list answers how much. The list ranks every market by today's move with the index level beside it, so a reader can go from the broad picture to the actual numbers in one click. Pick which one visitors see first, or lock the widget to just one.
One Index Per Country
Most markets run several indices — Turkey alone has five. The widget shows the one people actually quote for that market, not simply the largest by constituent count, so the map reads the way a reader expects.
Part of a Full Picture
The map shows which markets are moving; other widgets show what is moving inside them. The stock heatmap breaks a market down company by company, the market movers widget lists the day's biggest gainers and losers, and the ticker tape keeps prices scrolling across the page.
Key Features
- Interactive world map — every market coloured by today's move.
- Ranked list — index level and change, biggest gainer first.
- View switch — let visitors choose, or lock to one.
- Colour legend — the scale from falling to rising, optional.
- Light and dark — follows the host page theme.
- Responsive — adapts to the width it is given, not the window.
Who Uses a World Market Summary?
News sites put it at the top of market coverage so a reader sees the global picture before the detail. Brokerages use it on landing pages to show the breadth of markets they cover. Research and macro-focused publishers embed it beside commentary on regional performance.