Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ZoomBandChart

Chart that is attached to a single Axis of a ChartXY.

It shows a compilation of all data from all Series that are attached to that Axis, and allows the user to configure the view of the attached Axis easily by interacting with a Band on the ZoomBandChart.

Created with Dashboard.createZoomBandChart.


 const dashboard = lightningChart().Dashboard( {
     numberOfColumns: 1,
     numberOfRows: 4
 } )

 const chart = dashboard.createChartXY( {
     columnIndex: 0,
     columnSpan: 1,
     rowIndex: 0,
     rowSpan: 3
 })

 const zoomBandChart = dashboard.createZoomBandChart({
     columnIndex: 0,
     columnSpan: 1,
     rowIndex: 3,
     rowSpan: 1,
     axis: chart.getDefaultAxisX()
 })

 const line = chart.addLineSeries()
 createProgressiveTraceGenerator()
     .setNumberOfPoints( 1000 )
     .generate()
     .toPromise()
     .then( data => line.add( data ) )

Index

Properties

Readonly attachedAxis

attachedAxis : Axis

Axis that the ZoomBandChart is attached to. This can be X or Y Axis.

Readonly band

band : Band

The Band of the ZoomBandChart.

Readonly engine

engine : PublicEngine

Public, safe interface of rendering engine.

Methods

addLegendBox

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

    Parameters

    • builder: UILegendBoxBuilder

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

    • scale: UserScaleDefinition

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

    Returns LegendBox & UIElement

    Object with two interfaces: LegendBox and UIElement.

addUIElement

  • Add a stand-alone UIElement using a builder.

    Type parameters

    • UIElementType: UIPart = UITextBox

      Type of UIElement that is specified by 'builder'-parameter.

    Parameters

    • uiElementBuilder: UIElementBuilder<UIElementType>
    • scale: LinearScaleXY

      Optional custom scale to position UIElement on. Defaults to whole component in percentages [0, 100].

    Returns UIElementType & UIElement

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

dispose

  • dispose(): this
  • Permanently dispose 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

    Returns this

    Object itself for fluent interface

disposeSeries

  • disposeSeries(series: ZoomBandChartSupportedSeries): this
  • Dispose a Series reference from the ZoomBandChart.

    This ensures that all resources that were previously allocated for this series instance are released for Garbage Collection.

    Parameters

    • series: ZoomBandChartSupportedSeries

      Series object.

    Returns this

    Object itself.

getBackgroundFillStyle

  • Get fillstyle of chart background.

    Returns FillStyle

    FillStyle

getBackgroundStrokeStyle

  • getBackgroundStrokeStyle(): LineStyle
  • Get stroke style of chart background.

    Returns LineStyle

    LineStyle

getDefaultAxisX

  • getDefaultAxisX(): Axis
  • Get the X Axis of the ZoomBandChart.

    Returns Axis

    Axis

getDefaultAxisY

  • getDefaultAxisY(): Axis
  • Get the Y Axis of the ZoomBandChart.

    Returns Axis

    Axis

getMinimumSize

  • getMinimumSize(): Point | undefined
  • Get minimum size of Panel. Depending on the type of class this value might be automatically computed to fit different elements.

    Returns Point | undefined

    Point minimum size or undefined if unimplemented

getPadding

  • Get padding around Chart in pixels.

    Returns Margin

    Padding datastructure

getTitle

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

    Returns string

    Chart title as a string.

getTitleFillStyle

  • Get fill style of Chart Title.

    Returns FillStyle

    FillStyle object

getTitleFont

  • Get font of Chart title.

    Returns FontSettings

    FontSettings object

getTitleMarginBottom

  • getTitleMarginBottom(): number
  • Returns number

    Padding after Chart title

getTitleMarginTop

  • getTitleMarginTop(): number
  • Returns number

    Padding before Chart title

saveToFile

  • saveToFile(fileName: string, type?: undefined | string, encoderOptions?: undefined | number): this
  • 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)
    sideeffect

    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.

    • type: undefined | string

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

    • encoderOptions: undefined | 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 this

setBackgroundFillStyle

setBackgroundStrokeStyle

  • setBackgroundStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set stroke style of panel background.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or function which modifies it

    Returns this

    Object itself

setPadding

  • setPadding(padding: Partial<Margin> | number): this
  • Set padding around Chart in pixels.

    Parameters

    • padding: Partial<Margin> | number

      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.

    Returns this

    Object itself for fluent interface

setSeriesStyle

  • Set style of Series of ZoomBandChart.

    ZoomBandChart creates series automatically based on the Series attached to the ZoomBandCharts reference Axis, that is specified when it is created. This method lets the user specify a function that is called on each Series created by ZoomBandChart, allowing the full configuration of these Series.

    Parameters

    Returns this

setTitle

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

    Parameters

    • title: string

      Chart title as a string.

    Returns this

    Object itself for fluent interface.

setTitleFillStyle

  • Set fill style of Chart Title.

    Example usage:

    // Create a new style
    ZoomBandChart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
    // Change transparency
    ZoomBandChart.setTitleFillStyle((solidFill) => solidFill.setA(80))
    // Set hidden
    ZoomBandChart.setTitleFillStyle(emptyFill)

    Parameters

    Returns this

    Chart itself

setTitleFont

  • Set font of Chart Title.

    Example usage:

    // Create a new FontSettings
    ZoomBandChart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
    // Change existing settings
    ZoomBandChart.setTitleFont((fontSettings) => fontSettings.setWeight('bold'))

    Parameters

    Returns this

    Chart itself

setTitleMarginBottom

  • setTitleMarginBottom(marginPixels: pixel): this
  • Specifies padding after chart title.

    This does not have an effect if title is hidden (empty FillStyle).

     // Example usage,
     // Add empty space between title and series.
     ZoomBandChart.setTitleMarginBottom(32)

    Parameters

    • marginPixels: pixel

      Gap after the chart title in pixels.

    Returns this

    Chart itself for fluent interface

setTitleMarginTop

  • setTitleMarginTop(marginPixels: pixel): this
  • Specifies padding before chart title.

    This does not have an effect if title is hidden (empty FillStyle).

     // Example usage,
     // Add empty space at top of chart, before title.
     ZoomBandChart.setTitleMarginTop(32)

    Parameters

    • marginPixels: pixel

      Gap between the top of chart and its title in pixels.

    Returns this

    Chart itself for fluent interface