Property Reference

Attaches one or more filter effects to this component. After selecting a filter from the drop-down menu, click the filter name and specify a value.

These effects work only in browser versions that are based on WebKit. They are supported in Chrome, Safari, Opera, iOS Safari, Android Browser, and Chrome for Android. They might not work in Firefox, Internet Explorer, or Opera Mini.

Specifies the Google Maps API key to use.

You are responsible for the use of Google Maps and for compliance with Google's licensing. For details, see Google's Terms of Service for Google Maps and Google Earth.

1. If you have not already done so, right-click the root folder for your project and add a folder named fonts
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Allows you to change the axis range minimum to decrease unused space on the chart.

TRUE
The axis minimum is zero, unless there are negative data values on this axis. In that case, the axis minimum is equal to, or slightly below, the lowest data value.

FALSE
The axis minimum is equal to, or slightly below, the lowest data value.

Defines the type of border for this component.

No Border
This component has no border.

Solid Color
This component is outlined with a single color that you specify.

Image
This component's border is defined using an image that you specify.

For browser performance optimization, specifies when memory is allocated for callouts.

Determines the sizing relationship between this callout and its symbol.

TRUE
This callout follows the size of the symbol. Only works properly when the callout's width and height are Auto, and the symbol size is in pixels.

FALSE
The content follows the size of this callout. Only works properly when the callout's width and height are not Auto.

Determines whether mouse interactions are permitted on objects that are behind this object.

To make an object that is behind other objects accessible to mouse interactions, you must set clickThrough to TRUE on objects that are in front of it.

TRUE
Mouse interactions, such as clicking and hovering, are not permitted on this object and are permitted on objects behind it.

FALSE
Mouse interactions, such as clicking and hovering, are permitted on this object and are not permitted on objects behind it. This is the default value.

Regardless of the value of clickThrough, the Mouse Enabled property must be TRUE in order for any object to respond to mouse interactions.

Specifies the kind of column group this column editor controls. See About Column Editors and Column Order.

All
An All column editor dictates that all of the columns from the source table are included in the grid, except for those that you filter out of the entire grid. Grid columns appear in source table order, unless you specify another order using a whitelist filter. Properties edited for this column editor apply to all columns.

Name
Each Name column editor dictates that one column from the source table is included in the grid. Grid columns appear in the order in which they appear in the Outline, unless you specify another order using a whitelist filter. Properties edited for this column editor apply to this column.

Repeater
A Repeater column editor lets you use a configuration table to determine which source table columns appear in the grid, which symbols represent those columns (if any), and properties of the symbols.

Defines the label to be used as heading text for columns controlled by this column editor.

Specifies the symbol to use for custom columns.

To use a symbol from this project, enter the name of the symbol.

To use a symbol from another project in your library, enter the path to that symbol.

• Group
• View deck
• Page Include
• Symbol

Options:

• Always: All children of this group are loaded when the page is opened and stay loaded until the page is closed.
• On Display: A child is created and stored in browser memory only while the child's Display property is set to TRUE or while it is a selected child in a view deck. Children are removed from browser memory when not displayed or selected. This is the default behavior for new containers.
• On Demand: A child is created when its Display property is set to TRUE or it is a selected child in a view deck. Children are retained in browser memory when no longer displayed or selected. This behavior is fastest but consumes more memory.

• <br/> – line break
• <b>insert text here</b> – bold
• <i>insert text here</i> – italic

• %displayName% – the Display Name property for this series
• %xValue% – the X value of the point
• %yValue% – the Y value of the point
• %value% – the value of the pie wedge
• %yValueTotal% – The sum of the Y values for this point and other points in this table row. Only includes points from this series and others that appear above it inside this series stacker.
• %A% – Replace A with the name of a column to show the value of that column.

• %yValue[,##0.00]% – the Y value with a thousands separator and two decimal digits
• %value[000.00]% – the pie wedge value with three mandatory digits before the decimal, and two mandatory digits after the decimal.

• %xValue[yy/MM/dd]% – the X value as a date with a two-digit year, two-digit month, and two-digit day
• %xValue[y MMMM dd]% – the X value as a date with the full year, the name of the month, and a two-digit day
• %xValue[yy/MM/dd HH:mm:ss]% – the X value as a date and time
• %xValue[yMd]% – the X value as a localized short date pattern. The pattern will be different based on the locale.
• %xValue[yMMMd| |Hms]% – the X value as a localized date and time. The pattern will be different based on the locale. In this example, vertical bar symbols (|) are used to join three patterns: one for the localized date, one that contains a space, and one for the localized time.

Specifies where datatips appear, relative to data points. Selecting the top left square of the gadget dictates that datatips appear above and to the left of data points.

Specifies whether to delete the file if data is null.

TRUE
If data is null, nothing is uploaded to the server. If a file with the specified path already exists on the server, that file is deleted.

FALSE
Even if data is null, a file is created when this block is invoked. The file is blank.

• None – the value collected at the given time
• With previous – the difference between the values in this row and the previous one
• With next – the difference between the values in this row and the next one

Determines whether it is possible for the user to select future dates.

TRUE
If Selection Mode is set to Day, the user cannot select future dates. If Selection Mode is set to Week or Month, the user cannot select weeks or months after the week or month containing today.

FALSE
The user can select future dates.

• Enable the droppable Advanced property for this component.
• Set the dropGroup Advanced property for this component to file_png. You can also replace png with another file extension.

• Enable the droppable Advanced property for this component.
• Enable the draggable Advanced property for the component to be dragged.
• Make sure that the dragGroup Advanced property is the same for both components.
• Make sure that the dragGroup Advanced property is the same for both components.

Specifies the rate of change over time for this animation.

Linear
The animation's rate of change is constant.

Ease In
The animation starts slowly and accelerates linearly as it executes.

Ease Out
The animation starts with a fast change rate and decelerates linearly as it executes.

Ease In Out
The animation starts slowly, accelerates linearly, and then decelerates linearly as it executes.

Cubic In
The animation starts slowly and accelerates cubically as it executes.

Cubic Out
The animation starts with a fast change rate and decelerates cubically as it executes.

Cubic In Out
The animation starts slowly, accelerates cubically, and then decelerates cubically as it executes.

Elastic In
The animation's rate of change starts on a small-amplitude sine wave. The sine wave grows as the animation executes.

Elastic Out
The animation's rate of change starts on a large-amplitude sine wave. The sine wave decays as the animation executes.

Elastic In Out
The animation's rate of change starts on a small-amplitude sine wave. The sine wave grows and then decays as the animation executes.

Bounce
The animation starts with a fast change rate, and decelerates to zero with an effect similar to a ball falling and bouncing on a floor.

Specifies the amount of time, in seconds, that the animation of each component in the series is delayed. A value of zero means that all components in the series begin animating at the same time and finish at the same time. A value of 1 means that the second component starts and finishes animating one second after the first component, and so on.

The Element Offset and Minimum component Duration properties can cause the animation duration to be longer than that specified by the Duration property.

Specifies whether the history loader is enabled.

TRUE
The histories load as specified by invoke, autoRun, and interval.

FALSE
The histories do not load.

Determines whether the fastResponse feature is enabled. Use this feature when you troubleshoot performance speed issues relating to this block.

TRUE
The execution of this block’s event is slightly prioritized, and the queue is kept clear.

FALSE
This is the default behavior.

• To list only PNG files, enter png.
• To list all files, leave this field blank.

Specifies how this filter handles the listed columns.

Whitelist
Only the listed columns are shown in this data grid. Columns appear in the order specified in the filter.

Blacklist
The listed columns are hidden from this data grid.

Specifies how much this component will shrink relative to the other flexible items inside the same container. A value greater than zero indicates that this component will shrink to counteract insufficient space. The amount that it shrinks depends on its flex-shrink factor and the sum of all the flex-shrink factors assigned to items in the container.

For more information on flexible items go to: http://bocoup.com/weblog/dive-into-flexbox/

Defines the sequence in which components are searched to find the next focusable component:

• Default: Search in natural order, search nested children and parent
• Isolate: search only current container
• Selected: Focus on selected component if possible

Defines the font color for the row in the data grid that is in focus.

When the user mouses over the row, the hovered row properties override the focused row properties.

Defines the stroke color or border image for outlining the row in the data grid that is in focus.

When the user mouses over the row, the hovered row properties override the focused row properties.

Defines the stroke weight or border width for outlining the row in the data grid that is in focus.

When the user mouses over the row, the hovered row properties override the focused row properties.

1. If the project does not have a fonts folder, right-click the root folder for your project, and add a folder named fonts
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Specifies whether the image component animates a specified list of frames.

The image defined by the URL property is displayed only when the animation is not active.

Specifies the size of the circle or ellipse that defines this radial gradient.

Absolute
You specify a value for the horizontal radius. If the shape is an ellipse, you also specify a value for the vertical radius.

Farthest Corner
The edge of the circle or ellipse meets the corner of the container that is farthest from the circle or ellipse's center.

Closest Side
If the shape is a circle, its edge meets the container edge closest to its center. If the shape is an ellipse, its edge meets the two container edges closest to its center.

Farthest Side
If the shape is a circle, its edge meets the container edge farthest from its center. If the shape is an ellipse, its edge meets the two container edges farthest from its center.

Closest Corner
The edge of the circle or ellipse meets the corner of the container that is closest to the circle or ellipse's center.

1. If your project does not have a fonts folder, right-click the root folder for your project, and add a new folder named fonts
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Defines the symbol that appears in the header of the columns affected by this column editor.

If the symbol is in this project, enter the name of the symbol.

To use a symbol from another project in your library, enter the path to that symbol.

1. If your project does not have a fonts folder, right-click the root folder for your project, and add a new folder named fonts.
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Together with Vertical Focus and Relative To, determines the focal point of the zoom animation.

Left
The zoom animation begins at the left of the bounding box defined in Relative To.

Right
The zoom animation begins at the right of the bounding box defined in Relative To.

Center
The zoom animation begins at the horizontal center of the bounding box defined in Relative To.

Null
If Horizontal Focus is null, and Vertical Focus is not null, then the focus is a horizontal line rather than a point. If both values are null, then the focal point is the center of the bounding box.

Defines the stroke color for this data grid's horizontal gridlines.

To define the line between the top row of data and the header, use the header's Fill and Stroke properties.

Defines the stroke weight for this data grid's horizontal gridlines.

To define the line between the top row of data and the header, use the header's Fill and Stroke properties.

Defines horizontal scrolling behavior on this component.

Off
Horizontal scrolling is always disabled.

On
Horizontal scrolling is always enabled. The track appears even if the content does not overflow.

Auto
Horizontal scrolling is automatically enabled when content overflows.

Defines where horizontal gridlines are placed.

TRUE
Horizontal gridlines are positioned at major ticks.

FALSE
Horizontal gridlines are positioned halfway between major ticks.

Sets or returns the minimum of the range on the horizontal axis for the zoomed view. If either Minimum or Maximum is null, the zoom does not happen.

Zooming works only with linear, log, and datetime axes. For dates, use the format "yyyyMMdd".

Specifies the valid input type, or the expected input type.

Text
A single line of text. Line breaks are automatically removed.

Email
A single, properly formatted e-mail address, or the empty string.

URL
A single, valid, absolute URL, or the empty string.

Tel
A single line of text. Line breaks are automatically removed. On mobile devices, the on-screen keyboard is optimized for number entry.

Defines the table column from which the intensity values are determined.

"Intensity" refers to whatever units the heat map is measuring, for example temperature or air flow. Each data point on the heat map has an intensity value that determines its color.

Intensity values range from 0 to the highest data value. An intensity of 0 corresponds to the left end of this heat map's gradient, and the highest intensity value corresponds to the right end of this heat map's gradient.

Controls whether this axis is inverted. If this is a category axis, and the Category Order property is not null, then this property is ignored.

TRUE
The smaller values appear at the top if this axis is vertical, or the right if it is horizontal. If this is a category axis, the top values in the table appear at the top or right of the axis.

FALSE
The smaller values appear at the bottom or left of the axis. If this is a category axis, the top values in the table appear at the bottom or left of the axis.

Indicates whether this component’s current contents are valid. Validity is determined by the component type and by properties like Minimum, Maximum, and Input Type.

Validity is checked whenever data is committed. Therefore, if Live Update is enabled, validity is checked constantly. If Live Update is disabled, validity is checked when the focus leaves the component.

1. If your project does not have a fonts folder, right-click the root folder for your project, and add a new folder named fonts.
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Defines a number of pixels of space between the left container boundary and the leftmost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

Defines the shape of the lines in a line or area series.

Segment
Markers are connected using line segments.

Step
Markers are connected using orthogonal line segments. Horizontal and vertical segments alternate, beginning with a horizontal segment.

ReverseStep
Data points are connected using orthogonal line segments. Vertical and horizontal segments alternate, beginning with a vertical segment.

Vertical
Only the vertical segments from a Step line form are displayed.

Horizontal
Only the horizontal segments from a Step line form are displayed.

Curve
Markers are connected using a curve.

A boolean value that indicates whether to pre-load children for the tree. This value is FALSE by default.

TRUE
All children are loaded when the page is first loaded, when the data table is first set, or when this property becomes TRUE.

FALSE
Children of a node are loaded only when requested, for example when a user clicks the disclosure icon.

Specifies how events are logged.

none
Events are not logged.

firstOccurance
The first event for each input n is recorded, beginning with a reset and ending when all fields have been updated at least once. The listener remembers the order in which each input received its first update.

lastOccurance
The last input change for each input n is recorded, beginning with a reset and ending when all fields have been updated at least once. The listener remembers the order in which each input received its most recent update.

all
All input changes are logged, beginning with a reset and ending when all fields have been updated at least once. The order property returns a list of input indexes in the order that the inputs were changed.

Defines the type of Google Map to be displayed in the component.

Roadmap
The default road map view.

Satellite
Google Earth satellite images.

Hybrid
A mixture of road map and satellite images.

Terrain
A physical map based on terrain data.

Specifies the symbol to use for custom markers.

To use a symbol from this project, enter the name of the symbol.

To use a symbol from another project in your library, enter the path to that symbol.

Defines the type of markers used by this series. Markers are used to visually represent each data point in the series, in addition to the line or shape that represents the entire series.

None
No markers are used by this series.

Standard
This series uses DGLux5’s standard marker design, a circle with a customizable fill, stroke, and size.

Custom
This series uses the specified symbol as a marker.

specifies how to return values in column n for each baseColumn value.

first
Returns the first value in the group.

last
Returns the last value in the group.

average
Returns the average of all number values in the group. Non-number values are treated as null and are not included in the calculation.

sum
Returns the sum of all number values in the group. If there are no number values, returns 0.

max
Returns the largest number value in the group. If there are no number values, returns null.

min
Returns the smallest number in the group. Non-number values are treated as null and are not included in the calculation.

count
Returns the number of values in the group.

concat
Returns all values in the group, separated by commas. Duplicate values are listed.

concatUnique
Returns all unique values in the group, separated by commas. Duplicate values are not listed.

tableUnion
Returns a table of values.

Specifies the type of rollup used.

First
Returns the first value for the interval.

Last
Returns the last value for the interval.

Average
Returns the average of all number values for the interval. Non-number values are treated as null and are not included in the calculation.

Sum
Returns the sum of all number values for the interval. If there are no number values, returns 0.

Max
Returns the greatest number value from the interval. If there are no number values, returns null.

Min
Returns the smallest number value for the interval. Non-number values are treated as null and are not included in the calculation.

Count
Returns the number of values that exist for the interval. Null values are not included.

Concat
Returns all values for the interval, separated by commas. Duplicate values are included.

ConcatUnique
Returns all unique values for the interval, separated by commas. Duplicate values are not included.

• Null – a null value
• Use previous – the value for the previous timestamp
• Use next – the value for the next timestamp
• Interpolate – the average between the previous and next timestamps
• Zero – zero

• "=v1+v2" returns the sum of the values in the "v1" column and the "v2" column.
• "=dateFormat(timestamp,"y-MM-dd")" returns the date in the "timestamp" column with the specified formatting.
• "=numberFormat(value,"0.00")" returns the value in the "value" column, rounded to the hundredths place.

Defines the text or the glyph used for the next month button.

You can find more information on glyphs here.

Specifies the comparison, arithmetic, or text operator to apply to the input values. The operator is used in conjunction with inputs to form an expression that can be evaluated to TRUE or FALSE.

By default, the op value of an Or block is "or". The block will not act as described if you change this property.

1. If your project does not have a fints folder, right-click the root folder for your project, and add a new folder named fonts.
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Defines the radius of this pie chart, as a percentage of the radius of the largest pie chart that would fit. This depends on container size.

If the Reduce Outer Radius property is TRUE, then the radius size might be automatically reduced in order to fit labels or other components.

Defines the text or the glyph used for the previous month button.

You can find more information on glyphs here.

Specifies whether the script runs as soon as it's invoked.

FALSE
The script waits for other blocks in the queue to finish their logic before it runs, no matter how many times the script is triggerd before it's run, it will only run once.

TRUE
The script runs instantly when script is invoked, and it won't wait for other blocks in the queue to finish their logic. This allows the script to handle every invoke and never skip data update.

Besides invoke, if there are other bindings to the script block, they might not always be updated by the time script is run

When the output of a streaming mode repeater is bound to the script's invoke, the script's qosMode needs to be TRUE, otherwise it might lose the update comes from repeater.

Specifies the delimiter used between the start date and end date of the range. If null, a slash (/) is used.

See date formatting help here.

• Saturation – Changes the saturation of the component. Values under 100% create results with less saturation, and values over 100% create results with more saturation. A value of 100% leaves the component unchanged. A value of 0% makes the component appear completely unsaturated.
• Grayscale – Converts the component to grayscale. A value of 100% makes the component appear completely grayscale. A value of 0% leaves the component unchanged.
• Contrast – Controls the component's contrast. Values under 100% create results with less contrast, and values over 100% create results with more contrast. A value of 100% leaves the component unchanged. A value of 0% removes all contrast.
• Brightness – Controls the component's brightness. Values under 100% create results that appear dimmer, and values over 100% create results that appear brighter. A value of 100% leaves the component unchanged. A value of 0% makes the component appear completely black.
• Invert – Inverts the samples in the input component, giving a "photo negative" effect. A value of 100% inverts samples completely. A value of 0% leaves the component unchanged.
• Sepia – Converts the component to sepia. A value of 100% makes the component appear completely sepia. A value of 0% leaves the component unchanged.
• Hue Rotate – Applies a hue rotation to the component. Specifies the number of degrees around the color circle the input colors will be adjusted. A value of zero or 360 leaves the input unchanged. A value of 180 inverts the hues.

Defines whether the pie chart radius shrinks automatically in order to fit labels or other components.

TRUE
The pie chart radius might be smaller than that determined by the Outer Radius property, in order to fit labels or other components.

FALSE
The pie chart size is determined by the Outer Radius property only.

In absolute layout, sets the right edge of this component to a distance to the left or right of the right edge of its parent container.

In vertical or horizontal layout, sets the right edge of this component to a distance to the left or right of its normal position.

Distances are either pixel values, or percentages of the parent width. A value of Auto positions the right edge of this component in its normal position. To set a value of Auto, click the blue dot and select Reset.

• Avg – the average of all number values for the interval
• Min – the smallest number value for the interval
• Max – the largest number value from the interval
• Sum – the sum of all number values for the interval
• First – the first value for the interval
• Last – the last value for the interval
• Count – the number of non-null values that exist for the interval

The upper bound of the original scale.

A scale binding takes the source value's relationship to an original scale, and returns the corresponding value on a new scale.

A gradient binding takes the source value's position on an original scale, and returns the color that is at the corresponding position on a specified gradient.

A gradient binding takes the source value's position on an original scale, and returns the color that is at the corresponding position on a specified gradient.

The upper bound of the new scale.

A scale binding takes the source value's relationship to an original scale, and returns the corresponding value on a new scale.

A node ID that specifies a loaded node to select, expand, and make visible. Only works if the tree's Selection Behavior is set to a value other than None.

If the specified node is not loaded, this property does nothing. You can use this property together with the Load All Nodes property and the onAllNodesLoaded event property in the Advanced properties, to ensure that all nodes are loaded before this property's value is set.

If a node with the specified ID exists in more than one table, then the first node with this ID that is encountered is used.

For selection of more than one node, use the Selected Items property in the Selection properties. However, Selected Items controls selection only, not which nodes are expanded.

1. If your project does not have a fonts folder, right-click the root folder for your project, and add a new folder named fonts.
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Sets or returns the currently selected date for this calendar. Uses the format "yyyy-MM-dd". For more information about date formats, see the DGLux wiki.

If the user selects a range of dates, this property reflects only the date that the user clicked to select the range.

Sets or returns the index of the selected item in this container.

An index of 0 indicates the first item.

An index of −1 deselects all items.

If Multi-Select is enabled and multiple items are selected, comma-separated values are used.

Sets or returns a comma-separated list of IDs of selected items in the tree. Only works if the tree's Selection Behavior is set to a value other than None. This property is not serializable, meaning that changes to this property are in effect only for the current session.

A value listed in this property is considered selected regardless of whether the specified node is loaded. However, a node that is selected in the tree will be automatically added to this property only when it is visible.

If a node with the specified ID exists in more than one table, the first node with this ID that is encountered is recognized.

To select and expand a node, and make it visible, use the Select Node property. However, Select Node works only with a single node.

Sets or returns the currently selected date range for this calendar. Uses the format "yyyy-MM-ddThh:mm:ss/yyyy-MM-ddThh:mm:ss". For more information about date formats, see the DGLux wiki.

To let the user change this property, set the Selection Mode property to Day, Week, or Month.

To change this property using the Property Inspector, click the Selected Range button to open a DGLux date range picker. Using this dialog, you can choose a date range in several ways:

Range
Specify a start date and end date. Optionally, you can also specify a start time and end time using 24-hour time.

Day
Specify one day.

Week
Specify one week. Clicking any date selects a week that includes that date. The selected week starts on a Sunday and ends on a Saturday.

Month
Specify a month and year.

Year
Specify a year.

Relative
Specify a range relative to the current date and time. Enter a number of seconds, minutes, hours, days, weeks, months, or years, and specify either "current" or "previous." A "current" range begins at the start of the unit; for example, if the current time is 3:26, the "current hour" is the hour from 3:00 to 4:00, and the "current two hours" is the period from 2:00 to 4:00. A "previous" range immediately precedes the current one. For example, if the time is 3:26 PM, the "previous hour" is the hour from 2:00 to 3:00.

Determines the selection mode for the component.

Day
The user can select one day.

Week
The user can select one week. Selecting any date selects a week that includes that date. The week selected starts on a Sunday and ends on a Saturday, regardless of the currently selected First Day of Week.

Month
The user can select one month. Selecting any date selects its entire calendar month.

Defines animation behavior for this series.

None
An updated chart replaces the old chart without any animation.

Interpolate
The series goes through a smooth transition, with the old chart as the first frame and the new chart as the final frame.

Slide
The series "slides" in and out of the chart boundaries from a direction that you specify.

Zoom
The series "implodes" and "explodes" from a focal point that you specify.

Defines how the series data is visually represented.

Line series
Markers represent the data points. Lines connect the markers.

Area series
Markers represent the data points. Lines connect the markers, and the area delimited by the lines is filled in.

Bar series
Horizontal bars represent the data points.

Column series
Vertical columns represent the data points.

Specifies whether the data is sorted in ascending or descending order.

To change whether the data is treated as strings or numbers when sorted, open the dataflow for this data grid and edit the Sort block.

Defines the <defs> component for the repeated SVG component.

Example
<style>rect{fill:green;stroke:black;}</style>

This example defines a style for the repeated SVG rectangle. The style includes a green fill and a black border stroke.

Defines the symbol to be used as a location marker.

If the symbol is in this project, enter the name of the symbol.

To use a symbol from another project in your library, enter the path to that symbol.

Specifies the direction for text and input in this component, to support the use of right-to-left languages.

Left to right
The text or user input direction is left to right.

Right to left
The text or user input direction is right to left.

Auto
The direction of user input is automatically detected as the user enters text.

Defines positioning of the columns and rows containing wrapped components within this container.

Flex-Start
The rows are packed against the top edge, or the columns are packed against the left edge.

Flex-End
The rows are packed against the bottom edge, or the columns are packed against the right edge.

Center
The rows or columns are packed together around the center of the container.

Space-Between
The rows or columns are positioned against both edges, with equal space between them.

Space-Around
The rows or columns are positioned with equal space between them, and space along both edges equal to half of the space between two rows or columns.

Stretch
The rows or columns stretch to fit the parent container.

Determines whether the image tiles or scales within its container.

No Tiling
The image does not tile. An image larger than its container is clipped.

Tiling
The image tiles to fill the container either horizontally, vertically, or both horizontally and vertically.

Scaling
The image scales to the size of the container.

1. If your project does not have a fonts folder, right-click the root folder for your project, and add a new folder named fonts.
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

In absolute layout, sets the top edge of this component to a distance above or below the top edge of its parent container.

In vertical or horizontal layout, sets the top edge of this component to a distance above or below its normal position.

Distances are either pixel values, or percentages of the parent height. A value of Auto positions the top edge of this component in its normal position. To set a value of Auto, click the blue dot and select Reset.

Specifies the location of the image that fills this component. Click the folder icon to select or upload an image, or enter a relative URL within the project, such as assets/image.png. You can also enter any absolute URL, even if it is outside of your project or DGLux.

You can use any image format that is supported by the user's browser.

In absolute or horizontal layout, sets the vertical center of this component to a distance above or below the vertical center of its parent container. The value can be pixels, or a percent of the parent height.

A negative value moves this component up, and a positive value moves it down. A value of Auto positions the vertical center of this component in its normal position in the layout. To set a value of Auto, click the blue dot and select Reset.

• When Vertical Alignment is Flex-Start, Vertical Gap defines a bottom padding, but you must define a top padding separately.
• For all other Vertical Alignments, Vertical Gap defines a top padding, but you must define a bottom padding separately.

Defines the stroke style for the vertical lines that divide columns.

To define the lines between column headers, use the header's Fill and Stroke properties.

Sets or returns the maximum of the range on the vertical axis for the zoomed view. If either Minimum or Maximum is null, the zoom does not happen.

Zooming works only with linear, log, and datetime axes. For dates, use the format "yyyyMMdd".

1. If you have not already done so, right-click the root folder for your project, and add a new folder named fonts.
2. Navigate to the font file on your computer and drag it to the fonts folder.
3. Save your work and refresh the browser.
4. Specify the font using the drop-down menu for this property.

Defines the table column from which the X values of the heat map data points are determined.

Each X value is a distance in pixels from the left edge of the component.