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

Nodes

Graph

Variables

Custom the design

Placing elements

Design examples & Devices

Managing pages

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

Team work

Internationalization

Sovereign data

Formulas

REFERENCE

Voltapp Lexicon

Nodes

Event blocks

Action blocks

Control blocks

Expression blocks

Variables

HELP

FAQ

Find help

To be accompanied

How to do it with Voltapp

COMMUNITY

🔗 Our discord

🔗 Marketpad

Voltapp Updates

The Line Chart node displays a statistical visualization with curves that you can customize in many ways:

Components

Curve plot

Data

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

Smoothed

You can choose to round your curves by smoothing them.

Curve size

You can vary the size of your curves.

Point size

You can choose the size of your data points on the curve.

Zone Opacity

You can choose to color the areas formed by your curves, and leave them more or less transparent.

Grids

The grids are the grids that are displayed on the back of the diagram.

Enabled in X

You can activate the grid in X, i.e. the vertical lines.

Activated in Y

You can activate the Y grid, i.e. the horizontal lines.

Color

You can choose the color of the lines.

Thickness

You can set the thickness of the lines.

Axes

The axes are the two axes of the diagram where the values and the legend of the diagram are displayed.

Enabled in X

You can enable the display of the values and the legend in X.

Enabled in Y

You can enable the display of values and legend in Y.

Font

You can choose the font of the values that are displayed on the axes.

Size

You can choose the font size of the values displayed on the axes.

Color

You can choose the font color of the values displayed on the axes.

Legend X

Shows you the legend for the values on the X axis.

Y caption

To indicate the legend of the values of the Y axis.

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.
• fit** : automatically determines the height 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.