Creates an instance of the SciChartSurface
The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and access to our WebGL2 Engine and WebAssembly numerical methods
optional parameters of type ISciChartSurfaceOptions used to configure the SciChartSurface
A ViewRect defining the bounds of the Annotation surface over the chart
A ViewRect defining the bounds of the Annotation surface under the chart
A ViewRect defining the bounds of the Chart Modifier Surface (an area for placing tooltips and overlays during mouse interaction)
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.
The IThemeProvider provides colors, brushes and theme information for the current SciChartSurfaceBase
The {@link HTMLCanvasElement} which is the HTML5 canvas which SciChart draws overlays (cursors, tooltips) to
The {@link HTMLCanvasElement} which is the WebGL canvas that SciChart draws to
The {@link HTMLDivElement} which is the dom chart root
The inner {@link HTMLDivElement} div element
The {@link SVGSVGElement} which is the SVG canvas which SciChart adds elements (tooltips, annotations) to
The MouseManager subscribes to mouse events on the domChartRoot and routes them to components within SciChart
A propertyChanged EventHandler. See EventHandler for how to subscribe to and be notified when a property changes on the SciChartSurfaceBase
Used internally - the RenderContext2D for drawing
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.
The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and access to our WebGL2 Engine and WebAssembly numerical methods
Gets or sets the SciChartSurface Background as an HTML color code
Gets or sets the SciChartSurface Background as an HTML color code
Used internally - gets isDeleted flag
Used internally - gets isInitialized flag
Used internally - gets or sets the {@link LayoutManager}
Used internally - gets other SciChartSurfaces
Gets the Series View Rect, a rectangle relative to the entire size of the SciChartSurfaceBase
Gets zoomStateProperty
Applies a theme (defined by IThemeProvider) to the current element
The theme data to apply
Changes the size of the DOM element where the SciChartSurfaceBase resides.
Changes the Viewport Size of the SciChartSurfaceBase
Deletes native (WebAssembly) memory used by this type, after which it cannot be used.
Gets the XAxis which matches the axisId. Returns undefined if not axis found
The AxisId to search for
Gets the YAxis which matches the axisId. Returns undefined if not axis found
The AxisId to search for
The name of the property which has changed
Used internally - sets destinations
Used internally, the flag is set after SciChartSurfaceBase is initialized
Used internally - gets or sets the {@link LayoutManager}
Sets the Series View Rect, a rectangle relative to the entire size of the SciChartSurfaceBase
Sets zoomStateProperty
An optional animation duration. Default value is 0, which means 'no animation'
An optional easing function for animations. See TEasing for a list of values
the callback function
Creates a SciChartSurface and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
The Div Element ID where the SciChartSurface will reside
Optional - the width of the SciChartSurface in pixels. By default SciChart will scale to fit the parent Div
Optional - the height of the SciChartSurface in pixels. By default SciChart will scale to fit the parent Div
USED INTERNALLY - performs a similar operation to SciChartSurface.create but used internally for testing
Sets function that will be called by the framework to fetch a runtime license (eg from the server).
Sets the runtime license key. Use for full licenses or trials only, not developer licenses.
Generated using TypeDoc
The SciChartSurface is the root 2D Chart control in SciChart's High Performance Real-time JavaScript Chart Library
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.
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.