Filters

amCharts 5 allows applying various filters to its visual elements. This tutorial will explain how we use them.

Compatibility

IMPORTANTFilter functionality is not supported by Safari browsers - both desktop and mobile. This is not a bug, but rather a choice by Apple.

Built-in filters

There's a number of settings that we can use to apply various visual effects to Sprite elements:

SettingValue rangeComment
blur0 to XApplies blur effect.
brightness0 to 1Modifies "brightness" of the element.
contrast0 to 1Modifies contrast.
saturate0 to XModifies color saturation:
0 - grayscale, 1 - no changes, >1 - more saturated.
sepia0 to 1Applies sepia filter:
0 (no changes) to 1 (complete sepia).
invert0 to 1Inverts colors:
Range of values: 0 (no changes) to 1 (completely inverted colors).
hue0 to 360Rotates HUE circle of colors.
series.slices.template.setAll({
  sepia: 1,
  brightness: 0.5
});
series.slices.template.setAll({
  sepia: 1,
  brightness: 0.5
});

SVG filters

We can also use element's filter setting to set any SVG filter.

series.slices.template.setAll({
  filter: "drop-shadow(16px 16px 20px blue) sepia(1)"
});
series.slices.template.setAll({
  filter: "drop-shadow(16px 16px 20px blue) sepia(1)"
});

Example

See the Pen Chart with SVG filters by amCharts team (@amcharts) on CodePen.