Using filters – amCharts 4 Documentation

amCharts 4 comes with a set of ready-made visual filters that you can apply to virtually any element. This tutorial will explain how you can use them.

What is a filter?

A filter is a method to quickly apply some visual enhancement or modification to an element.

For example, you want your Line series to cast a shadow? Apply a "Drop shadow" filter to it.

Want to wash out your Column series so that colors are not as pronounced? Apply a "Desaturate" filter.

Creating and applying

Creating a filter is as easy as instantiating an object with the class name of the filter you need, e.g. "Drop shadow" filter uses DropShadowFilter class.

Assigning it to an element is as easy as push()'ing it to element's filters list.

let shadow = series.filters.push(new am4core.DropShadowFilter());

var shadow = series.filters.push(new am4core.DropShadowFilter());

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "filters": [{
      "type": "DropShadowFilter"
    }]
  }]
}

That's about it. Now, all columns in our Line series will have a shadow:

See the Pen amCharts V4: Filters (1) by amCharts (@amcharts) on CodePen.24419

You can apply a filter to anything, not just series.

To apply a filter to, say, a column in a Column series, you can push it to a filters on a series' column template:

let shadow = columnSeries.columns.template.filters.push(new am4core.DropShadowFilter());

var shadow = columnSeries.columns.template.filters.push(new am4core.DropShadowFilter());

{
  // ...
  "series": [{
    "type": "ColumnSeries",
    // ...
    "columns": {
      "filters": [{
        "type": "DropShadowFilter"
      }]
    }
  }]
}

Or, if you'd like, you can add one to the series bullets:

let bullet = series.bullets.push(new am4charts.CircleBullet());
let shadow = bullet.filters.push(new am4core.DropShadowFilter);

var bullet = series.bullets.push(new am4charts.CircleBullet());
var shadow = bullet.filters.push(new am4core.DropShadowFilter);

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "bullets": [{
      "type": "CircleBullet",
      "filters": [{
        "type": "DropShadowFilter"
      }]
    }]
  }]
}

See the Pen amCharts V4: Filters (2) by amCharts (@amcharts) on CodePen.24419

Available filters

So far we've only looked at "Drop shadow" filter. There are more. Here's the full list.

Filter	Example	Comment
No filter
`BlurFilter`		Blurs the element. Useful property: `blur`. Sets "intensity" of the blur. The bigger the value, the blurrier the element will become.
`ColorizeFilter`		Washes colors towards one specific color. This filter does not make sense without specific filter settings, like `color` and `intensity`. let filter = new am4core.ColorizeFilter(); filter.color = am4core.color("green"); filter.intensity = 0.5; let filter = new am4core.ColorizeFilter(); filter.color = am4core.color("green"); filter.intensity = 0.5; The above code makes all colors "greener".
`DesaturateFilter`		Desaturates colors. The higher the saturation the more grayscale colors become. Useful property: `saturation`.
`DropShadowFilter`		Adds a "shadow" in the shape of the element. Useful properties: `color` (sets color of the shadow), `blur` (sets how blurry the shadow will look like), `dx` and `dy` (modifies shadow's position in relation to the target element), and `opacity` (sets opacity of the shadow).
`FocusFilter`		Highlights an element with a distinctive outline. The outline thickness, color, opacity can be configured via filter's properties.
`LightenFilter`		Lightens (or darkens) colors in target element. Will have not effect without `lightness` property set, which defines how much lighter (positive value) or darker (negative value) the colors should become.

Modifying filter settings

Some filters are good as they are. For example, the "Drop shadow" filter works completely without modification.

Others might require some tweaking, or might not even make sense without setting properties.

Please refer to the reference of each particular filter for the available properties.

Configuring a filter is as easy as setting it's properties.

Revisiting our Line series with a shadow example, let's put the shadow further away from the line, but make it less prominent by increasing blur:

let shadow = series.filters.push(new am4core.DropShadowFilter());
shadow.dx = 20;
shadow.dy = 20;
shadow.blur = 5;

var shadow = series.filters.push(new am4core.DropShadowFilter());
shadow.dx = 20;
shadow.dy = 20;
shadow.blur = 5;

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "filters": [{
      "type": "DropShadowFilter",
      "dx": 20,
      "dy": 20,
      "blur": 5
    }]
  }]
}

See the Pen amCharts V4: Filters (3) by amCharts (@amcharts) on CodePen.24419

Using multiple filters

Applying multiple filters

The good news is that you are not limited to a single filter per element. You can push as many filters into its filters as you like.

See the Pen amCharts V4: Filters (3) by amCharts (@amcharts) on CodePen.24419

IMPORTANT Some filters might not work together because they are using the same SVG filter properties, and will override each other. For example "Blur" and "Drop shadow" filters won't play nice with each other, with whichever applied last, taking precedence.

Order of filters

The order in which we add filters to the filters list is important.

They will be applied in the same order as they came in, meaning that it might produce different results with different order.

Creating custom filters

If you're need to do something even cooler, you might consider "Creating custom filters".

Using in states

You can apply a filter to an element via its states. For example, if you want your columns to gain a shadow when hovered, you can add a "Drop shadow" filter to a "hover" state.

MORE INFO For more details, examples and a demo, please check our "States" tutorial.