Like any other Highcharts module (e.g. exporting), add <script> tag pointing to annotations.js below Highcharts script tag.
For NPM users:
var Highcharts = require('highcharts'),
HighchartsAnnotations = require('annotations')(Highcharts);For BOWER users:
bower install highcharts-annotationsnew Highcharts.Chart({
chart: {
renderTo: container
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}],
annotations: [{
xValue: 4,
yValue: 125,
title: {
text: "Annotated chart!"
},
events: {
click: function(e) { console.log("Annotation clicked:", this); }
}
}]
})
| Option | Description |
|---|---|
| chart.annotations | Array containing annotation configuration objects |
| chart.annotationsOptions | Default options for annotations (like buttons' list) |
| Option | Description |
|---|---|
| x y |
Annotation position defined in pixels |
| xValue yValue |
Annotation position defined using axis values |
| xValueEnd yValueEnd |
Path only. Instead of defining path, set these values to make annotation scalable |
| xAxis yAxis |
Axis index, default to 0 |
| anchorX anchorY |
Defines annotation anchor point, available values:anchorX: "left"/"center"/"right" anchorY: "top"/"middle"/"bottom" |
| allowDragX allowDragY |
Allow user to drag and drop an annotation. Horizontal and vertical. |
| linkedTo | Link annotation to point or series using it's id |
| title | Title configuration object |
| title.text | Title text |
| title.x title.y |
Title position in pixels, relative to annotation position |
| title.style | Additional CSS styles for title |
| title.style.color | Title text color |
| title.style.fontSize | Title font size |
| shape | Shape configuration object |
| shape.type | Shape type, available types are "path", "circle" and "rect" |
| shape.units | Defines whether shape uses pixels or axis values |
| shape.params | Shape parameters (parameters are passed to renderer method like rect, circle or path) |
| events | Object of events, supported are: mouseover, mouseout, mousedown, mouseup, click, dblclick. this in a callback refers to the annotation object. |
| selectionMarker | Styles for a selected annotation, defaults to:
{
'stroke-width': 1,
stroke: 'black',
fill: 'transparent',
dashstyle: 'ShortDash',
'shape-rendering': 'crispEdges'
} |
| Option | Description | Limited to |
|---|---|---|
| shape.params.x shape.params.y |
Shape position relative to the annotation position | rect circle |
| shape.params.width shape.params.height |
Rectangle width and height (only for "rect" type) |
rect |
| shape.params.d | Path definition (only for "path" type) |
path |
| shape.params.r | Circle radius | circle |
| shape.params.fill | Fill color, default: "transparent" |
- |
| shape.params.stroke | Stroke color, default: "black" |
- |
| shape.params.strokeWidth | Stroke width (and line width for path), default: 2 |
- |
| Property | Description |
|---|---|
| chart.addAnnotation(options) | Add one annotation with given options |
| chart.redrawAnnotations() | Redraw all annotations |
| chart.annotations.allItems | Array containing all annotations |
| Property | Description |
|---|---|
| annotation.update(options) | Update an annotation with given options |
| annotation.destroy() | Destroy an annotation |
| annotation.show() | Show an annotation - only for non-linked annotations |
| annotation.hide() | Hide an annotation - only for non-linked annotations |
| annotation.select() | Select an annotation by adding selection box |
| annotation.deselect() | Deselect an annotation by removing selection box |
| Property | Description |
|---|---|
| enabledButtons | Enable or disable buttons for drawing annotations. Selected button prevents from zooming and panning to draw annotation. |
| buttonsOffsets | Offsets for the buttons in array: [x-offset, y-offset]. Useful when placing annotations next to the exporting module, etc. Defaults to [0, 0]. |
| buttons | Array of buttons. For example:
{
annotationEvents: {
step: callback, // to be called during mouse drag for new annotation
stop: callback // to be called after mouse up / release
},
annotation: { // standard annotation options, used for new annotation
anchorX: 'left',
anchorY: 'top',
xAxis: 0,
yAxis: 0,
shape: {
type: 'path',
params: {
d: ['M', 0, 0, 'L', 100, 100 ]
}
}
},
symbol: { // button symbol options
shape: 'rect', // shape, taken from Highcharts.symbols
size: 12,
style: {
'stroke-width': 2,
'stroke': 'black',
fill: 'red',
zIndex: 121
}
},
style: { // buton style itself
fill: 'black',
stroke: 'blue',
strokeWidth: 2,
},
size: 12, // buton size
states: { // states for button
selected: {
fill: '#9BD'
},
hover: {
fill: '#9BD'
}
}
} |