Abstract super class for a Control. Meaning a stand-alone Charting component, which owns a rendering Engine. Eq. Panel, Dashboard, ...

Hierarchy

Implemented by

Properties

engine: PublicEngine

Public, safe interface of rendering engine.

Methods

  • Add a legendbox.

    Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.

    The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.

    Legendbox alignment:

    Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:

     // Default (vertical) LegendBox.
    const legendBox = ChartXY.addLegendBox()

    // Horizontal LegendBox.
    const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)

    Custom Legendbox positioning:

    By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).

    A custom location can be configured with UIElement API:

    Position coordinate system is specified when creating legendbox.

    1. LegendBox with default positioning coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox )
    // Position = [0, 100] as percentages.
    .setPosition({ x: 50, y: 50 })
    1. Position in pixel coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.pixelScale )
    // Position = pixels.
    .setPosition({ x: 300, y: 100 })
    1. Position on Axes.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
    // Position = Axis values.
    .setPosition({ x: 5, y: 5 })

    Returns

    LegendBox

    Parameters

    • Optional builder: UILegendBoxBuilder<InternalBackground>

      LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.

    • Optional scale: UserScaleDefinition

      Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].

    Returns LegendBox<UIBackground>

  • Add a stand-alone UIElement using a builder.

    Example usage:

    1. TextBox with default positioning coordinate system.
     addUIElement( UIElementBuilders.TextBox )
    // Position = [0, 100] as percentages.
    .setPosition({ x: 50, y: 50 })
    1. Position in pixel coordinate system.
     addUIElement( UIElementBuilders.TextBox, chart.pixelScale )
    // Position = pixels.
    .setPosition({ x: 300, y: 100 })
    1. Position on Axes.
     addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
    // Position = Axis values.
    .setPosition({ x: 5, y: 5 })

    Returns

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

    Type Parameters

    Parameters

    • Optional uiElementBuilder: UIElementBuilder<UIElementType>
    • Optional scale: UserScaleDefinition

      Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole component in percentages [0, 100].

    Returns UIElementType & UIElement

  • Returns the Theme currently being used.

    Returns

    An object containing the Theme.

    Returns Theme

  • Remove event listener from dispose event.

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Subscribe to onDispose event. This event is triggered whenever the object is disposed.

    A component can only be disposed by the end user, by calling the dispose method on the component or the component which owns it.

     // Example usage

    Dashboard.onDispose(() => {
    console.log('Dashboard was disposed')
    })

    Dashboard.dispose()

    Returns

    Token of subscription

    Parameters

    • handler: (() => unknown)

      Handler function for event

        • (): unknown
        • Returns unknown

    Returns Token

  • Capture rendered state in an image file. Prompts the browser to download the created file.

    NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.

    Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

    Example usage:

    // Download 'screenshot.png'
    saveToFile('screenshot')
    // Attempt download 'maybeNotSupported.bmp'
    saveToFile('maybeNotSupported', 'image/bmp')
    // Attempt download jpeg.file with specified compression quality
    saveToFile('fileName', 'image/jpeg', 0.50)

    Remarks

    If 'type' is not supported by browser, an Error will be thrown.

    Parameters

    • fileName: string

      Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.

    • Optional type: string

      A DOMString indicating the image format. The default format type is image/png.

    • Optional encoderOptions: number

      A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.

    Returns Control