highcharts 11.4.8 → 11.4.9

package/css/highcharts.css

@@ -1,14 +1,19 @@
+/* SPDX-License-Identifier: LicenseRef-Highcharts */
+
 /**
  * @license Highcharts
  *
- * (c) 2009-2022 Torstein Honsi
+ * (c) 2009-2025 Highsoft AS
  *
- * License: www.highcharts.com/license
+ * A commercial license may be required depending on use.
+ * See www.highcharts.com/license
  */
 
-:root,
-.highcharts-light {
-    /* Colors for data series and points */
+:root {
+    /*
+     * Legacy single-color CSS variables, kept for backwards compotibility for
+     * those browsers that don't support color-scheme and light-dark.
+     */
     --highcharts-color-0: #2caffe;
     --highcharts-color-1: #544fc5;
     --highcharts-color-2: #00e272;
@@ -27,8 +32,6 @@
     Neutral colors, grayscale by default. The default colors are defined by
     mixing the background-color with neutral, with a weight corresponding to
     the number in the name.
-
-    https://www.highcharts.com/samples/highcharts/css/palette-helper
     */
 
     /* Strong text. */
@@ -52,7 +55,7 @@
     /* Minor grid lines etc. */
     --highcharts-neutral-color-5: #f2f2f2;
 
-    /* Tooltip backgroud, button fills, map null points. */
+    /* Tooltip background, button fills, map null points. */
     --highcharts-neutral-color-3: #f7f7f7;
 
     /*
@@ -88,55 +91,39 @@
     --highcharts-annotation-color-5: rgba(169, 255, 101, 0.4);
 }
 
-@media (prefers-color-scheme: dark) {
+/**
+ * Dual light/dark mode CSS variables. These are used in the new color-scheme
+ * based approach, but also as a fallback for the legacy variables for browsers
+ * that don't support color-scheme and light-dark.
+ */
+@supports (color: light-dark(#fff, #000)) {
     :root {
+        /* Colors for data series and points */
+        --highcharts-color-1: light-dark(#544fc5, #00e272);
+        --highcharts-color-2: light-dark(#00e272, #efdf00);
+
         /* UI colors */
-        --highcharts-background-color: rgb(48, 48, 48);
-
-        /*
-            Neutral color variations
-            https://www.highcharts.com/samples/highcharts/css/palette-helper
-        */
-        --highcharts-neutral-color-100: rgb(255, 255, 255);
-        --highcharts-neutral-color-80: rgb(214, 214, 214);
-        --highcharts-neutral-color-60: rgb(173, 173, 173);
-        --highcharts-neutral-color-40: rgb(133, 133, 133);
-        --highcharts-neutral-color-20: rgb(92, 92, 92);
-        --highcharts-neutral-color-10: rgb(71, 71, 71);
-        --highcharts-neutral-color-5: rgb(61, 61, 61);
-        --highcharts-neutral-color-3: rgb(57, 57, 57);
+        --highcharts-background-color: light-dark(#ffffff, #141414);
+
+        /* Neutral color variations */
+        --highcharts-neutral-color-100: light-dark(#000000, #ffffff);
+        --highcharts-neutral-color-80: light-dark(#333333, #d0d0d0);
+        --highcharts-neutral-color-60: light-dark(#666666, #a1a1a1);
+        --highcharts-neutral-color-40: light-dark(#999999, #727272);
+        --highcharts-neutral-color-20: light-dark(#cccccc, #434343);
+        --highcharts-neutral-color-10: light-dark(#e6e6e6, #2c2c2c);
+        --highcharts-neutral-color-5: light-dark(#f2f2f2, #202020);
+        --highcharts-neutral-color-3: light-dark(#f7f7f7, #1b1b1b);
 
         /* Highlight color variations */
-        --highcharts-highlight-color-100: rgb(122, 167, 255);
-        --highcharts-highlight-color-80: rgb(108, 144, 214);
-        --highcharts-highlight-color-60: rgb(94, 121, 173);
-        --highcharts-highlight-color-20: rgb(65, 74, 92);
-        --highcharts-highlight-color-10: rgb(58, 63, 71);
+        --highcharts-highlight-color-100: light-dark(#0022ff, #2caffe);
+        --highcharts-highlight-color-80: light-dark(#334eff, #2790cf);
+        --highcharts-highlight-color-60: light-dark(#667aff, #2271a0);
+        --highcharts-highlight-color-20: light-dark(#ccd3ff, #193343);
+        --highcharts-highlight-color-10: light-dark(#e6e9ff, #16242b);
     }
 }
 
-.highcharts-dark {
-    /* UI colors */
-    --highcharts-background-color: rgb(48, 48, 48);
-
-    /* Neutral color variations */
-    --highcharts-neutral-color-100: rgb(255, 255, 255);
-    --highcharts-neutral-color-80: rgb(214, 214, 214);
-    --highcharts-neutral-color-60: rgb(173, 173, 173);
-    --highcharts-neutral-color-40: rgb(133, 133, 133);
-    --highcharts-neutral-color-20: rgb(92, 92, 92);
-    --highcharts-neutral-color-10: rgb(71, 71, 71);
-    --highcharts-neutral-color-5: rgb(61, 61, 61);
-    --highcharts-neutral-color-3: rgb(57, 57, 57);
-
-    /* Highlight color variations */
-    --highcharts-highlight-color-100: rgb(122, 167, 255);
-    --highcharts-highlight-color-80: rgb(108, 144, 214);
-    --highcharts-highlight-color-60: rgb(94, 121, 173);
-    --highcharts-highlight-color-20: rgb(65, 74, 92);
-    --highcharts-highlight-color-10: rgb(58, 63, 71);
-}
-
 .highcharts-container {
     position: relative;
     overflow: hidden;
@@ -146,15 +133,30 @@
     line-height: normal;
     z-index: 0; /* #1072 */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    font-family: Helvetica, Arial, sans-serif;
+    color-scheme: light dark;
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Helvetica,
+        Arial,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        sans-serif;
     font-size: 1rem;
     user-select: none;
     touch-action: manipulation;
     outline: none;
 }
 
-.highcharts-no-touch-action {
-    touch-action: none;
+.highcharts-light .highcharts-container {
+    color-scheme: light;
+}
+
+.highcharts-dark .highcharts-container {
+    color-scheme: dark;
 }
 
 .highcharts-root {
@@ -253,14 +255,31 @@
     stroke-width: 0;
 }
 
+.highcharts-radial-axis-grid .highcharts-grid-line,
+.highcharts-radial-axis-grid .highcharts-minor-grid-line {
+    stroke-width: 0;
+}
+
 .highcharts-tick {
     stroke: var(--highcharts-neutral-color-80);
 }
 
+.highcharts-minor-tick {
+    stroke: var(--highcharts-neutral-color-40);
+}
+
 .highcharts-yaxis .highcharts-tick {
     stroke-width: 0;
 }
 
+.highcharts-radial-axis .highcharts-tick {
+    stroke-width: 2px;
+}
+
+.highcharts-radial-axis .highcharts-minor-tick {
+    stroke-width: 1px;
+}
+
 .highcharts-minor-grid-line {
     stroke: var(--highcharts-neutral-color-5);
 }
@@ -296,12 +315,17 @@
     transition: stroke 150ms;
 }
 
+/* Invisible hit area for tooltip.stickOnContact, the stroke is the tolerance */
 .highcharts-tooltip .highcharts-tracker {
-    fill: none;
-    stroke: none;
+    fill: rgba(0, 0, 0, 0);
+    pointer-events: auto;
+    stroke: rgba(0, 0, 0, 0);
+    stroke-linejoin: round;
+    stroke-width: 10px;
 }
 
-.highcharts-tooltip text {
+.highcharts-tooltip text,
+.highcharts-tooltip foreignObject div:not(foreignObject > div) {
     fill: var(--highcharts-neutral-color-80);
     font-size: 0.8em;
 }
@@ -310,11 +334,6 @@
     font-size: 0.8em;
 }
 
-.highcharts-tooltip-box {
-    stroke-width: 1px;
-    fill: var(--highcharts-background-color);
-}
-
 .highcharts-tooltip-box {
     stroke-width: 0;
     fill: var(--highcharts-background-color);
@@ -384,6 +403,10 @@ g.highcharts-series,
     opacity: 0.2;
 }
 
+.highcharts-point-condemned {
+    opacity: 0;
+}
+
 /* Series options */
 
 /* Default colors */
@@ -462,6 +485,7 @@ g.highcharts-series,
 }
 
 .highcharts-data-label text,
+.highcharts-data-label div,
 text.highcharts-data-label {
     font-size: 0.7em;
     font-weight: bold;
@@ -507,11 +531,13 @@ text.highcharts-data-label {
     stroke: var(--highcharts-background-color);
 }
 
-.highcharts-column-series .highcharts-point {
+.highcharts-column-series .highcharts-point,
+.highcharts-bar-series .highcharts-point {
     transition: fill-opacity 250ms;
 }
 
-.highcharts-column-series .highcharts-point-hover {
+.highcharts-column-series .highcharts-point-hover,
+.highcharts-bar-series .highcharts-point-hover {
     fill-opacity: 0.75;
     transition: fill-opacity 50ms;
 }
@@ -617,9 +643,9 @@ text.highcharts-data-label {
     stroke-width: 0;
 }
 
-.highcharts-legend-item > text {
+.highcharts-legend-item > text,
+.highcharts-legend-item div {
     fill: var(--highcharts-neutral-color-80);
-    font-weight: bold;
     font-size: 0.8em;
     cursor: pointer;
     stroke-width: 0;
@@ -694,10 +720,12 @@ circle.highcharts-legend-nav-inactive { /* tracker */
 }
 
 /* Plot bands and polar pane backgrounds */
-.highcharts-plot-band,
 .highcharts-pane {
-    fill: var(--highcharts-neutral-color-100);
-    fill-opacity: 0.05;
+    fill: var(--highcharts-neutral-color-3);
+}
+
+.highcharts-plot-band {
+    fill: var(--highcharts-highlight-color-10);
 }
 
 .highcharts-plot-line {
@@ -727,9 +755,13 @@ circle.highcharts-legend-nav-inactive { /* tracker */
     stroke: var(--highcharts-neutral-color-100);
 }
 
-.highcharts-gauge-series .highcharts-data-label-box {
-    stroke: var(--highcharts-neutral-color-20);
-    stroke-width: 1px;
+.highcharts-gauge-series,
+.highcharts-solidgauge-series {
+    .highcharts-data-label text,
+    .highcharts-data-label div,
+    text.highcharts-data-label {
+        font-size: 1.4em;
+    }
 }
 
 .highcharts-gauge-series .highcharts-dial {
@@ -737,6 +769,14 @@ circle.highcharts-legend-nav-inactive { /* tracker */
     stroke-width: 0;
 }
 
+.highcharts-gauge-series .highcharts-pivot {
+    fill: var(--highcharts-background-color);
+}
+
+.highcharts-organization-series .highcharts-null-point {
+    fill: transparent;
+}
+
 .highcharts-polygon-series .highcharts-graph {
     fill: inherit;
     stroke-width: 0;
@@ -933,7 +973,7 @@ input.highcharts-range-selector {
 
 .highcharts-crosshair-label text {
     fill: var(--highcharts-background-color);
-    font-size: 1.7em;
+    font-size: 1em;
 }
 
 .highcharts-crosshair-label .highcharts-label-box {
@@ -949,11 +989,13 @@ input.highcharts-range-selector {
     fill: var(--highcharts-background-color);
 }
 
+.highcharts-renko-series .highcharts-point-down,
 .highcharts-hollowcandlestick-series .highcharts-point-down {
     fill: var(--highcharts-negative-color);
     stroke: var(--highcharts-negative-color);
 }
 
+.highcharts-renko-series .highcharts-point-up,
 .highcharts-hollowcandlestick-series .highcharts-point-down-bearish-up {
     fill: var(--highcharts-positive-color);
     stroke: var(--highcharts-positive-color);
@@ -1088,6 +1130,16 @@ input.highcharts-range-selector {
     background: var(--highcharts-neutral-color-5);
 }
 
+.highcharts-separator {
+    border: none;
+    background-color: var(--highcharts-neutral-color-40);
+    height: 0.5px;
+    margin: 10px 0;
+    padding: 0;
+    list-style-type: none;
+    pointer-events: none;
+}
+
 /* Breadcrumbs */
 .highcharts-breadcrumbs-button {
     fill: none;
@@ -1235,6 +1287,7 @@ text.highcharts-drilldown-data-label,
     margin: 0;
     display: block;
     position: absolute;
+    pointer-events: none;
 }
 
 .highcharts-a11y-proxy-group li {
@@ -1288,3 +1341,8 @@ g.highcharts-series,
     stroke: var(--highcharts-neutral-color-20);
     stroke-width: 1px;
 }
+
+.highcharts-gantt-series .highcharts-partfill-overlay {
+    fill: hsla(0, 0%, 0%, 0.3);
+    stroke: hsla(0, 0%, 0%, 0.3);
+}

package/css/stocktools/gui.css

@@ -42,7 +42,7 @@
 }
 
 .highcharts-button {
-    fill: var(--highcharts-neutral-color-3);
+    fill: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 .highcharts-stocktools-popup {
@@ -66,7 +66,7 @@
     z-index: 10;
     left: 0;
     top: 0;
-    background: #ffffff;
+    background: var(--highcharts-background-color, #ffffff);
     width: 40px;
 }
 
@@ -190,7 +190,8 @@
     height: 40px;
     cursor: pointer;
     position: relative;
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
+    transition: background-color 250ms;
 }
 
 .highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn {
@@ -202,7 +203,7 @@
 }
 
 .highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn.highcharts-active {
-    background: var(--highcharts-neutral-color-3);
+    background: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 .highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn .highcharts-menu-item-btn:hover {
@@ -225,6 +226,23 @@
     background-size: 32px 32px;
 }
 
+.highcharts-dark .highcharts-bindings-wrapper li > button.highcharts-menu-item-btn,
+.highcharts-dark .highcharts-bindings-wrapper li > button.highcharts-submenu-item-arrow {
+    filter: invert(1);
+}
+
+@media (prefers-color-scheme: dark) {
+    .highcharts-bindings-wrapper li > button.highcharts-menu-item-btn,
+    .highcharts-bindings-wrapper li > button.highcharts-submenu-item-arrow {
+        filter: invert(1);
+    }
+
+    .highcharts-light .highcharts-bindings-wrapper li > button.highcharts-menu-item-btn,
+    .highcharts-light .highcharts-bindings-wrapper li > button.highcharts-submenu-item-arrow {
+        filter: none;
+    }
+}
+
 .highcharts-submenu-wrapper li > button.highcharts-menu-item-btn {
     width: 40px;
 }
@@ -256,12 +274,11 @@
     width: 100%;
 }
 
-.highcharts-bindings-wrapper li.highcharts-active > button.highcharts-menu-item-btn,
-.highcharts-bindings-wrapper li > button.highcharts-menu-item-btn:hover,
-.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
 .highcharts-bindings-wrapper li.highcharts-active,
+.highcharts-bindings-wrapper li:hover,
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
 .highcharts-toggle-toolbar:hover {
-    background-color: var(--highcharts-neutral-color-10);
+    background-color: var(--highcharts-neutral-color-10, #e6e6e6);
     transition: background-color 100ms;
 }
 
@@ -270,7 +287,7 @@
     cursor: pointer;
     width: 10px;
     height: 10px;
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
     background-size: cover;
 }
 
@@ -280,7 +297,7 @@
 
 .highcharts-bindings-wrapper li:hover,
 .highcharts-submenu-item-arrow:hover {
-    background-color: var(--highcharts-button-hover-color);
+    background-color: var(--highcharts-neutral-color-20, #cccccc);
 }
 
 .highcharts-bindings-wrapper .highcharts-arrow-down,
@@ -292,5 +309,5 @@
 
 li.highcharts-disabled-btn:hover,
 .highcharts-disabled-btn .highcharts-submenu-item-arrow:hover {
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
 }

package/css/themes/dark-unica.css

@@ -28,7 +28,7 @@
     --highcharts-neutral-color-5: #505053;
     --highcharts-neutral-color-3: #303033;
 
-    /* Highlight colors https://jsfiddle.net/highcharts/pukradvh/ */
+    /* Highlight colors */
     --highcharts-highlight-color-100: rgb(166, 199, 237);
     --highcharts-highlight-color-80: rgb(134, 165, 201);
     --highcharts-highlight-color-60: rgb(102, 131, 164);
@@ -50,42 +50,9 @@
     font-size: 1.7em;
 }
 
-/* Tooltip */
-.highcharts-tooltip text {
-    fill: #f0f0f0;
-}
-
-.highcharts-tooltip-box {
-    fill: #000000;
-}
-
-/* Range-selector */
-.highcharts-range-selector-buttons text {
-    fill: silver;
-}
-
-/* Axes */
-.highcharts-yaxis-grid {
-    stroke-width: 1px;
-}
-
-.highcharts-axis-labels,
-.highcharts-axis-title {
-    fill: #e0e0e3;
-}
-
-/* Navigator */
-.highcharts-navigator .highcharts-navigator-handle {
-    fill: var(--highcharts-neutral-color-40);
-    stroke: #aaaaaa;
-}
-
-.highcharts-navigator .highcharts-navigator-outline {
-    stroke: #cccccc;
-}
-
-.highcharts-navigator .highcharts-navigator-xaxis .highcharts-grid-line {
-    stroke: var(--highcharts-neutral-color-5);
+/* Legend */
+.highcharts-legend-box {
+    fill: #00000388;
 }
 
 /* Buttons */
@@ -93,10 +60,6 @@
     fill: var(--highcharts-neutral-color-5);
 }
 
-.highcharts-button text {
-    fill: #cccccc;
-}
-
 .highcharts-button-hover {
     fill: var(--highcharts-neutral-color-10);
 }
@@ -113,31 +76,3 @@
 .highcharts-button-pressed text {
     fill: var(--highcharts-neutral-color-100);
 }
-
-/* Scrollbar */
-.highcharts-scrollbar .highcharts-scrollbar-rifles {
-    stroke: var(--highcharts-neutral-color-100);
-}
-
-.highcharts-scrollbar .highcharts-scrollbar-button {
-    stroke: #606063;
-    fill: #606063;
-}
-
-.highcharts-scrollbar .highcharts-scrollbar-arrow {
-    fill: #cccccc;
-}
-
-.highcharts-scrollbar .highcharts-scrollbar-thumb {
-    fill: #808083;
-    stroke: #808083;
-}
-
-/* Navigation */
-.highcharts-contextbutton {
-    fill: var(--highcharts-neutral-color-5);
-}
-
-.highcharts-contextbutton .highcharts-button-symbol {
-    stroke: #dddddd;
-}

package/css/themes/grid-light.css

@@ -32,18 +32,28 @@
 }
 
 .highcharts-axis-labels {
-    font-size: 1em;
+    font-size: 0.8em;
+}
+
+.highcharts-legend-box {
+    fill: var(--highcharts-neutral-color-5);
 }
 
 .highcharts-legend-item > text {
-    font-size: 1.1em;
+    font-size: 0.8em;
+    font-weight: bold;
 }
 
 .highcharts-xaxis-grid .highcharts-grid-line {
     stroke-width: 1px;
 }
 
-.highcharts-tooltip-box {
+.highcharts-tooltip-box,
+.highcharts-tooltip-box .highcharts-label-box {
     stroke-width: 0;
-    fill: rgb(219, 219, 216);
+    fill: var(--highcharts-neutral-color-80);
+}
+
+.highcharts-tooltip text {
+    fill: var(--highcharts-background-color);
 }

package/css/themes/sand-signika.css

@@ -3,8 +3,6 @@
 @import url("../highcharts.css");
 
 :root {
-    --highcharts-background-color: none;
-
     /* Colors for data series and points. */
     --highcharts-color-0: #f45b5b;
     --highcharts-color-1: #8085e9;
@@ -24,57 +22,46 @@
     font-family: Signika, arial, helvetica, sans-serif;
 }
 
+.highcharts-background {
+    fill: light-dark(transparent, var(--highcharts-background-color));
+}
+
 .highcharts-axis-labels {
-    font-size: 1em;
+    font-size: 0.8em;
 }
 
-.highcharts-tooltip-box {
+.highcharts-tooltip-box,
+.highcharts-tooltip-box .highcharts-label-box {
     stroke-width: 0;
-    fill: #ffffff;
+    fill: var(--highcharts-neutral-color-80);
 }
 
-.highcharts-legend-item > text {
-    font-size: 1.1em;
+.highcharts-tooltip text {
+    fill: var(--highcharts-background-color);
 }
 
-/* Boxplot */
-.highcharts-boxplot-box {
-    fill: #505053;
+.highcharts-legend-box {
+    fill: var(--highcharts-neutral-color-10);
 }
 
-/* Navigator */
-.highcharts-navigator-xaxis .highcharts-grid-line {
-    stroke: #d0d0d8;
+.highcharts-legend-item > text {
+    font-size: 0.8em;
 }
 
+/* Navigator */
 .highcharts-navigator-series {
     fill: var(--highcharts-color-0);
     stroke: var(--highcharts-color-0);
 }
 
-/* Scrollbar */
-.highcharts-scrollbar-track {
-    stroke: #c0c0c8;
-    fill: #f2f2f2;
-}
-
 /* Title */
 .highcharts-title {
     font-weight: bold;
 }
 
 /* Buttons */
-.highcharts-button {
-    fill: #ffffff;
-    stroke: #c0c0c8;
-}
-
-.highcharts-button text {
-    fill: #000000;
-}
-
 .highcharts-button-pressed {
-    fill: #d0d0d8;
+    fill: var(--highcharts-neutral-color-10);
 }
 
 .highcharts-button-box {

package/es-modules/Core/Chart/Chart.js

@@ -1768,6 +1768,12 @@ class Chart {
     addCredits(credits) {
         const chart = this, creds = merge(true, this.options.credits, credits);
         if (creds.enabled && !this.credits) {
+            // Run the user-supplied URL through the allow list, so that
+            // references like `javascript:` can't be executed from the
+            // credits label
+            const href = creds.href ?
+                AST.filterUserAttributes({ href: creds.href }).href :
+                void 0;
             /**
              * The chart's credits label. The label has an `update` method that
              * allows setting new options as per the
@@ -1779,8 +1785,8 @@ class Chart {
             this.credits = this.renderer.text(creds.text + (this.mapCredits || ''), 0, 0)
                 .addClass('highcharts-credits')
                 .on('click', function () {
-                if (creds.href) {
-                    win.location.href = creds.href;
+                if (href) {
+                    win.location.href = href;
                 }
             })
                 .attr({