SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
Visualizing data with the help of charts and graphs has always been an effective way to engage your audience and make complex information easier to digest.
But static data visualizations are old news. You can now add animation effects to your charts to bring them to life and further pique your audience’s interest.
More than just a nice, cool-looking effect, animation can actually help your audience better understand and assimilate the information being presented.
Consider a graph that slowly comes into view, like the one below.
An animated chart similar to the one above can effectively draw the audience’s focus and lead their eyes to specific points on the graph. This is almost impossible to do with a static chart, where you can’t control the pace of the information being presented.
In Visme, it’s very easy to create animated charts and graphs of your own. You can also make your graphs interactive by adding popups and hover effects.
In this short tutorial, I’ll show you how to create animated charts and graphs in Visme so you can add some bling to your next presentation or report.
If you prefer to watch a short video instead, check out this Visme YouTube tutorial on how to create charts and graphs in Visme with a few clicks.
In Visme, all charts and graphs are pre-animated and customizable so you can experiment as much as you like or remove the animation altogether.
Keep reading for a detailed step-by-step tutorial with screenshots.
Instead of using a complex software or hiring a professional animator, you can simply use Visme’s graph maker to whip up animated charts in a few clicks.
We recommend signing up for a free Visme account before you begin. This will make it easier for you to follow the steps below and make your own animated chart.
Let’s get started!
Once you log into your Visme account, you’ll be taken to the main dashboard. This is where you’ll be able to see all your projects and also create new ones.
Navigate over to the left sidebar and click on Create.
Here, you have the option of choosing a template or starting with a blank canvas.
Start with a presentation, infographic or report template, or type in “chart” or any other keyword in the search bar at the top to see relevant results.
If you're looking to create a report with several types of charts rather than just an individual graph, you can select the Documents → Reports category to view dozens of templates with a variety of charts and graphs in different styles.
These can also be searched according to industry, such as marketing, business, non-profit, health, education and technology, among others.
Once inside the Visme editor, you can do one of two things; create a new chart by selecting Data from the left panel or modify an existing chart within a template by clicking on it.
In either case, the chart engine will appear on your screen, and you'll see a spreadsheet area on your left. This is where you will insert your information.
You can insert data into your spreadsheet in three different ways:
Learn more about how to connect and import data into charts.
Next, choose the chart or graph type that best meets your needs.
You might be wondering why this step comes after you’ve added in your data. This is so you can easily toggle between different chart types to see which makes your data look best.
You will see various chart types you can browse through at the top of the chart engine. There are 20+ different types of graphs available in Visme, including bar, pie, donut, line, area and scatter plots.
If your data consists of percentages that add up to 100 percent, then a pie or doughnut chart should be ideal. Or, if you want to show the relationship between data points across time, then a line graph might be the most effective.
This step is optional, but you can add more data sets to draw a visual comparison between them using your animated chart.
To do so, all you have to do is insert your additional rows of data below the first.
For example, if you want to compare the attendance at different types of cultural events for England and Wales, you can easily visualize it using a bar chart like the one above.
You'll see that the graph or chart is automatically animated in the chart preview.
Once you've inserted your data, you can now customize the look of your chart or graph, depending on which type you've selected.
To start, you can change any of the colors in your chart, including individual bar, line or pie segment colors, as well as the colors of the background, labels and titles.
You can choose from the colors stored in your global color palette, which saves hues applied previously within the same project, or you can insert the hex codes of your favorite color combinations.
Or, if you're going for a more conservative and professional feel, you can also stick to monochromatic color schemes, which are simply shades, tints and tones of a single color.
Whatever you decide on, just make sure it is consistent with the visual style and theme of your report, presentation or infographic.
After you've decided on your color scheme, you can adjust other settings, such as the title and subtitle of your graph or chart.
You can also change the fonts and adjust settings related to the axes, legend, values and appearance. Another option is to enable captions on hover, which adds a dose of interactivity to your animated chart.
Also, you can choose between different styles of animation, such as Linear, Bounce and Elastic, or turn the animation off completely.
To see if you like the overall look of your chart or if you would like to make adjustments, you can click on the Present button at the top of your screen to preview it.
In this mode, you will see the animation effects that were added to your chart or graph, as well as the rollover values that appear when you place your cursor over each bar or segment.
To publish and share your animated chart, all you have to do is click on the Share button at the top of your screen.
Here, you can choose from three different options:
Finally, if you want to download your project as a static image, you can save it as a JPG, PNG or PDF file. But if you want to conserve the animation, there's the option of downloading it as an HTML5 file.
Creating an animated chart in Visme takes just a few minutes. You don’t need to have any design or animation skills, or even download any complex software.
You can create advanced data visualizations and add animation and interactivity to them right in your browser.
If you haven't already taken the new Visme for a test drive yet, you can sign up today for free and try it out for as long as you want.
We would love to hear your feedback and impressions. Just drop us a line in the comments section below, and we'll get back to you!
Design visual brand experiences for your business whether you are a seasoned designer or a total novice.Try Visme for free