How to make animated Bar Chart Race

    Bar Chart Races have become very, very popular lately. And this is not without reason - they allow you to display Timeseries data in a visual and exciting way. In this article, we'll show you how to make a beautiful Bar Chart Race using LivingCharts.com. An example of the resulting animation:

Let's get started!

    To get started, register or log into your LivingCharts.com account. You will see your projects page. Create a new project by clicking on the "Create Project" button and choosing the project type - Bar Chart Race.

    After creating the project, the project editing page with the default template will open. Let's set up the project to impress everyone with beautiful and unique information!

    At the top center, there is a view switch - you can display data (Data button) or a preview of your animation (Preview button). First, let's turn on the display of data.

Data

    You can insert data into the table in three ways: fill in the table manually, using the Ctrl + V key combination, using the "Import" button, and uploading your file (many formats are supported, but we recommend using CSV, ODS, XLS or XLSX). On the right is the data settings panel. Here you can customize the columns that contain information about the names of columns, images, and categories. Now we need to specify the columns with titles and pictures.

Project settings

    Let's go to the project settings by clicking on the Preview switch. On the right, you see the project settings panel:

    All settings are grouped into categories. In the General group, we see the main settings: animation duration, FPS, Aspect Ratio, as well as pause duration at the beginning and end of the animation. You can change the background (even a transparent background is available if you want to export the animation into a series of pictures with transparency), the order in which the titles are displayed (it can be displayed both to the left of the column or on the column itself), the color of the columns (one color, palette, gradient ), as well as much more.

    Values can be prefixed and suffixed (useful, for example, for dollar amounts or other currencies). In the Additional Elements tab, you can add other elements - for example, plain text, additional graphs, or an image. Experiment with the settings and see the result right away.

Export

    With the appearance customization ready, it's time to share the resulting animation with the world! Click on the "Export" button and see the export dialog:

    The most interesting thing is that you can export the animation directly to the video with the required resolution. After clicking on the "Export" button, the video will be rendered in the browser (some browsers slow down rendering when the web service tab is inactive).

    Another option is to export the animation to a series of images with transparency (you can select a transparent background in Layout -> Background Color). Exporting to a series of images is slightly faster than rendering a video, but it requires more RAM. This option is useful if you want to embed animation into your finished video.

    Another export option is an embed code for another site. Copy the embed code and paste it wherever you want on your site - and our beautiful animation will appear there.

Video Tutorial

Congratulations!

    You have finished the tutorial on the basic functionality of the service. If you have any questions, do not hesitate to write to Telegram , or e-mail mail@livingcharts.com We hope you enjoy working with our service, and your animations will amaze a large number of users!