Element: Table
Creates a data or pricing table
Table Settings
Content
- Table Builder
Start by adding columns and rows, then add content and styling to each.
Styling › Table Styling
- Table Purpose
Choose if the table should be used to display tabular data or to display pricing options. - Table Design
Use either the default or minimal design - Empty Cells
Empty Cells are by default hidden. If you want to force equal height across all columns set them to display
Styling › Caption
- Table Caption
Add a short caption to the table so visitors know what the data is about
Element: Progress Bars
Create some progress bars
Progress Bars Settings
Content
- Add/Edit Progress Bars
Here you can add, remove and edit the various progress bars.
Styling › General Styling
- Progress Bar Style
Choose the styling of the progress bar here - Show Progress Bar percentage?
Choose if you want to show the numeric percentage of the progress bar - Progress Bar Height?
Set the height of the progress bar
Styling › Colors
- Progress Bar Coloring
Choose the coloring of the progress bar here
Individual Progress Bar Settings
Content
- Progress Bars Title
Enter the Progress Bars title here - Progress in %
Select a number between 0 and 100 - Icon
Should an icon be displayed at the left side of the progress bar
Styling
- Custom Progress Bar Background Color
This color is used as the main background color for the progress bar. - Custom Progress Bar Striped Color
This color is used as the striped color for the progress bar. - Progress Container Background Color
This color fills up the progress container to 100 %. - Title Font Color
Select a custom font color for title, icon and progress bar percentage. - Title Background Color
Select a custom color for background of the title, icon and progress bar percentage.
Element: Chart
Displays different types of charts based on static user data – or dynamic data with filter
Chart Settings
Content › Chart Type
- Type Of Chart
Select the type of chart for your datasets.
Content › Chart Data
- Add/Edit Datasets
Here you can add, remove and edit the datasets for your chart.
A dataset consists of a series of datapoints. You may use multiple datasets. - X-Axis Labels
Add the descriptive x-axis lables for your data points. Seperate with ;. Number of labels should correspond with number of datapoints. Default labels are created if needed.
Content › Chart Title, Subtitle, Position
- Chart Title
Enter a title for the chart – better keep it short.
Styling › Colors
- Container Background Color
Select a background color for container around the chart area - Chart Background Color
Select a background color for the chart area - Legend Text Color
Select a color for the legend of the data points. - X-Axis Legend Color
Select a color for the legend on the x-axis data points. - Y-Axis Legend Color
Select a color for the legend on the y-axis values.
Styling › Spacing
- Container Padding – default setting – used for all screen sizes (no media query)
Set the padding for the chart inside the surrounding container. - Chart Padding
Set the padding in px of the chart in the chart area.
Styling › Tooltip
- Tooltip On Hover
Select to show a tooltip when moving the mouse over the chart - Color Boxes
Select to show color boxes - X-Alignment
Select the position of the tooltip caret - Y-Alignment
Select the position of the tooltip caret - Background Color
Select a color for the background of the tooltip. - Title Text Color
Select a color for the title text of the tooltip. - Body Text Color
Select a color for the body text of the tooltip.
Chart Dataset Settings
Content
- Dataset Label
Define a label for your dataset. Will be displayed above the chart and on hover. - Dataset Datapoints
Add the dataset datapoints. Seperate with ;. Use numeric values for a point (e.g. 5, 5.20)— Bubble Chart datapoint structure: x/y/r (e.g. 5/20/3;15/30/2 )
— Scatter Chart datapoint structure: x/y (e.g. 5/20;10/15 )
Styling
- Color Information
Allowed color formats are string in hexadecimal, RGB, named colors or HSL (e.g. #fefefe, rgba(214,87,153,0.58), green).Add a color for each datapoint, seperate by ; (e.g. #fefefe;#efefef;green). Missing colors will loop from the beginning again. Depending on the selected chart type not all settings will be used.
- Border/Line Colors
Add the border or line colors. - Background Colors
Add the background colors. - Border Width/Line Width
Select a border or line width. - Border Radius
Select a border radius.