Chart

The Chart object serves as a graphical representation tool for visualizing data within the HSYCO software interface. It supports various chart types: bar, gauge, point, line, and spline.

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dynamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

"mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when parent's layout is neither "flex" nor "grid".

When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.

Flex Grow

Specifies if the objects should grow to fill the available space.

Attribute Values

Value	Description
false	Default value. Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

Attribute Values

Value	Description
false	Default value. Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when parent's layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Width

Sets the object's width in pixels.

Minimum value is 10.

Height

Sets the object's height in pixels.

Minimum value is 10.

Chart

Type

Specifies the type of chart to be drawn.

Attribute Values

Value	Description
bar	Default value. Bar chart.
point	Point chart.
line	Line chart.
spline	Spline chart.
step	Stepped line chart.
doughnut	Doughnut chart.
pie	Pie chart.

The default value is: bar.

Set Config

Specifies the configuration of a set of chart values.

Values

Specifies the datasets to be displayed. For a single dataset, comma-separated lists of values can be used. For multiple datasets, use JSON array format, e.g.: [[1,2,3],[4,5,6],[7,8,9]] If there are multiple sets in Set Config, the Values array applies only to the sets where Data Mode is set to values. For example, if there are 4 sets and the 1st and 3rd have Data Mode set to datasource, the Values array will apply to the 2nd and 4th sets.

Attribute Values

Value	Description
<comma-separated list>	List of values.
<json>	JSON array of values.

Value Labels

Specifies the value labels to be displayed. For a single dataset, comma-separated lists of labels can be used. For multiple datasets, use JSON array format, e.g.: ["A","B","C"],["D","E","F"],["G","H","I"]

Attribute Values

Value	Description
<comma-separated list>	List of value labels.
<json>	JSON array of value labels.

The default value is: auto.

Value Label Type

Specifies the type of value label to be shown.

Attribute Values

Value	Description
popup	Default value. Value labels are shown on mouseover, or on touch (if on a touch-enabled device).
start	Value labels are shown at the start of the value.
center	Value labels are shown at the center of the value.
end	Value labels are shown at the end of the value.
hidden	Hide value labels.

The default value is: popup.

Aggregate Value Tooltip

Specifies whether to show a single tooltip for all datasets, as opposed to a tooltip for each individual value.

Attribute Values

Value	Description
false	Default value. Show a tooltip for each individual value.
true	Show a single tooltip for all datasets.

The default value is: false.

Tooltip Show Category

Specifies whether to display the category label at the top of the tooltip.

Attribute Values

Value	Description
false	Default value. Do not show the category label in the tooltip.
true	Show the category label as a header in the tooltip.

The default value is: false.

Category Labels

Specifies the labels on the category axis (x if vertical, y if horizontal) as 'auto', 'none', or a custom list of values. In pie and doughnut charts, these labels are used for the legend. If any Set Config item defines Category Data Name, the chart uses that datasource column instead and the last such set wins.

Attribute Values

Value	Description
auto	Default value. Labels on the x axis (if vertical) or y axis (if horizontal) will go from 1 to the total number of values.
none	No label is shown on the x axis (if vertical) or y axis (if horizontal).
<comma-separated list>	List of custom labels on the x axis (if vertical) or y axis (if horizontal).

The default value is: auto.

Options

Orientation

Sets the layout direction of the chart.

Attribute Values

Value	Description
vertical	Default value. Categories are placed on the horizontal axis (x) and values on the vertical axis (y).
horizontal	Categories on the vertical axis (y) and values on the horizontal axis (x).

This attribute is available when type is neither "pie" nor "doughnut".

The default value is: vertical.

Stacked

Specifies whether values are stacked or not. Stacking means that the values of each dataset are added on top of each other, so that the total value is shown. In incremental stacking, the values of each dataset are added on top of the previous dataset's value, while in absolute stacking, the values remain the same but are displayed on top of each other.

Attribute Values

Value	Description
false	Default value. No stacking, values are displayed side by side.
incremental	Values are stacked incrementally.
absolute	Values are stacked absolutely.

This attribute is available when type is neither "pie" nor "doughnut".

The default value is: false.

Zoom Mode

Specifies the zoom mode for wheel/pinch gestures.

Attribute Values

Value	Description
false	Default value. Disable zooming.
value	Zoom the value axis only.
category	Zoom the category axis only.
both	Zoom both axes.

This attribute is available when type is neither "pie" nor "doughnut".

When type is neither "pie" nor "doughnut", this attribute defaults to false.

Value Range

Specifies the range of values displayed.

Attribute Values

Value	Description	Example
[min],[max]	Range of values displayed.	-2,10

This attribute is available when type is neither "pie" nor "doughnut".

Origin

Sets the origin.

Attribute Values

Value	Description
<number>	Origin.

This attribute is available when type is neither "pie" nor "doughnut".

When type is neither "pie" nor "doughnut", this attribute defaults to 0.

Thresholds

Specifies the list of values at which to display a line (threshold).

Attribute Values

Value	Description
<comma-separated list>	List of values.

This attribute is available when type is neither "pie" nor "doughnut".

Threshold Colors

Specifies the colors for the threshold lines. Supports a single CSS or theme color, a comma-separated list, or a JSON array. Comma-separated lists can include functional colors such as rgb(...), rgba(...), hsl(...), and hsla(...).

Attribute Values

Value	Description
<comma-separated list>	List of colors.
<json>	JSON array of colors.

This attribute is available when type is neither "pie" nor "doughnut".

Axis

Category Axis Title

Specifies the category axis title (x if vertical, y if horizontal).

Attribute Values

Value	Description
<string>	Category axis title.

This attribute is available when type is neither "pie" nor "doughnut".

Value Axis Title

Specifies the value axis title (y if vertical, x if horizontal).

Attribute Values

Value	Description
<string>	Value axis title.

This attribute is available when type is neither "pie" nor "doughnut".

Category Axis Grid

Specifies whether to show the grid on the category axis.

Attribute Values

Value	Description
false	Do not show the grid on the category axis.
true	Default value. Show the grid on the category axis.

This attribute is available when type is neither "pie" nor "doughnut".

When type is neither "pie" nor "doughnut", this attribute defaults to true.

Value Axis Border

Specifies whether to show the border on the value axis.

Attribute Values

Value	Description
false	Do not show the border on the value axis.
true	Default value. Show the border on the value axis.

This attribute is available when type is neither "pie" nor "doughnut".

When type is neither "pie" nor "doughnut", this attribute defaults to true.

Value Axis Grid

Specifies whether to show the grid on the value axis.

Attribute Values

Value	Description
false	Do not show the grid on the value axis.
true	Default value. Show the grid on the value axis.

This attribute is available when type is neither "pie" nor "doughnut".

When type is neither "pie" nor "doughnut", this attribute defaults to true.

Value Axis Ticks

Specifies the ticks on the value axis (y if vertical, x if horizontal) as 'auto', 'none', or a custom list of values.

Attribute Values

Value	Description
auto	Default value. Ticks on the value axis are automatically calculated.
none	No ticks on the value axis.
<comma-separated list>	List of custom ticks on the value axis.

This attribute is available when type is neither "pie" nor "doughnut".

When type is neither "pie" nor "doughnut", this attribute defaults to auto.

Category Label Format

Formats the category axis tick labels (x if vertical, y if horizontal). Uses the shared format item (same options as the Text object's Format).

This attribute is available when type is neither "pie" nor "doughnut".

Value Label Format

Formats the value axis tick labels (y if vertical, x if horizontal). Uses the shared format item (same options as the Text object's Format).

This attribute is available when type is neither "pie" nor "doughnut".

Legend

Legend

Specifies whether to show the legend.

Attribute Values

Value	Description
true	Show the legend.
false	Default value. Do not show the legend.

The default value is: false.

Legend Position

Specifies the position of the legend.

Attribute Values

Value	Description
top	Default value. Top of the chart.
bottom	Bottom of the chart.
left	Left of the chart.
right	Right of the chart.

The default value is: top.

Styling

Padding

Specifies Chart.js layout padding in pixels. Accepts 1 to 4 numeric values separated by comma or space, interpreted like CSS padding (top right bottom left). Use 2 values to set top/bottom and left/right.

Attribute Values

Value	Description	Example
<int>	All sides.	10
<integer list>	Top/Bottom, Left/Right.	10 20
<integer list>	Top, Right, Bottom, Left.	10 20 10 20

The default value is: 0.

Axis Color

Specifies the color of the axis.

Attribute Values

Value	Description
<color>	Color of the axis.

This attribute is available when type is neither "pie" nor "doughnut".

Axis Label Color

Specifies the color of the axis and legend labels.

Attribute Values

Value	Description
<color>	Color of the labels.

This attribute is available when type is neither "pie" nor "doughnut".

Grid Color

Specifies the color of the grid.

Attribute Values

Value	Description
<color>	Color of the grid.

This attribute is available when type is neither "pie" nor "doughnut".

Element Border Color

Specifies the color of the chart's elements border color.

Attribute Values

Value	Description
<CSS color>	Color of the chart's elements border.

Legend Label Color

Specifies the color of the legend labels.

Attribute Values

Value	Description
<color>	Color of the legend labels.

Value Label Color

Specifies the color of the value labels.

Attribute Values

Value	Description
<color>	Color of the value labels.

View

Visible

Sets the object's visibility.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

The default value is: true.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

The default value is: true.

Blink

Blinks the object at the specified speed.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

The default value is: false.

Transition

Specifies the transition effect when the object is shown or hidden.

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Duration

Specifies the transition duration in milliseconds.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Delay

Specifies the transition delay in milliseconds.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

The default value is: 1.0.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

Attribute Values

Value	Description	Example
<int>	Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the margin in pixels for each side of the object.	10 20 30 40

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.