A unique Id for the IAnnotation
The {@link SVGElement} which will be added to the chart
Gets or sets current EDraggingGripPoint
Gets or sets current EDraggingGripPoint
Gets or sets the SVG template of the annotation adorner
Gets or sets the SVG template of the annotation adorner
The fill color for the adorner drag handle
The fill color for the adorner drag handle
The radius of the adorner drag handle
The radius of the adorner drag handle
The stroke color for the adorner drag handle
The stroke color for the adorner drag handle
Get the dragging points that should be enabled for this annotation
Set the dragging points that should be enabled for this annotation
Gets or sets horizontal anchor point
Gets or sets horizontal anchor point
Defines if the entity is hovered
Defines if the entity is hovered
Gets or sets the minimum width of the annotation
Gets or sets the minimum width of the annotation
Gets or sets the minimum width of the annotation
Gets or sets the minimum width of the annotation
Sets an opacity override for the entire annotation, from 0..1
Sets an opacity override for the entire annotation, from 0..1
How much bigger the selection box is than the bounding box of the annotation, in pixels
How much bigger the selection box is than the bounding box of the annotation, in pixels
The stroke color for the adorner selection box
The stroke color for the adorner selection box
The thickness of the selection box line
The thickness of the selection box line
Gets the {@link SVGSVGElement | SVG Element} at the root of this annotation
SVG dom element string provided by the user
SVG dom element string provided by the user
Gets or sets vertical anchor point
Gets or sets vertical anchor point
Gets or sets an offset to shift X-coordinates
Gets or sets an offset to shift X-coordinates
The X-Coordinate mode. See ECoordinateMode for a list of values
The X-Coordinate mode. See ECoordinateMode for a list of values
Gets or sets an offset to shift Y-coordinates
Gets or sets an offset to shift Y-coordinates
The Y-Coordinate mode. See ECoordinateMode for a list of values
The Y-Coordinate mode. See ECoordinateMode for a list of values
Calculates and sets annotationBorders
Handles the dragging event. Updates the coordinates after dragging or resizing
Override this to disable drag behaviour for certain dragging points
Calculates if the annotation is hovered with the specified args
Called internally. Send a click to the annotation if the point is in bounds, raising the clicked event and optionally selecting the annotation.
Called internally. Select the annotation if the point is in bounds. Does not raise the clicked event
Converts an absolute coordinate to a value which could be in form of DataValue, Pixel, or Relative coordinate
an absolute coordinate to convert
the CoordinateCalculatorBase which will do the transformation
the expected ECoordinateMode of the converted point
the data-value, pixel, or relative value accordingly to the coordinateMode
Deletes native (WebAssembly) memory used by this type, after which it cannot be used.
Calculates coordinates in pixels of the specified Point. Uses the xCoordinateMode (or yCoordinateMode for vertical chart)
Calculates coordinates in pixels of the specified Point. Uses the xCoordinateMode (or yCoordinateMode for vertical chart)
Calculates coordinate in pixels of the specified value in the vertical dimension. Uses the yCoordinateMode (or xCoordinateMode for vertical chart)
Returns annotation borders for the AdornerLayer which has the size of the whole canvas
flag to return x and y values in ascending order
Returns annotationBorders
flag to return x and y values in ascending order, where x1 <= x2 and y1 <= y2
Get svg for the adorner grip handles for standard annotations
the value to convert
the CoordinateCalculatorBase which will do the transformation
the ECoordinateMode to apply
the pixel coordinate
This is called to get the svg string to use. Override this to customise the svg string for each render
Converts a pixel coordinate back to a value
coordinate or dataValue to convert
the CoordinateCalculatorBase which will do the transformation
the ECoordinateMode to apply
the data-value or value
Transforms an absolute coordinates point to the corresponding value point. The value point has x and y converted accordingly to the the coordinate modes xCoordinateMode and yCoordinateMode
defines if the coordinates should be projected from the Canvas to SeriesViewRect
a point with coordinates ECoordinateMode
Returns the pixel X1 coordinate
the X CoordinateCalculatorBase which will do the transformation
the Y CoordinateCalculatorBase which will do the transformation
the pixel X1 coordinate
Returns the pixel X2 coordinate
the X CoordinateCalculatorBase which will do the transformation
the Y CoordinateCalculatorBase which will do the transformation
the pixel X2 coordinate
Returns the pixel Y1 coordinate
the X CoordinateCalculatorBase which will do the transformation
the Y CoordinateCalculatorBase which will do the transformation
the pixel Y1 coordinate
Returns the pixel Y2 coordinate
the X CoordinateCalculatorBase which will do the transformation
the Y CoordinateCalculatorBase which will do the transformation
the pixel Y2 coordinate
Sends hover/leave action to the annotation
Called when the Dpi changes in the browser. This could be due to user zooming the browser, or changing DPI settings in Windows, or moving the browser containing SciChart to another monitor
The TDpiChangedEventArgs containing info about the Dpi Changed event
Calculates current dragging point. Defines logic of grip points placement
Sets annotationBorders For renderContext annotations it is scaled and for SVG annotations it is not For example if we have a macbook with retina display and canvas.width = 1600px, canvas.height = 1200px, canvas.style.width = 800px, canvas.style.height = 600px If we have BoxAnnotation (renderContext) which takes 50% width and height, located in the left-top corner it should have annotationBorders as follows x1 = 0, x2 = 800, y1 = 0, y2 = 600 But if we have CustomAnnotation (SVG) which takes 50% width and height, located in the left-top corner it should have annotationBorders as follows x1 = 0, x2 = 400, y1 = 0, y2 = 300
Updates the annotation position and size while maintaining limits set by minWidth and minHeight
an object with the coordinates - {x1, x2, y1, y2}
Convert the object to a definition that can be serialized to JSON, or used directly with the builder api
Updates the annotation position, with the Coordinate Calculators passed in
The XAxis CoordinateCalculator applied to this annotation
The YAxis CoordinateCalculator applied to this annotation
X-coordinate translation which is needed to use SVG canvas having the whole chart size
Y-coordinate translation which is needed to use SVG canvas having the whole chart size
Creates or updates an adorner for the annotation
This is called on the svg element immediately after it is created. Use this to do adjustments or additions to it which require knowlege of its size. For instance, this method adds a bounding rectangle to the existing svg
updateSvg(annotation: CustomAnnotation, svg: SVGSVGElement) {
const annotationRect = svg.getBoundingClientRect();
const padding = 5;
// Offset the existing element by the padding
(svg.firstChild as SVGElement).setAttribute("x", padding.toString());
(svg.firstChild as SVGElement).setAttribute("y", padding.toString());
const rectWidth = annotationRect.width + padding + padding;
const rectHeight = annotationRect.height + padding + padding;
const namespace = "http://www.w3.org/2000/svg";
const newRect = document.createElementNS(namespace, "rect");
newRect.setAttribute("x", "0");
newRect.setAttribute("y", "0");
newRect.setAttribute("width", `${rectWidth}`);
newRect.setAttribute("height", `${rectHeight}`);
newRect.setAttribute("fill", `red`);
return svg;
}the annotation absolute coordinates
Generated using TypeDoc
A OverviewCustomResizableAnnotation presents SVG information over the chart at specific {@link X1}, Y1, {@link X2}, {@link Y2} coordinates.
The annotation can be moved or resized up to the limits set by minWidth/minHeight properties and axis visible range