Skip to main content

How do I build Pie Chart components?

Updated

The Pie Chart component enables you to compare individual values or percentages in relation to a whole. It's ideal for displaying data such as regional sales figures, poll results, or any other value that can be broken down categorically and compared to the big picture.

Here is an example of this component using the "pie" style.

This article includes:

Component structure

Here is the structure of the Pie Chart component. This area of the Klip Editor is called the Component Tree.

Understanding labels and values

Pie charts show proportions of categories, where the proportions and categories are defined by the Labels and Values subcomponents. Each label must have a corresponding value and the Labels and Values subcomponents must contain the same number of items, in matching order. For example, using the data from the Regional Bookings pie chart displayed above, the formulas for the Labels and Values subcomponents would be:

  • Labels: ARRAY("Holland", "Italy", "Norway", "Russia", "Sweden")
  • Values: ARRAY(3070, 3507, 1968, 2969, 3235)

Choosing a chart style and display options

You can either display your data as a pie (pictured above) or as a donut (pictured below). You can also choose a chart size, select the maximum number of data slices to display, and customize your label colors. 

To choose a chart style and display options:

  1. Select Pie Chart from the component tree.
  2. On the Properties panel, choose a Pie Style.
  3. At Chart Height, choose the optimal height for your pie chart.
  4. Enter a number for the Max slices you want to display.
  5. If you want to customize the slice colors, click Override the default colors and choose your own.

Choosing chart label display options

You can display data within your labels as percentages or values.

Note: If you choose to hide the labels from your chart, you will still be able to see them as a tool-tip by hovering your mouse pointer over any section of the chart.

To set label display options:

  1. Select Pie Chart from the Component Tree.
  2. At Labels, choose to hide labels or show them (either around the chart or in the legend).
  3. At Label size, use the drop-down to select a font size for the labels.
  4. Select the check boxes to Show values, Show percentage, or to show both.

Video demo on building a pie chart

Watch this video for a quick demonstration on how to build a pie chart Klip. It uses sample data that’s included in your Klipfolio account so you can follow along.

Please note that after this video was filmed, we improved the method for adding a component and a data source to a custom Klip. After clicking Build a Custom Klip, you land in the Klip Editor where you select the Pie Chart component and drag it into your Klip. Then you connect to your data by clicking +Add Data Source at the bottom of the Klip Editor window.

Related articles