Annotations are a part of Highstock 6+ and Highcharts 6+ as a module. This plugin was build for older versions of Highstock.
Annotations module
Installation
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-annotations
Sample code
new 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); }
}
}]
})
Available options
Chart options
Option | Description |
---|
chart.annotations | Array containing annotation configuration objects |
chart.annotationsOptions | Default options for annotations (like buttons' list) |
Annotation configuration object
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'
} |
Available shape parameters
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 | - |
Chart.annotations
Property | Description |
---|
chart.addAnnotation(options) | Add one annotation with given options |
chart.redrawAnnotations() | Redraw all annotations |
chart.annotations.allItems | Array containing all annotations |
Annotation object
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 |
Chart.annotationsOptions
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'
}
}
} |
Advanced demo
Go to project page to see this module in action: http://blacklabel.github.io/annotations/