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.
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.
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.
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.
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.
- Incrementally drawn line
- Moving dashed line
- Morphing line graph from dashes to solid
- Pulsating bullets
- Bullet with a dashed outline
- Column rollover effects
- Highlighting a column with an animated dashed outline
- Pie slice rollover effects
- Dashed animated guides
- Dashed animated trendlines
- Dashed grid lines
- Category axis labels rollover effects
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!