Full Chart using Builder API
Demonstrates how to use the Builder Api to create a Fully Configured Chart using SciChart.js, High Performance JavaScript Charts
Full Chart Using Builder API in JavaScript
Overview
This example demonstrates how to create a fully configured chart using the SciChart.js Builder API in a JavaScript environment. It utilizes a comprehensive JSON configuration to set up axes, series, annotations, and interaction modifiers, showcasing the high-performance capabilities of SciChart.js.
Technical Implementation
The chart is constructed by defining its components with JSON objects. For example, a categorical X-Axis is configured with custom text labels and two numeric Y-Axes are set up for different data scales, as highlighted in the Adding Multiple Axis tutorial. Series such as a Spline Mountain Series with a custom gradient fill—demonstrated in the JavaScript Spline Mountain Area Chart example—and a Bubble Series with custom point markers—see Custom Pointmarkers documentation—illustrate the advanced visual capabilities available. The asynchronous initialization process follows the guidelines described in Getting Started with SciChart JS, ensuring optimal performance and seamless rendering.
Features and Capabilities
This implementation supports real-time updates and interactivity through features such as rollover, mouse wheel zoom, and zoom extents modifiers, enhancing the user experience. Annotations are flexibly positioned using both data and relative coordinate modes, as detailed in the Adding Annotations tutorial. The JSON-based configuration approach makes it simple to customize and extend the chart’s behavior.
Integration and Best Practices
While built with JavaScript, the same principles can be applied across different frameworks. The Builder API’s JSON configuration allows for clear separation of chart setup from rendering logic, a best practice that promotes maintainability and performance optimization. Developers are encouraged to refer to the Intro to the Builder API for an in-depth understanding of these techniques and to review Performance Optimisation of JavaScript Applications & Charts for strategies aimed at ensuring efficient chart rendering.
javascript Chart Examples & Demos
See Also: Builder (JSON / JS Objects) API (4 Demos)
Simple Chart using Builder API
Demonstrates how to use the Builder Api to create a simple chart using a definition object. The builder api is designed to make it easier to discover the types and options available in SciChart JS.
Chart from JSON
Demonstrates how to create a JavaScript Chart from JSON using the builder API.
JavaScript Chart with Reusable Templates using Shared Data
Demonstrates how to use the Builder Api to create Reusable Chart Templates.Data can be easily integrated into a definition and shared between series
Custom Types with Builder API
Demonstrates how to make a custom type such as a PaletteProvider available for use with the Builder Api.You can call methods within the builder api to get references to the objects being built, so you can update them later.
