Highcharts plugin to add dynamic annotations to charts.
npm install highcharts-annotationsLike 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: { |
| 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: { |