Skip to content
amCharts 5

Adding watermarks to charts

This short tutorial will explain how we can add various types of information as a watermark on charts.

In plot area of an XY chart

Section titled “In plot area of an XY chart”

An XY chart has a special container called a plot area, accessible via chart.plotContainer.

We can create any type of element, as well as push it into plot container’s children.

The following code adds a text in a lower-left corner of the plot area, as well as a logo to the lower-right corner.

let copyright = chart.plotContainer.children.push(am5.Label.new(root, {
  text: "Copyright amCharts",
  x: 10,
  y: am5.p100,
  centerY: am5.p100,
  dy: -10
}));


let logo = chart.plotContainer.children.push(am5.Picture.new(root, {
  src: "https://assets.codepen.io/t-160/amcharts_light.svg",
  width: 100,
  x: am5.p100,
  centerX: am5.p100,
  dx: -10,
  y: am5.p100,
  centerY: am5.p100
}));
Open in:New tabChart Maker
Watermarks on an XYChartwatermarks-on-an-xychart

In a panel of stock chart

Section titled “In a panel of stock chart”

Since panels of a stock chart are essentially instances of an XY charts, we can do the same as we did in the previous section: push elements into panel’s plotContainer.children:

let copyright = mainPanel.plotContainer.children.push(am5.Label.new(root, {
  text: "Copyright amCharts",
  x: 10,
  y: am5.p100,
  centerY: am5.p100,
  dy: -10
}));


let logo = mainPanel.plotContainer.children.push(am5.Picture.new(root, {
  src: "https://assets.codepen.io/t-160/amcharts_light.svg",
  width: 100,
  x: am5.p100,
  centerX: am5.p100,
  dx: -10,
  y: am5.p100,
  centerY: am5.p100
}));
Open in:New tab
Watermarks on a StockChartwatermarks-on-a-stockchart

In a map chart

Section titled “In a map chart”

On charts that do not have a plot container, we can just push our watermark elements as children of the chart itself.

The following code will add watermarks to a map chart:

let copyright = chart.children.push(am5.Label.new(root, {
  text: "Copyright amCharts",
  x: 10,
  y: am5.p100,
  centerY: am5.p100,
  dy: -10
}));


let logo = chart.children.push(am5.Picture.new(root, {
  src: "https://assets.codepen.io/t-160/amcharts_light.svg",
  width: 100,
  x: am5.p100,
  centerX: am5.p100,
  dx: -10,
  y: am5.p100,
  centerY: am5.p100
}));
Open in:New tabChart Maker
Watermarks on a MapChartwatermarks-on-a-mapchart

Positioning watermarks

Section titled “Positioning watermarks”

Watermark position withing the parent container can be controlled via several settings:

Setting Comment
x and y Horizontal and vertical coordinates. Can be either absolute pixel value (e.g. 50, 0, -10, etc.), or relative (e.g. am5.percent(50), am5.p100, etc.). Relative values are calculated based on width or height of the container, e.g. plot area.
centerX and centerY Which horizontal (centerX) or vertical (centerY) position within the element to consider a center when positioning it. Can be either absolute pixel value (e.g. 50, 0, -10, etc.), or relative (e.g. am5.percent(50), am5.p100, etc.). Relative values are calculated based on width or height of the element itself.
dx and dy Adjustment of the position of the element. Accepts only absolute pixel values. Positive value will shift the element right/down. Negative ones will shift the element left/up.