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 make charts with gradients

Posted on 
December 10, 2022

‍

Background

You can specify fill colors and styles for the chart data area and/or the whole chart background. Fill types include solid color, image and gradients fills. You can specify different fills for different areas (for example, the whole chart area, or just the data area). The chart area fill overwrites the background fill. All fills are specified using the chf parameter, and you can mix different fill types (solids, stripes, gradients) in the same chart by separating values with pipe character (|). Chart area fills overwrite chart background fills.

Solid Fills

You can specify a solid fill for the background and/or chart area, or assign a transparency value to the whole chart. You can specify multiple fills using the pipe character (|).

Syntax

chf=<fill_type>,s,<color>|...

  • <fill_type> The part of the chart being filled. Specify one of the following values:
  • bg - Background fill
  • c - Chart area fill. (
🏁
  • , currently same as bg, bg as precedence over c)
  • a - Make the whole chart (including backgrounds) transparent. The first six digits of are ignored, and only the last two (the transparency value) are applied to the whole chart and all fills.
  • b<index> - Bar solid fills (bar charts only). Replace with the series index of the bars to fill with a solid color. The effect is similar to specifying chco in a bar chart (note that chf has precedence over chco for each series). See Bar Chart Series Colors for an example.
  • s Indicates a solid or transparency fill.
  • <color> The fill color, in RRGGBB[AA] hexadecimal format. For transparencies, the first six digits are ignored, but must be included anyway.

Examples

This example fills the chart background with pale gray (EFEFEF).

chart

chf=bg,s,EFEFEF

This example applies a 50% transparency to the whole chart (80 in hexadecimal is 128, or about 50% transparency). Notice the table cell background showing through the chart.

chart

{.image-container--stripped}

chf=a,s,00000080

This example fills the bar chart with a pale gray (EFEFEF). This was implemented for compatibility with Google Image Charts but we recommend you to use chco for series colors.

chart

Gradient Fills

You can apply one or more gradient fills to chart areas or backgrounds. Gradient fills are fades from a one color to another color. (Pie: background only.)

Each gradient fill specifies an angle, and then two or more colors anchored to a specified location. The color varies as it moves from one anchor to another. You must have at least two colors with different <color_centerpoint> values, so that one can fade into the other. Each additional gradient is specified by a <color>,<color_centerpoint> pair.

Syntax

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
 ,...,
 <color_n>,<color_centerpoint_n>

  • <fill_type> The chart area to fill. One of the following:
  • bg background fill
  • c chart area fill. (
🏁
  • , currently same as bg, bg as precedence over c)
  • b<index> gradient fills (valid in bar, line, pie and bubble charts unlike Google Image Charts which only supported bar charts). Replace with the series index of the bars to fill with a gradient. See Bar Chart Series Colors for an example.
  • lg Specifies a gradient fill.
  • <angle> a number specifying the angle of the gradient from 0 (horizontal) to 90 (vertical).
  • <color> the color of the fill, in RRGGBB[AA] hexadecimal format.
  • <color_centerpoint> specifies 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 .
  • ps<index>-<sliceIndex> (only valid in pie, polar area and bubble charts) same as b<index> but let you specify a gradient per pie slice. For pie charts, b<index> has precedence over ps<index>-<sliceIndex>, both can't be combined as would not make much sense.

Examples

This example displays a chart area with an horizontal linear gradient, specified with an angle of zero degrees (0). The colors are peach (FFE7C6), centered on the left side (position 0.0) and blue (76A4FB) centered on the right side (position 1.0). The chart background is drawn in gray (EFEFEF).

chart

chf=
 c,lg,0,
 FFE7C6,0,(peach)
 76A4FB,1 (blue)

This example displays a Chart area with a diagonal (bottom left to top right) linear gradient, specified with an angle of forty-five degrees (45). Peach (FFE7C6) is the first color specified. The bottom left of the chart is pure peach. Blue (6A4FB) is the second color specified. The top right of the chart is pure blue. Note how we specify an offset of 0.75, to provide a peak of blue that fades away towards the top right corner. The chart background is drawn in gray (EFEFEF).

chart

chf=
 c,lg,45,
 FFE7C6,0, (peach)
 76A4FB,0.75 (blue)

The example shows how to use gradient fills in chart series.

chart

chd=
 t:10,40,60,80,30,20
chf=
 b0,lg,90,03a9f4,0,3f51b5,1

Image fills

You can specify an image url to use as a background for your chart. URL must be completely encoded in order to be handled

Syntax

chf=bg,img,<image_url>

  • bg background fill
  • img an image will be used to fill the background
  • <image_url> image url to use

Examples

This example displays a bar chart with semi-transparent bars (chco=FFFFFF90) with an abstract image background (chf=bg,img,https://i.imgur.com/ltXHn7L.png):

chart

chf=bg,img,https://i.imgur.com/ltXHn7L.png
chco=FFFFFF90

This example displays a mixed chart with a orange/gold abstract image background:

chart

chf=bg,img,https://i.imgur.com/8Gv2GsI.jpg
chco=FFFFFF

‍

‍

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 create a progress bar chart

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