scichart-financial-tools

Trading annotations and financial chart helpers for SciChart.js.

This package adds native SciChart drawing tools for technical-analysis workflows: the shared multi-point annotation base, editable polylines, freehand drawings, trend lines, price channels, Fibonacci retracements, pitchforks, measurement tools, stop-loss / take-profit zones, click-to-place modifiers, trader themes and OHLC filters.

Documentation

• Financial Drawing Tools Release Notes
• Trading annotations overview
• Trading annotations deep-dive
• PolyLine annotation
• Channel annotations
• Extended line annotation
• Fibonacci retracement
• Pitchfork and pitchfan
• Measure annotation
• Stop-loss / take-profit
• Placement and editing

Installation

Install this package together with scichart:

npm install scichart scichart-financial-tools

scichart is a peer dependency. Keep the package versions aligned with the range declared in peerDependencies.

Quick start

import { NumberRange, NumericAxis, SciChartSurface, EVerticalTextPosition } from "scichart";
import {
    ChannelAnnotation,
    EAnnotationVisibilityMode,
    EMultiPointLabelAnchorMode,
    SciTraderDarkTheme
} from "scichart-financial-tools";

async function initChart() {
    const { wasmContext, sciChartSurface } = await SciChartSurface.create("scichart-root", {
        theme: new SciTraderDarkTheme() // optional
    });

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(0, 40) }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(95, 135) }));

    sciChartSurface.annotations.add(
        new ChannelAnnotation({
            // Points 1 & 2 define one horizontal channel edge;
            // Point 3 defines the channel width and angle;
            // Point 4 is calculated automatically - no need to specify it.
            points: [
                { x: 8, y: 120 },
                { x: 32, y: 130 },
                { x: 32, y: 115 },
            ],
            stroke: "#38BDF8",
            fill: "#38BDF833",
            showMidLine: true,
            showMidPointGrips: true,
            isEditable: true,
            labels: [
                {
                    text: "Resistance",
                    anchorMode: EMultiPointLabelAnchorMode.Segment,
                    verticalTextPosition: EVerticalTextPosition.Above,
                    segmentStartIndex: 0,
                    segmentEndIndex: 1,
                },
                {
                    text: "Support",
                    anchorMode: EMultiPointLabelAnchorMode.Segment,
                    verticalTextPosition: EVerticalTextPosition.Below,
                    segmentStartIndex: 2,
                    segmentEndIndex: 3,
                }
            ],
        })
    );
}

initChart();

Click-to-place annotations

Use MultiPointAnnotationPlacementModifier when users should draw annotations directly on the chart. The modifier creates an annotation on the first click, previews the active point, then completes when the required number of points has been committed.

import {
    ETradingAnnotationType,
    MultiPointAnnotationPlacementModifier
} from "scichart-financial-tools";

const placementModifier = new MultiPointAnnotationPlacementModifier();
sciChartSurface.chartModifiers.add(placementModifier);

placementModifier.startPlacement({ // prepare for user's input to place a fib retracement annotation
    type: ETradingAnnotationType.FibonacciRetracementAnnotation,
    options: {
        strokeThickness: 2,
        fillOpacity: 0.18,
        isEditable: true
    }
});

Use keepPlacingAfterComplete to keep creating new instances of the same annotation type.

What's included

The multi-point annotation model lives in this package. MultiPointAnnotationBase powers editable points, drag grips, snapping and point, segment and axis labels across the concrete annotations below.

| Tool | Points | Main use | | --- | --- | --- | | PolyLineAnnotation | 2 or more | Base concrete multi-point line / polygon annotation | | FreehandDrawingAnnotation | Many sampled points | Editable freehand drawing stored as a polyline | | ExtendedLineAnnotation | 2 | Trend line, ray or infinite line | | ChannelAnnotation | 3 placement points, 4 corners | Parallel price channel | | FlatBottomChannelAnnotation | 3 placement points, 4 corners | Channel with a horizontal lower boundary | | DisjointChannelAnnotation | 3 placement points, 4 corners | Channel with the second side constrained from the first | | PitchforkAnnotation | 3 | Andrews' Pitchfork with optional zones | | PitchfanAnnotation | 3 | Projected fan lines from pitchfork points | | FibonacciRetracementAnnotation | 2 default, 3 if verticalOnly: false | Retracement levels and regions | FibonacciExtensionAnnotation | 3 | Extension levels projected from a three-point guide | | MeasureAnnotation | 2 | Price / percent / bar-count change between two points | | StopLossTakeProfitAnnotation | 2 | Stop-loss or take-profit zone |

Modifiers

| Modifier | Main use | | --- | --- | | MultiPointAnnotationPlacementModifier | Click-to-place workflow for supported multi-point annotations | | MultiPointAnnotationEditorModifier | Schema-driven property editor for selected multi-point annotations | | FreehandDrawingModifier | Pointer capture for creating FreehandDrawingAnnotation strokes | | SeriesValueModifier | Y-axis markers that track latest or last-visible series values |

Data filters

| Filter | Main use | | --- | --- | | OhlcHeikinAshiFilter | Converts OHLC candles to Heikin-Ashi candles | | OhlcRenkoFilter | Converts OHLC data into Renko bricks | | PointAndFigureFilter | Converts OHLC close values into Point & Figure marks |

Themes

• SciTraderDarkTheme
• SciTraderLightTheme

License

scichart-financial-tools ships under the same license as SciChart.js.

• SciChart EULA
• Free Community Licensing FAQs
• Purchase commercial licenses

Support

• Community forums
• Stack Overflow tag
• Contact SciChart