FeaturesPricing
All Charts
Chart.js ChartsLine ChartsSparkline ChartsScatter ChartsPie ChartsDonut ChartsPolar ChartsRadar ChartsBubble ChartsGraph Viz ChartsQR Codes generatorBar Charts
Integrations
Popular Integration
How to Integrate
Google Drive
with Image Charts using Zapier/Make
How to Integrate
Google Forms
with Image Charts using Zapier/Make
How to Integrate
Pipedrive
with Image Charts using Zapier/Make
How to Integrate
Dropbox
with Image Charts using Zapier/Make
How to Integrate
Google Sheets
with Image Charts using Zapier/Make
See all integrations
Resources
BlogDocumentation
Subscription managementBuild your chart for free
Subscription managementBuild your chart for free
How To's

How to make charts with gradients

Posted on 
December 10, 2022
Table of contents

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!

Fear not, chart warrior, you can slay this gradient dragon!

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?

Those numbers (and those bars) are lookin' real good!

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!

A picture containing rectangleDescription automatically generated
Life’s a struggle when you get a serious case of the non-noms!

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,

  1. connect your source data (it could be a spreadsheet, an attachment from an email, or even a slack message!) to set your trigger, then 
  2. connect to Image Charts and add in the details (more on this in a bit), and then 
  3. 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!

Tagged:
Design
Francois-Guillaume Ribreau
CEO

Featured Posts

Learn
Raising the Bar—Easy, Automated Bar Charts for Everyday Use
Automate!
Where You Draw the Line–Automated Line Graphs for Everyone
How To's
How to make charts with gradients
How To's
How to create a progress bar chart
Learn
How to Get Started With Image Charts on Zapier
Learn
How to Share Charts on Slack?
Learn
Create Chart with One URL
Automate!
How to connect Image-Charts to Zapier ?

Tags

API
Automation
Bar Charts
Bubble Charts
Charting
Design
Doughnut Charts
Emailing
Graph-viz
GraphViz
Integration
Line Charts
Make
Mobile App
Pie Charts
Polar Charts
Progress Bar Charts
QR Code
Radar Charts
SDK
Scatter Charts
Sparkline Charts
Zapier

Create and send charts in email with Image-Charts

Get started
More Posts

You Might Also Like

Apr 17, 2023
 in 
Automate!

Stop Boring Your Readers: Automate Charts in Emails to Impress the Heck out of Them!

Apr 12, 2023
 in 

Charting Wars: The Battle of Charting Tools – A Comprehensive Comparison Guide

Mar 30, 2023
 in 
How To's

Automate Charts in PDFs via Zapier—The Whys and Hows to Create Dynamic Reports

The most used static chart API in the world

Chart API

Chart.js ChartsLine ChartsSparkline ChartsScatter ChartsPie ChartsDonut 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