Skip to main content

Tools

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 BG.charts.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');

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 BG.charts.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'}));

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 BG.charts.Tool.setHandles.