scichart-engine 1.9.1 → 1.10.1

package/README.md

@@ -12,6 +12,8 @@ A high-performance, WebGL-powered scientific charting engine built for precision
 -   **📊 Specialized Series**: Support for Lines, Scatter (SDF symbols), Step charts, Band series, Area charts, **Candlesticks** (OHLC), and **Stacked Charts**.
 -   **↕️ Multi-Axis Engine**: Independent scales and units with axis-specific scrolling and zooming.
 -   **📏 Professional Tooling**: Real-time Statistics panel, Annotations (Lines/Shapes/Text), and **high-fidelity SVG/PNG export**.
+-   **🎨 Color Schemes**: **5 professional palettes** with 20 colors each for multi-series charts, auto-assigned when colors aren't specified.
+-   **✨ Interactive Legend**: Hover over series in legend to **bring to front** and highlight with distinct color.
 -   **🔌 Extensible**: **Plugin System** with lifecycle hooks for custom drawing and data analysis.
 -   **⚛️ Framework First**: Native React support via hooks and high-level components.
 -   **🎨 Dynamic Theming**: Sleek built-in themes (Light/Midnight) with support for custom CSS-based skins.
@@ -58,14 +60,49 @@ import { createChart } from 'scichart-engine';
 
 const chart = createChart({
   container: document.getElementById('chart-container'),
-  title: 'Real-time Signal'
+  theme: 'dark',
+  colorScheme: 'vibrant', // Auto-assigns colors from vibrant palette
+  showLegend: true
 });
 
+// Series without explicit colors get auto-assigned from the scheme
 chart.addSeries({
-  id: 'signal',
+  id: 'signal1',
   type: 'line',
   data: { x: [...], y: [...] }
 });
+
+chart.addSeries({
+  id: 'signal2',
+  type: 'line',
+  data: { x: [...], y: [...] }
+});
+
+// Change color scheme at runtime
+chart.setColorScheme('ocean');
+```
+
+### Multi-Series with Color Schemes
+
+```typescript
+// Create chart with 20+ series - colors auto-cycle
+const chart = createChart({
+  container: document.getElementById('chart'),
+  colorScheme: 'neon', // 'vibrant', 'pastel', 'neon', 'earth', 'ocean'
+  showLegend: true
+});
+
+// Add multiple series - colors assigned automatically
+for (let i = 0; i < 20; i++) {
+  chart.addSeries({
+    id: `series${i}`,
+    name: `Dataset ${i + 1}`,
+    type: 'line',
+    data: generateData(i)
+  });
+}
+
+// Hover over series in legend → brings to front + highlights! ✨
 ```
 
 ## 📖 Documentation

package/dist/core/chart/ChartAxisManager.d.ts

@@ -0,0 +1,61 @@
+import { Scale } from '../../scales';
+import { AxisOptions } from '../../types';
+import { Series } from '../Series';
+
+export interface AxisManagerContext {
+    xAxisOptions: AxisOptions;
+    xScale: Scale;
+    yAxisOptionsMap: Map<string, AxisOptions>;
+    yScales: Map<string, Scale>;
+    primaryYAxisId: string;
+    series: Map<string, Series>;
+    requestRender: () => void;
+}
+export declare class ChartAxisManager {
+    private ctx;
+    constructor(ctx: AxisManagerContext);
+    /**
+     * Add a new Y axis dynamically
+     */
+    addYAxis(options: AxisOptions): string;
+    /**
+     * Remove a Y axis by ID
+     */
+    removeYAxis(id: string): boolean;
+    /**
+     * Update Y axis configuration
+     */
+    updateYAxis(id: string, options: Partial<AxisOptions>): void;
+    /**
+     * Update X axis configuration
+     */
+    updateXAxis(options: Partial<AxisOptions>): void;
+    /**
+     * Get Y axis configuration by ID
+     */
+    getYAxis(id: string): AxisOptions | undefined;
+    /**
+     * Get all Y axes configurations
+     */
+    getAllYAxes(): AxisOptions[];
+    /**
+     * Get the primary Y axis ID
+     */
+    getPrimaryYAxisId(): string;
+    /**
+     * Get X axis configuration
+     */
+    getXAxis(): AxisOptions;
+    /**
+     * Get X scale
+     */
+    getXScale(): Scale;
+    /**
+     * Get Y scale by axis ID
+     */
+    getYScale(axisId?: string): Scale | undefined;
+    /**
+     * Get all Y scales
+     */
+    getAllYScales(): Map<string, Scale>;
+}

package/dist/core/chart/ChartCore.d.ts

@@ -2,7 +2,7 @@ import { ChartOptions, AxisOptions, SeriesOptions, HeatmapOptions, SeriesUpdateD
 import { EventEmitter } from '../EventEmitter';
 import { Series } from '../Series';
 import { Scale } from '../../scales';
-import { ChartTheme } from '../../theme';
+import { ChartTheme, ColorScheme } from '../../theme';
 import { Annotation } from '../annotations';
 import { SelectedPoint, SelectionMode, HitTestResult, SelectionConfig } from '../selection';
 import { ResponsiveConfig, ResponsiveState } from '../responsive';
@@ -32,24 +32,20 @@ export declare class ChartImpl implements Chart {
     private get yScale();
     theme: ChartTheme;
     baseTheme: ChartTheme;
+    private colorScheme;
     private cursorOptions;
     private cursorPosition;
     private showLegend;
     private legend;
     private originalSeriesStyles;
+    private hoveredSeriesId;
     private showControls;
     private toolbarOptions?;
     private controls;
-    private animationFrameId;
-    private needsFullRender;
-    private needsOverlayRender;
     private _isDestroyed;
     private autoScroll;
     private showStatistics;
     private initQueueId;
-    private initStarted;
-    private frameCount;
-    private lastRenderTime;
     private commandQueue;
     private annotationQueue;
     private annotationIdCounter;
@@ -60,14 +56,13 @@ export declare class ChartImpl implements Chart {
     private selectionRect;
     private pluginManager;
     private initialOptions;
+    private pluginBridge;
+    private axisManager;
+    private stateManager;
+    private renderLoop;
     setXScale(scale: Scale): void;
     setYScale(yAxisId: string, scale: Scale): void;
     get analysis(): any;
-    private animationEngine;
-    private animationConfig;
-    get animations(): ChartAnimationConfig;
-    private selectionManager;
-    private responsiveManager;
     get tooltip(): any;
     get loading(): any;
     get deltaTool(): any;
@@ -84,6 +79,12 @@ export declare class ChartImpl implements Chart {
     get themeEditor(): any;
     get sync(): any;
     get brokenAxis(): any;
+    get forecasting(): any;
+    private animationEngine;
+    private animationConfig;
+    get animations(): ChartAnimationConfig;
+    private selectionManager;
+    private responsiveManager;
     constructor(options: ChartOptions);
     /**
      * Start the chart initialization (called by queue system)
@@ -103,6 +104,15 @@ export declare class ChartImpl implements Chart {
     private toggleLegend;
     private initLegend;
     setTheme(theme: string | ChartTheme): void;
+    /**
+     * Set the color scheme for multi-series charts
+     * @param scheme - Color scheme name ('vibrant', 'pastel', 'neon', 'earth', 'ocean') or ColorScheme object
+     */
+    setColorScheme(scheme: string | ColorScheme): void;
+    /**
+     * Get the current color scheme
+     */
+    getColorScheme(): ColorScheme;
     getPlotArea(): {
         x: number;
         y: number;
@@ -299,15 +309,17 @@ export declare class ChartImpl implements Chart {
      * Load state from URL hash
      */
     fromUrlHash(hash: string, compressed?: boolean): void;
-    use(plugin: import('../../plugins').ChartPlugin): void;
+    use(plugin: any): Promise<void>;
     resize(): void;
     requestRender(): void;
     requestOverlayRender(): void;
-    render(full?: boolean): void;
+    /**
+     * Trigger an immediate full render (public API compatibility)
+     */
+    render(): void;
     private pixelToDataX;
     private pixelToDataY;
     private startRenderLoop;
-    private scheduleRenderFrame;
     on<K extends keyof ChartEventMap>(e: K, h: (d: ChartEventMap[K]) => void): void;
     off<K extends keyof ChartEventMap>(e: K, h: (d: ChartEventMap[K]) => void): void;
     destroy(): void;

package/dist/core/chart/ChartPluginBridge.d.ts

@@ -0,0 +1,33 @@
+import { PluginManagerImpl } from '../../plugins';
+
+export declare class ChartPluginBridge {
+    private pluginManager;
+    constructor(pluginManager: PluginManagerImpl);
+    private getAPI;
+    get analysis(): any;
+    get tooltip(): any;
+    get loading(): any;
+    get deltaTool(): any;
+    get peakTool(): any;
+    get regression(): any;
+    get radar(): any;
+    get ml(): any;
+    get snapshot(): any;
+    get dataExport(): any;
+    get roi(): any;
+    get videoRecorder(): any;
+    get offscreen(): any;
+    get virtualization(): any;
+    get themeEditor(): any;
+    get sync(): any;
+    get brokenAxis(): any;
+    get forecasting(): any;
+    /**
+     * Get a plugin API by name
+     */
+    getPlugin<T = any>(name: string): T | null;
+    /**
+     * Get all plugin names
+     */
+    getPluginNames(): string[];
+}

package/dist/core/chart/ChartRenderLoop.d.ts

@@ -0,0 +1,98 @@
+import { NativeWebGLRenderer } from '../../renderer/NativeWebGLRenderer';
+import { OverlayRenderer } from '../OverlayRenderer';
+import { Series } from '../Series';
+import { Scale } from '../../scales';
+import { Bounds, AxisOptions, CursorOptions, PlotArea, ChartEventMap } from '../../types';
+import { EventEmitter } from '../EventEmitter';
+import { SelectionManager } from '../selection';
+import { PluginManagerImpl } from '../../plugins';
+
+export interface RenderLoopContext {
+    webglCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
+    overlayCtx: CanvasRenderingContext2D;
+    container: HTMLDivElement;
+    series: Map<string, Series>;
+    viewBounds: Bounds;
+    xScale: Scale;
+    yScales: Map<string, Scale>;
+    yAxisOptionsMap: Map<string, AxisOptions>;
+    xAxisOptions: AxisOptions;
+    primaryYAxisId: string;
+    renderer: NativeWebGLRenderer;
+    overlay: OverlayRenderer;
+    backgroundColor: [number, number, number, number];
+    plotAreaBackground: [number, number, number, number];
+    cursorOptions: CursorOptions | null;
+    cursorPosition: {
+        x: number;
+        y: number;
+    } | null;
+    selectionRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    events: EventEmitter<ChartEventMap>;
+    selectionManager: SelectionManager;
+    hoveredSeriesId: string | null;
+    pluginManager: PluginManagerImpl;
+    updateSeriesBuffer: (s: Series) => void;
+    getPlotArea: () => PlotArea;
+    pixelToDataX: (px: number) => number;
+    pixelToDataY: (py: number, yAxisId?: string) => number;
+    get yScale(): Scale;
+}
+export declare class ChartRenderLoop {
+    private ctx;
+    private animationFrameId;
+    private needsFullRender;
+    private needsOverlayRender;
+    private frameCount;
+    private lastRenderTime;
+    private initStarted;
+    constructor(ctx: RenderLoopContext);
+    /**
+     * Mark that initialization has started
+     */
+    startInit(): void;
+    /**
+     * Check if init has started
+     */
+    isInitStarted(): boolean;
+    /**
+     * Request a full render (WebGL + overlay)
+     */
+    requestRender(): void;
+    /**
+     * Request overlay-only render
+     */
+    requestOverlayRender(): void;
+    /**
+     * Schedule render on next animation frame
+     */
+    private scheduleRenderFrame;
+    /**
+     * Cancel any pending render
+     */
+    cancelPendingRender(): void;
+    /**
+     * Perform the actual rendering
+     */
+    private performRender;
+    /**
+     * Get render statistics
+     */
+    getStats(): {
+        frameCount: number;
+        lastRenderTime: number;
+        hasPendingRender: boolean;
+        needsFullRender: boolean;
+        needsOverlayRender: boolean;
+    };
+    /**
+     * Reset frame counter
+     */
+    resetFrameCount(): void;
+}

package/dist/core/chart/ChartRenderer.d.ts

@@ -38,6 +38,7 @@ export interface RenderContext {
     pixelToDataX: (px: number) => number;
     pixelToDataY: (py: number) => number;
     selectionManager: SelectionManager;
+    hoveredSeriesId: string | null;
 }
 /**
  * Prepare series data for WebGL rendering

package/dist/core/chart/ChartStateManager.d.ts

@@ -0,0 +1,52 @@
+import { Annotation } from '../annotations';
+import { Series } from '../Series';
+import { AxisOptions } from '../../types';
+import { Scale } from '../../scales';
+import { PluginManagerImpl } from '../../plugins';
+import { ChartState, SerializeOptions, DeserializeOptions } from '../../serialization';
+
+export interface StateManagerContext {
+    viewBounds: {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    xAxisOptions: AxisOptions;
+    xScale: Scale;
+    yScales: Map<string, Scale>;
+    primaryYAxisId: string;
+    series: Map<string, Series>;
+    pluginManager: PluginManagerImpl;
+    showLegend: boolean;
+    showControls: boolean;
+    showStatistics: boolean;
+    autoScroll: boolean;
+    getAnnotations: () => Annotation[];
+    clearAnnotations: () => void;
+    addAnnotation: (annotation: Annotation) => void;
+    updateYAxis: (id: string, options: Partial<AxisOptions>) => void;
+    removeSeries: (id: string) => void;
+    addSeries: (options: any) => void;
+    requestRender: () => void;
+}
+export declare class ChartStateManager {
+    private ctx;
+    constructor(ctx: StateManagerContext);
+    /**
+     * Export complete chart state
+     */
+    serialize(options?: SerializeOptions): ChartState;
+    /**
+     * Restore chart from saved state
+     */
+    deserialize(state: ChartState, options?: DeserializeOptions): void;
+    /**
+     * Convert current state to URL-safe hash
+     */
+    toUrlHash(compress?: boolean): string;
+    /**
+     * Load state from URL hash
+     */
+    fromUrlHash(hash: string, compressed?: boolean): void;
+}

package/dist/core/chart/types.d.ts

@@ -57,6 +57,7 @@ export interface Chart {
     readonly themeEditor: any;
     readonly sync: any;
     readonly brokenAxis: any;
+    readonly forecasting: any;
     addAnnotation(annotation: Annotation): string;
     removeAnnotation(id: string): boolean;
     updateAnnotation(id: string, updates: Partial<Annotation>): void;
@@ -161,7 +162,7 @@ export interface Chart {
     setXScale(scale: any): void;
     setYScale(yAxisId: string, scale: any): void;
     /** Use a plugin */
-    use(plugin: ChartPlugin): void;
+    use(plugin: ChartPlugin | any): Promise<void>;
     /** Destroy the chart and cleanup resources */
     destroy(): void;
 }