Merge branch 'master' into feature/topojson

.circleci/config.yml

@@ -162,6 +162,13 @@ jobs:
         default: "ChromeHeadless"
     steps:
       - <<: *load_workspace
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
+      - run:
+          command: |
+            google-chrome --version
+            whereis google-chrome
+          name: Check Chrome
       - run: ./.circleci/scripts/test_timezones.sh -b=<<parameters.browsers>>
 
   test_cypress:
@@ -246,6 +253,13 @@ jobs:
     description: Generate visual tests reference images
     steps:
       - <<: *load_workspace
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
+      - run:
+          command: |
+            google-chrome --version
+            whereis google-chrome
+          name: Check Chrome
       - generate_references_command
       - run: "mkdir -p /home/circleci/repo/tmp/latest/"
       - aws-s3/sync:
@@ -337,6 +351,13 @@ jobs:
         default: "ChromeHeadless"
     steps:
       - <<: *load_workspace
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
+      - run:
+          command: |
+            google-chrome --version
+            whereis google-chrome
+          name: Check Chrome
       - run:
           name: "Set application version env var"
           command: echo "export HIGHCHARTS_VERSION=$(node -p "require('./package.json').version")" >> $BASH_ENV
@@ -356,6 +377,7 @@ jobs:
           command: >
             npx karma start test/karma-conf.js --tests highcharts/*/* --single-run
             --splitbrowsers << parameters.browsers >> --browsercount 1 --visualcompare --no-fail-on-empty-test-suite --no-fail-on-failing-test-suite
+          when: always
       - run:
           name: "Highmaps visual tests"
           command: >

.eslintrc

@@ -31,6 +31,7 @@
         "strict": 0,
         "jsdoc/check-alignment": 1,
         "jsdoc/check-param-names": 1,
+        "jsdoc/check-tag-names": 1,
         "jsdoc/newline-after-description": 0,
         "jsdoc/require-jsdoc": 0,
         "jsdoc/require-param": 1,

changelog/generate-html.js

@@ -17,7 +17,7 @@ function generateHTML() {
             semver = require('semver');
 
         var products = [{
-            header: 'Highcharts Basic',
+            header: 'Highcharts',
             name: 'highcharts',
             changelogId: 'hc-changelog',
             offset: ''
@@ -115,7 +115,7 @@ function generateHTML() {
             return (
                 `<div id="${product.changelogId}">
                 <div class="changelog-header">
-                <h4 id="${product.name}">${product.header}</h4>
+                <h2 id="${product.name}">${product.header}</h2>
                 </div>
                 <div class="changelog-container">`);
         }
@@ -140,25 +140,28 @@ function generateHTML() {
                 const downloadLink = 'https://code.highcharts.com/zips/' + makeDownloadLinks(version, name) + '-' + version + '.zip';
 
                 return (
-                    `<p class="release-header">
+                    `<h3 class="release-header">
                         <a id="${id}"></a>
                         <a href="#${id}">${changelog.header.productName} v${version} ${changelog.header.date}</a>
                         <span class="download-link" ><a href="${downloadLink}" title="Download the zip archive for ${changelog.header.productName} v${version}"><i class="fas fa-download"></i></a></span>
-                    </p>
+                    </h3>
                     ${marked.parser(changelog.features)}`
                 );
             }
             return '';
         }
         function upgradeNotesHTMLStructure() {
+            const productName = changelog.header.name;
+            const id = productName.charAt(0).toUpperCase() + productName.slice(1);
+            const version = changelog.header.version.split('-').join('.');
             if (changelog.upgradeNotes.length > 0) {
                 return (
                     `<div id="${changelog.header.offset}heading-${changelog.header.version}-upgrade-notes" class="card-header">
                     <h4 class="card-title">
-                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#${changelog.header.offset}${changelog.header.version}-upgrade-notes"><span> Upgrade notes </span></button>
+                    <button aria-label="Upgrade Notes ${id} v${version}" aria-expanded="false" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#upgrade-notes-${changelog.header.offset}${changelog.header.version}"><span> Upgrade notes </span></button>
                     </h4>
                     </div>
-                    <div id="${changelog.header.offset}${changelog.header.version}-upgrade-notes" class="collapse" aria-labelledby="${changelog.header.offset}heading-${changelog.header.version}-bug-fixes" data-parent=".accordion">
+                    <div id="upgrade-notes-${changelog.header.offset}${changelog.header.version}" class="collapse" aria-labelledby="${changelog.header.offset}heading-${changelog.header.version}-bug-fixes" data-parent=".accordion">
                     <div class="card-body">
                     ${marked.parser(changelog.upgradeNotes)}
                     </div>
@@ -167,20 +170,20 @@ function generateHTML() {
             return '';
         }
         function bugFixesHTMLStructure() {
+            const productName = changelog.header.name;
+            const id = productName.charAt(0).toUpperCase() + productName.slice(1);
+            const version = changelog.header.version.split('-').join('.');
             if (changelog.bugFixes.length > 0) {
                 return (
-                    `<div
-                        id="${changelog.header.offset}heading-${changelog.header.version}-bug-fixes"
-                        class="card-header">
-                    <h4 class="card-title">
-                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#${changelog.header.offset}${changelog.header.version}-bug-fixes"><span> Bug fixes </span></button>
+                    `<div id="${changelog.header.offset}heading-${changelog.header.version}-bug-fixes"class="card-header">
+                    <h4 class="card-title" aria-label="Bug Fixes ${id} v${version}">
+                    <button aria-label="Bug Fixes ${id} v${version}"aria-expanded="false" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#bug-fixes-${changelog.header.offset}${changelog.header.version}"><span> Bug fixes </span></button>
                     </h4>
                     </div>
-                    <div id="${changelog.header.offset}${changelog.header.version}-bug-fixes" class="collapse" aria-labelledby="${changelog.header.offset}heading-${changelog.header.version}-bug-fixes" data-parent=".accordion">
+                    <div id="bug-fixes-${changelog.header.offset}${changelog.header.version}" class="collapse" aria-labelledby="${changelog.header.offset}heading-${changelog.header.version}-bug-fixes" data-parent=".accordion">
                     <div class="card-body">
                     ${marked.parser(changelog.bugFixes)}
                     </div>
-
                     </div>`);
             }
             return '';
@@ -199,11 +202,10 @@ function generateHTML() {
             return '';
         }
         function bottomHTMLContent() {
-            return (`
-                </div>
-                </div>
-                </div>
-                </div>`);
+            return (`</div>
+                    </div>
+                    </div>
+                    </div>`);
         }
         function endProductHTMLStructure() {
             return ('</div> </div>');

css/highcharts.scss

@@ -854,7 +854,7 @@ text.highcharts-drilldown-data-label,
     display: block;
     position: absolute;
 }
-.highcharts-a11y-proxy-group ul {
+.highcharts-a11y-proxy-group li {
     list-style: none;
 }
 .highcharts-visually-hidden {

docs/advanced-chart-features/annotations-and-fibonacci-retracements.md

@@ -13,8 +13,8 @@ Annotations can be built from simple blocks such as labels and shapes, and the c
 
 
       {
-        labels: [ /* options for labels /* ],
-        shapes: [ /* options for lines /*, /* options for backgrounds */ ]
+        labels: [ /* options for labels */ ],
+        shapes: [ /* options for lines */, /* options for backgrounds */ ]
       }
 
 
@@ -28,20 +28,21 @@ Let’s create the Fibonacci retracements chart with seven labels, seven horizon
 **Step 1. Calculate the retracements:**
 
 
-       levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
-       diff = y2 - y1;
-       retracementlevel = y2 - diff * level;
+       const levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1],
+           diff = y2 - y1;
+
+       const retracementlevel = y2 - diff * level;
 
 
 **Step 2. Build the horizontal lines:**
 
 
-        var lines = [];
+        const lines = [];
 
         Highcharts.each(levels, function (level, i) {
-            var retracement = y2 - diff * level;
-            var p1 = point(x1, retracement);
-            var p2 = point(x2, retracement);
+            const retracement = y2 - diff * level,
+                p1 = point(x1, retracement),
+                p2 = point(x2, retracement);
 
             lines.push({
                 type: 'path',
@@ -51,17 +52,17 @@ Let’s create the Fibonacci retracements chart with seven labels, seven horizon
         });
 
 
-![2CUyu8fxq2xYSgOQgfa31ACo8lnjAp4NmQYXAyZMBwWPXK8C9mYvR2jpqmXCvhgpxr_UL9TUMaU8SodaE0CjYcZjFsC8HhmHdj5xniO3cpafFn9XMmqE9X0qxRGgIFeZQS4R_du_](https://lh4.googleusercontent.com/2CUyu8fxq2xYSgOQgfa31ACo8lnjAp4NmQYXAyZMBwWPXK8C9mYvR2jpqmXCvhgpxr_UL9TUMaU8SodaE0CjYcZjFsC8HhmHdj5xniO3cpafFn9XMmqE9X0qxRGgIFeZQS4R_du_) 
+![fibonacci-step-2.png](fibonacci-step-2.png) 
 
 **Step 3. Build the labels:**
 
 
-        var labels = [];
+        const labels = [];
 
         Highcharts.each(levels, function (level, i) {
-            var retracement = y2 - diff * level;
-            var p1 = point(x1, retracement);
-            var p2 = point(x2, retracement);
+            const retracement = y2 - diff * level,
+                p1 = point(x1, retracement),
+                p2 = point(x2, retracement);
 
             labels.push({
                 point: p1,
@@ -80,13 +81,13 @@ Let’s create the Fibonacci retracements chart with seven labels, seven horizon
         });
 
 
-![QA9txXC1vsQEv85yAi-vmQAtcsH7Qu09bWAgsNUWdYa-MKb4BxLneSnJYdJZSBXDaJBTDuEckLhk-xOs8ORFf9ueVUvRbOdUcaFTu6jKvOKgEBbYF8nX5cF6Btmv8ayU1gyDgRLA](https://lh6.googleusercontent.com/QA9txXC1vsQEv85yAi-vmQAtcsH7Qu09bWAgsNUWdYa-MKb4BxLneSnJYdJZSBXDaJBTDuEckLhk-xOs8ORFf9ueVUvRbOdUcaFTu6jKvOKgEBbYF8nX5cF6Btmv8ayU1gyDgRLA) 
+![fibonacci-step-3.png](fibonacci-step-3.png) 
 
 **Step 4. Set up the backgrounds:**
 
 
-        var backgrounds = [];
-        var colors = [
+        const backgrounds = [];
+        const colors = [
             'rgba(130, 170, 255, 0.4)',
             'rgba(139, 191, 216, 0.4)',
             'rgba(150, 216, 192, 0.4)',
@@ -96,9 +97,9 @@ Let’s create the Fibonacci retracements chart with seven labels, seven horizon
         ];
 
         Highcharts.each(levels, function (level, i) {
-            var retracement = y2 - diff * level;
-            var p1 = point(x1, retracement);
-            var p2 = point(x2, retracement);
+            const retracement = y2 - diff * level,
+                p1 = point(x1, retracement),
+                p2 = point(x2, retracement);
 
             if (i > 0) {
                 backgrounds.push({
@@ -111,7 +112,7 @@ Let’s create the Fibonacci retracements chart with seven labels, seven horizon
         });
 
 
-![fnPKQOA8x_FrJN8y0sPXHJoKL3fUw7_T3awUStqhvYRMAxC6o0rFMhKO195U1LyJKh_ULvVAGBQdV5PEj5W8KA-3nPPXZ3-1NLIFf-WsS8lh5Aa91IcNDuL1mMTiDRAh0Vyfqzcg](https://lh5.googleusercontent.com/fnPKQOA8x_FrJN8y0sPXHJoKL3fUw7_T3awUStqhvYRMAxC6o0rFMhKO195U1LyJKh_ULvVAGBQdV5PEj5W8KA-3nPPXZ3-1NLIFf-WsS8lh5Aa91IcNDuL1mMTiDRAh0Vyfqzcg) 
+![fibonacci-step-4.png](fibonacci-step-4.png) 
 
 **Step 5. Gather the pieces together:**
 

docs/advanced-chart-features/annotations-module.md

@@ -23,8 +23,7 @@ A single annotation is composed of simple blocks such as labels and shapes. An a
         }]
 
 
-![bsFqB4efSMVCqMrAKXy_ZO5QHHBOf4ml8RVgrywyUldMb68b6e1kVMXGHKnWIoPyYLiEjgyJzQULx9pefJW5tRsHLO6KE3ODWyzxw9L1WGw5OxRtmldpVNiyNZ3XKzIaCqf-4nzu](https://lh3.googleusercontent.com/bsFqB4efSMVCqMrAKXy_ZO5QHHBOf4ml8RVgrywyUldMb68b6e1kVMXGHKnWIoPyYLiEjgyJzQULx9pefJW5tRsHLO6KE3ODWyzxw9L1WGw5OxRtmldpVNiyNZ3XKzIaCqf-4nzu)
-
+![annotations-simple-label.png](annotations-simple-label.png)
 The options may look overcomplicated but that structure allows to define complex annotations and serves as the basis for further extensions in the future.
 
 The point option

docs/doc-config.js

@@ -6,6 +6,7 @@ module.exports = {
      * Refer to doc by relative path without extension, i.e.: 'maps/drilldown'
      */
     unlisted: [
+        'export-module/deprecated-async-option',
         'export-module/legacy-export-servers',
         'stock/compare',
         'stock/cumulative-sum'

docs/export-module/deprecated-async-option.md

@@ -0,0 +1,65 @@
+Deprecating the export server async option
+------------------------------------------
+
+Version 2.2 of the Highcharts Node.js Export Server, due December 1st 2021, will deprecate the `async` option. The reasons for that is that it makes the application dependent on saving state, and complicates load balancing. Furthermore it is no longer needed in browsers because we can render the returned image directly as a base64 encoded `src`.
+
+Here's how to migrate from the `async` option.
+
+### Browser
+
+In the browser, the config can be posted and the returned data be rendered using the FormData, fetch and FileReader API's. See the [example on jsFiddle](https://jsfiddle.net/highcharts/mt2s95Ln/) for how to set this up with an async-await based syntax.
+
+If legacy browsers are a requirement, see also the [old jQuery based demo](https://jsfiddle.net/highcharts/edyucqkw/). Note that this approach uses the export server's `b64` option to do the base64 encoding on the server side.
+
+### Node.js
+
+If you're running a Node.js environment, the recommended approach would be to use the export server as a Node.js module instead of posting content to Highsoft's online server. For details, see the chapter [Using as a Node.js Module](https://github.com/highcharts/node-export-server/blob/master/README.md#using-as-a-nodejs-module) in the project repo.
+
+### PHP
+
+For PHP, we can use curl to post the config to the server. This is a working example:
+```php
+<?php
+/**
+ * PHP script to create image exports using the Highcharts Export Server
+ */
+
+$type = 'png'; // Can be png, jpeg or pdf
+
+// Chart options
+$options = [
+    'series' => [[
+        'data' => [1, 4, 3, 5],
+        'type' => 'column'
+    ]]
+];
+
+$arr = [
+    'type' => $type,
+    'width' => 400,
+    'infile' => $options
+];
+
+$data = json_encode($arr);
+$curlProcess = curl_init();
+curl_setopt( $curlProcess, CURLOPT_URL, 'https://export.highcharts.com/' );
+curl_setopt(
+    $curlProcess,
+    CURLOPT_HTTPHEADER,
+    array(
+        'Content-Type: application/json',
+        'Content-Length: ' . strlen( $data ), 'Accept: application/json'
+    )
+);
+curl_setopt( $curlProcess, CURLOPT_HEADER, 0 );
+curl_setopt( $curlProcess, CURLOPT_TIMEOUT, 30 );
+curl_setopt( $curlProcess, CURLOPT_POST, 1 );
+curl_setopt( $curlProcess, CURLOPT_POSTFIELDS, $data );
+curl_setopt( $curlProcess, CURLOPT_RETURNTRANSFER, TRUE );
+$content = curl_exec( $curlProcess );
+curl_close( $curlProcess );
+
+file_put_contents("chart.$type", $content);
+
+?>
+```

docs/maps/map-series.md

@@ -1,7 +1,9 @@
 Map series
 ==========
 
-<iframe style="width: 100%; height: 520px; border: none;" src="https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/all-maps" allow="fullscreen"></iframe>
+The `map` series is the basic series type in Highcharts Maps. It creates a [choropleth map](https://en.wikipedia.org/wiki/Choropleth_map) offering the ability to create map shapes and visualize their values through color coding or patterns.
+
+<iframe style="width: 100%; height: 520px; border: none;" src="https://highcharts.com/samples/embed/maps/demo/all-maps" allow="fullscreen"></iframe>
 
 Initialize the constructor
 ------------
@@ -15,7 +17,7 @@ For an overview of the `map` series options see the [API reference](https://api
        ...
     });
 
-<iframe style="width: 100%; height: 520px; border: none;" src="https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/category-map/" allow="fullscreen"></iframe>
+<iframe style="width: 100%; height: 520px; border: none;" src="https://highcharts.com/samples/embed/maps/demo/category-map" allow="fullscreen"></iframe>
 
 Load the map
 ------------
@@ -26,4 +28,4 @@ Add and join data
 -----------------
 In this [link](https://www.highcharts.com/docs/maps/getting-started#add-and-join-data), you can find detailed descriptions of how to work with [series.map.data](https://api.highcharts.com/highmaps/series.map.data), and [series.joinBy](https://api.highcharts.com/highmaps/plotOptions.series.joinBy).
 
-You can also find there another way of joining the data by omitting [mapData](https://api.highcharts.com/highmaps/series.map.mapData) and setting the [path](https://api.highcharts.com/highmaps/series.map.data.path) directly on the data point.
+You can also find there another way of joining the data by omitting [mapData](https://api.highcharts.com/highmaps/series.map.mapData) and setting the [path](https://api.highcharts.com/highmaps/series.map.data.path) directly on the data point.