Creates an instance of the SciChartSurface
The 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 filter function to apply during {@link ScichartSurface.resolveAutoColors} to determine which series it applies to. Note that if this is set, you will need to call resolveAutoColors yourself whn the things this filter depends on change
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 {@link SVGSVGElement} placed on the background and could be used instead of domSvgContainer
The {@link HTMLCanvasElement} which is the WebGL canvas that SciChart draws to
The inner {@link HTMLDivElement} div element placed on the background
The {@link SVGSVGElement} which is the SVG adorner layer canvas, is used for annotation adorners
The {@link SVGSVGElement} which is the SVG canvas which SciChart adds elements (tooltips, annotations) to
An event handler which notifies its subscribers when animations stage in render process has finished.
An event handler which notifies its subscribers when a layout stage in render process has finished.
The MouseManager subscribes to mouse events on the domChartRoot and routes them to components within SciChart
An offset of the surface position. INTERNAL USE.
For serialization Only. The name of the onCreated function applied by the builder api
An event handler which notifies its subscribers when a chart was visually painted a display canvas.
An event handler which notifies its subscribers when a render operation starts for this specific surface (or sub-surface). Use this to update elements of the chart for the current render. Any updates made here will not trigger a subsequent render.
An event handler which notifies its subscribers when a render operation starts ignoring the surface order. Use this to update elements of the chart for the current render. Any updates made here will not trigger a subsequent render.
A propertyChanged EventHandler. See EventHandler for how to subscribe to and be notified when a property changes on the SciChartSurfaceBase
An event handler which notifies its subscribers when a chart was requested to redraw initially.
Normally, native labels are drawn all at once at the end of the render cycle to improve performance. In circumstances where you want to draw over the labels, eg with a subchart, set this true to have them drawn earlier.
An event handler which notifies its subscribers when a render operation has finished. Use this to time render performance, or to update elements of the chart or your UI on redraw.
An event handler which notifies its subscribers when a chart was rendered to a display canvas.
An event handler which notifies its subscribers when a chart was rendered to WebgL Canvas.
The position of the watermark for trials and community licenses
Set true to position the watermark relative to the overall canvas, rather than the series area.
The SciChart 2D WebAssembly Context containing native methods and access to our WebGL2 Engine and WebAssembly numerical methods
Global property defining whether the WebGL render target is anti-aliased or not. This will affect all SciChartSurfaces (2D & 3D) in the application.
Gets or sets the application-wide default theme. See IThemeProvider for details
Defines if the shared wasmContext (WebAssembly Context) should be deleted after all of the surfaces that use it are deleted.
The master WebGL canvas
Defines if charts should rerender when the tab becomes active.
Defines a delay of the shared wasmContext auto-dispose if autoDisposeWasmContext is enabled.
Gets the adjusted padding between the SciChartSurface and its inner elements, in order top, right, bottom, left Defines a resulting padding accordingly to DPI scaling.
Gets or sets the EAutoColorMode which determines when resolution of AUTO_COLOR should occur
Gets or sets the EAutoColorMode which determines when resolution of AUTO_COLOR should occur
Gets or sets the SciChartSurface Background as an HTML color code
Gets or sets the SciChartSurface Background as an HTML color code
The HTML color code
Gets the SciChartSurface Canvas Bottom Border
Gets the SciChartSurface Viewport Bottom Border
Gets Chart Modifier Groups, is used for sharing events between chart modifiers
Controls the rendering of {@link SiCharSurface.title}
Controls the rendering of {@link SiCharSurface.title}
Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
Used internally - gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
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
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
Gets or sets the boolean flag for switching behaviour of Axises rendering
Gets or sets the boolean flag for switching behaviour of Axises rendering
When true, charts that are out of the viewport will be frozen (pausing rendering). Data updates can resume Once the chart is in view again, rendering will resume. This can be useful for performance optimization.
When true, charts that are out of the viewport will be frozen (pausing rendering). Data updates can resume Once the chart is in view again, rendering will resume. This can be useful for performance optimization.
Gets or sets the SciChartSurface Id
Gets or sets the SciChartSurface Id
Used internally - gets isDeleted flag
Used internally - gets isInitialized flag
Returns true if an animation is running
Gets a value indicating whether updates for the target are currently suspended
Used internally - gets or sets the LayoutManager
Used internally - gets or sets the LayoutManager
Gets the SciChartSurface Canvas Left Border
Gets the SciChartSurface Viewport Left Border
Used internally - gets the previous IThemeProvider
Gets the SciChartSurface Canvas Right Border
Gets the SciChartSurface Viewport Right Border
Gets the Series View Rect, a rectangle relative to the entire size of the SciChartSurfaceBase
Gets the sub-chart counter value
The list of subCharts on this surface. See {@link addSubChart}
Gets the Surface Type. See ESurfaceType for list of values
Used internally - gets the previous IThemeProvider
Gets or sets the title for the SciChartSurface
Gets or sets the title for the SciChartSurface
Gets or sets the title text style and placement for the SciChartSurface as TChartTitleStyle
Gets or sets the title text style and placement for the SciChartSurface as TChartTitleStyle
Gets the SciChartSurface Canvas Top Border
Gets the SciChartSurface Viewport Top Border
Gets zoomStateProperty
Add a GenericAnimation to the surface. Multiple animations will be run in parallel, so if you want to run one after another, use the onCompleted callback to add another animation after the first completes
Add an IDeleteable object to the surface which will have its delete method called when the surface is deleted
Used internally - Adds a sub-chart
Applies a theme (defined by IThemeProvider) to the current element
The theme data to apply
Changes the Viewport Size of the SciChartSurfaceBase
Deletes native (WebAssembly) memory used by this type, after which it cannot be used.
Used internally - draws SciChartSurface borders
Gets the generic animations currently on the surface. Do not manipulate this array directly. To add, use addAnimation. To remove, find an animation and call .cancel() on it.
Gets SVG Canvas Translation, used to draw on SVG Canvas using different clipping modes
Gets the default XAxis, which is the first one X axis attached to the surface.
Gets the default YAxis, which is the first one Y axis attached to the surface.
Gets the main WebGL or 2D canvas
Triggers the rerendering of the surface and after the chart rerendering is completed, returns its serialized state retrieved with SciChartSurface.toJSON.
if set true, data values will not be included in the json.
JSON-like object ISciChart2DDefinition
Returns the seriesViewRect padding relative to the canvas
If True returns scaled values, if False divided by DpiHelper.PIXEL_RATIO Use not scaled values for SVG annotations and the Legend
Gets or sets the drawing order for surfaces and their subsurfaces. This allows for a parent surface to draw over a subsurface. This does not affect the drawing order of separate surfaces - use z-index on the container div to control that.
Returns wasm Id
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 no axis found
The AxisId to search for
Creates a promise which resolves when the chart is updated to the next fully rendered state
The name of the property which has changed
Is being called on each render, to run animations
Called when the Dpi changes in the browser. This could be due to user zooming the browser, or changing DPI settings in Windows, or moving the browser containing SciChart to another monitor
The TDpiChangedEventArgs containing info about the Dpi Changed event
Register a font to be used with native text.
Remove an existing subChart from a parent surface. See {@link addSubChart}
Calls resolveAutoColors on each series to resolve colors marked as auto based on the seriesColorPalette To configure which series this applies to, set a filter funtion on {@link ScichartSurface.autoColorFilter}
Used internally - sets SVG Canvas Translation
Used internally - sets destinations
Used internally, the flag is set after SciChartSurfaceBase is initialized
Sets the Series View Rect, a rectangle relative to the entire size of the SciChartSurfaceBase
Gets or sets the drawing order for surfaces and their subsurfaces. This allows for a parent surface to draw over a subsurface. This does not affect the drawing order of separate surfaces - use z-index on the container div to control that.
Sets zoomStateProperty
Suspends updates on the target
Convert the object to a definition that can be serialized to JSON, or used directly with the builder api
if set true, data values will not be included in the json.
Used internally, updates background after switching between different SciChartSurfaces
Update accumulated vectors for all stacked collections
Validates SciChartSurface and links RenderableSeries to axes
List of errors if there are any
An optional animation duration. Default value is 0, which means 'no animation'
An optional easing function for animations. See TEasingFn for a list of values
the callback function
An optional animation duration. Default value is 0, which means 'no animation'
An optional easing function for animations. See TEasingFn for a list of values
Causes SciChart to always use its built in community non-commercial license. This stops it attempting to look for the license wizard Usage of the community license constitutes acceptance of the terms at https://www.scichart.com/community-licensing/
Allows setting of web URL for Wasm files, in the case you are loading SciChart outside of npm/webpack environment. Note the version number of wasm Url must match the version number of SciChart.js you are using. To use the default CDN, just call SciChart.SciChartSurface.useWasmFromCDN();
Creates a SciChartSurface and WebAssembly Context to occupy the div by element ID in your DOM.
The Div Element ID or reference where the SciChartSurface will reside
Optional - Optional parameters for chart creation. See I2DSurfaceOptions for more details
Performs a similar operation to SciChartSurface.create but uses a dedicated WebAssembly context for this chart, and draws directly to the target canvas This provides better performance for a single chart, but there is a limit (16) to how many you can have on one page. If you need large numbers of charts all updating at the same time, use this, together with {@link addSubChart} to create many charts on one surface.
The Div Element ID or reference where the SciChartSurface will reside
optional parameters for chart creation. See I2DSurfaceOptions for more details
Tell SciChart to load the Wasm files from CDN, rather than expecting them to be served by the host server.
Tell SciChart to load the Wasm files from the local server, rather than from CDN.
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 ?
Sets the runtime license key. Use for full licenses or trials only, not developer licenses.
Sets the endpoint for validating a runtime license key with the server. Must be a relative path.
Tell SciChart to load the Wasm files from CDN, rather than expecting them to be served by the host server.
Tell SciChart to load the Wasm files from the local server, rather than from CDN.
Generated using TypeDoc
'){kind=link}
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.