diff --git a/highcharts-api/highcharts-stock/06-advanced-annotations/index.html b/highcharts-api/highcharts-stock/06-advanced-annotations/index.html
index 515afdf..6109172 100644
--- a/highcharts-api/highcharts-stock/06-advanced-annotations/index.html
+++ b/highcharts-api/highcharts-stock/06-advanced-annotations/index.html
@@ -2,16 +2,23 @@
-
-
-
+
+
+
-
+
+
+
+
+
-
+
+
+
+
diff --git a/highcharts-api/highcharts-stock/06-advanced-annotations/main.js b/highcharts-api/highcharts-stock/06-advanced-annotations/main.js
index d2838b3..1bef088 100644
--- a/highcharts-api/highcharts-stock/06-advanced-annotations/main.js
+++ b/highcharts-api/highcharts-stock/06-advanced-annotations/main.js
@@ -1,22 +1,59 @@
(async () => {
- const data = await fetch(
- 'https://demo-live-data.highcharts.com/aapl-c.json'
- ).then(response => response.json());
+ const data = await fetch(
+ 'https://demo-live-data.highcharts.com/aapl-c.json'
+ ).then(response => response.json());
- const chart = Highcharts.stockChart('container', {
- series: [{
- data: data
- }],
+ const chart = Highcharts.stockChart('container', {
+ chart: {
+ events: {
+ load() {
+ const chart = this;
+ const addBtn = document.getElementById('add-annotation');
- annotations: [{
- shapes: [{
- x: data[10][0],
- y: data[10][1],
- type: 'rect',
- width: 40,
- height: 40,
- fill: 'red'
- }],
- }]
- });
+ addBtn.addEventListener('click', function() {
+ const x = chart.xAxis[0].toValue(chart.plotLeft + 10),
+ y = chart.yAxis[0].toValue(chart.plotTop + 10);
+
+ chart.addAnnotation({
+ shapes: [{
+ type: 'rect',
+ point: {
+ xAxis: 0,
+ yAxis: 0,
+ x,
+ y
+ },
+ width: 360,
+ height: 60,
+ fill: 'red'
+ }],
+ labels: [{
+ point: {
+ xAxis: 0,
+ yAxis: 0,
+ x,
+ y
+ },
+ x: 180,
+ y: 30,
+ shape: 'rect',
+ text: Math.trunc(y),
+ verticalAlign: 'middle'
+ }],
+ events: {
+ drag: function() {
+ const label = this.labels[0];
+ const rectY = this.shapes[0].points[0].y;
+ label.update({ text: Math.trunc(rectY) });
+ }
+ }
+ });
+ });
+ }
+ }
+ },
+ series: [{
+ data: data
+ }]
+ });
})();