SciChart.js - High Performance Realtime Javascript Charts Examples Suite
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
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
Setting only one property isEditable give you access to change annotation