🚫 Non-Image Approach to Data Viz in Email

HTML emails have a limited toolbox for data visualization. Sophisticated tools such as D3.js are not available to use in email development. As a result, images have become the most common method for displaying data in emails.

This route comes with a number of disadvantages:

• not accessible to screen readers (unless the <alt> tag is used properly)
• image auto-loading turned off prevents users from seeing data visuals
• not dark mode compatible
• contributes to total email load time especially when images are not optimized

Is there an alternative way to display data in email templates that do not rely on images? Can emails feature clear, colorful, and engaging data visuals without images?

Yes, through the use of <table> elements, you can create versatile horizontal bar charts, vertical bar charts, and progress bars. This method has distinct advantages and disadvantages compared to using images.

---

Let's Build a Bar Chart Using <table> Elements

Start with a <table> element and <td> cells for the data bar name, data bar, and end label. In this chart example, the name and end label will be place outside the data bar.

<table width="600">
  <tr>
    <td>Data bar #1</td> <!-- Data bar name -->
    <td></td> <!-- Data bar -->
    <td>Label #1</td> <!-- End label -->
  </tr>
</table>

Define the height and width for each <td> cell.

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 65%;" height="24" width="65%"></td>
    <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #1</td>
  </tr>
</table>

Adjust the width values to change the size of the data bar. Since all three columns are sharing the width percentage, make sure all <td> cells add up to 100%.

<table width="600">
  <tr>
    <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
    <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td> <!-- The data bar width was reduced from 65% to 35%. The difference is added to the `<td>` cell below. -->
    <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
  </tr>
</table>

To create a second data bar, nest the code within new <table>, <tr>, and <td> elements. This will allow you to have more control over the spacing between each horizontal data bar. Adjust the spacing using padding within the outer <td> cell.

<table>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #1</td>
          <td style="background-color: #0dbd67; height: 24px; width: 35%;" height="24" width="35%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 45%;" height="24" width="45%">Label #1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 0 0 2px 0;">
      <table width="600">
        <tr>
          <td style="background-color: #ffffff; height: 24px; width: 20%;" height="24" width="20%">Data bar #2</td>
          <td style="background-color: #0d5fbd; height: 24px; width: 65%;" height="24" width="65%"></td>
          <td style="background-color: #ffffff; height: 24px; width: 15%;" height="24" width="15%">Label #2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Now repeat the <tr> sections for each individual data bar and adjust the background-color, widths, and labels for each <td> cell for this bar chart.

This is one example of how <table> elements can be used to create a horizontal bar chart.

---

Advantages of HTML/CSS Bar Charts

Charts built using <table> elements have a number of advantages over images:

• charts can be mobile responsive through the use of media queries and font-size adjustment
• load times of charts are faster compared to downloading images
• HTML/CSS coded charts use live text, numbers, and labels, which can be picked up by screen readers
• charts can be viewed without having to download any images
• can be dynamic. Since data bar widths, chart numbers, label text, and colors are coded in HTML/CSS, these fields can be set as variables within ESPs and dynamically rendered using updated JSON data
• charts are more compatible in dark mode compared to images

Disadvantages of HTML/CSS Bar Charts

However, there are some disadvantages with coded bar charts:

• only horizontal and vertical bar charts and progress bars can be created through this method. For more complicated charts (i.e. circle graphs, highly detailed, complex charts), images are the only option
• adds to overall email file weight which risks Gmail clipping if 102KB threshold is surpassed
• time consuming and complicated to code and build individual charts

---

Conclusion

Images are not the only way to display clear, colorful, and engaging data visuals in email. Through the use of <table> elements, emails can feature versatile horizontal and vertical bar charts, and progress bars.