amCharts Blog

3.1.0: Introducing patterns and hand-drawn style

Before reading this, we suggest visiting this page and checking the charts we created to inspire you. Were you surprised? We are sure you were!

With v 3.1.0 of our charts and v 3.6.0 of maps, we introduced support of patterns and hand-drawn style. These features will allow you making your charts even more stunning!


Patterns can be set for entire graphs or for individual columns/slices. In case you want to set pattern for a graph, use pattern property of AmGraph. If you want to set individual pattern for a column or slice, describe patterns in chart’s data and set patternField for a graph or pie/funnel chart. Value of pattern should be object with url, width, height of an image, optionally it might have x, y, randomX and randomY values. For example: graph.pattern = {“url”:”../amcharts/patterns/black/pattern1.png”, “width”:4, “height”:4}; check amcharts/patterns folder for some patterns. You can create your own patterns and use them. Check samples to see how this was done.

Hand-drawn style

If you set chart.handDrawn = true, the lines of a chart will be distorted and will produce hand-drawn effect. You can also modify handDrawScatter (default value is 2) and handDrawThickness (default value 1) properties of AmChart class for more scattered view.