Pixel location of UiElements origin. To get position use getPosition(relativePosition).
Coordinate system = position scale (UIElement.scale)
Readonly
renderingReadonly
scaleAdd a dynamic value to LegendBox, creating a group and entries for it depending on type of value. Supports series, charts and dashboards.
Object itself.
Series, Chart or Dashboard
Optional
opts: LegendBoxAddOptionsOptional extra configuration arguments.
Permanently destroy the component.
To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.
let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined
Object itself for fluent interface
Get auto dispose behavior for this UI element.
Auto dispose mode.
Get Background of object.
Type of Background is generic, see UIBackground for minimum interface.
Background object
Get dragging mode of object. Defines how the object can be dragged by mouse.
Object itself
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect
method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get mouse style.
Interface for defining how mouse should look when hovering over UI object
Returns the size of the UiElements in pixels including any Margins or Paddings
Object size in pixels
Parameter to disregard parts of object when calculating the position. Defaults to Margin, which includes everything. Should only ever be necessary for sub-classes
Get font of LegendBox title.
FontSettings object
Subscribe onDispose
event.
This event is triggered whenever the ChartComponent is disposed.
// Example usage
figure.onDispose(() => {
console.log('figure was disposed')
})
figure.dispose()
Token of subscription
Subscribe to highlight object event. This is called whenever an object is highlighted.
Token that can be used to unsubscribe from the event.
Function that is called when event is triggered.
Subscribe to Mouse Click event
Token-object that is a reference ID to the listener created.
Function that will be called when mouse clicks the bounds of UiObject.
Subscribe to Mouse Double Click event
Subscribe to Mouse Down event
Subscribe to Mouse Drag event
Subscribe to Mouse Drag Start event
Subscribe to Mouse Drag Stop event
Subscribe to Mouse Enter event
Token-object that is a reference ID to the listener created.
Function that will be called when mouse enters the bounds of UiObject.
Subscribe to Mouse Leave event
Token-object that is a reference ID to the listener created.
Function that will be called when mouse leaves the bounds of UiObject.
Subscribe to Mouse Move event
Token of subscription
Event handler function
Subscribe to Mouse Up event
Subscribe to Mouse Wheel event
Token of subscription
Event handler function
Subscribe to Touch End event
Token of subscription
Event handler function
Subscribe to Touch Move event
Token of subscription
Event handler function
Subscribe to Touch Start event
Token of subscription
Event handler function
Set auto dispose behavior for this UI element.
Can be used to set a condition, where the UI element is automatically disposed, removing it from view.
// Example, remove UI element when it is larger than 20% of viewport.
UIElement.setAutoDispose({
type: 'max-width',
maxWidth: 0.20,
})
Object itself for fluent interface.
Auto dispose mode.
Method for mutating Background of object.
Type of Background is generic, see UIBackground for minimum interface.
Object itself for fluent interface
Mutator function for Background
Set dragging mode of object. Defines how the object can be dragged by mouse.
See UIDraggingModescollection for options.
Object itself
DraggingMode or undefined to disable dragging
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect
method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set style of LegendBoxEntries with a callback function.
To set style of Entry matching a specific component, use the component
parameter with a custom check.
Example usage:
setEntries((entry, component) =>
// Only apply for single series.
component === mySeries &&
entry.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
)
setEntries((entry, component) =>
// Must check for series with attached LUT
component === myHeatmapSeries &&
// Cast type to UILUTCheckBox
(entry as UILUTCheckBox)
.setLookUpUnit('mm/h')
.setLUTThickness(50)
)
Object itself.
Function that is called for each LegendBoxEntry.
Set highlighted state of the Object. Implementations should also remember to highlight themselves here.
Object itself for fluent interface
Highlight state of the object
Set margin around object in pixels.
Object itself
Number with pixel margins for all sides or datastructure with individual pixel margins for each side. Any side can be omitted, only passed values will be overridden.
Set mouse style when hovering over UI object.
Object itself
Interface for defining how mouse should look when hovering over UI object
Sets the position origin of this UiElement. Affects how the "position" of UIElement is interpreted.
See UIOrigins for a collection of common arguments in an easy-to-read format.
Object itself
Set padding around object in pixels. Padding is empty space between the UiElements content and Background
Object itself
Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.
Sets the position of this UiElement relative to its origin.
NOTE: UIElements scale can't be changed apart from when it is created.
Object itself
Location on the UIElements scale, where its origin should be positioned
Set fill style of LegendBox Title.
Example usage:
// Create a new style
setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
setTitleFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
setTitleFillStyle(emptyFill)
LegendBox itself
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Set font of LegendBox Title.
Example usage:
// Create a new FontSettings
setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
// Change existing settings
setTitleFont((fontSettings) => fontSettings.setWeight('bold'))
LegendBox itself
Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Legend box is a component that describes collections of chart components, like series, highlighters, etc.
It contains a title, and buttons for each attached chart component that display the component name and can be clicked to toggle visibility of that particular component. These buttons are known as legend box entries. Additionally, attaching a series with an associated color look-up table (LUT) will result in the
LegendBox
automatically visualizing the color look up range.A Legend box can be created with the
addLegendBox
method, which is supported by all chart types. For example: addLegendBox.Adding items to LegendBox:
Use add to add a series into the LegendBox (if chart, or dashboard is supplied, then all contained series will be attached).
Configuring LegendBox title:
LegendBox has a built-in title component, which can be configured with setTitle:
Configuring LegendBox entries
When a series is attached to LegendBox, it creates a
LegendBoxEntry
associated with that series. This entry shows as a button + label inside the LegendBox. All entries that currently exist inside a LegendBox can be styled with the setEntries method:See LegendBoxEntry for available configuration API for each entry.
Styling an automatically created
UILUTCheckBox
requires a type cast (TypeScript users):