Area Chart
This article describes the Area Chart component and its properties.
Last updated
This article describes the Area Chart component and its properties.
Last updated
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 Area 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 Area Chart, one of the many types of charts available to use within Squirrel.
There are seven property drawers available within the Area Chart Properties Panel - these consist of a GENERAL drawer, a DATA drawer, an X-AXIS drawer, a Y-AXIS drawer, and a GRIDLINES and an INTERACTIVITY 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.
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 and 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
Animation - Used to change the speed of loading animation of the chart when data loads. Select the checkmark to allow/disable
Tooltips - used to format the chart’s tooltips which are visible when in Debug or Preview.
Stack the series - Toggle this to stack the multiple series on top of one another within the chart.
Auto size bars - Toggle this to automatically size the width of the bars to fit evenly within the chart.
Overlay series - Toggle this to have the series lay the series on top of each other.
Group bars - Toggle this to group the data by series on the display. This is toggled on by default.
Start Categories at Axes Intersection - Toggle this option to cause the series to begin at the axes intersection points.
Ignore End Blanks - Toggle this after data is bound to hide blank cells at the end of a selection
Bind to datablock - Select this to bind your chart to a data block. The series is then automatically categorized and ordered according to the labels and values in the chart.
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.
Switch data layout - Used to switch the layout of the data and to determine how the data is read in the chart
If you rebind a datablock, any formatting set will be undone and return to default. Ensure you have the correct range selected before continuing with the chart formatting and styling.
When you bind the chart to a datablock, the default layout in the spreadsheet is columns as series and rows as categories. When you select Switch data layout, this orientation switches, meaning rows become the series and the columns are your categories. See below:
Bind individual series - Select this to manually bind selected series within a data block (e.g. selected columns/ rows in a large block of data.
Chart series - A table outlining all the series created using the “Bind to datablock” or “Bind individual series” options.
Name - Used to name the individual series. This can be manually entered or bound to the spreadsheet.
Values - Select to set/display the current values for the created series. This can only be bound to the spreadsheet.
Plot series on - Use to switch between the primary and secondary axis.
Category labels - Select to set/display the current category labels. This can only be bound to the spreadsheet.
The following properties: STYLING, DATA LABELS, DATA TOOLTIPS and ALERTING apply to the currently selected series. Each property displays which series is currently selected next to its name, e.g. “STYLING - SERIES 1”, or “DATA LABELS - SALES”
STYLING - subsection to customize the styling of the Line on the chart.
DATA TOOLTIPS - subsection to customize the styling of the tooltips displayed on the chart. These can be viewed when in either Debug or Preview mode. Select the checkbox to enable/ disable.
Font - Choose a font style from the dropdown list.
Size - Change the font size of the input text in 3 ways:
Using the spinner buttons
Typing in a value
Binding to a value in a spreadsheet cell
B I U - Use these toggle buttons (bold, italic, underline) to change the format of the input text. When toggled on, the button is blue.
Text Color - The input text will be shown in the color that matches the value entered in the property field.
Opacity - This determines the transparency of the input text.
Capitalization - Change the letter case of the label text content to either uppercase first letter, all uppercase letters, or all lowercase. Unselecting all of the buttons will return the content to its original case format.
Number format - Select an option from the dropdown:
Automatic - This option will automatically format any number displayed within the text label.
Percentage - Adds a percentage symbol to the end of the number value.
Currency -
Currency symbol - select an option from the dropdown box. The chosen currency symbol will be added to the number value.
Number - Defines the value as a number.
DateTime -
Date format - Set the date format by choosing an option from the dropdown box.
Include time - Check the include time option to include time data.
Time format - Set the time format by choosing an option from the dropdown box.
Decimal places - Available when percentage, currency, or number is selected in the Number format property. Enter a value to ensure that any decimal number displayed in the text label is shown to that number of decimal spaces.
Use thousands separator - Available when currency or number is selected in the Number format property. Check this option to group the value into thousands. This allows rapid judgment of the number of digits for example 100,000,000 is much easier to read and interpret than 100000000.
Label Orientation - Select an orientation from the dropdown.
Horizontal - place the labels in a horizontal orientation.
Vertical - places the label in a vertical orientation.
45° - places the label at a 45° orientation.
Font - Choose a font style from the dropdown list
Size - Change the font size of the input text in 3 ways:
B I U - Use these toggle buttons (bold, italic, underline) to change the format of the input text. When toggled on, the button is blue.
Text Color - The input text will be shown in the color that matches the value entered in the property field.
Opacity - This determines the transparency of the input text.
Capitalization - Change the letter case of the label text content to either uppercase first letter, all uppercase letters, or all lowercase. Unselecting all of the buttons will return the content to its original case format.
All properties are the same as X-AXIS, apart from one at the top:
Auto Axis - an option to apply automatic scaling to the axes, defined by the bound data.
Manual Axis - an option to apply manual scaling to the axes, defining your own min/max values and no. of intervals
Manual Scale - select the checkbox to enable this property
Min - Set the minimum value of the Y-Axis scale. This can be done in 2 ways
Manually enter the value into the input box
Bind the value to the spreadsheet
Max - Set the maximum value of the Y-Axis Scale. This can be done in 2 ways
Manually enter the value into the input box
Bind the value to the spreadsheet
# of intervals - a property to define the number of intervals that display on the Y-Axis
Axis Scale -
Linear - A standard linear scaling between a min and max value
Logarithmic - Converts the chart to a logarithmic scale, and displays the appropriate properties to define the scale
Color - This determines the color of the gridline.
Opacity - This determines the transparency of the input text.
Weight - This property determines the line thickness of the border, in pixels. This can be bound to the spreadsheet.
Line Style - This property is only available if the border property has been checked. Select an option from the dropdown box to change the borderline style. The options are solid and dashed,
To make the data in a chart that displays axes easier to read, you can display horizontal and vertical chart gridlines. Gridlines extend from any horizontal and vertical axes across the plot area of the chart. Horizontal gridlines extend from the values going up the Y-axis. This can help, particularly with larger charts, to see where the values line up.
Vertical gridlines extend from the X-axis and are used to separate the individual categories.
All properties are the same as HORIZONTAL - PRIMARY Y-AXIS, apart from a final option:
Axis Lines - Select the checkbox to enable/ disable the axis lines on the chart.
Allow export as image - Click the checkbox to enable this property. This allows the chart to be exported as an image when live.
Allow printing - Click the checkbox to enable this property. This allows the chart to be printed when live.
Allow annotation - Click the checkbox to enable this property. This allows the chart to be annotated when live.
When the checkbox is enabled, this property allows you to zoom into certain areas on the chart by interacting with the range sliders along the X and Y axes.
X-Axis
Start/End by - select from the dropdown to determine how the Start and End properties are measured.
Show as mini-preview chart - select the checkbox to change the view from a bar to a mini-preview of the chart
Default Start - enter the default Start value. This can be bound to the spreadsheet.
Default End - enter the default End value. This can be bound to the spreadsheet.
Y-Axis
Start/End by - select from the dropdown to determine how the Start and End properties are measured.
Default Start - enter the default Start value. This can be bound to the spreadsheet.
Default End - enter the default End value. This can be bound to the spreadsheet.
Allow Cursor Zoom - check this property to enable a cursor to display on the chart when the project is running and your cursor is hovering over it. This also allows you to click and drag an area of the chart which will then be zoomed in on.
