HTML-Based Chart Not Displaying in Gmail When Automated via Zapier

Other Questions Zapier
1

I’m trying to send automated monthly reports through Zapier that pull information from Google Sheets. The reports contain basic metrics like performance scores (example: 3.8/5) and completion percentages (example: 92%).

Since Zapier only supports Gmail for email delivery, I need to use HTML format for any visual elements. I want to create charts that update automatically with the data, so static images won’t work since these go out to about 40 recipients.

I found some pure HTML chart code online and tried using it, but I’m having display issues. The chart shows up fine on my iPhone’s native mail client, but it won’t appear in Gmail on desktop browsers or the Gmail mobile app.

<head>
  <title>Data Chart</title>
</head>

<style>
    .chartWrapper {
          height: 120px;
     }
     .chartBase {
          background-color: #888;
          position: absolute;
          width: 120px;
          height: 120px;
          border-radius: 60px;
          box-shadow: 0px 2px 4px #333;
     }
     .segment {
          position: absolute;
          width: 120px;
          height: 120px;
          border-radius: 60px;
          clip: rect(0px, 60px, 120px, 0px);
     }
     .container {
          position: absolute;
          width: 120px;
          height: 120px;
          border-radius: 60px;
          clip: rect(0px, 120px, 120px, 60px);
     }

     #section1 .segment {
          background-color: #2a5cb8;
          transform: rotate(120deg);
     }
     #section2 {
          transform: rotate(120deg);
     }
     #section2 .segment {
          background-color: #d4c394;
          transform: rotate(50deg);
     }
     #section3 {
          transform: rotate(170deg);
     }
     #section3 .segment {
          background-color: #dd1122;
          transform: rotate(80deg);
     }
     #section4 {
          transform: rotate(250deg);
     }
     #section4 .segment {
          background-color: #bb22dd;
          transform: rotate(110deg);
     }
</style>

<div class="chartWrapper">
     <div class="chartBase"></div>
     <div id="section1" class="container"><div class="segment"></div></div>
     <div id="section2" class="container"><div class="segment"></div></div>
     <div id="section3" class="container"><div class="segment"></div></div>
     <div id="section4" class="container"><div class="segment"></div></div>
</div>

Has anyone dealt with this Gmail compatibility issue before? Since all my recipients use Gmail, I really need this to work there. Any ideas or alternative approaches would be great.

2

gmail absolutly destroys HTML emails. ur code’s fine - gmail just strips out transforms, positionin, and clip properties. I’v dealt with this nightmare on monthly reports. skip the css charts and go with svg instead. gmail handles basic svg elements fine, and u can still make them dynamic with zapier data. way less frustratin than battlin gmail’s broken css support, and it’ll actually look the same for everyone.

3

Gmail’s CSS support is terrible - it strips out tons of styling that works fine everywhere else. Your position: absolute, transform, and clip properties? Gmail either kills them completely or renders them weird depending on the client. I hit this same wall last year with dashboard reports. Spent weeks fighting it before I gave up and switched to HTML tables with background colors and width percentages for visual bars and basic pie charts. Way more limited than CSS transforms, but it actually works across all Gmail clients. For your completion percentages, try progress bars with nested tables and colored backgrounds. For performance scores, use HTML entities like stars (★☆) or just colored table cells for ratings. Won’t look as slick, but your 40 recipients will actually see them in Gmail.

4

Gmail strips out most advanced CSS - that’s why your charts work in iPhone mail but fail in Gmail. Those transform and position absolute properties? Gmail’s parser just deletes them. I’ve been doing automated Zapier reports for two years and learned this the hard way. Switch to inline CSS with basic tables. Build pie charts using table cells with specific widths and background colors, then add border-radius for corners (Gmail actually supports this one). For those 92% completion rates, create horizontal bars with nested tables where the inner table width shows the percentage. Way more tedious than pure CSS but works consistently across all Gmail versions. And keep everything inline - Gmail ignores external stylesheets completely.