• Public
  • Public/Protected
  • All

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

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.

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.
 // Then style each entry using a callback function.
 LegendBox.setEntries((entry, component) => entry
     .setTextFont((font) => font

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.
 // 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
             .setLUTTextFont((font) => font




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


    Returns this

    Object itself.


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

    Returns string

    LegendBox title as a string.


  • Get fill style of LegendBox Title.

    Returns FillStyle

    FillStyle object


  • Get font of LegendBox title.

    Returns FontSettings

    FontSettings object


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

    Returns number

    Rotation in degrees


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


    • styler: function

      Function that is called for each LegendBoxEntry.

        • Parameters

          Returns unknown

    Returns this

    Object itself.


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


    • title: string

      LegendBox title as a string.

    Returns this

    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


    Returns this

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


    Returns this

    LegendBox itself


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


    • value: number

      Rotation in degrees

    Returns this

    Object itself