Patterns

This tutorial looks at how we can create patterns to use for element fills ant outlines.

To apply a pattern to an element, we need to do two things:

  • Create a pattern object.
  • Assign it to element's fillPattern and/or strokePattern.

Creating a pattern

Pattern object is created using its new() method:

am5.LinePattern.new(root, {
  color: am5.color(0xffffff),
  rotation: 45,
  width: 200,
  height: 200
});
am5.LinePattern.new(root, {
  color: am5.color(0xffffff),
  rotation: 45,
  width: 200,
  height: 200
});

Available pattern types

Pattern classExample
LinePattern
RectanglePattern
CirclePattern

Patterns can be customized by applying rotation, gap, stroke, and other settings, which we'll explore in a bit.

Setting pattern

To set a pattern fill on an element, we need to assign it to element's fillPattern setting.

Similarly, to assign it to element's stroke (line), we can use strokePattern.

columnSeries.columns.template.set("fillPattern", am5.LinePattern.new(root, {
  color: am5.color(0xffffff),
  rotation: 45,
  width: 200,
  height: 200
}));
columnSeries.columns.template.set("fillPattern", am5.LinePattern.new(root, {
  color: am5.color(0xffffff),
  rotation: 45,
  width: 200,
  height: 200
}));

Colors

Primary color

To set a color and opacity for pattern shapes, we use its color and colorOpacity settings.

If those are not set, the pattern will inherit stroke and fill colors from the element it is applied to.

columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  color: am5.color(0xffffff),
  colorOpacity: 0.5
}));
columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  color: am5.color(0xffffff),
  colorOpacity: 0.5
}));

Fill color

Pattern will use color to color it shapes, but will leave gaps between them transparent.

If we'd rather have that area filled, we can use pattern's fill and fillOpacity settings.

We can also "invert" the color pattern, by setting fill but omitting the color setting.

columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  fill: am5.color(0xffffff),
  fillOpacity: 1
}));
columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  fill: am5.color(0xffffff),
  fillOpacity: 1
}));

Sizing patterns

Normally, patterns are constructed as 50x50 pixel squares.

However, in some cases (for example rotated line pattern) they might not tile nicely.

In such cases, we might need to increase the size of the pattern using width and height settings:

columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  color: am5.color(0x297373),
  fill: am5.color(0xffffff),
  rotation: 45,
  width: 400,
  height: 400,
}));
columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  color: am5.color(0x297373),
  fill: am5.color(0xffffff),
  rotation: 45,
  width: 400,
  height: 400,
}));

Rotation

By setting rotation on a pattern, we can create wholly distinctive patterns:

columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  fill: am5.color(0xffffff),
  fillOpacity: 1,
  rotation: 45
}));
columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  fill: am5.color(0xffffff),
  fillOpacity: 1,
  rotation: 45
}));

NOTE Some rotated patterns will tile well. Some tweaking of gap, width, height, and possibly other settings might be required.

Repetition

Normally, pattern repeats the tiles in all directions, until all of the target area is filled.

The setting repetition can be used to change that.

Available values are: "repeat" (default), "repeat-x", "repeat-y", and "no-repeat".

NOTE Changing repetition may cause element not fully filled.

Configuration

Each pattern type also has specific configuration settings.

For example, gap setting is available in all pattern types, and is used to set spacing between elements: lines, rectangles, or other shapes.

columnSeries.columns.template.set("fillPattern", am5.LinePattern.new(root, {
  color: am5.color(0xffffff),
  rotation: 45,
  width: 200,
  height: 200,
  gap: 10
}));
columnSeries.columns.template.set("fillPattern", am5.LinePattern.new(root, {
  color: am5.color(0xffffff),
  rotation: 45,
  width: 200,
  height: 200,
  gap: 10
}));

There are also type specific settings, e.g. checkered (default: false) for rectangle and circle patterns:

columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  color: am5.color(0xffffff),
  checkered: true
}));
columnSeries.columns.template.set("fillPattern", am5.RectanglePattern.new(root, {
  color: am5.color(0xffffff),
  checkered: true
}));

For more configuration options, visit following class references:

Example

See the Pen
Stacked column chart
by amCharts team (@amcharts)
on CodePen.0