Put charts in emails

A real PNG inside an email

The preview below uses a PNG generated by Szum – the same file type you insert into Gmail, Outlook, a newsletter, or a transactional email template.

Inbox previewWeekly report

AC

Acme Analytics

reports@acme.example · to you

9:41 AM

Your weekly product report

Weekly active users closed March at 15,900, up 28% from the beginning of the month.

Choose the workflow that matches the send

From the editor to the inbox

1. 1. Start with the email-ready example. It already uses a 540 × 360 canvas, PNG output, and 2× export scale for crisp text.
2. 2. Replace the example data. Paste spreadsheet rows or edit the table, then adjust the title, chart type, theme, and labels.
3. 3. Download and insert the PNG. In Gmail or Outlook, choose Insert image. In a newsletter or campaign editor, add an image block and upload the file.

Automate a recurring email chart

Create the saved chart once, keep its image URL in your email template, and replace the config before each send. The URL stays the same, so the sending integration does not have to change.

import { Szum } from "@szum-io/sdk";
import { Img } from "@react-email/components";

const szum = new Szum({ apiKey: process.env.SZUM_KEY! });

const chart = existingChartId
  ? await szum.charts.update(existingChartId, config)
  : await szum.charts.create(config);

<Img
  src={chart.imageUrl + ".png"}
  alt="Weekly active users rose to 15,900"
  width={540}
  height={360}
  style={{ width: "100%", maxWidth: "540px", height: "auto" }}
/>

The API key is only used by your server when it creates or updates the chart. Recipients load the public image URL without credentials. Email-client caching means an old message is not a guaranteed real-time dashboard, even when the config behind the URL changes.

A different chart for every recipient

Generate each chart in your sending pipeline and put its resulting image URL into that recipient’s message. A saved Szum URL does not fetch recipient data when the email is opened.

What email clients actually support

• Use PNG by default. It is the most predictable format across an unknown mix of clients.
• Keep the displayed chart around 540px wide. Export at 2× resolution for crisp text, then constrain it with the HTML width and inline styles.
• Expect some recipients to block remote images. This is especially common in desktop Outlook and managed company inboxes.
• Never make the image carry the message alone. Put the key result in HTML text and describe the takeaway in the image alt text.

Hosted image URL or CID attachment?

A hosted URL is usually the simpler production path. A CID attachment can be appropriate when the message must be self-contained, but forwarding, webmail, and security gateways can still affect how it appears.

Where Szum is not the whole solution

• If you are copying one existing Excel chart into one Outlook message, a normal copy-and-paste may be faster. Use Szum when you want a more considered design or a repeatable workflow.
• If the chart must remain visible with images completely disabled, use an HTML table or an email-specific HTML/CSS visualization. Szum produces image charts, so the surrounding text remains the accessibility fallback.