Defining Events and Tooltips for Annotations

"annotations" = [{
               "position": {
                           "parent": "string", 
                           "x": x, 
                           "y": y
                           },
               "marker": {
                          "visible": boolean, 
                          "shape": "svg code", 
                          "color": "string", 
                          "border": {"width": number,
                                     "color": "string", 
                                     "dash": "string"}
                          },
               "tooltip": "string"               
                          }]

 

where:

"position":

Defines the position of the annotation marker.

"parent": "string"

Defines the chart object that the x and y values refer to. The default value is undefined. Can be one of the following.

• "background", which measures the position from the lower left corner of the chart frame and places the annotation behind the chart. This is the default value.
• "chart", which measures the position from the lower left corner of the chart draw area and places the annotation on the chart.
• "legend", which measures the position from the lower left corner of the legend area and places the annotation in the legend area.

"x": x

Is the horizontal position for the annotation icon. A synonym for "x" is "left", which measures the horizontal position from the left edge of the frame. You can also use "right", which measures the position from the right edge of the frame.

The default value is undefined. Can be:

• A number. If the parent chart component is "chart", the number represents a value on a numeric axis. Otherwise, it represents a number of pixels from the left corner of the parent component for "x" or "left", or the right corner for "right".
• A series and group label for a horizontal chart (in the form {series:n,group:m}), which places the annotation on that series or group. This requires the parent component to be "chart".
• A percent string (for example, "40%"), which places the annotation at a point the specified percentage horizontally from the left corner of the parent component for "x" or "left", or the right corner for "right".
• A pixel string (for example, "40px"), which places the annotation at a point that number of pixels horizontally from the left corner of the parent component for "x" or "left", or the right corner for "right".

If you set multiple horizontal position properties, "x" takes precedence over either "right" or "left", and "left" takes precedence over "right".

"y": y

Is the vertical position for the annotation icon. A synonym for "y" is "bottom", which measures the horizontal position from the bottom edge of the frame. You can also use "top", which measures the position from the top edge of the frame.

The default value is undefined. Can be:

• A number. If the parent chart component is "chart", the number represents a value on a numeric axis. Otherwise, it represents a number of pixels from the bottom edge of the parent component for "y" or "bottom", or the top edge for "top".
• A series and group label for a vertical chart (in the form {series:n,group:m}), which places the annotation on that series or group. This requires the parent component to be "chart".
• A percent string (for example, "40%"), which places the annotation at a point the specified percentage vertically from the bottom edge of the parent component for "y" or "bottom", or the top edge for "top".
• A pixel string (for example, "40px"), which places the annotation at a point that number of pixels vertically from the bottom edge of the parent component for "y" or "bottom", or the top edge for "top".

If you set multiple vertical position properties, "y" takes precedence over either "bottom" or "top", and "bottom" takes precedence over "top".

"marker"

Defines the properties of the annotation marker or icon.

"visible": boolean

Defines whether the annotation icon is visible. Valid values are true, which makes the icon visible, and false, which does not make the icon visible. The default value is false.

"shape": "svg code"

Is the SVG path data string ('d' attribute) that defines the icon shape and size.

Note: Standard marker shapes such as "circle" or "diamond" are also supported for the marker:shape object.

"color": "string"

Is a string that specifies the color of the icon.

"border"

Defines the border properties of the icon.

"width": number

Is the width of the border in pixels.

"color": "string"

Is a string that specifies the color of the border.

"dash": "string"

Is a string that defines the dash style of the border. The default value is "" (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash "1 1" draws a dotted line).

Multiple dashes can be defined within the dash string (for example, "2 4 4 2"), in which case the dash types will alternate along the border.

"tooltip": "string"

Is a string that defines a tooltip to appear when the mouse hovers over the icon.