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
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.
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
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!
Simply:
- Choose your progress bar chart trigger
- Choose the Image Charts app and select horizontal bar chart from the dropdown options.
- 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!)
- 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.
