How to Create a Pie Chart

This guide will show you how to create a pie chart with the Visuagic Chart Maker step by step.

Basic Tool Description

First of all we have to go to the Chart Maker app.

The application page has a main work area, a sidebar to help navigate the steps needed to create a chart and an options/configuration menu.

Each step is presented in a window that has a toolbar with navigation buttons to go to the previous or next step easily. The main area of the window will have all the controls needed to perform that step in particular.

The steps are the following:

  • The first step is to "Load Data" you want to present in a chart format.
  • The second step is to "Customise Data" to adjust the detected data ranges or limit what you want to display.
  • The third step is to "Choose Chart" type for your data.
  • The forth step is to "Customise Chart" fonts, colours, labels and everything related to the aspect.
  • The fifth and final step is "New Chart & Save" where you can see the new chart, choose the starting axes configuration and save it.

In the options menu you can choose to show an inline help on most of the controls to guide you when creating the charts. There is also an option to show a miniature chart pop up window that updates live and that you can reposition so it does not interfere with the controls of the step you are working on.

Let's activate the miniature chart to see what is going on during the chart creation steps.

Loading the Data

The Visuagic application creates interactive charts so, to start, it needs some data to display.

You can copy and paste data from various sources directly into the input area. We have optimised the loading process to understand the most common open data formats. You can also copy-paste straight from various spreadsheet software.

As the application centres its functionality around creating charts it does not provide many data processing capabilities. You can use your favourite software to edit and process the data.

Once you are happy with the data then you can click and load it to create any and charts.

We also provide some sample data so you can start trying the possibilities straight-away and without effort. This sets of sample data come directly from various open data repositories and we have not processed or adapted them any more than formatting so they fit the input box.

To create a pie chart you need to choose what data you want to show as size of the pie slices. For this example let's load the Oil Reserves sample data and we will use the oil reserves value as size constrain. This is a good set to try the Chart Maker because it contains a reasonable amount of data and you can create maps or any other type of charts with it.

Once you have the data loaded into the input box click the "Check and Load Data" button. This makes sure that the Chart Maker can understand your data structure. This will show any errors and also some information like how many data points there are.

At this point if you have the pop up miniature you will see that a chart is already rendered with this data and default values for axes and colours.

Customising the Chart Data

The Visuagic application will parse the data and identify the different axes present, their type and range. In this step you can adjust the settings detected.

For example if you have a percentage range Visuagic will set as axis lower point the minimum value and as a highest point the maximum value, but it might be better to set the range from 0 to 100 to make the chart more clear.

You can also choose if there is any data you do not want to use in the chart and switch that axis off.

Choosing a Chart Type

Let's continue to the third step of the chart creation process and choose a pie chart type. You can create different types of pie charts, doughnut charts and also half-pie charts that are perfect to present election results.

Let's choose a standard pie chart for this example.

If you look at the resulting chart pie you can see that it has done a pie chart with all the data points, and that is probably not what you want. By default the Chart Maker will display all the data you loaded. Then you can filter and choose which sets of data you want to have on the axes by default. When you save the chart the axes configuration you have chosen is stored and displayed by default, but with the interactive format the user will be able to play around and see different configurations.

Customising the Chart

In this step we can adjust fonts, titles and colours. This step is where the main difference between the "Free" and "Max" version of the Visuagic Chart Maker software resides. The "Max" version will have more options, more fonts, more colour presets and so on.

Let's give the pie chart the final touches needed before it is ready for distribution.

Usually it is a good idea to add a title to the chart, specially if you plan to distribute it online.

You can also change the font to match the look of your website or blog.

Next you can choose the set of colours used to colourise the data values for the chart.

The "animation time" is the interval between frames if you choose to save a chart and file format that allow for animations.

Then you can add the source of the data values, a link and any copyright notes. Please do so when possible, specially if you plan to distribute chart over social networks, for people to be able to track down the source of the data.

After that you can choose a language for the chart labels and even change some of them yourself.

Once you have adjusted all the visual aspects of the chart you can continue to the final step.

New Chart and Save

Here you can see the final chart, adjust the initial default axes and save it with different formats and aspect ratios. If during the creation process you have interacted with the miniature chart the state will be reflected here and also if you interact with the final chart the miniature is updated accordingly.

Adjusting the Chart Axes

The Visuagic charts allow you to adjust and change the axes displayed within the chart itself and you can see the changes live. This is a key difference compared to other chart generation programs. When saving interactive charts this behaviour is also saved and available to the people that will interact with it.

If you look inside the chart itself you have the axes area. Each individual axis is a button you can click. This makes the axis to display a different set/column of the data you loaded.

The first group of axes control the way the data is displayed within the possibilities of each chart. This category includes the X axis, Y axis, Colour, etc.

The second groups of axes control (or filter out) the data. This category includes the Play axis, the Select (for comparison charts) and so on.

Each chart shows the axes needed for the specific visualisation to operate and display the data properly.

In the case of this pie chart let's start by saying we want to display the oil reserves by year.

This means we should start by changing the "Play" axis to select the "years" column. Then we select one of the year values to have a better grasp of the data.

For a pie chart the most important thing is to decide which set of data controls the size of the different slices. In this case we will select the "value" of the oil reserves by clicking on the "Value" axis until we find it.

Next let's add a "Label" on the pie chart to display the country name. Simply click the "Label" axis until you find the name data set and it will appear on the chart.

Next let's choose the colour and in this case we would like to have the colours by value.

With that you have a very basic pie chart created.

Aspect Ratio

Finally you can choose the aspect ratio you want the chart image to have. This is specially important for some social networks, like Twitter, where they show all images a certain size and if they don't fit they crop them. It also gives you more freedom when choosing the composition if you are adding the charts to a blog or website.

You can easily change the aspect ration and save the same chart in different formats. The Visuagic software will adjust labels and spaces automaticaly for the chart to be clear on the choosen aspect ratio.

Saving the Chart

At last it is time to generate the chart and save it.

You can choose from various formats, each has its advantages and disadvantages.

If you want to insert the interactive chart on a website or blog for the people to interact with it then the best option is the "interactive svg".

To present an animated chart on a web site or send it through social media then the "animated gif" is your best option.

In case you simply want to have a fixed chart with no interaction the the "still png" or "still gif" are the formats to go for.

Some of the formats might take some time to generate, for example the "animated gif" will have to render the entire animation and it depends on the size of the animation axis and the speed of your computer. Please be patient in that case.

Finally you can save more than one variation of the chart without having to go trough the entire chart creation process.

For example, you can save a "square" "interactive svg" and the change the selections to a "16:9 - Twitter" "animated gif" and save again without having to import the data or customise the chart again.


And that is it, we hope you enjoy the simplicity this application brings you to create charts and data visualisations.