Customizing Lines

Overview

Some Google Charts, such as the Area, Line, and Combo Charts, have
lines connecting data points. You can customize the color, thickness,
and dashing of the lines using the techniques on this page.

Changing the Color

You can change the color of the lines that connect data points in
Google Charts in two subtly different ways: with
the colors option to change the chart palette, or with
the series option to specify the color for particular
series.

In the following chart, we set the color of each series explicitly.

[This section requires a browser that supports JavaScript and iframes.]

Above, the colors are specified by hex value
(e.g., '#e2431e', or '#f00' for a
saturated red) but can also be specified by English name. The
following example illustrates this, and also shows how to control
colors by fixing the chart palette with the colors
option, as opposed to setting the colors of individual series. One
difference is that if you fix the palette and there are more
series than colors in your palette, the colors will be reused: if
your palette consists of red and blue, half the series will be red
and the other half blue.

[This section requires a browser that supports JavaScript and iframes.]

Dashed Lines

Many styles of dashed lines are possible via
the lineDashStyle option, which takes an array of
numbers. The first number indicates the length of a dash, and the
second indicates the gap after it. If there is a third number,
that's the length of the next dash, and a fourth number, if present,
is the length of the next gap.

When the chart is drawn, these lengths are repeated, so [4,
4] means a succession of 4-length dashes and 4-length
gaps. [5, 1, 3] means a 5-length dash, a 1-length gap, a
3-length dash, a 5-length gap, and so on. Some examples:

[This section requires a browser that supports JavaScript and iframes.]