Options
All
  • Public
  • Public/Protected
  • All
Menu
summary

The SciChartSurface is the root 2D Chart control in SciChart's High Performance Real-time JavaScript Chart Library

description

To create a chart using SciChart, declare a SciChartSurface using SciChartSurface.create, add X and Y axes to the SciChartSurface.xAxes SciChartSurface.yAxes collection.

Next, add a series or chart type by adding a BaseRenderableSeries to the SciChartSurface.renderableSeries collection.

You can add annotations and markers using the SciChartSurface.annotations property, and you can add zoom and pan behaviours, tooltips and more by using the SciChartSurface.chartModifiers property.

To redraw a SciChartSurface at any time, call SciChartSurface.invalidateElement, however all properties are reactive and the chart will automatically redraw if data or properties change.

remarks

It is possible to have more than one SciChartSurface on screen at the same time. SciChartSurfaces scale to fit the parent DIV where they are hosted. Use CSS to position the DIV.

Hierarchy

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

Readonly adornerLayer

adornerLayer: AdornerLayer

annotationOverlaySurfaceViewRect

annotationOverlaySurfaceViewRect: Rect

A ViewRect defining the bounds of the Annotation surface over the chart

annotationUnderlaySurfaceViewRect

annotationUnderlaySurfaceViewRect: Rect

A ViewRect defining the bounds of the Annotation surface under the chart

Readonly annotations

summary

Gets the collection of IAnnotation - annotations, markers or shapes drawn over the top of a SciChartSurface

description

A SciChartSurface can have zero to many Annotations.

The Annotations are drawn using our WebGL / WebAssembly rendering engine, but some use SVG for maximum configurability. See derived types of IAnnotation such as BoxAnnotation, LineAnnotation etc...

Use this collection to add and remove Annotations to the chart.

remarks

Adding an Annotation to the chart causes it to automatically redraw. Note that annotations do not pariticpate in autoranging, meaning a chart will zoom to fit data and chart series but not annotations

Protected backgroundProperty

backgroundProperty: string

chartModifierSurfaceViewRect

chartModifierSurfaceViewRect: Rect

A ViewRect defining the bounds of the Chart Modifier Surface (an area for placing tooltips and overlays during mouse interaction)

Readonly chartModifiers

An ObservableArray of IChartModifierBase derived types. Chart Modifiers provide behavior such as zooming, panning, tooltips, legends and more in SciChart's High Performance Realtime JavaScript Charts. You can use our built in modifiers (see derived types of ChartModifierBase, or create your own for custom interaction behavior.

Protected destinations

destinations: TSciChartDestination[]

The IThemeProvider provides colors, brushes and theme information for the current SciChartSurfaceBase

Readonly domCanvas2D

domCanvas2D: HTMLCanvasElement

The {@link HTMLCanvasElement} which is the HTML5 canvas which SciChart draws overlays (cursors, tooltips) to

Readonly domCanvasWebGL

domCanvasWebGL: HTMLCanvasElement

The {@link HTMLCanvasElement} which is the WebGL canvas that SciChart draws to

Readonly domChartRoot

domChartRoot: HTMLDivElement

The {@link HTMLDivElement} which is the dom chart root

Readonly domDivContainer

domDivContainer: HTMLDivElement

The inner {@link HTMLDivElement} div element

Readonly domMasterCanvas

domMasterCanvas: HTMLCanvasElement

The master WebGL canvas

Readonly domSvgAdornerLayer

domSvgAdornerLayer: SVGSVGElement

The {@link SVGSVGElement} which is the SVG adorner layer canvas, is used for annotation adorners

Readonly domSvgContainer

domSvgContainer: SVGSVGElement

The {@link SVGSVGElement} which is the SVG canvas which SciChart adds elements (tooltips, annotations) to

Protected isDeletedProperty

isDeletedProperty: boolean = false

Protected isInitializedProperty

isInitializedProperty: boolean = false

Readonly modifierAnnotations

modifierAnnotations: ObservableArray<IAnnotation>
summary

Gets the collection of IAnnotation - modifier annotations, markers or shapes drawn over the top of a SciChartSurface

description

A SciChartSurface can have zero to many Annotations.

The Annotations are drawn using our WebGL / WebAssembly rendering engine, but some use SVG for maximum configurability. See derived types of IAnnotation such as BoxAnnotation, LineAnnotation etc...

Use this collection to add and remove Modifier Annotations to the chart.

remarks

Adding an Modifier Annotation to the chart causes it to automatically redraw. Note that annotations do not pariticpate in autoranging, meaning a chart will zoom to fit data and chart series but not annotations

Readonly mouseManager

mouseManager: MouseManager

The MouseManager subscribes to mouse events on the domChartRoot and routes them to components within SciChart

Protected previousThemeProviderProperty

previousThemeProviderProperty: IThemeProvider = new SciChartJSDarkTheme()

Readonly propertyChanged

A propertyChanged EventHandler. See EventHandler for how to subscribe to and be notified when a property changes on the SciChartSurfaceBase

renderContext2D

renderContext2D: RenderContext2D

Used internally - the RenderContext2D for drawing

Readonly renderSurface

renderSurface: RenderSurface

Readonly renderableSeries

summary

Gets the collection of IRenderableSeries - the chart types or seres on this SciChartSurface

description

A SciChartSurface can have zero to many RenderableSeries.

The RenderableSeries are drawn as chart types, e.g. Line series, Scatter series. Each RenderableSeries must have a DataSeries.

Use this collection to add and remove series to the chart.

remarks

Adding a series to the chart causes it to automatically redraw. To zoom to fit the data after adding a series, either set AxisCore.autoRange or call SciChartSurface.zoomExtents

rendered

rendered: EventHandler<void> = new EventHandler<void>()

An event handler which notifies its subsribers when a render operation has finished. Use this to time render performance, or to update elements of the chart or your UI on redraw.

Protected themeProviderProperty

themeProviderProperty: IThemeProvider = new SciChartJSDarkTheme()

Readonly webAssemblyContext2D

webAssemblyContext2D: TSciChart

The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and access to our WebGL2 Engine and WebAssembly numerical methods

Readonly xAxes

summary

Gets the collection of AxisBase2D - the X Axis on a SciChartSurface

description

A SciChartSurface can have one to many XAxes.

Axis may be positioned on the left, right, top or bottom of the chart by using AxisBase2D.axisAlignment.

XAxis may be positioned on the top/bottom (default) or left/right in the case of a rotated or vertical chart.

Series and annotations may be linked to an axis via the AxisCore.id, BaseRenderableSeries.xAxisId and AnnotationBase.xAxisId property.

remarks

Adding an Axis to the chart causes it to automatically redraw. Note that Axis by default do not zoom to fit data. See the AxisBase2D.autoRange property for more information.

Readonly yAxes

summary

Gets the collection of AxisBase2D - the Y Axis on a SciChartSurface

description

A SciChartSurface can have one to many YAxes.

Axis may be positioned on the left, right, top or bottom of the chart by using AxisBase2D.axisAlignment.

YAxis may be positioned on the left/right (default) or bottom/top in the case of a rotated or vertical chart.

Series and annotations may be linked to an axis via the AxisCore.id, BaseRenderableSeries.yAxisId and AnnotationBase.yAxisId property.

remarks

Adding an Axis to the chart causes it to automatically redraw. Note that Axis by default do not zoom to fit data. See the AxisBase2D.autoRange property for more information.

Accessors

background

  • get background(): string
  • set background(background: string): void
  • Gets or sets the SciChartSurface Background as an HTML color code

    Returns string

  • Gets or sets the SciChartSurface Background as an HTML color code

    Parameters

    • background: string

    Returns void

backgroundCompletelyTransparentEnabled

  • get backgroundCompletelyTransparentEnabled(): boolean
  • set backgroundCompletelyTransparentEnabled(alphaEnabled: boolean): void

bottomCanvasBorder

  • get bottomCanvasBorder(): number
  • Gets the SciChartSurface Canvas Bottom Border

    Returns number

bottomViewportBorder

  • get bottomViewportBorder(): number
  • Gets the SciChartSurface Viewport Bottom Border

    Returns number

canvasBorder

  • Gets or sets the SciChartSurface Canvas Border properties

    Returns TBorder

  • Gets or sets the SciChartSurface Canvas Border properties

    Parameters

    Returns void

debugRendering

  • get debugRendering(): boolean
  • set debugRendering(debugRendering: boolean): void
  • Gets or sets a property whether rendering should be debugged. This will draw rectangles around key boxes and areas on the chart. Used internally for development purposes

    Returns boolean

  • Gets or sets a property whether rendering should be debugged. This will draw rectangles around key boxes and areas on the chart. Used internally for development purposes

    Parameters

    • debugRendering: boolean

    Returns void

isCopyCanvasSurface

  • get isCopyCanvasSurface(): HTMLCanvasElement

isDeleted

  • get isDeleted(): boolean
  • Used internally - gets isDeleted flag

    Returns boolean

isInitialized

  • get isInitialized(): boolean

isSuspended

  • get isSuspended(): boolean
  • Gets a value indicating whether updates for the target are currently suspended

    inheritdoc

    Returns boolean

layoutManager

  • get layoutManager(): LayoutManager
  • Used internally - gets or sets the {@link LayoutManager}

    Returns LayoutManager

leftCanvasBorder

  • get leftCanvasBorder(): number
  • Gets the SciChartSurface Canvas Left Border

    Returns number

leftViewportBorder

  • get leftViewportBorder(): number
  • Gets the SciChartSurface Viewport Left Border

    Returns number

otherSurfaces

padding

  • Gets or sets the Padding between the SciChartSurface and it's inner elements, in order top, right, bottom, left

    remarks

    Do not set padding.top and expect the chart to update, instead, treat the Thickness object as immutable and set a new Thickness when you want to change the padding.

    Returns Thickness

  • Gets or sets the Padding between the SciChartSurface and it's inner elements, in order top, right, bottom, left

    remarks

    Do not set padding.top and expect the chart to update, instead, treat the Thickness object as immutable and set a new Thickness when you want to change the padding.

    Parameters

    Returns void

previousThemeProvider

rightCanvasBorder

  • get rightCanvasBorder(): number
  • Gets the SciChartSurface Canvas Right Border

    Returns number

rightViewportBorder

  • get rightViewportBorder(): number
  • Gets the SciChartSurface Viewport Right Border

    Returns number

seriesViewRect

  • get seriesViewRect(): Rect

surfaceType

suspendableId

  • get suspendableId(): string
  • A unique ID for this suspendable instance. Consider using the generateGuid function to ensure this is unique

    inheritdoc

    Returns string

themeProvider

topCanvasBorder

  • get topCanvasBorder(): number
  • Gets the SciChartSurface Canvas Top Border

    Returns number

topViewportBorder

  • get topViewportBorder(): number
  • Gets the SciChartSurface Viewport Top Border

    Returns number

viewportBorder

  • get viewportBorder(): TBorder
  • set viewportBorder(value: TBorder): void
  • Gets or sets the SciChartSurface Viewport Border properties

    Returns TBorder

  • Gets or sets the SciChartSurface Viewport Border properties

    Parameters

    Returns void

zoomState

  • Gets zoomStateProperty

    Returns EZoomState

Methods

Protected applySciChartBackground

  • applySciChartBackground(htmlColor: string, alphaEnabled?: boolean): void

applyTheme

Protected attachChartModifier

Protected changeDomViewportSize

  • changeDomViewportSize(width: number, height: number): void

Protected changeMasterCanvasViewportSize

  • changeMasterCanvasViewportSize(width: number, height: number): void

changeViewportSize

  • changeViewportSize(width: number, height: number): void

decrementSuspend

  • decrementSuspend(): void

delete

  • delete(): void
  • Deletes native (WebAssembly) memory used by this type, after which it cannot be used.

    remarks

    Call .delete() before finishing with the object to ensure that WebAssmembly memory leaks do not occur.

    All elements within SciChart's High Performance Realtime JavaScript Charts which implement IDeletable must be deleted manually to free native (WebAssembly) memory

    Returns void

Protected detachChartModifier

doDrawingLoop

  • doDrawingLoop(): void
  • Returns void

drawBorder

  • Used internally - draws SciChartSurface borders

    Parameters

    Returns void

getMainCanvas

  • getMainCanvas(): HTMLCanvasElement

getXAxisById

  • Gets the XAxis which matches the axisId. Returns undefined if not axis found

    Parameters

    • axisId: string

      The AxisId to search for

    Returns AxisBase2D

getYAxisById

  • Gets the YAxis which matches the axisId. Returns undefined if not axis found

    Parameters

    • axisId: string

      The AxisId to search for

    Returns AxisBase2D

invalidateElement

  • invalidateElement(): void

Protected notifyPropertyChanged

  • notifyPropertyChanged(propertyName: string): void

resumeUpdates

Protected setClearAlphaParams

  • setClearAlphaParams(enabled: boolean, alpha: number): void
  • inheritdoc

    Parameters

    • enabled: boolean
    • alpha: number

    Returns void

setDestinations

setIsInitialized

  • setIsInitialized(): void

setLayoutManager

  • setLayoutManager(layoutManager: LayoutManager): void
  • Used internally - gets or sets the {@link LayoutManager}

    Parameters

    • layoutManager: LayoutManager

    Returns void

setSeriesViewRect

  • setSeriesViewRect(seriesViewRect: Rect): void

setZoomState

  • Sets zoomStateProperty

    Parameters

    Returns void

suspendUpdates

updateBackground

  • updateBackground(): void
  • Used internally, updates background ater switching beetween different SciChartSurfaces

    Returns void

updateWatermark

  • updateWatermark(left: number, bottom: number): void

zoomExtents

  • zoomExtents(animationDurationMs?: number, easingFunction?: TEasing, onCompleted?: () => void): void
  • summary

    Zooms the SciChartSurface in the X and Y direction to extents of all data (zoom to fit)

    description

    Parameters

    • Default value animationDurationMs: number = 0

      An optional animation duration. Default value is 0, which means 'no animation'

    • Default value easingFunction: TEasing = easing.outExpo

      An optional easing function for animations. See TEasing for a list of values

    • Default value onCompleted: () => void = () => {}

      the callback function

        • (): void
        • Returns void

    Returns void

zoomExtentsX

  • zoomExtentsX(animationDurationMs?: number, easingFunction?: TEasing): void
  • summary

    Zooms the SciChartSurface in the X direction to extents of all data (zoom to fit)

    description

    Parameters

    • Default value animationDurationMs: number = 0

      An optional animation duration. Default value is 0, which means 'no animation'

    • Default value easingFunction: TEasing = easing.outExpo

      An optional easing function for animations. See TEasing for a list of values

    Returns void

zoomExtentsY

  • zoomExtentsY(animationDurationMs?: number, easingFunction?: TEasing): void
  • summary

    Zooms the SciChartSurface in the Y direction to extents of all data (zoom to fit)

    description

    Parameters

    • Default value animationDurationMs: number = 0

      An optional animation duration. Default value is 0, which means 'no animation'

    • Default value easingFunction: TEasing = easing.outExpo

      An optional easing function for animations. See TEasing for a list of values

    Returns void

Static configure

  • Parameters

    Returns void

Static create

  • create(divElementId: string, widthAspect?: number, heightAspect?: number): Promise<TWebAssemblyChart>
  • Creates a SciChartSurface and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.

    remarks

    This method is async and must be awaited

    Parameters

    • divElementId: string

      The Div Element ID where the SciChartSurface will reside

    • Default value widthAspect: number = 0

      Optional - the width aspect ratio of the SciChartSurface. By default SciChart will scale to fit the parent Div. However if height of the div is not provided it will use width/height aspect ratio to calculate the height. The default ratio is 3/2.

    • Default value heightAspect: number = 0

      Optional - the height aspect ratio of the SciChartSurface. By default SciChart will scale to fit the parent Div.

    Returns Promise<TWebAssemblyChart>

Static createSingle

  • createSingle(divElementId: string, widthAspect?: number, heightAspect?: number): Promise<TWebAssemblyChart>
  • USED INTERNALLY - performs a similar operation to SciChartSurface.create but used internally for testing

    Parameters

    • divElementId: string
    • Default value widthAspect: number = 0
    • Default value heightAspect: number = 0

    Returns Promise<TWebAssemblyChart>

Static setLicenseCallback

  • setLicenseCallback(callback: (queryString: string) => Promise<Response>): void
  • Sets function that will be called by the framework to validate a runtime license from the server, if you need to add additional handling, such as custom authentication. The request sent to the server must include the queryString section passed in, which does not come with a leading ?

    Parameters

    • callback: (queryString: string) => Promise<Response>
        • (queryString: string): Promise<Response>
        • Parameters

          • queryString: string

          Returns Promise<Response>

    Returns void

Static setRuntimeLicenseKey

  • setRuntimeLicenseKey(keyCode: string): void
  • Sets the runtime license key. Use for full licenses or trials only, not developer licenses.

    Parameters

    • keyCode: string

    Returns void

Static setServerLicenseEndpoint

  • setServerLicenseEndpoint(endpoint: string): void
  • Sets the endpoint for validating a runtime license key with the server. Must be a relative path.

    default

    api/license

    Parameters

    • endpoint: string

    Returns void

Generated using TypeDoc