Voltapp 🇫🇷

Voltapp 🇪🇸

🎉 Home

Voltapp Introduction

CUSTOMIZE A TEMPLATE ⏱

Discover Templates

Create your Airtable

Connect your data

Publish your app

LEARN VOLTAPP

Discovery of the interface

Custom the design

Placing elements

Design examples & Devices

Create dynamic content

Manage data with Airtable

Combine templates

CREATE YOUR 1rst APP

Dynamic content

Data & design creation

GO FURTHER

Webhooks integration (Make, Zapier…): ex Notion

Internationalization

REFERENCE

Voltapp Lexicon

Expression blocks

HELP

To be accompanied

How to do it with Voltapp

COMMUNITY

🔗 Our discord

Voltapp Updates

The Pie Chart node displays a statistical pie chart display with many customizable elements:

Components

Pie chart

Data

Customize the data displayed here: id, color, label (the name displayed), its value.

Spacing

You can vary the spacing between the data displayed on the chart.

Edge Size

You can create a border, and vary its thickness.

Border Color

The border color can be changed.

Inner Circle

The inner circle is the circle in the center of the diagram. You can reduce or increase its size.

Rounding

You can choose to round the edges of the pie chart "shares".

Interactive

Finally the chart can be interactive when you move the mouse over it: the names and values of the different parts appear.

Labels

The labels are the texts that are displayed on the different parts.

Enabled

It is possible to activate or not the labels, i.e. make them visible or not.

Font

You can determine the font you want.

Size

You can vary the size of the font.

Color

You can change the color of the labels.

Bubbles

The bubbles are the text bubbles that display the names of the parts when the diagram is interactive.

Activated

Bubbles can be enabled or disabled.

Font

You can choose the font of the bubbles.

Size

You can change the font size.

Color

You can set the color of the font.

Font

You can choose the background color of the bubble.

Style

The style manages the general visual properties applied to this node.

Background

Control the background (image, color, or gradient) of the node.

Opacity

Control the opacity of the node.

Rounding

Controls the radius of the rounded outer corners of the node. You can set the radius for all corners (top left, top right, bottom left, bottom right) or for each corner individually.

Border

Controls the shape, color and thickness of the node's border.

Thickness**: The thickness of the border. You can set the thickness for all borders (top, left, right, bottom) or for each one individually.
Shape** : the style of the border.
Color** : the color of the border.

Shadows

Allows you to add one or more shadows to a node. Each shadow is defined by :

type** : whether the shadow is inside or outside the node box.
x:** specifies the horizontal distance. Negative values place the shadow to the left of the element.
y** : specifies the vertical distance. Negative values place the shadow above the element.
blur** : the larger this value, the more blurred the shadow becomes, so it is larger and lighter.
Dispersion**: positive values make the shadow expand and grow, negative values make the shadow shrink.

Blur

Applies blur to the background of the node only, to create an iOS-style glass effect. The larger the value, the greater the blur.

Layout

The layout allows you to place and position your node in relation to its siblings (those of the same parent node).

Width

Controls the width of the node.

px** : defines the width of the node in pixels.
%** : sets the width of the node as a percentage of the width of its parent.
fit**: automatically adjusts the width of the node according to the width of its content.
grow** : specifies how much of the parent's remaining space should be allocated to the node.

Height

px** : defines the height of the node in pixels.
% : defines the height of the node as a percentage of the width of its parent.