Like any other Highcharts module (e.g. exporting), add <script> tag pointing to annotations.js below Highcharts script tag.
For NPM users:
\nvar Highcharts = require('highcharts'),\n HighchartsAnnotations = require('annotations')(Highcharts);For BOWER users:
\nbower install highcharts-annotationsnew Highcharts.Chart({\n chart: {\n renderTo: container\n },\n series: [{\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]\n }],\n annotations: [{\n xValue: 4,\n yValue: 125,\n title: {\n text: \"Annotated chart!\"\n },\n events: {\n click: function(e) { console.log(\"Annotation clicked:\", this); }\n }\n }]\n})\n| Option | \nDescription | \n
|---|---|
| chart.annotations | \nArray containing annotation configuration objects | \n
| chart.annotationsOptions | \nDefault options for annotations (like buttons' list) | \n
| Option | \nDescription | \n
|---|---|
| x y | \nAnnotation position defined in pixels | \n
| xValue yValue | \nAnnotation position defined using axis values | \n
| xValueEnd yValueEnd | \nPath only. Instead of defining path, set these values to make annotation scalable | \n
| xAxis yAxis | \nAxis index, default to 0 | \n
| anchorX anchorY | \n Defines annotation anchor point, available values:anchorX: \"left\"/\"center\"/\"right\" anchorY: \"top\"/\"middle\"/\"bottom\" | \n
| allowDragX allowDragY | \nAllow user to drag and drop an annotation. Horizontal and vertical. | \n
| linkedTo | \nLink annotation to point or series using it's id | \n
| title | \nTitle configuration object | \n
| title.text | \nTitle text | \n
| title.x title.y | \nTitle position in pixels, relative to annotation position | \n
| title.style | \nAdditional CSS styles for title | \n
| title.style.color | \nTitle text color | \n
| title.style.fontSize | \nTitle font size | \n
| shape | \nShape configuration object | \n
| shape.type | \n Shape type, available types are \"path\", \"circle\" and \"rect\" | \n
| shape.units | \nDefines whether shape uses pixels or axis values | \n
| shape.params | \nShape parameters (parameters are passed to renderer method like rect, circle or path) | \n
| events | \n Object of events, supported are: mouseover, mouseout, mousedown, mouseup, click, dblclick. this in a callback refers to the annotation object. | \n
| selectionMarker | \n Styles for a selected annotation, defaults to: \n{\n\t\t'stroke-width': 1,\n\t\tstroke: 'black',\n\t\tfill: 'transparent',\n\t\tdashstyle: 'ShortDash',\n\t\t'shape-rendering': 'crispEdges'\n} | \n
| Option | \nDescription | \nLimited to | \n
|---|---|---|
| shape.params.x shape.params.y | \nShape position relative to the annotation position | \nrect circle | \n
| shape.params.width shape.params.height | \n Rectangle width and height (only for \"rect\" type) | \nrect | \n
| shape.params.d | \n Path definition (only for \"path\" type) | \npath | \n
| shape.params.r | \nCircle radius | \ncircle | \n
| shape.params.fill | \n Fill color, default: \"transparent\" | \n- | \n
| shape.params.stroke | \n Stroke color, default: \"black\" | \n- | \n
| shape.params.strokeWidth | \n Stroke width (and line width for path), default: 2 | \n- | \n
| Property | \nDescription | \n
|---|---|
| chart.addAnnotation(options) | \nAdd one annotation with given options | \n
| chart.redrawAnnotations() | \nRedraw all annotations | \n
| chart.annotations.allItems | \nArray containing all annotations | \n
| Property | \nDescription | \n
|---|---|
| annotation.update(options) | \nUpdate an annotation with given options | \n
| annotation.destroy() | \nDestroy an annotation | \n
| annotation.show() | \nShow an annotation - only for non-linked annotations | \n
| annotation.hide() | \nHide an annotation - only for non-linked annotations | \n
| annotation.select() | \nSelect an annotation by adding selection box | \n
| annotation.deselect() | \nDeselect an annotation by removing selection box | \n
| Property | \nDescription | \n
|---|---|
| enabledButtons | \n Enable or disable buttons for drawing annotations. \nSelected button prevents from zooming and panning to draw annotation. | \n
| buttonsOffsets | \n Offsets for the buttons in array: [x-offset, y-offset]. Useful when placing annotations next to the exporting module, etc. Defaults to [0, 0]. | \n
| buttons | \n Array of buttons. For example: \n{\n\tannotationEvents: {\n\t\tstep: callback, // to be called during mouse drag for new annotation\n\t\tstop: callback // to be called after mouse up / release\n\t},\n\tannotation: { // standard annotation options, used for new annotation\n\t\tanchorX: 'left',\n\t\tanchorY: 'top',\n\t\txAxis: 0,\n\t\tyAxis: 0,\n\t\tshape: {\n\t\t\ttype: 'path',\n\t\t\tparams: {\n\t\t\t\td: ['M', 0, 0, 'L', 100, 100 ]\n\t\t\t}\n\t\t}\n\t},\n\tsymbol: { // button symbol options\n\t\tshape: 'rect', // shape, taken from Highcharts.symbols\n\t\tsize: 12,\n\t\tstyle: {\n\t\t\t'stroke-width': 2,\n\t\t\t'stroke': 'black',\n\t\t\tfill: 'red',\n\t\t\tzIndex: 121\n\t\t}\n\t},\n\tstyle: { // buton style itself\n\t\tfill: 'black',\n\t\tstroke: 'blue',\n\t\tstrokeWidth: 2,\n\t},\n\tsize: 12, // buton size\n\tstates: { // states for button \n\t\tselected: {\n\t\t\tfill: '#9BD'\n\t\t},\n\t\thover: {\n\t\t\tfill: '#9BD'\n\t\t}\n\t}\n} | \n