Annotations module
18 | 19 |If you're interested in adding new features or modifying existing ones, please contact us: start@blacklabel.pl
20 | You may also want to check our other demo here: http://demo.blacklabel.pl.
21 |
22 | 20 | You may also want to check our other demo here: http://demo.blacklabel.pl.
Installation
23 | 24 |Like any other Highcharts module (e.g. exporting), add <script> tag pointing to annotations.js below Highcharts script tag.
For NPM users:
27 |var Highcharts = require('highcharts'),
28 | HighchartsAnnotations = require('annotations')(Highcharts);Sample code
31 | 32 |new Highcharts.Chart({
33 | chart: {
34 | renderTo: container
35 | },
36 | series: [{
37 | data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
38 | }],
39 | annotations: [{
40 | xValue: 4,
41 | yValue: 125,
42 | title: {
43 | text: "Annotated chart!"
44 | },
45 | events: {
46 | click: function(e) { console.log("Annotation clicked:", this); }
47 | }
48 | }]
49 | })
50 | Available options
53 | 54 |Chart options
55 | 56 || Option | 60 |Description | 61 |
|---|---|
| chart.annotations | 66 |Array containing annotation configuration objects | 67 |
| chart.annotationsOptions | 70 |Default options for annotations (like buttons' list) | 71 |
Annotation configuration object
77 | 78 || Option | 82 |Description | 83 |
|---|---|
| x y |
88 | Annotation position defined in pixels | 89 |
| xValue yValue |
92 | Annotation position defined using axis values | 93 |
| xValueEnd yValueEnd |
96 | Path only. Instead of defining path, set these values to make annotation scalable | 97 |
| xAxis yAxis |
100 | Axis index, default to 0 | 101 |
| anchorX anchorY |
104 | Defines annotation anchor point, available values:anchorX: "left"/"center"/"right" anchorY: "top"/"middle"/"bottom" |
105 |
| allowDragX allowDragY |
108 | Allow user to drag and drop an annotation. Horizontal and vertical. | 109 |
| linkedTo | 112 |Link annotation to point or series using it's id | 113 |
| title | 116 |Title configuration object | 117 |
| title.text | 120 |Title text | 121 |
| title.x title.y |
124 | Title position in pixels, relative to annotation position | 125 |
| title.style | 128 |Additional CSS styles for title | 129 |
| title.style.color | 132 |Title text color | 133 |
| title.style.fontSize | 136 |Title font size | 137 |
| shape | 140 |Shape configuration object | 141 |
| shape.type | 144 | Shape type, available types are "path", "circle" and "rect" |
145 |
| shape.units | 148 |Defines whether shape uses pixels or axis values | 149 |
| shape.params | 152 |Shape parameters (parameters are passed to renderer method like rect, circle or path) | 153 |
| events | 156 | Object of events, supported are: mouseover, mouseout, mousedown, mouseup, click, dblclick. this in a callback refers to the annotation object. |
157 |
| selectionMarker | 160 | Styles for a selected annotation, defaults to:
161 | {
162 | 'stroke-width': 1,
163 | stroke: 'black',
164 | fill: 'transparent',
165 | dashstyle: 'ShortDash',
166 | 'shape-rendering': 'crispEdges'
167 | } |
168 |
Available shape parameters
174 | 175 || Option | 179 |Description | 180 |Limited to | 181 |
|---|---|---|
| shape.params.x shape.params.y |
186 | Shape position relative to the annotation position | 187 |rect circle |
188 |
| shape.params.width shape.params.height |
191 | Rectangle width and height (only for "rect" type) |
192 | rect | 193 |
| shape.params.d | 196 | Path definition (only for "path" type) |
197 | path | 198 |
| shape.params.r | 201 |Circle radius | 202 |circle | 203 |
| shape.params.fill | 206 | Fill color, default: "transparent" |
207 | - | 208 |
| shape.params.stroke | 211 | Stroke color, default: "black" |
212 | - | 213 |
| shape.params.strokeWidth | 216 | Stroke width (and line width for path), default: 2 |
217 | - | 218 |
Chart.annotations
224 | 225 || Property | 229 |Description | 230 |
|---|---|
| chart.addAnnotation(options) | 235 |Add one annotation with given options | 236 |
| chart.redrawAnnotations() | 239 |Redraw all annotations | 240 |
| chart.annotations.allItems | 243 |Array containing all annotations | 244 |
Annotation object
250 | 251 || Property | 255 |Description | 256 |
|---|---|
| annotation.update(options) | 261 |Update an annotation with given options | 262 |
| annotation.destroy() | 265 |Destroy an annotation | 266 |
| annotation.show() | 269 |Show an annotation - only for non-linked annotations | 270 |
| annotation.hide() | 273 |Hide an annotation - only for non-linked annotations | 274 |
| annotation.select() | 277 |Select an annotation by adding selection box | 278 |
| annotation.deselect() | 281 |Deselect an annotation by removing selection box | 282 |
Chart.annotationsOptions
287 | 288 || Property | 292 |Description | 293 |
|---|---|
| enabledButtons | 298 | Enable or disable buttons for drawing annotations. 299 | Selected button prevents from zooming and panning to draw annotation. |
300 |
| buttonsOffsets | 303 | Offsets for the buttons in array: [x-offset, y-offset]. Useful when placing annotations next to the exporting module, etc. Defaults to [0, 0]. |
304 |
| buttons | 307 | Array of buttons. For example:
308 | {
309 | annotationEvents: {
310 | step: callback, // to be called during mouse drag for new annotation
311 | stop: callback // to be called after mouse up / release
312 | },
313 | annotation: { // standard annotation options, used for new annotation
314 | anchorX: 'left',
315 | anchorY: 'top',
316 | xAxis: 0,
317 | yAxis: 0,
318 | shape: {
319 | type: 'path',
320 | params: {
321 | d: ['M', 0, 0, 'L', 100, 100 ]
322 | }
323 | }
324 | },
325 | symbol: { // button symbol options
326 | shape: 'rect', // shape, taken from Highcharts.symbols
327 | size: 12,
328 | style: {
329 | 'stroke-width': 2,
330 | 'stroke': 'black',
331 | fill: 'red',
332 | zIndex: 121
333 | }
334 | },
335 | style: { // buton style itself
336 | fill: 'black',
337 | stroke: 'blue',
338 | strokeWidth: 2,
339 | },
340 | size: 12, // buton size
341 | states: { // states for button
342 | selected: {
343 | fill: '#9BD'
344 | },
345 | hover: {
346 | fill: '#9BD'
347 | }
348 | }
349 | } |
350 |