In Tutorial 5 - Zoom and Pan with Realtime Updates, we showed you how to do zooming and panning having realtime updates. In this tutorial, were going to show you how to add annotations.
The annotation API allows you to add other UI elements to a chart, like:
- Lines
- Text
- Boxes
- SVG elements
Chart Annotations in SciChart
The SciChart annotations derive from the IAnnotation interface.
This annotation types include:
Adding Annotations to the Chart
In this tutorial we will create a simple example showing how to add different annotation types to a chart. First we create a SciChartSurface, then we add X and Y Axes and finally we add a LineAnnotation.
The code is shown below:
| index.js |
Copy Code
|
|---|---|
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { LineAnnotation } from "scichart/Charting/Visuals/Annotations/LineAnnotation";
async function initSciChart() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
"scichart-root"
);
// Create an X,Y Axis and add to the chart
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// Add line annotation
sciChartSurface.annotations.add(
new LineAnnotation({
stroke: "#FF6600",
strokeThickness: 3,
x1: 1.0,
x2: 4.0,
y1: 6.0,
y2: 9.0,
})
);
}
initSciChart();
|
|
This code produces this following chart with two axes and the LineAnnotation.
In order to add other annotation types to the chart pass appropriate annotation to sciChartSurface.annotations.add(). In the code below we add BoxAnnotation, TextAnnotation and CustomAnnotation.
| index.js |
Copy Code
|
|---|---|
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { LineAnnotation } from "scichart/Charting/Visuals/Annotations/LineAnnotation";
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";
async function initSciChart() {
// LICENSING //
// Set your license code here
// You can get a trial license key from https://www.scichart.com/licensing-scichart-js/
// Purchased license keys can be viewed at https://www.scichart.com/profile
//
// e.g.
//
// SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY");
//
// Also, once activated (trial or paid license) having the licensing wizard open on your machine
// will mean any or all applications you run locally will be fully licensed.
// Create the SciChartSurface in the div 'scichart-root'
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
// instance must be passed to other types that exist on the same surface.
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
"scichart-root"
);
// Create an X,Y Axis and add to the chart
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// Add line annotation
sciChartSurface.annotations.add(
new LineAnnotation({
stroke: "#FF6600",
strokeThickness: 3,
x1: 1.0,
x2: 4.0,
y1: 6.0,
y2: 9.0,
})
);
// Add box annotation
sciChartSurface.annotations.add(
new BoxAnnotation({
stroke: "#33FF33",
strokeThickness: 1,
fill: "rgba(50, 255, 50, 0.3)",
x1: 6.0,
x2: 9.0,
y1: 6.0,
y2: 9.0,
}),
)
// Add text annotation
sciChartSurface.annotations.add(
new TextAnnotation({
x1: 0.25,
y1: 0.75,
xCoordinateMode: ECoordinateMode.Relative,
yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
verticalAnchorPoint: EVerticalAnchorPoint.Center,
textColor: "yellow",
fontSize: 26,
fontFamily: "Comic Sans MS",
text: "TEXT ANNOTATION",
})
)
// Add custom SVG annotation
const svgString = `
<svg baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="rgba(50,50,255,0.3)" />
<text x="100" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>`;
sciChartSurface.annotations.add(
new CustomAnnotation({
x1: 7.5,
y1: 2.5,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
verticalAnchorPoint: EVerticalAnchorPoint.Center,
svgString
})
);
}
initSciChart();
|
|
This results in a chart with four different annotation.
Further APIs
Annotations support the abilityt o be docked to the left/right/top/bottom of the chart viewport. You can adjust the docking using the xCoordinateMode / yCoordinateMode properties.
Some annotations support verticalAnchorPoint / horizontalAnchorPoint properties. These allow you to change the control point for annotations which have a single X,Y point. A combination of anchor points and coordinate modes can allow you to create text watermarks on charts, or boxes which stretch horizontally or verically over a chart.
View our Annotations Demos online
You can find out more about the Annotations API in the relevant section of the documentation: The Annotations API Overview. Also, there is a couple of examples showcasing annotations in our Examples Suite. See the JavaScript Chart Annotations example for more details.
