Pie Chart

This article describes the Pie Chart component and its properties.

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article

The Pie Chart displays data in the spreadsheet to the user. Use it to reveal trends or progress over time and show many different categories of data. In this article, we will be going over the Pie Chart, one of the many types of charts available to use within Squirrel.

Pie Chart Properties

There are three property drawers available within the Pie Chart Properties Panel - these consist of a DATA drawer, a DATA drawer, and a DYNAMIC VISIBILITY drawer. This guide will not describe the dynamic visibility properties as these are generic to each visible component; a separate guide and tutorial on dynamic visibility can be found here.

---

DATA

• Values - The area used to select the data in the sheet to bind to the chart. Do this by hovering over the box, and selecting the “bind to spreadsheet” button in the top-right corner.

• Ignore End Blanks in Values - Toggle this property to ignore end blanks in a selected range. This can be used to hide data that has yet to be added. This is checked by default.

• Labels - The area used to bind the data labels of the bound values. This range needs to be the same size as the Value range.

• TOOLTIPS - this section is used to style the hover tooltips on the chart.

  • SHOW PERCENTAGE VALUE - this section styles the percentage values displayed on the tooltip. This is checked by default.

  • SHOW VALUE - This section styles the values displayed on the tooltip. This is checked by default.

• DATA INSERTION - a subsection to apply Data Insertion to the chart that specifies how data will be inserted into the spreadsheet when the user interacts with the running project. Select the checkbox to enable/ disable. Refer to this article for more on Data Insertion.

• COLORS - a subsection to apply colors to the individual series. These properties can be manually applied or bound to a cell in the spreadsheet.

---

GENERAL

• Title - Used to change and customize the primary title on the Chart. Select the checkmark to hide/show.

• Subtitle - Used to change and customize the secondary title on the Chart. Select the checkmark to hide/show.

• Chart Background - Used to change the chart’s background, border color, and opacity.

  • Colour can be set in 3 ways

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value (as HEX code)

    • Binding to a color value in a spreadsheet cell (formats included below)

      • A color name - e.g. red, green, blue-violet, steel blue

      • a HEX code - e.g. #ff2233

      • an RGB specifier - e.g. rgb(255,40,75)

      • A HSL specifier - e.g. hsl(120, 100%, 50%)

  • Opacity can be set in 3 different ways:

    • Using the spinner buttons

    • Typing in a value

    • Binding to value in a spreadsheet cell

• Legend - Used to format the chart legend. The legend updates automatically when data is added. Select the checkmark to hide/show

• Labels - format the chart labels displayed on the component. You can set the font, color, number formatting, and position.

• Styling - adjust the shape and style of the Pie Chart, from the Conut Size to the Pie Shape and the Start Angle.