Annotations module

If you're interested in adding new features or modifying existing ones, please contact us: start@blacklabel.pl
You may also want to check our other demo here: http://demo.blacklabel.pl.

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);

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

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' } } }

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'
		}
	}
}