Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface LegendBox

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)
             )
     }
 })

Index

Methods

add

  • Add a dynamic value to LegendBox, creating a group and entries for it depending on type of value. Supports series, charts and dashboards.

    Parameters

    Returns this

    Object itself.

getTitle

  • getTitle(): string
  • Get text of LegendBox title.

    Returns string

    LegendBox title as a string.

getTitleFillStyle

  • Get fill style of LegendBox Title.

    Returns FillStyle

    FillStyle object

getTitleFont

  • Get font of LegendBox title.

    Returns FontSettings

    FontSettings object

getTitleRotation

  • getTitleRotation(): number
  • Get rotation of LegendBox title.

    Returns number

    Rotation in degrees

setEntries

  • setEntries(styler: function): this
  • 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:

    • Style specific series entry only
     setEntries((entry, component) =>
         // Only apply for single series.
         component === mySeries &&
         entry.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
     )
    
    • Style UILUTCheckBox
     setEntries((entry, component) =>
         // Must check for series with attached LUT
         component === myHeatmapSeries &&
         // Cast type to UILUTCheckBox
         (entry as UILUTCheckBox)
             .setLookUpUnit('mm/h')
             .setLUTThickness(50)
     )
    

    Parameters

    • styler: function

      Function that is called for each LegendBoxEntry.

        • Parameters

          Returns unknown

    Returns this

    Object itself.

setTitle

  • setTitle(title: string): this
  • Set text of LegendBox title.

    Parameters

    • title: string

      LegendBox title as a string.

    Returns this

    Object itself for fluent interface.

setTitleFillStyle

  • 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)
    

    Parameters

    Returns this

    LegendBox itself

setTitleFont

  • 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'))
    

    Parameters

    Returns this

    LegendBox itself

setTitleRotation

  • setTitleRotation(value: number): this
  • Set rotation of LegendBox title.

    Parameters

    • value: number

      Rotation in degrees

    Returns this

    Object itself