From 2f9c640dbba64d330da54e7927ad71780b9e79f4 Mon Sep 17 00:00:00 2001 From: dqmrf Date: Thu, 2 Jul 2026 08:23:41 +0200 Subject: [PATCH 1/2] S06: Add chart with advanced annotations --- .../06-advanced-annotations/index.html | 17 +++-- .../06-advanced-annotations/main.js | 76 ++++++++++++++----- 2 files changed, 70 insertions(+), 23 deletions(-) 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..9520a35 100644 --- a/highcharts-api/highcharts-stock/06-advanced-annotations/main.js +++ b/highcharts-api/highcharts-stock/06-advanced-annotations/main.js @@ -1,22 +1,62 @@ (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 + }, + draggable: true, + width: 360, + height: 60, + fill: 'red' + }], + labels: [{ + point: { + xAxis: 0, + yAxis: 0, + x, + y + }, + x: 180, + y: 30, + shape: 'rect', + text: Math.trunc(y), + align: 'center', + verticalAlign: 'middle' + }], + events: { + drag: function() { + const label = this.labels[0]; + const rectY = this.shapes[0].points[0].y; + label.options.text = Math.trunc(rectY); + label.redraw(false); + } + } + }); + }); + } + } + }, + series: [{ + data: data + }] + }); })(); From e2e8486155090b55fac3cdcecf93d17b44b11241 Mon Sep 17 00:00:00 2001 From: dqmrf Date: Thu, 2 Jul 2026 14:40:53 +0200 Subject: [PATCH 2/2] S06: Minor code improvements --- .../highcharts-stock/06-advanced-annotations/main.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/highcharts-api/highcharts-stock/06-advanced-annotations/main.js b/highcharts-api/highcharts-stock/06-advanced-annotations/main.js index 9520a35..1bef088 100644 --- a/highcharts-api/highcharts-stock/06-advanced-annotations/main.js +++ b/highcharts-api/highcharts-stock/06-advanced-annotations/main.js @@ -23,7 +23,6 @@ x, y }, - draggable: true, width: 360, height: 60, fill: 'red' @@ -39,15 +38,13 @@ y: 30, shape: 'rect', text: Math.trunc(y), - align: 'center', verticalAlign: 'middle' }], events: { drag: function() { const label = this.labels[0]; const rectY = this.shapes[0].points[0].y; - label.options.text = Math.trunc(rectY); - label.redraw(false); + label.update({ text: Math.trunc(rectY) }); } } });