Angular Text Chart

Angular Text Chart - Angular

Overview

This example demonstrates an Angular integration of SciChart.js using the FastTextRenderableSeries. It visualizes an analysis of tweet data, showing the number of tweets on a LogarithmicAxis x-axis and average sentiment on a NumericAxis y-axis. The integration leverages an Angular standalone component to manage asynchronous chart initialization and interactivity.

Technical Implementation

The chart is initialized asynchronously within an Angular component by binding the drawExample function to the ScichartAngularComponent. The asynchronous initialization creates a SciChartSurface with a WebAssembly context to ensure high-performance rendering. The implementation sets up a logarithmic x-axis and a numeric y-axis with customized settings. Data is fetched from an external API and populated into an XyTextDataSeries, which is rendered using the FastTextRenderableSeries. Interactive modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier are added to enable user interactions. This approach is in line with best practices outlined in the Getting Started with SciChart JS guide and the fundamentals of asynchronous initialization explained in the Tutorial 01 - Setting up a npm Project with SciChart.js resource.

Features and Capabilities

The example showcases advanced features including dynamic data binding and real-time performance through WebAssembly. Custom theming through an appTheme is applied to enhance the visual appearance. The interactive chart modifiers provide smooth zooming and panning experiences, as detailed in the Tutorial 03 - Adding Zooming, Panning Behavior documentation. Furthermore, WebAssembly is leveraged for performance optimization, adhering to practices outlined in the Performance Tips & Tricks guide.

Integration and Best Practices

The integration within Angular is achieved by binding the chart initialization function directly in the component’s template, following Angular’s template binding best practices. Developers can refer to the scichart-angular npm page for details on integrating SciChart.js with Angular. Dynamic theming is applied as described in the Chart Styling - Creating a Custom Theme - SciChart documentation. Overall, this example adheres to Angular lifecycle and resource management best practices, ensuring that asynchronous chart creation and potential resource cleanup are handled efficiently.