Skip to content
Annotations plugin for Highstock by Black Label
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Fixed CSS styles for output demo Feb 10, 2017
js Fixed CSS styles for output demo Feb 10, 2017
.eslint-default-config.yml
.eslintrc Linted Jun 16, 2016
README.md Update README.md Oct 10, 2017
bower.json
gulpfile.js Linted Jun 16, 2016
index.html Fixed CSS styles for output demo Feb 10, 2017
license.txt gh-pages-annotations Dec 9, 2013
manifest.json Add tag highcharts-addon for npm. Mar 27, 2018
package.json Add tag highcharts-addon for npm. Mar 27, 2018

README.md

#f03c15 Annotations are a part of Highstock 6+ and Highcharts 6+ as a module. This plugin was build for older versions of Highstock.

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

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/
You can’t perform that action at this time.