Coloring Series per-point using the PaletteProvider

Per Point Coloring - JavaScript

Overview

This example demonstrates how to implement per-point coloring for both line and scatter series using SciChart.js with JavaScript. It highlights dynamic color assignment based on threshold values and interactive annotations for real-time updates, making it ideal for high performance and visually rich charting applications.

Technical Implementation

The chart is asynchronously initialized using SciChartSurface.create and loading Wasm, ensuring that the WebAssembly context is properly loaded. NumericAxis are configured with options such as maxAutoTicks and growBy as described in the NumericAxis API, while a random walk data series is generated for visual demonstration, which aligns with techniques seen in generating a smooth random trend. Custom implementations of the IStrokePaletteProvider and IPointMarkerPaletteProvider are used to override default coloring on a per-data-point basis. These providers use the PaletteProvider API documentation and Per-Point Colouring of Scatter Charts to determine colors dynamically based on each data point’s y-value.

Features and Capabilities

The example includes interactive annotations, such as draggable horizontal lines that update threshold levels in real-time. This interactivity is implemented to demonstrate how threshold changes can immediately affect the rendering of per-point colors, ensuring that the visualization remains responsive and informative. Performance is optimized by using efficient color conversion through methods like parseColorToUIntArgb and by processing color updates only when necessary.

Integration and Best Practices

Being implemented in JavaScript, this example avoids framework-specific constructs such as hooks or the builder API, allowing for easy integration into any HTML page. Developers are encouraged to follow Memory Best Practices to ensure proper resource cleanup, such as deleting the SciChartSurface when it is no longer needed. This straightforward approach provides a solid foundation for incorporating advanced charting capabilities in a lightweight, easy-to-maintain JavaScript project.