Datatype is a free font that turns text into bar, line, and pie charts, no image or code needed. Add it as a custom font, then type a short code in any text block to get a chart you can resize and recolor like normal text.
Step 1: Add the font to your account
Edit your campaign, and click into the text block where you want a chart.
Click the font tool, then "My custom fonts."
Name it "Datatype" and paste this as the resource URL:
https://fonts.gstatic.com/s/datatype/v3/K2FvfZJQl-tDUlBEHaTYKmJIlpH1cGuNRqcoP65l.woff2
4. Pick a fallback font and save.
Can't use Google Fonts? You can self-host the font instead. Download it from the Datatype site.
If your store runs on Shopify:
upload the font file to Settings > Files
copy the link,
and use that as your resource URL in step 3 above.
On other platforms, your developer can host it the same way they host your other fonts.
Step 2: Type your chart
Once Datatype is selected, type one of these in a text block:
Chart | Code | Example |
Bar |
|
|
Line |
|
|
Pie |
|
|
Values are 0-100, separated by commas. Bar and line charts support up to 20 values; pie charts take a single value.
Tip: type your numbers in a normal font first, check them, then switch that text to Datatype. It's easier to spot mistakes that way.
Not working?
Make sure the text is actually set to the Datatype font, not a fallback, and that your code matches the format exactly (curly braces, colon, commas, no spaces).