If you're interested in adding new features or modifying existing ones, please contact us: [email protected]
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.
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!"
}
}]
})
| 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 (see below), 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 |
| linkedAnnotations | Annotations with the same value/id will be removed together after double click |
| 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 callback refers to the annotation object. |
| 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 annotation with given options |
| annotation.destroy() | Destroy annotation |
| Property | Description |
|---|---|
| enabledButtons | Enable or disable buttons for drawing annotations |
| 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'
}
}
} |
Go to project page to see this module in action: http://blacklabel.github.io/annotations/