Add a dynamic value to LegendBox, creating a group and entries for it depending on type of value. Supports series, charts and dashboards.
Series, Chart or Dashboard
Optional extra configuration arguments.
Object itself.
Get text of LegendBox title.
LegendBox title as a string.
Get fill style of LegendBox Title.
FillStyle object
Get font of LegendBox title.
FontSettings object
Get rotation of LegendBox title.
Rotation in degrees
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)
)
Function that is called for each LegendBoxEntry.
Object itself.
Set text of LegendBox title.
LegendBox title as a string.
Object itself for fluent interface.
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)
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
LegendBox itself
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'))
Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
LegendBox itself
Set rotation of LegendBox title.
Rotation in degrees
Object itself
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 hide/restore 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: ChartXY.addLegendBox.Adding items to LegendBox:
Use LegendBox.add to add a series into the LegendBox (if chart, or dashboard is supplied, then all contained series will be attached).
// Example, attach a series to LegendBox. const mySeries = ChartXY.addLineSeries() LegendBox.add(mySeries)
Configuring LegendBox title:
LegendBox has a built-in title component, which can be configured with LegendBox.setTitle:
// Example 1, specify LegendBox title. LegendBox.setTitle('Groups Legend')
// Example 2, hide LegendBox title. LegendBox.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 LegendBox.setEntries method:// Example, style LegendBoxEntries. // First attach series to create entries. LegendBox.add(mySeries) // Then style each entry using a callback function. LegendBox.setEntries((entry, component) => entry .setTextFont((font) => font .setStyle('italic') ) )
See LegendBoxEntry for available configuration API for each entry.
Styling an automatically created
UILUTCheckBox
requires a type cast (TypeScript users):// Example, styling a UILUTCheckBox that is automatically created when a series with associated LUT is attached. LegendBox.add(myHeatmapSeries) // Heatmap series is styled with `PalettedFill` -> style the created UILUTCheckBox using a reference check + type cast. LegendBox.setEntries((entry, component) => { if (component === myHeatmapSeries) { const lutCheckBox = entry as UILUTCheckBox lutCheckBox .setLUTLength(200) .setLUTThickness(30) .setLUTTextFont((font) => font .setSize(10) ) } })