Using filters

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:

Open in CodePen

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"
      }]
    }]
  }]
}

Open in CodePen

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
    }]
  }]
}

Open in CodePen

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.

Open in CodePen

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.

Related content

• Changing appearance of focused items