Applying SVG filters on charts and maps – amCharts Version 3 Documentation

Since 3.13.0 it is possible to define SVG-Filter natively through the chart setup, without touching the actual SVG or messing with the chart events. We have spend a while to think about a way how to provide you the best and easiest solution to define those SVG definitions – and guess what, the simple JavaScript object made it.

You only need to define the defs in your chart setup and enable addClassNames to apply those definitions to your chart elements through CSS, that's it.

Showcase & Awesomeness

See the Pen Using SVG Filters with amCharts by amCharts (@amcharts) on CodePen.

Support & Performance

Depends how many chart elements or total area you are pushing through the filter it might take a while until the final result is being shown but it's totally worth it and your user won't take their eyes off the charts.
The cross browser support isn't bad at all just the Internet Explorer support those since IE10. Don't abandon your mobile user, you might want to lower the complexity of your filter because the higher the processing time the higher the battery consumption. Last but not least check if all target browser render those effects properly, not very browser vendor implemented the filter correctly.

How it works

We have added a simple recursive method which gives you all the freedom you need by defining those definitions/filter and be completly independent from our side in case there are some bleeding edge features you just want to add but first let's dive into the definition.
Assuming you have already addClassNames enabled and got your defs ready to get defined, let's start with a simple blur effect:

var chart = AmCharts.makeChart("chartdiv",{
    defs: {
        "filter": [
            {
                "id": "blur",
                "feGaussianBlur": {
                    "in": "SourceGraphic",
                    "stdDeviation": "10"
                }
            }
        ]
    },
    ...
});

As you may have noted all keys which holds an array or object becomes to an element otherwise they will be attributes of this element. For this specific sample we have used feGaussianBlur and applied this filter on the SourceGraphic with slight deviation of 10, which generates following output:

<defs>
   <filter id="blur">
       <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
   </filter>
</defs>

The SVG side is done now, the only missing part is the link between filter and chart element which can be done through CSS like following:

.amcharts-graph-g1 .amcharts-graph-fill {
  filter: url(#blur);
}

See the Pen Using SVG Filters with amCharts by amCharts (@amcharts) on CodePen.

Possibilities & Inspiration

There are endless variations you can create, take a look to the W3C recommendation to see how many different filter you can apply and be combined with each other.
To give you a starting point we have created few samples to play around: