Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SpiderChart<CursorPointMarkerType, CursorResultTableBackgroundType>

Chart for visualizing data in a radial form as dissected by named axes.

Charts are created by methods of LightningChart interface or a Dashboard.

A SpiderChart can have any number of SpiderSeries added to it using SpiderChart.addSeries. Data can then be pushed in with SpiderSeries.addPoints

By default, SpiderChart automatically creates Axes based on the data that are pushed to its Series.

Index

Properties

Methods

Properties

Readonly axisScale

axisScale : Scale

Scale of axes. Used for formatting and scaling series

Readonly engine

engine : PublicEngine

Public, safe interface for Panels rendering engine.

pixelScale

pixelScale : Vec2<Scale>

Scale for panel area in pixels. Margin should be set according to panel margin (currently constant).

uiScale

uiScale : Vec2<Scale>

Scale for panel area in percentages (0-100). Margin should be set according to panel margin (currently constant).

Methods

addAxis

  • addAxis(tagOrAxis: string): this
  • Add a new axis to Spider Chart

    Parameters

    • tagOrAxis: string

    Returns this

    Object itself

addLegendBox

  • Add a stand-alone LegendBox using a builder.

    Type parameters

    • UIElementType: UIPart = UILegendBox

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

    Parameters

    • builder: UIElementBuilder<UIElementType>

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

    • scale: Vec2<Scale>

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

    Returns UIElementType & UIElement

    LegendBox that fulfills interfaces: UIElementType (typeparam) and UIElement

addSeries

  • Adds a new SpiderSeries to the SpiderChart.

    Parameters

    • pointShape: PointShape

      Shape of points for SpiderSeries. Defaults to PointShape.Circle

    Returns SpiderSeries

    SpiderSeries instance

addUIElement

  • Add a stand-alone UIElement using a builder.

    Type parameters

    • UIElementType: UIPart = UITextBox

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

    Parameters

    • builder: UIElementBuilder<UIElementType>

      UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.

    • scale: Vec2<Scale>

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

    Returns UIElementType & UIElement

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

disableAnimations

  • disableAnimations(): this
  • Disable all animations for the chart.

    All animations have to be re-enabled individually if you wish to re-enable animations.

    Returns this

    Chart itself for fluent interface.

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

formatValue

  • formatValue(value: number): string
  • Format value along an axis.

    Parameters

    • value: number

      Value along an axis

    Returns string

    Value formated to string

getAnimationsEnabled

  • getAnimationsEnabled(): boolean
  • Gets if animations are enabled or not

    Returns boolean

getAutoAxis

  • getAutoAxis(): boolean
  • Returns boolean

    Automatic axis creation state

getAxisLabelFont

  • Get font of axis labels.

    Returns FontSettings

    FontSettings object

getAxisLabelPadding

  • getAxisLabelPadding(): pixel
  • Get padding of axis labels. NOTE: The value of this padding is simply passed to the axis label strategy of chart, so overriding the default strategy will naturally leave the handling of padding logic up to you.

    Returns pixel

    Padding in pixels

getAxisLabelStyle

  • Get fill style of axis labels.

    Returns FillStyle

    FillStyle object

getAxisScrollStrategy

  • getAxisScrollStrategy(): AxisScrollStrategy | undefined
  • Gets the AxisScrollStrategy of Charts Axes

    Returns AxisScrollStrategy | undefined

getAxisStyle

  • Get style of axes as SolidLine.

    Returns SolidLine

    SolidLine object

getBackgroundFillStyle

  • Get fillstyle of chart background.

    Returns FillStyle

    FillStyle

getBackgroundStrokeStyle

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

    Returns LineStyle

    LineStyle

getChartBackgroundFillStyle

  • Get fillstyle of chart background. This is the area enclosed by the axis'.

    deprecated

    Deprecated in v2.2.0. Renamed to getSeriesBackgroundFillStyle.

    Returns FillStyle

    FillStyle

getChartBackgroundStrokeStyle

  • getChartBackgroundStrokeStyle(): LineStyle
  • Get stroke style of chart background. This is the area enclosed by the axis'.

    deprecated

    Deprecated in v2.2.0. Renamed to getSeriesBackgroundStrokeStyle.

    Returns LineStyle

    LineStyle

getEdgeValue

  • getEdgeValue(): number
  • Get axis value at edges of chart

    Returns number

    Value at edges of chart

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

    Vec2 minimum size or undefined if unimplemented

getMouseInteractions

  • getMouseInteractions(): boolean
  • Get are mouse-interactions on chart enabled or not

    Returns boolean

    Boolean flag

getNibLength

  • getNibLength(): number
  • Get length of axis nibs in pixels.

    Returns number

    Length of nibs in pixels

getNibStyle

  • Get style of axis nibs as SolidLine.

    Returns SolidLine

    SolidLine object

getOriginValue

  • getOriginValue(): number
  • Get axis value at center of chart

    Returns number

    Value at center of chart

getPadding

  • Get padding around Chart in pixels.

    Returns Margin

    Padding datastructure

getScaleLabelFont

  • Get font of scale labels.

    Returns FontSettings

    FontSettings

getScaleLabelPadding

  • getScaleLabelPadding(): pixel
  • Get padding of scale labels.

    Returns pixel

    Padding in pixels

getScaleLabelStyle

  • Get fill style of scale labels.

    Returns FillStyle

    FillStyle object

getSeries

getSeriesBackgroundFillStyle

  • Get FillStyle of Series background area (area behind series).

    Returns FillStyle

    FillStyle

getSeriesBackgroundStrokeStyle

  • getSeriesBackgroundStrokeStyle(): LineStyle
  • Get Stroke style of Series background area (area behind series).

    Returns LineStyle

    LineStyle

getSeriesCount

  • getSeriesCount(): number
  • Get number of series inside chart.

    Returns number

    Amount of series inside chart

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

getWebCount

  • getWebCount(): number
  • Get count of 'webs' displayed

    Returns number

    Count of web lines

getWebMode

  • Get mode of SpiderCharts web and background.

    Returns SpiderWebMode

    Enum SpiderWebMode

getWebStyle

  • getWebStyle(): LineStyle
  • Get fill style of web lines.

    Returns LineStyle

    LineStyle object

hasAxis

  • hasAxis(tag: string): boolean
  • Check if Chart has an Axis with specified tag

    Parameters

    • tag: string

      Name of desirable axis

    Returns boolean

    True if axis exists, false if not.

offChartBackgroundMouseClick

  • offChartBackgroundMouseClick(token: Token): boolean
  • Remove event listener from mouse-click event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseDoubleClick

  • offChartBackgroundMouseDoubleClick(token: Token): boolean
  • Remove event listener from mouse-doubleClick event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseDown

  • offChartBackgroundMouseDown(token: Token): boolean
  • Remove event listener from mouse-down event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseDrag

  • offChartBackgroundMouseDrag(token: Token): boolean
  • Remove event listener from mouse-drag event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseDragStart

  • offChartBackgroundMouseDragStart(token: Token): boolean
  • Remove event listener from mouse-drag start event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseDragStop

  • offChartBackgroundMouseDragStop(token: Token): boolean
  • Remove event listener from mouse-drag stop event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseEnter

  • offChartBackgroundMouseEnter(token: Token): boolean
  • Remove event listener from mouse-enter event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseLeave

  • offChartBackgroundMouseLeave(token: Token): boolean
  • Remove event listener from mouse-leave event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseMove

  • offChartBackgroundMouseMove(token: Token): boolean
  • Remove event listener from mouse-move event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseUp

  • offChartBackgroundMouseUp(token: Token): boolean
  • Remove event listener from mouse-up event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundMouseWheel

  • offChartBackgroundMouseWheel(token: Token): boolean
  • Remove event listener from mouse-wheel event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundTouchEnd

  • offChartBackgroundTouchEnd(token: Token): boolean
  • Remove event listener from touch end event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundTouchMove

  • offChartBackgroundTouchMove(token: Token): boolean
  • Remove event listener from touch move event on Chart background

    Parameters

    • token: Token

    Returns boolean

offChartBackgroundTouchStart

  • offChartBackgroundTouchStart(token: Token): boolean
  • Remove event listener from touch start event on Chart background

    Parameters

    • token: Token

    Returns boolean

offResize

  • offResize(token: Token): boolean
  • Remove event listener from resize event.

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

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

onChartBackgroundMouseClick

  • Subscribe to mouse-click event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseDoubleClick

  • Subscribe to mouse-doubleClick event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseDown

  • Subscribe to mouse-down event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseDrag

  • Subscribe to mouse-drag event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseDragStart

onChartBackgroundMouseDragStop

onChartBackgroundMouseEnter

  • Subscribe to mouse-enter event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseLeave

  • Subscribe to mouse-leave event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseMove

  • Subscribe to mouse-move event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseUp

  • Subscribe to mouse-up event on Chart background

    Parameters

    Returns Token

onChartBackgroundMouseWheel

  • Subscribe to mouse-wheel event on Chart background

    Parameters

    Returns Token

onChartBackgroundTouchEnd

  • Subscribe to touch end event on Chart background

    Parameters

    Returns Token

onChartBackgroundTouchMove

  • Subscribe to touch move event on Chart background

    Parameters

    Returns Token

onChartBackgroundTouchStart

  • Subscribe to touch start event on Chart background

    Parameters

    Returns Token

onResize

  • onResize(handler: function): Token
  • Subscribe to resize event of Panel.

    Parameters

    • handler: function

      Handler function for event

        • Parameters

          • obj: this
          • width: pixel
          • height: pixel
          • engineWidth: pixel
          • engineHeight: pixel

          Returns void

    Returns Token

    Token of subscription

removeAxis

  • removeAxis(tagOrAxis: string | SpiderAxis): this
  • Remove axis from Spider Chart

    Parameters

    • tagOrAxis: string | SpiderAxis

      Axis or tag of an Axis which has to be removed

    Returns this

    Object itself for fluent interface

restoreAxis

  • restoreAxis(axis: SpiderAxis): this
  • Restore given axis to the Spider Chart.

    Parameters

    • axis: SpiderAxis

      Axis to restore.

    Returns this

    This.

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'
    Panel.saveToFile('screenshot')
    // Attempt download 'maybeNotSupported.bmp'
    Panel.saveToFile('maybeNotSupported', 'image/bmp')
    // Attempt download jpeg.file with specified compression quality
    Panel.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

setAnimationsEnabled

  • setAnimationsEnabled(animationsEnabled: boolean): this
  • Sets if animations are enabled or not

    Parameters

    • animationsEnabled: boolean

    Returns this

setAutoAxis

  • setAutoAxis(createAxesAutomatically: boolean): this
  • Specifies if auto creation of axis is turned on or not

    Parameters

    • createAxesAutomatically: boolean

      State of automatic axis creation

    Returns this

    Object itself for fluent interface

setAxisInterval

  • setAxisInterval(edge: number, center: number): this
  • Set interval of Charts Axes

    Parameters

    • edge: number

      Value at edges of chart

    • center: number

      Value at center of chart. Defaults to zero

    Returns this

    Object itself

setAxisLabelFont

setAxisLabelPadding

  • setAxisLabelPadding(padding: pixel): this
  • Set padding of axis labels. NOTE: The value of this padding is simply passed to the axis label strategy of chart, so overriding the default strategy will naturally leave the handling of padding logic up to you.

    Parameters

    • padding: pixel

      Padding in pixels

    Returns this

    Object itself

setAxisLabelStrategy

  • Set strategy for drawing axis labels. Defines how axis labels are aligned.

    Parameters

    Returns this

    Object itself

setAxisLabelStyle

setAxisScrollStrategy

  • setAxisScrollStrategy(scrollStrategy?: AxisScrollStrategy): this
  • Sets the AxisScrollStrategy of Charts Axes

    Parameters

    • scrollStrategy: AxisScrollStrategy

      AxisScrollStrategy or undefined to disable automatic scrolling. See AxisScrollStrategies for a collection of options.

    Returns this

    Object itself

setAxisStyle

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

setChartBackgroundFillStyle

  • Set fillStyle of chart background. This is the area enclosed by the axis'. Example usage:

     ChartXY.setChartBackgroundFillStyle(new SolidFill({ color: ColorHEX('#9a78df').setA(50) }))
    deprecated

    Deprecated in v2.2.0. Renamed to setSeriesBackgroundFillStyle.

    Parameters

    Returns this

    Object itself

setChartBackgroundStrokeStyle

  • setChartBackgroundStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set stroke of chart background. This is the area enclosed by the axis'.

    Example usage:

     ChartXY.setChartBackgroundStrokeStyle(
         new SolidLine({
             fillStyle: new SolidFill({ color: ColorHEX('#DF9A78') }),
             thickness: 5
         })
     )
    deprecated

    Deprecated in v2.2.0. Renamed to setSeriesBackgroundStrokeStyle.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or mutator to modify existing one

    Returns this

    Object itself

setMouseInteractions

  • setMouseInteractions(enabled: boolean): this
  • Set if mouse-interactions on chart are enabled or not

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

    Object itself

setNibLength

  • setNibLength(length: number): this
  • Set length of axis nibs in pixels.

    Parameters

    • length: number

      Sum length of nibs in pixels (both directions)

    Returns this

setNibStyle

  • Set style of axis nibs as SolidLine.

    Parameters

    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

setScaleLabelFont

setScaleLabelPadding

  • setScaleLabelPadding(padding: pixel): this
  • Set padding of scale labels.

    Parameters

    • padding: pixel

      Padding in pixels

    Returns this

    Object itself

setScaleLabelStrategy

  • Set strategy for drawing scale labels. Defines on which positions labels are drawn and whether they are flipped or not.

    Parameters

    Returns this

    Object itself

setScaleLabelStyle

setSeriesBackgroundFillStyle

  • Set FillStyle of Series background area (area behind series).

    Example usage:

     ChartXY.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorHEX('#9a78df').setA(50) }))

    Parameters

    Returns this

    Object itself

setSeriesBackgroundStrokeStyle

  • setSeriesBackgroundStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set Stroke style of Series background area (area behind series).

    Example usage:

     ChartXY.setSeriesBackgroundStrokeStyle(
         new SolidLine({
             fillStyle: new SolidFill({ color: ColorHEX('#DF9A78') }),
             thickness: 5
         })
     )

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or mutator to modify existing one

    Returns this

    Object itself

setSeriesHighlightOnHover

  • setSeriesHighlightOnHover(state: boolean): this
  • Set the state for all Series in the Chart to highlight on mouse hover.

    Parameters

    • state: boolean

      True if all Series should be highlighted on mouse hover, false if not.

    Returns this

    Object itself for fluent interface.

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
    Chart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
    // Change transparency
    Chart.setTitleFillStyle((solidFill) => solidFill.setA(80))
    // Set hidden
    Chart.setTitleFillStyle(emptyFill)

    Parameters

    Returns this

    Chart itself

setTitleFont

  • Set font of Chart Title.

    Example usage:

    // Create a new FontSettings
    Chart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
    // Change existing settings
    Chart.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).

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

    Parameters

    • marginPixels: pixel

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

    Returns this

    Chart itself for fluent interface

setWebCount

  • setWebCount(webCount: number): this
  • Set count of 'webs' displayed.

    Parameters

    • webCount: number

      Count of web lines

    Returns this

    Object itself

setWebMode

  • Set mode of SpiderCharts web and background.

    Parameters

    Returns this

    Object itself

setWebStyle

  • Set style of spider charts webs as LineStyle.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle object or mutator to modify existing one

    Returns this

    Object itself

solveNearest

  • Solves the nearest data-point from series inside Chart of a given coordinate on screen

    Parameters

    • location: Point | undefined

      Location on screen or omit for cur mouse location

    Returns undefined | CursorPoint

    Undefined or data-structure for positioning of markers (and cursors)