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

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
}));

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

var 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
}));

See the Pen Line Graph by amCharts team (@amcharts) on CodePen.

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
}));

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

var 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
}));

See the Pen Watermarks on a StockChart by amCharts team (@amcharts) on CodePen.

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
}));

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

var 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
}));

See the Pen Watermarks on a MapChart by amCharts team (@amcharts) on CodePen.

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.