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:
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 |
---|---|
cht=tx&chl=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. |
|
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. |
|
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:
|
|
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 (
|
|
Same as above, but with a 45 degree gradient. |
|
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 or90
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
to1
, where1
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 |
---|---|
|
chf=bg,ls,0,CCCCCC,0.15,FFFFFF,0.1 |
|
chf=bg,ls,90,999999,0.25,CCCCCC,0.25,FFFFFF,0.25 |