Mathematical Formulas

You can generate an image showing a mathematical formula, using the TeX language.

Overview

You can generate an image of a mathematical formula using the TeX language (pronounced "tek" or "tech"). This is useful for displaying complex formulas on your web page. Here are some examples of formulas rendered on the fly:

Quadratic equation

Copy and paste the image URLs into a browser to see the URL that generates each image.

Specify your formula using the TeX language in the src property an <img> tag, and the formula will be returned as a PNG file. Or, if you prefer, you can send a GET request programmatically to retrieve a formula PNG.

Syntax

Root URL: https://chart.googleapis.com/chart?

Formula image requests support the following URL query parameters after the ? in the root URL:

URL Parameter Required or Optional Description
cht=tx Required Specifies that this is a formula-type image.
chl=<data> Required The formula to render, in the TeX language. You must URL-encode the formula; see below for details.
chs=<width>x<height> Optional Image size, in pixels. If you don't specify this, the size will be calculated automatically. If you specify a single value, it will be the height, and the width will be calculated for you.
chf Optional All background fill types supported. See Background Fills.
chco Optional Specifies the text color. Default is black.

URL-Encoding the chl Data

Remember that you must URL-encode any non-URL-safe characters used in your formula. You can find a URL-encoder here.

The most common mistake is using + in a formula instead of %2B, as shown here:

Not URL-Encoded URL-Encoded
a^2 + b^2 = c^2
cht=tx&chl=a^2+b^2=c^2
a^2 + b^2 = c^2
cht=tx&chl=a^2%2Bb^2=c^2

Background Fills (chf)

You can specify solid, gradient, or striped fills for the image. All fills are specified using a chf parameter, and you can mix different fill types (solids, stripes, gradients) in the same image by separating values with pipe character ( | ).

Solid Fills

You can specify a solid color fill, with or without transparency, or make the entire image transparent.

Syntax

chf=<fill_type>,s,<color>|...
<fill_type>
Specify one of the following values:
  • bg - Background fill. The background can be made transparent if you specify an alpha value in the <color> parameter.
  • a - Image transparency. The first six digits of <color> are ignored, and only the last two (the transparency value) are applied.
s
Specifies a solid fill.
<color>
The fill color, in RRGGBB[AA] hexadecimal format, where AA is an optional transparency (alpha) value.

 

Examples

Description Example

A formula with a blue background.

Red line chart with black area fill.

chf=bg,s,0000EF

Same as above, but the background is made slightly transparent by use of two alpha digits, 80, which corresponds to about 50% transparency. Notice how the formula background is transparent, but not the text.

Red line chart with black chart area and pale gray background.

chf=bg,s,0000EF80

This example applies a transparency to the whole image. Notice how the table cell background shows through the text as well as the background. The image combines two backgrounds using a pipe character:

  • a,s,00000080 - Applies a transparency to the entire image.
  • bg,s,0000EF - Applies a blue background. The background is made transparent as well by the previous parameter.

Scatter plot with points in blue, and a 50% transparency.

chf=a,s,00000080|
  bg,s,0000EF

Back to top

Gradient Fills

You can apply one or more gradient fills to the formula. Gradient fills are fades from a one color to another color.

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=bg,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
bg
Background fill.
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 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 <angle>.

 

Examples

Description Example

Formula has a horizontal linear gradient, specified with an angle of zero degrees (0).

  • chf=bg,lg - Defines a gradient fill
  • 0 - Zero degree tilt
  • FFE7C6,0 - Peach colored gradient centered on the left side (position 0)
  • 76A4FB,1 - Blue colored gradient centered on the right side (position 1.0).

Peach/blue gradient at zero degrees

chf=bg,lg,0,FFE7C6,0,76A4FB,1

Same as above, but with a 45 degree gradient.

Peach/blue gradient at 45 degrees

chf=bg,lg,45,FFE7C6,076A4FB,1

Back to top

Striped fills

You can specify a striped background fill for the formula.

Syntax

chf=
  bg,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
bg
Background fill
ls
Specifies a linear stripe fill.
<angle>
The angle of all stripes, relative to the y-axis. Use 0 for vertical stripes or 90 for horizontal stripes.
<color>
The color for this stripe, in RRGGBB hexadecimal format. Repeat <color> and <width> for each additional stripe. You must have at least two stripes. Stripes alternate until the image is filled.
<width>
The width of this stripe, from 0 to 1, where 1 is the full width of the image. Stripes are repeated until the image is filled. Repeat <color> and <width> for each additional stripe. You must have at least two stripes. Stripes alternate until the image is filled.

 

Examples

Description Example
  • bg,ls,0 - Background stripes at an angle of zero degrees to the y-axis (parallel to the y-axis).
  • CCCCCC,0.15 - The first stripe is dark gray, 15% as wide as the image.
  • FFFFFF,0.1 - The second stripe is white, 10% as wide as the image.
Formula with vertical stripes
chf=bg,ls,0,CCCCCC,0.15,FFFFFF,0.1
  • c,ls,90 - Background stripes at an angle of ninety degrees to the y-axis.
  • 999999,0.25 - The first stripe is dark gray, 25% as wide as the image.
  • CCCCCC,0.25 - Same as the first stripe, but a lighter gray.
  • FFFFFF,0.25 - Same as the first stripe, but white.
Formula with horizontal stripes
chf=bg,ls,90,999999,0.25,CCCCCC,0.25,FFFFFF,0.25

Back to top