SciChart.js
v^1.2.1463

SciChart.js - High Performance Realtime Javascript Charts Examples Suite

JavaScript Chart Editable Annotations

Demonstrates how to edit Annotations (shapes, boxes, lines, text, horizontal and vertical line) to a JavaScript Chart using SciChart.js, High Performance JavaScript Charts

Source Code

View on GitHub
import * as React from "react";
import { SciChartSurface } from "scichart";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { LineAnnotation } from "scichart/Charting/Visuals/Annotations/LineAnnotation";
import { HorizontalLineAnnotation } from "scichart/Charting/Visuals/Annotations/HorizontalLineAnnotation";
import { VerticalLineAnnotation } from "scichart/Charting/Visuals/Annotations/VerticalLineAnnotation";
import { BoxAnnotation } from "scichart/Charting/Visuals/Annotations/BoxAnnotation";
import { CustomAnnotation } from "scichart/Charting/Visuals/Annotations/CustomAnnotation";
import { TextAnnotation } from "scichart/Charting/Visuals/Annotations/TextAnnotation";
import { EHorizontalAnchorPoint, EVerticalAnchorPoint } from "scichart/types/AnchorPoint";
import { ECoordinateMode } from "scichart/Charting/Visuals/Annotations/AnnotationBase";
import { ELabelPlacement } from "scichart/types/LabelPlacement";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";

const divElementId = "chart";

export const drawExample = async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);

    const xAxis = new NumericAxis(wasmContext);
    xAxis.visibleRange = new NumberRange(0, 10);

    sciChartSurface.xAxes.add(xAxis);

    const yAxis = new NumericAxis(wasmContext);
    yAxis.visibleRange = new NumberRange(0, 10);

    sciChartSurface.yAxes.add(yAxis);

    sciChartSurface.chartModifiers.add(new ZoomPanModifier());
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());

    const horizontalLineAnnotation1 = new HorizontalLineAnnotation({
        stroke: "#FF6600",
        strokeThickness: 3,
        y1: 5,
        x1: 5,
        showLabel: true,
        labelPlacement: ELabelPlacement.TopLeft,
        labelValue: "Not Editable"
    });
    const horizontalLineAnnotation2 = new HorizontalLineAnnotation({
        stroke: "#FF6600",
        strokeThickness: 3,
        y1: 4,
        x1: 5,
        showLabel: true,
        labelPlacement: ELabelPlacement.TopLeft,
        labelValue: "Editable",
        isEditable: true
    });

    const verticalLineAnnotation = new VerticalLineAnnotation({
        stroke: "#FF6600",
        strokeThickness: 3,
        x1: 9,
        y1: 3,
        showLabel: true,
        isEditable: true
    });

    sciChartSurface.annotations.add(
        horizontalLineAnnotation1,
        horizontalLineAnnotation2,
        verticalLineAnnotation,
        new LineAnnotation({
            stroke: "#B73225",
            strokeThickness: 3,
            x1: 1.0,
            x2: 4.0,
            y1: 9.0,
            y2: 8.0,
            isEditable: true
        }),

        new BoxAnnotation({
            stroke: "#4DA8DA",
            strokeThickness: 1,
            fill: "#007CC766",
            x1: 1.0,
            x2: 4.0,
            y1: 5.0,
            y2: 7.0,
            isEditable: true
        }),

        new CustomAnnotation({
            x1: 5,
            y1: 9,
            xCoordShift: 0,
            yCoordShift: 0,
            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
            verticalAnchorPoint: EVerticalAnchorPoint.Center,
            svgString:
                ' <svg width="50" height="50"  xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" style="fill:#39603D"><animate attributeName="rx" values="0;25;0" dur="2s" repeatCount="indefinite" color="#ffffff" /></rect></svg>',
            isEditable: true
        }),
        new TextAnnotation({
            x1: 1,
            y1: 3,
            xCoordinateMode: ECoordinateMode.DataValue,
            yCoordinateMode: ECoordinateMode.DataValue,
            horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
            verticalAnchorPoint: EVerticalAnchorPoint.Center,
            textColor: "#F1B24A",
            fontSize: 26,
            fontFamily: "Times New Roman",
            text: "SciChart is the best library",
            isEditable: true
        }),
        new TextAnnotation({
            x1: 1,
            y1: 2,
            xCoordinateMode: ECoordinateMode.DataValue,
            yCoordinateMode: ECoordinateMode.DataValue,
            horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
            verticalAnchorPoint: EVerticalAnchorPoint.Center,
            textColor: "#F1B24A",
            fontSize: 26,
            fontFamily: "Times New Roman",
            text: "Unmovable text",
            isEditable: false
        })
    );

    return { sciChartSurface, wasmContext };
};

export default function EditableAnnotaions() {
    const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();

    React.useEffect(() => {
        (async () => {
            const res = await drawExample();
            setSciChartSurface(res.sciChartSurface);
        })();
        // Delete sciChartSurface on unmount component to prevent memory leak
        return () => sciChartSurface?.delete();
    }, []);

    return <div id={divElementId} style={{ maxWidth: 900 }} />;
}

// JavaScript Chart Examples

SciChart.js ships with ~40 JavaScript Chart Examples which you can browse, play with, view the source code and see related documentation. All of this is possible with the SciChart.js Examples Suite, which ships as part of the SciChart.js SDK

Description

An introduction to the Annotations Editable API in SciChart.js, which allows SVG elements or custom WebGL rendered elements to be editable over the chart at specific X,Y data-values.

SciChart annotations are available for drag and drop, such as LineAnnotation, BoxAnnotation, TextAnnotation, HorizontalLineAnnotation, VerticalLineAnnotation, CustomAnnotation

Tips!

Setting only one property isEditable give you access to change annotation

Documentation Links

See Also

All JavaScript Chart Examples

SciChart.js: Fast, Realtime, High Performance