Package Exports
- highcharts-annotations
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (highcharts-annotations) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.
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-annotationsSample 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/