Showing 4 blocks

apexcharts: bar chart

Basic bar chart

graph

In pins

Name
Data (optional)
X Axis
Y Axis
Row Colors (optional)
#fff
Sets the colors of the background rows
Data colors (optional)
Sets the colors of the lines
Title align (optional)
left
Align the title, options: Left, Center, Right
Theme (optional)
Color palette (optional)
palette1
Changes the colors of the lines to presets made by Apexcharts
Height (optional)
Horizontal (optional)
false
Rotates the chart 90 degress and shows the data horizontal
Stacked (optional)
false
Stacks the data on top of each other instead of next to each other
Bar Width (optional)
50px
Sets the width of the bars, use px or % to determine the width
Spacing (optional)
0
Spacing between bars
Show data labels (optional)
Label Position (optional)
center
Position of the Data Label, options: Top, Center, Bottom
Label Offset Y (optional)
Label Offset X (optional)
Label fontsize (optional)
12px
Label Color (optional)
#fff
Zoom (optional)
false

Out pins

uicomponent

apexcharts: combo chart

Combination line and bar chart

graph
v10.6.7

In pins

Name
Data (optional)
X Axis
Y Axis line
Y Axis bar
Row Colors (optional)
#fff
Height (optional)
Data colors (optional)
Theme (optional)
Color palette (optional)
palette1
Sets the color palette for the columns
Bar Width (optional)
50
Width of the bars
Curve (optional)
Marker size (optional)
Show data labels (optional)
Label Position (optional)
center
Position of the Data Label, options: Top, Center, Bottom
Label fontsize (optional)
12px
Label Color (optional)
#fff

Out pins

uicomponent

apexcharts: line chart

Basic line chart

graph

In pins

Name
Data (optional)
X Axis
Y Axis
Row Colors (optional)
#fff
Sets the colors of the background rows
Data colors (optional)
Sets the colors of the lines
Title align (optional)
left
Align the title, options: Left, Center, Right
Height (optional)
Curve (optional)
Theme (optional)
Color palette (optional)
palette1
Changes the colors of the lines to presets made by Apexcharts
Line width (optional)
2
Marker size (optional)
Show data labels (optional)
Label fontsize (optional)
12px
Label Color (optional)
#fff
Zoom (optional)
false
When set to true the user can zoom in on the data

Out pins

uicomponent

customgraph: uptime chart

Uptime chart

graph

In pins

Name
Data
Each object in the data is a bar, specify a field in the object for the color, and connect it to the color field pin
Color field
Include in your object a field with a color,
Unavailability
When the selected field is filled in your object it will be used to calculate the uptime. This field needs to be a date/number with the total downtime in minutes
Date
This field will be used to dispaly the day
Unavailable info
Info why it was
Max (optional)
90
Max amount of bars in the chart
Default color (optional)
green
The color of the bar when the downtime/color field is not filled

Out pins

uicomponent

Groups