Project Information

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.

The Email Chart Builder tool is the result of knowledge gained from previously completed projects focused on data visualization in email. This includes my Litmus Live 2020 conference talk "Dropping the <img> Tag: Data Visualization Without Images", experimentation with ⚡AMP for Email, and other projects.

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

Tips/Advice

• Press the t key to cycle through chart types
• Press the d key to toggle dark mode or click on the ☀️ emoji at the top
• After clicking the button to generate your HTML output code, the chart's estimated HTML weight will display below

Mobile Chart Adjustments

• Use media queries to adjust the size of the chart text and the height of the data bars for smaller screens. The following snippet of code can be applied to all non-vertical bar charts:

  @media screen and (max-width: 650px) {
    .chartMobile {
      border: none !important;
      border-bottom: 1px solid #c4c4c4 !important;
      border-top: 1px solid #c4c4c4 !important;
      padding: 20px 0 !important;
    }
    .chartMobile caption {
      font-size: 13px !important;
    }
    .chartMobile td {
      font-size: 9px !important;
    }
  }

• The following snippet of code can be applied to all vertical bar charts:

  @media screen and (max-width: 650px) {
    .chartVertCap, .chartVertSub {
      font-size: 13px !important;
    }
    .chartVertMobile td {
      width: 25px !important;
    }
    .chartVertMobile td, .chartVertSrc {
      font-size: 10px !important;
    }
    .chartVertAxis {
      line-height: 0 !important;
    }
  }

• To reduce the image sizes in mobile view for Horizontal Bar Chart V, use the following snippet of code:

  @media screen and (max-width: 650px) {
    .chartMobile img {
      height: 20px !important;
    }
  }

• All chart snippets combined:

  @media only screen and (max-width:650px) {
    .chartMobile {
      border: none !important;
      border-bottom: 1px solid #c4c4c4 !important;
      border-top: 1px solid #c4c4c4 !important;
      padding: 20px 0 !important;
    }
    .chartMobile caption, .chartVertCap, .chartVertSub {
      font-size: 13px !important;
    }
    .chartMobile td, .chartVertMobile td, .chartVertSrc {
      font-size: 9px !important;
    }
    .chartVertMobile td {
      width: 25px !important;
    }
    .chartMobile img {
      height: 20px !important;
    }
    .chartVertAxis {
      line-height: 0 !important;
    }
  }

My Contact Info

• X
• LinkedIn
• DEV.to
• GitHub