📊 Email Chart Builder

A tool for building bar charts for HTML email templates. Visit https://charts.email/

• 100% HTML/CSS Coded Bar Charts ⌨️
• Compatible in Dark Mode 🌙
• Mobile Responsive 📲
• No Images ❌

Project Background

The first objective of this project is to enable email marketers and developers to create clear, colorful visuals and bar charts that are mobile responsive, dark mode compatible, and accessible to screen readers quickly and efficiently. The second objective is to reimagine and change how data graphics are displayed in email templates and newsletters.

Each of the 20+ bar charts have been built using <table> elements and CSS styling specifically for email templates. All coding required for creating individual data bars with customized widths, label text, colors, and more have been taken care of with vanilla JavaScript.

For additional information about the advantages and disadvantages of using HTML/CSS bar charts compared to images in email templates, read the "🚫 Non-Image Approach to Data Viz in Email" blog post.

Instructions

1. Visit https://charts.email/ and select a chart type from the drop down menu.

2. Customize the bar colors, widths, and chart text using the input tools.

3. When the chart is ready, click the button to generate and copy your HTML output code.

4. Paste the chart code into your email template, make adjustments as needed, and test.

Advantages of HTML/CSS Coded Bar Charts in Email Templates

1. Charts can be viewed without the use of images.
2. Charts are dark mode compatible for many email clients and mobile devices.
3. Charts use live text, numbers, and labels which are accessible to screen readers.