🚫 Non-Image Approach to Data Viz in Email
Tags: email, html, css, datavisualization
Published: 2023-03-13 00:48:51

HTML emails have a limited toolbox for data visualization. Sophisticated tools such as [D3.js](https://d3js.org/) 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.

```html
<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.
```html
<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>
```

![databar1](https://user-images.githubusercontent.com/6575035/163897218-beb5f43c-50f9-4d1e-92b8-82ffa5e10beb.png)

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%.

```html
<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.

```html
<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>
```

![databar2](https://user-images.githubusercontent.com/6575035/163897313-4fa95403-3ad9-4c1a-982e-e11b32fc472c.png)

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.

![barchart1](https://user-images.githubusercontent.com/6575035/224177769-686e143f-4253-4917-8df7-e760e17620b4.png)

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 <u>only option</u>
- 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.