Colors, gradients, and patterns

Colors

Colors in amCharts 5 are represented by a Color object.

Color class also has a bunch of static methods that can be used to convert hex numbers or RGB color identifiers into proper Color objects, but the most common method is to use a standalone am5.color() function which can convert any number or string into a Color object:

series.set("fill", am5.color(0xff0000)); // set Series color to red
series2.set("fill", am5.color("#00ff00")); // set Series color to green
series.set("fill", am5.color(0xff0000)); // set Series color to red
series2.set("fill", am5.color("#00ff00")); // set Series color to green

Wherever you need to specify a color in amCharts 5 you need to pass in a Color object.

Typical settings to use colors for is fill which indicates area fill color, and stroke which indicates line or border (outline) color of the visual elements.

Text color is specified via its fill setting.

Color sets

Colors sets are basically collections of colors with ability to generate new colors according to certain rules as needed.

In most scenarios, a chart would grab next color from the color set using its next() method.

Color set has internal counter, so it will produce new color every time.

Setting own list of colors

A color set comes with a pre-defined list of colors, depending on the theme we are using (if any).

There is a number of ways to override the list as needed.

The most easiest way is to simply set its colors setting to an array of Color objects:

chart.get("colors").set("colors", [
  am5.color(0x095256),
  am5.color(0x087f8c),
  am5.color(0x5aaa95),
  am5.color(0x86a873),
  am5.color(0xbb9f06)
]);
chart.get("colors").set("colors", [
  am5.color(0x095256),
  am5.color(0x087f8c),
  am5.color(0x5aaa95),
  am5.color(0x86a873),
  am5.color(0xbb9f06)
]);

Another option is to modify default theme:

root.defaultTheme.rule("ColorSet").set("colors", [
  am5.color(0x095256),
  am5.color(0x087f8c),
  am5.color(0x5aaa95),
  am5.color(0x86a873),
  am5.color(0xbb9f06)
]);
root.defaultTheme.rule("ColorSet").set("colors", [
  am5.color(0x095256),
  am5.color(0x087f8c),
  am5.color(0x5aaa95),
  am5.color(0x86a873),
  am5.color(0xbb9f06)
]);

Obviously, creating own custom theme is also an option.

Interface colors

Each root element in amCharts 5 has a special version of a color set: interfaceColors.

Unlike a regular color set, it defines colors for specific purposes, rather than plain list of colors.

For example, it defines background, text, grid, and similar colors, that are used throughout chart elements and controls.

To get a color for a specific purpose, we use its get() method.

List of purposes

Setting (purpose)DefaultComment
stroke0xe5e5e5Used for all line elements and outlines.
fill0xf3f3f3Used for element fills.
primaryButton0x6794dcPrimary button background color (e.g. zoom out button).
primaryButtonHover0x6771dcPrimary button background when hovered.
primaryButtonDown0x68dc76Primary button background when pressed.
primaryButtonActive0x68dc76Primary button background when active.
primaryButtonText0xffffffPrimary button text color.
primaryButtonStroke0xffffffPrimary button border/outline color.
secondaryButton0xd9d9d9Secondary button background color (e.g. scrollbar grip).
secondaryButtonHover0xa3a3a3Secondary button background when hovered.
secondaryButtonDown0x8d8d8dSecondary button background when pressed.
secondaryButtonActive0xe6e6e6Secondary button background when active.
secondaryButtonText0x000000Secondary button text color.
secondaryButtonStroke0xffffffSecondary button border/outline color.
grid0x000000Axis grid color. Also used for some other elements like, ticks, hierarchy links, etc.
background0xffffffBackground color.
alternativeBackground0x000000Alternative background. Used for chart cursor's lines, axis fills, clock hands.
text0x000000Default color text.
alternativeText0xffffffAlternative color text.
disabled0xadadadFill color for disabled elements.
positive0x50b300Color to express positive value (e.g. in candlesticks).
negative0xb30000Color to express negative value (e.g. in candlesticks).

NOTEDefault colors may be overridden by themes.

Using interface colors

To grab a color meant for specific use, we can use get() method:

xAxis.get("renderer").labels.template.setAll({
  fill: root.interfaceColors.get("alternativeText")
});

xAxis.setAll({
  background: am5.Rectangle.new(root, {
    fill: root.interfaceColors.get("alternativeBackground"),
    fillOpacity: 0.7
  })
});
xAxis.get("renderer").labels.template.setAll({
  fill: root.interfaceColors.get("alternativeText")
});

xAxis.setAll({
  background: am5.Rectangle.new(root, {
    fill: root.interfaceColors.get("alternativeBackground"),
    fillOpacity: 0.7
  })
});

The above will use alternativeText (default: white) for X axis labels, as well as add alternativeBackground (default: black) to the whole axis.

Now, if we would also enable "Dark" theme, the labels would become black, and axis fill white, because it flips values of the alternativeText and text as well as alternativeBackground and background.

Changing interface colors

We can also modify interface colors, using set() method:

root.interfaceColors.set("grid", am5.color(0xff0000));
root.interfaceColors.set("grid", am5.color(0xff0000));

The above will make all grid lines (as well as some other elements that use grid color) to be red.

See the Pen
Using interface colors
by amCharts team (@amcharts)
on CodePen.0

Dashed lines

To make a line (stroke) dashed, we can use element's strokeDasharray setting.

It needs to be set to an array of numbers, that define dash pattern.

If it's just a single number, it will define a length of the dash and the length of the gap between them.

If there are two numbers, the first one will define length of the dash, and the second one length of the gap.

There can be multiple numbers to create more intricate patterns.

series.strokes.template.setAll({
  strokeWidth: 3,
  strokeDasharray: [10, 5, 2 5]
});
series.strokes.template.setAll({
  strokeWidth: 3,
  strokeDasharray: [10, 5, 2 5]
});

Gradients

For information on how to create gradients for fills and strokes, refer to "Gradients" tutorial.

Patterns

For information on how to create patterned fills and strokes, refer to "Patterns" tutorial.

Shadows

For information on how to enable shadows on graphic elements, refer to "Shadows" tutorial.