Documentation

CSS animations

Since we have added the possibility to add class names on our chart elements, you are able to animate the SVG elements with CSS. Define custom class names to point out specific data points or attract the users in general by animating the whole graph at all. This gives you more freedom, an interactive feeling and pure satisfaction.

Browser Support

Most of the modern browser already implemented the CSS animation on SVG elements due the W3C drafts. Unfortunately the guys from the Internet Explorer decided to skip this whole subject, which is not a problem at all because the browser will simply ignore those definitions and displays the normal static chart. Please take a look to the official SVG specification to see which properties can be modified.

Possibilities & Benefits

Enjoy the good'ol childhood times and dive into the CSS playground to and create animation as you want. Point out a single data points, highlight whole graphs or add some interactivity with the CSS mouse states - the only limitation is your imagination. By that you will be able to keep the eyes on the important parts, your charts.

See the Pen CSS Animations by amCharts (@amcharts) on CodePen.

Setup & Markup

We've created a namespacing concept which let you animate all element from one type at once or simply pick one and animate it individually. To get started you just need to enable the addClassNames property in your chart setup, then start with the CSS definitions - that's it. We've created a sample file from which you can start of to modify or simply obtain.

<script type="text/javascript">
  var chart = AmCharts.makeChart("chartdiv", {
    type: "serial",
    addClassNames: true,
    classNamePrefix: "amcharts", // Default value
    ...
  });
</script>
<link rel="stylesheet" href="http://extra.amcharts.com/support/ameffects.css">
<style type="text/css">
  .amcharts-graph-line {
    -webkit-animation: am-pulsate-line 1s linear infinite;
    animation: am-pulsate-line 1s linear infinite;
  }
</style>

To pick an individual graph simply define an id within the graph setup and use that in your CSS like following, please take a look to the css class name overview to see which elements you can access through the CSS selector.

<script type="text/javascript">
  var chart = AmCharts.makeChart("chartdiv", {
    type: "serial",
    addClassNames: true,,
    classNamePrefix: "amcharts", // Default value
    ...
    graphs: [{
      id: "g3",
      ...
    }]
  });
</script>
<style type="text/css">
  .amcharts-graph-g3 .amcharts-graph-line {
    -webkit-animation: am-pulsate-line 1s linear infinite;
    animation: am-pulsate-line 1s linear infinite;
  }
</style>

JavaScript Charts

Have a look to those inspirations and see what you can achieve only with CSS, pick one of those below and feel free to overtake it or tweak it to your needs.

JavaScript Maps

All effects you've seen above can be applied to our maps as well, we've prepared some different ones for you to get an idea what else can be done to highlight areas or lines.

We hope you'll have that much fun as we had while doing this feature, happy coding!