FeaturesPricing
Developers
API DocumentationChart EditorChangelogAPI Status
All Charts
Chart.js ChartsLine ChartsScatter ChartsPie ChartsPolar ChartsRadar ChartsBubble ChartsGraph Viz ChartsQR Codes generatorBar Charts
Subscription managementBuild your chart for free
Subscription managementBuild your chart for free
Learn

How to create a progress bar chart

Posted on 
December 10, 2022

Here's how to create a progress bar chart using the Image-Chart API. Progress bar are excellent to show the progress of something associated with your customer, your product or anything else. We have made it really easy to setup.

If you are already sending email including progress bars, but it takes a lot of resource to build and is not live, or, if you've thinking of ways to include a progress bar in your email - this is the solution.

How to create progress bars in the Image Charts Editor

Progress bars are a great way to show a customer the status of their loyalty points live via email.

How to create a simple progress bar

Progress bars are nothing else that horizontal bar charts with negative margins (left_margin: -10px, bottom_margin: -10px):

chma=-10,0,0,-10

The chart below displays a 65% completion. The white part has 35% width:

chd=a:65|35

progress bar image with linear gradient

How to create a progress bar with a gradient background

Of course we might want to display some progress from a bad state to a good state and express this with color. We can then leverage gradients to do that:

chf=bg,s,FFFFFF00|b0,lg,0,03A9F4,0.5,EA469E,0.1

  • The first background fill bg,s,FFFFFF00 tells our API to render the chart with a transparent background color.
  • The second background fill b0,lg,0,03A9F4,0.5,EA469E,0.1, tells that the first bar from our chart (b0), must have a linear gradient (lg) with a 0 degres angle (0) starting from color 03A9F4 to color EA469E. Read more about gradients here.
progressbar image with gradient

How to create a progress bar with multiple colors

If we wish to have something else that a white background for the uncompleted part, series colors are what we want! If you wish to send an email campaign for gold membership, leverage series colors:

chco=CFB948,E3E3E3

  • CFB948 is the gold hexadecimal color of the progress bar first part
  • E3E3E3 is the gray hexadecimal color of the progress bar second part
goldmembership email progressbar

‍

How to create a progress bar chart with NoCode

Image Charts integrates with Zapier and Make so you can create charts with no code - and that includes progress bars!

You can setup any action to trigger (progress) bar chart creation

Simply:

  1. Choose your progress bar chart trigger
  2. Choose the Image Charts app and select horizontal bar chart from the dropdown options.
  3. Indicate what data you want to show in the progress bar and how you want it to look (make sure to make the margins negative!)
  4. Decide where you want to display the final chart. You can send it in a transactional email, embed it in the product dashboard, showcase it on the website, or do something entirely your own!

Ta da! Now every time the automation is triggered a new progress bar chart will be created.

‍

Checkout the Zapier integration here: https://zapier.com/apps/image-charts/integrations

‍

There you have it! How to easily create progress bars with Image Charts. Try it out and build your first chart for free.

Tagged:
Design
Francois-Guillaume Ribreau
CEO

Featured Posts

Learn
How to create a progress bar chart
Learn
How to make charts with gradients
Learn
How to Get Started With Image Charts
Automate!
How to Use Google Sheets Formulas to Generate QR Code?
Learn
Create Chart with One URL
Learn
How to Share Charts on Slack?

Tags

Automation
Charting
Design
Emailing
Graph-viz
Integration
Mobile App
QR Code
SDK

Create and send charts in email with Image-Charts

Get started
More Posts

You Might Also Like

Dec 10, 2022
 in 
Learn

How to make charts with gradients

Sep 30, 2022
 in 
Learn

How to Get Started With Image Charts

Nov 23, 2020
 in 
Case Studies and Customer Success Stories

Yao Care - a Taiwanese medical app integration of Image-Charts

The most used static chart API in the world

Chart API

Chart.js ChartsLine ChartsScatter ChartsPie ChartsPolar ChartsRadar ChartsBubble ChartsGraph Viz ChartsQR Codes generatorBar Charts

Product

PricingDocumentationSubscription managementChart EditorChange logStatus PageOn Premise

SDKs

JavaScript/NodeJS
PHP
Python
Java
Ruby
C#

Integrations

Zapier integrationMake integrationIntegromat integration

Company

About usBlogOpen SourceSecurity & CompliancePrivacyTermsSupport

Newsletter - Changelog

If you'd like more update regarding Image-Charts in your inbox please do join the newsletter
Subscribe
No spam
Unsubscribe anytime
The most used static chart API in the world