Custom Types with Builder API

Custom Types with Builder API - JavaScript

Overview

This example demonstrates how to extend the default functionalities of SciChart.js using JavaScript. It shows how to create a custom palette provider that dynamically overrides the fill and stroke of a Mountain Series chart based on specific data thresholds, while leveraging JSON configuration for flexible chart construction with the Builder API.

Technical Implementation

The implementation uses the SciChart.js Builder API to build a 2D chart using a JSON configuration. In the file drawExample.ts, the chart is configured with a numeric Y-Axis, custom annotations, and a Mountain Series whose look is dynamically altered by the custom palette provider (ExampleMountainPaletteProvider). This provider overrides the default rendering behavior for data points by checking if the Y value falls within a set range before applying custom colors. For a deeper dive into this approach, check out the Custom Types with Builder API - JavaScript Chart - SciChart documentation. Additionally, the use of JSON in defining chart properties is detailed in the Serialization and Deserialization of Charts - SciChart guide.

Features and Capabilities

The example incorporates several advanced features, including real-time data updates, dynamic handling of NaN values, and gradient fill techniques. It leverages WebGL rendering for high-performance updates and demonstrates advanced customization by overriding fill and stroke colors via a custom palette provider. These optimizations align with best practices discussed in the Performance Tips & Tricks | JavaScript Chart Documentation.

Integration and Best Practices

For developers working purely in JavaScript, this example provides a clear blueprint for integrating SciChart.js into any web project without relying on frameworks like React or Angular. The approach emphasizes the use of the Builder API for streamlined chart creation and customization, as outlined in the JavaScript Builder API Documentation. By using JSON configuration and custom types, the example encourages modularity and adherence to performance optimizations, making it easy to manage dynamic data and real-time updates. This serves as a solid foundation for building high-performance charts with customized visual behavior.