Hey there, chart lovers! Are you tired of making the same old boring charts that look like they came straight out of a textbook? Fear not, my friends, because today we’re going to teach you how to create charts with some serious style—gradients!
Gradients are the cool kids of the chart world. They add depth, dimension, and a pop of color that can take your charts from snooze-fest to show-stopping. Plus, they’re super easy to create once you know how.
In this blog, we're going to show you step-by-step how to make charts with gradients that will have your audience oohing and aahing. Whether you’re creating charts for work, school, or just for fun, this technique will take your charts to the next level.
So put on your charting hat, and let’s get started on this chart-making adventure!
Gradient Fills in Image Charts Editor
You can apply one or more gradient fills to chart areas or backgrounds (for pie, only backgrounds). Gradient fills are transitions from one color to another. Let’s look at the syntax you will need to create gorgeous gradient graphs on Image Charts:
Syntax:
chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>,...,<color_n>,<color_centerpoint_n>
- <fill_type> is either bg background fill, c chart area fill (currently same as bg, bg as precedence over c), or b<index> gradient fills (valid in bar, line, pie and bubble charts).
- lg is linear gradient.
- <angle> is the gradient degree (angle). 0 is horizontal, and 90 is vertical.
- <color> in RRGGBB[AA] hexadecimal format.
- <color_centerpoint> is the anchor point for the color. The color will start to fade from this point as it approaches another anchor. The value range is from 0.0 (bottom or left edge) to 1.0 (top or right edge), tilted at the angle specified by <angle>.
- ps<index>-<sliceIndex> (only valid in pie, polar area and bubble charts) is the same as b<index> but lets you specify a gradient per pie slice. For pie charts, b<index> has precedence over ps<index>-<sliceIndex>; both can’t be combined as it wouldn’t make much sense.
Now if all these techy bits got over your head, don’t worry. We’ll walk you through the process with some examples.
Gradient in a Bar Chart
Let’s learn with an example. Go to the image editor and pick a vertically stacked bar chart. Plug in your data and then use these specs for the gradient:
chf=b0,lg,90, 00C1B5,1, 8D80EC,0.5
This sets a linear gradient lg from 90 degrees (top-bottom fashion. If you select a horizontal axis and want to go left-right, use 0 instead of 90).
The color goes from #00C1B5 (Robin's egg blue color) to #8D80EC (lilac). You can change the values after the hex codes (00C1B5,1, 8D80EC,0.5) to set which color you would like to show where and how much.
The result?
Gradient in the Background
Let’s say you want to spice up your sparkline chart, which naturally doesn’t have legends or any other stuff to take space. So, how about creating a gradient for your background?
Again, go to the image editor and pick a sparkline chart from the gallery. Add in all the relevant data. Then, for the gradient, use these specs:
chf= c,lg,0,CEDCFF,0.8,8D80EC,0
This sets a linear gradient lg from 0 degrees (for left-right). The color changes from #8D80EC (lilac) at the left to #CEDCFF (pale bluish-purple) to the right.
And how does it look like? Have a look!
Fun, isn’t it?
You can do SO MUCH with gradients. Play around with the background or the chart area for regular charts, or create a brand new bar chart (hint: progress bar chart)!
Now that we’re on a roll, let’s explore…
Gradient Fills in No-Code Automation
Let’s say you want to send the progress of a project every month to your team so they know where they’re at. To do this,
- connect your source data (it could be a spreadsheet, an attachment from an email, or even a slack message!) to set your trigger, then
- connect to Image Charts and add in the details (more on this in a bit), and then
- connect to your destination channel.
Voila! It’s as easy as 1,2,3!
For the details, fill in all the relevant information you need in the fields given.
But to get a pretty gradient on the bar, there are two steps to follow:
First, in the series color option, add in the hex code for the neutral color that would represent the “unfinished” part of the progress bar. For this example, we’re using a light bluish-gray #D7DAE1.
Second, to get a pretty gradient on the bar, you need to use advanced customizations. The first of these is to get the progress bar right by setting negative margins with this:
chma=-10,0,0,-10
Then, to create a linear gradient, add in the chf details as described previously. Make sure to use the ampersand sign “&” to combine chma and chf. Here’s what it would look like in Zapier:
The result, you ask?
Behold!
Pretty cool, right?
Now, go ahead and make gradients of your own on the free Image Charts Editor!
