Tools

Tools are drawings/annotations that are superimposed onto the chart. They come in all kinds of shapes and sizes. For example, a Tool could be a simple rectangle or ellipsis, a line segment, or something more complicated as used in technical chart analysis.

Interactive Placement

By default, calling Controller.addTool will just start interactive placement. By clicking anywhere in a chart, the Tool can be placed by the user.

const tool = controller.addTool('TrendLine');
Copy

Programmatic Placement

It is also possible to place tools programmatically without depending on user interaction. Programmatic placement requires two additional parameters:

• An array with information for every handle used by the respective tool
• The target Chart where the Tool should be placed (as there could be multiple charts managed by the Controller)

A simple Rectangle could be placed as follows:

const tool = controller.addTool('ShapeRectangle', [
    [timestamp1, value1], // top left
    [timestamp2, value2], // top right
    [timestamp3, value3], // bottom right
    [timestamp4, value4], // bottom left
], controller.getObject({objType: 'chart'}));
Copy

The number of handles and their respective meaning may differ from tool to tool.

If you want to modify the placement of a Tool after the initial creation, you can use Tool.setHandles.