Interactive charts

THIS IS THE TEMPLATE FOR EVERY CHART ON THE WEB. <gwi-chart> is the web version of the GWI Design System data viz templates. Same marks, same colours, same rules. Do not restyle a chart with site CSS, swap its colours, or build charts with another library. Change the data, the title, the subtitle and the source. The only styling allowed is the --gwi-* variables (see "Styling with CSS variables"), and only when asked for. If a chart you need is missing, tell the design lead (Stavros) so it can be added here.

One JavaScript file, no dependencies. Drop the file on a page, then add one <gwi-chart> tag per chart. It works in any HTML page or CMS, and its styles are sealed inside the tag so the site's CSS cannot break it.

Files

File	What it is
gwi-chart.standalone.js	The file to put on a website. Fonts are built in, so this one file is all a page needs.
index.html	The template page: every chart type with its embed code to copy. It loads gwi-chart.standalone.js from the same folder, so it works on its own, for example on GitHub Pages.
source/gwi-chart.js	The same component without built in fonts, and the one we edit. Loads Ovo and Instrument Sans from source/fonts/. Not needed on a website.
source/flags/	The design system's circular Light Mode flags (55 countries), one SVG per country. build-standalone.py builds them into gwi-chart.standalone.js, so a page needs no extra files. Not in source/gwi-chart.js: flags only work in the standalone file. When Components/Flags/Circular/SVG/ changes in the design system, copy the Light Mode files here (without the "Light Mode - " prefix) and rebuild.
source/fonts/	Instrument Sans and Ovo as woff2. Only needed with source/gwi-chart.js and for the build.
source/build-standalone.py	Rebuilds gwi-chart.standalone.js after source/gwi-chart.js changes.

Load it on a site (Webflow or any page)

Add this once to the site-wide footer code, not to every page or chart:

<script src="https://cdn.jsdelivr.net/gh/GlobalWebIndex/[email protected]/gwi-chart.standalone.js"></script>

@1.6.0 is a git tag. To roll out a new version, push the change, create a new tag (for example 1.6.1) and change the number in that one line. Each chart is then a short <gwi-chart> tag in a code embed.

Making a chart with Claude

For Claude, and for anyone using Claude to make a chart. One chart at a time, from the chart types listed in this README.

1. Ask for the small print first. If the person has not already given them, ask for the Source, the Base and the question(s) asked to get the data. For each question, ask for the link too (an https URL). Do not invent any of these. If something is missing, leave that attribute out rather than make it up, and say so.
2. Use the chart type they name. Take the matching example in this README, keep its structure, and change only the data, title, subtitle, unit, source, base and questions.
3. Hand back only the tag. Give one code block with a single <gwi-chart> tag and its data script inside it. Do not add a script that loads the component. The website loads it once for every page, and adding it again breaks the charts.
4. Do not restyle unless asked. No custom CSS, colours or fonts by default. The rules below are built in. If the person asks for a styling change, set only the --gwi-* variables from "Styling with CSS variables" in the style attribute of the tag, and say which ones you set.

Put a chart on a page

<!-- Standalone pages only. In Webflow, leave this line out: the site already loads the component once for every page. -->
<script src="gwi-chart.standalone.js"></script>

<gwi-chart type="bar" unit="%"
  title="Short-form video leads weekly media use"
  subtitle="Share of online adults who use each every week"
  source="GWI Core, Q2 2026"
  base="Online adults 16 to 64"
  question="Q4. Which of the following do you use weekly?">
  <script type="application/json">
    { "categories": ["Short-form video", "Social networks", "Messaging"],
      "series": [{ "name": "Weekly use", "values": [82, 74, 69] }] }
  </script>
</gwi-chart>

In Webflow, the component is already loaded site-wide. Paste only the <gwi-chart> tag (with its data script inside it) into a Code Embed, and never add a second script that loads gwi-chart.js or gwi-chart.standalone.js. Loading it twice breaks the charts.

Load the script once per page, then use as many tags as you like. The chart fills the width of whatever it sits in, redraws when the container changes size, and works from phone to wide desktop. Wrap it in a div with a max width to control how wide it gets.

Full bleed

Every chart is edge to edge: it takes 100% of the width of its container, with no padding, margin or max width of its own, and the marks run to both edges (the title, subtitle and buttons sit flush left). For a CRM report, put the tag in a container with no padding and the chart spans it. To inset a chart, add padding to the container, not the chart. The half donut scales with the width too, so in a very wide container it gets very large. Use a narrower container for it. Column charts and heatmaps keep a minimum width and scroll sideways inside the container on very narrow screens.

Three ways to give a chart its data

1. Inline JSON in a <script type="application/json"> inside the tag (above). Best for static reports.
2. A URL with src="data/video.json". JSON or CSV (.csv). Best for data that changes without touching the page.
3. JavaScript: document.querySelector('gwi-chart').data = { ... }. Best inside an app. Setting data again redraws.

A data='{...}' attribute with the JSON as a string also works for tiny charts.

Data formats

Most charts use categories and series:

This is the beginning of the README. Read the rest at the original. Read the full README ↗