Hacked By AnonymousFox
/**
* @license Highcharts JS v12.1.2 (2025-01-09)
* @module highcharts/highcharts
*
* (c) 2009-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("highcharts/highcharts", [], factory);
else if(typeof exports === 'object')
exports["highcharts"] = factory();
else
((root["Highcharts"] && root["Highcharts"].error(16, true)), root["Highcharts"] = factory());
})(this, function() {
return /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ highmaps_src; }
});
;// ./code/es5/es-modules/Core/Globals.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Namespace
*
* */
/**
* Shared Highcharts properties.
* @private
*/
var Globals;
(function (Globals) {
/* *
*
* Constants
*
* */
var _a,
_b;
Globals.SVG_NS = 'http://www.w3.org/2000/svg', Globals.product = 'Highcharts', Globals.version = '12.1.2', Globals.win = (typeof window !== 'undefined' ?
window :
{}), // eslint-disable-line node/no-unsupported-features/es-builtins
Globals.doc = Globals.win.document, Globals.svg = (Globals.doc &&
Globals.doc.createElementNS &&
!!Globals.doc.createElementNS(Globals.SVG_NS, 'svg').createSVGRect), Globals.pageLang = (_b = (_a = Globals.doc === null || Globals.doc === void 0 ? void 0 : Globals.doc.documentElement) === null || _a === void 0 ? void 0 : _a.closest('[lang]')) === null || _b === void 0 ? void 0 : _b.lang, Globals.userAgent = (Globals.win.navigator && Globals.win.navigator.userAgent) || '', Globals.isChrome = Globals.win.chrome, Globals.isFirefox = Globals.userAgent.indexOf('Firefox') !== -1, Globals.isMS = /(edge|msie|trident)/i.test(Globals.userAgent) && !Globals.win.opera, Globals.isSafari = !Globals.isChrome && Globals.userAgent.indexOf('Safari') !== -1, Globals.isTouchDevice = /(Mobile|Android|Windows Phone)/.test(Globals.userAgent), Globals.isWebKit = Globals.userAgent.indexOf('AppleWebKit') !== -1, Globals.deg2rad = Math.PI * 2 / 360, Globals.marginNames = [
'plotTop',
'marginRight',
'marginBottom',
'plotLeft'
], Globals.noop = function () { }, Globals.supportsPassiveEvents = (function () {
// Checks whether the browser supports passive events, (#11353).
var supportsPassive = false;
// Object.defineProperty doesn't work on IE as well as passive
// events - instead of using polyfill, we can exclude IE totally.
if (!Globals.isMS) {
var opts = Object.defineProperty({}, 'passive', {
get: function () {
supportsPassive = true;
}
});
if (Globals.win.addEventListener && Globals.win.removeEventListener) {
Globals.win.addEventListener('testPassive', Globals.noop, opts);
Globals.win.removeEventListener('testPassive', Globals.noop, opts);
}
}
return supportsPassive;
}());
/**
* An array containing the current chart objects in the page. A chart's
* position in the array is preserved throughout the page's lifetime. When
* a chart is destroyed, the array item becomes `undefined`.
*
* @name Highcharts.charts
* @type {Array<Highcharts.Chart|undefined>}
*/
Globals.charts = [];
/**
* A shared registry between all bundles to keep track of applied
* compositions.
* @private
*/
Globals.composed = [];
/**
* A hook for defining additional date format specifiers. New
* specifiers are defined as key-value pairs by using the
* specifier as key, and a function which takes the timestamp as
* value. This function returns the formatted portion of the
* date.
*
* Using `dateFormats` is also a convenient way to define new keys for
* complex locale-aware date formats compatible with the
* [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
* browser API, whenever the built-in formats are not sufficient.
*
* @sample highcharts/global/dateformats/
* Adding support for week number
* @sample highcharts/global/dateformats-object/
* A locale-aware date format using `Intl.DateTimeFormat`
*
* @name Highcharts.dateFormats
* @type {Record<string, Highcharts.TimeFormatCallbackFunction>}
*/
Globals.dateFormats = {};
/**
* @private
* @deprecated
* @todo Use only `Core/Series/SeriesRegistry.seriesTypes`
*/
Globals.seriesTypes = {};
/**
* @private
*/
Globals.symbolSizes = {};
/* *
*
* Properties
*
* */
// eslint-disable-next-line prefer-const
Globals.chartCount = 0;
})(Globals || (Globals = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Core_Globals = (Globals);
/* *
*
* API Declarations
*
* */
/**
* Theme options that should get applied to the chart. In module mode it
* might not be possible to change this property because of read-only
* restrictions, instead use {@link Highcharts.setOptions}.
*
* @deprecated
* @name Highcharts.theme
* @type {Highcharts.Options}
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Utilities.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var charts = Core_Globals.charts, doc = Core_Globals.doc, win = Core_Globals.win;
/* *
*
* Functions
*
* */
/**
* Provide error messages for debugging, with links to online explanation. This
* function can be overridden to provide custom error handling.
*
* @sample highcharts/chart/highcharts-error/
* Custom error handler
*
* @function Highcharts.error
*
* @param {number|string} code
* The error code. See
* [errors.xml](https://github.com/highcharts/highcharts/blob/master/errors/errors.xml)
* for available codes. If it is a string, the error message is printed
* directly in the console.
*
* @param {boolean} [stop=false]
* Whether to throw an error or just log a warning in the console.
*
* @param {Highcharts.Chart} [chart]
* Reference to the chart that causes the error. Used in 'debugger'
* module to display errors directly on the chart.
* Important note: This argument is undefined for errors that lack
* access to the Chart instance. In such case, the error will be
* displayed on the last created chart.
*
* @param {Highcharts.Dictionary<string>} [params]
* Additional parameters for the generated message.
*
* @return {void}
*/
function error(code, stop, chart, params) {
var severity = stop ? 'Highcharts error' : 'Highcharts warning';
if (code === 32) {
code = "" + severity + ": Deprecated member";
}
var isCode = isNumber(code);
var message = isCode ?
"" + severity + " #" + code + ": www.highcharts.com/errors/" + code + "/" :
code.toString();
var defaultHandler = function () {
if (stop) {
throw new Error(message);
}
// Else ...
if (win.console &&
error.messages.indexOf(message) === -1 // Prevent console flooting
) {
console.warn(message); // eslint-disable-line no-console
}
};
if (typeof params !== 'undefined') {
var additionalMessages_1 = '';
if (isCode) {
message += '?';
}
objectEach(params, function (value, key) {
additionalMessages_1 += "\n - ".concat(key, ": ").concat(value);
if (isCode) {
message += encodeURI(key) + '=' + encodeURI(value);
}
});
message += additionalMessages_1;
}
fireEvent(Core_Globals, 'displayError', { chart: chart, code: code, message: message, params: params }, defaultHandler);
error.messages.push(message);
}
(function (error) {
error.messages = [];
})(error || (error = {}));
/**
* Utility function to deep merge two or more objects and return a third object.
* If the first argument is true, the contents of the second object is copied
* into the first object. The merge function can also be used with a single
* object argument to create a deep copy of an object.
*
* @function Highcharts.merge<T>
*
* @param {true | T} extendOrSource
* Whether to extend the left-side object,
* or the first object to merge as a deep copy.
*
* @param {...Array<object|undefined>} [sources]
* Object(s) to merge into the previous one.
*
* @return {T}
* The merged object. If the first argument is true, the return is the
* same as the second argument.
*/
function merge(extendOrSource) {
var sources = [];
for (var _a = 1; _a < arguments.length; _a++) {
sources[_a - 1] = arguments[_a];
}
var i,
args = __spreadArray([extendOrSource],
sources,
true),
ret = {};
var doCopy = function (copy,
original) {
// An object is replacing a primitive
if (typeof copy !== 'object') {
copy = {};
}
objectEach(original, function (value, key) {
// Prototype pollution (#14883)
if (key === '__proto__' || key === 'constructor') {
return;
}
// Copy the contents of objects, but not arrays or DOM nodes
if (isObject(value, true) &&
!isClass(value) &&
!isDOMElement(value)) {
copy[key] = doCopy(copy[key] || {}, value);
// Primitives and arrays are copied over directly
}
else {
copy[key] = original[key];
}
});
return copy;
};
// If first argument is true, copy into the existing object. Used in
// setOptions.
if (extendOrSource === true) {
ret = args[1];
args = Array.prototype.slice.call(args, 2);
}
// For each argument, extend the return
var len = args.length;
for (i = 0; i < len; i++) {
ret = doCopy(ret, args[i]);
}
return ret;
}
/**
* Constrain a value to within a lower and upper threshold.
*
* @private
* @param {number} value The initial value
* @param {number} min The lower threshold
* @param {number} max The upper threshold
* @return {number} Returns a number value within min and max.
*/
function clamp(value, min, max) {
return value > min ? value < max ? value : max : min;
}
/**
* Utility for crisping a line position to the nearest full pixel depening on
* the line width
* @param {number} value The raw pixel position
* @param {number} lineWidth The line width
* @param {boolean} [inverted] Whether the containing group is inverted.
* Crisping round numbers on the y-scale need to go
* to the other side because the coordinate system
* is flipped (scaleY is -1)
* @return {number} The pixel position to use for a crisp display
*/
function crisp(value, lineWidth, inverted) {
if (lineWidth === void 0) { lineWidth = 0; }
var mod = lineWidth % 2 / 2,
inverter = inverted ? -1 : 1;
return (Math.round(value * inverter - mod) + mod) * inverter;
}
// eslint-disable-next-line valid-jsdoc
/**
* Return the deep difference between two objects. It can either return the new
* properties, or optionally return the old values of new properties.
* @private
*/
function diffObjects(newer, older, keepOlder, collectionsWithUpdate) {
var ret = {};
/**
* Recurse over a set of options and its current values, and store the
* current values in the ret object.
*/
function diff(newer, older, ret, depth) {
var keeper = keepOlder ? older : newer;
objectEach(newer, function (newerVal, key) {
if (!depth &&
collectionsWithUpdate &&
collectionsWithUpdate.indexOf(key) > -1 &&
older[key]) {
newerVal = splat(newerVal);
ret[key] = [];
// Iterate over collections like series, xAxis or yAxis and map
// the items by index.
for (var i = 0; i < Math.max(newerVal.length, older[key].length); i++) {
// Item exists in current data (#6347)
if (older[key][i]) {
// If the item is missing from the new data, we need to
// save the whole config structure. Like when
// responsively updating from a dual axis layout to a
// single axis and back (#13544).
if (newerVal[i] === void 0) {
ret[key][i] = older[key][i];
// Otherwise, proceed
}
else {
ret[key][i] = {};
diff(newerVal[i], older[key][i], ret[key][i], depth + 1);
}
}
}
}
else if (isObject(newerVal, true) &&
!newerVal.nodeType // #10044
) {
ret[key] = isArray(newerVal) ? [] : {};
diff(newerVal, older[key] || {}, ret[key], depth + 1);
// Delete empty nested objects
if (Object.keys(ret[key]).length === 0 &&
// Except colorAxis which is a special case where the empty
// object means it is enabled. Which is unfortunate and we
// should try to find a better way.
!(key === 'colorAxis' && depth === 0)) {
delete ret[key];
}
}
else if (newer[key] !== older[key] ||
// If the newer key is explicitly undefined, keep it (#10525)
(key in newer && !(key in older))) {
if (key !== '__proto__' && key !== 'constructor') {
ret[key] = keeper[key];
}
}
});
}
diff(newer, older, ret, 0);
return ret;
}
/**
* Shortcut for parseInt
*
* @private
* @function Highcharts.pInt
*
* @param {*} s
* any
*
* @param {number} [mag]
* Magnitude
*
* @return {number}
* number
*/
function pInt(s, mag) {
return parseInt(s, mag || 10);
}
/**
* Utility function to check for string type.
*
* @function Highcharts.isString
*
* @param {*} s
* The item to check.
*
* @return {boolean}
* True if the argument is a string.
*/
function isString(s) {
return typeof s === 'string';
}
/**
* Utility function to check if an item is an array.
*
* @function Highcharts.isArray
*
* @param {*} obj
* The item to check.
*
* @return {boolean}
* True if the argument is an array.
*/
function isArray(obj) {
var str = Object.prototype.toString.call(obj);
return str === '[object Array]' || str === '[object Array Iterator]';
}
/**
* Utility function to check if an item is of type object.
*
* @function Highcharts.isObject
*
* @param {*} obj
* The item to check.
*
* @param {boolean} [strict=false]
* Also checks that the object is not an array.
*
* @return {boolean}
* True if the argument is an object.
*/
function isObject(obj, strict) {
return (!!obj &&
typeof obj === 'object' &&
(!strict || !isArray(obj))); // eslint-disable-line @typescript-eslint/no-explicit-any
}
/**
* Utility function to check if an Object is a HTML Element.
*
* @function Highcharts.isDOMElement
*
* @param {*} obj
* The item to check.
*
* @return {boolean}
* True if the argument is a HTML Element.
*/
function isDOMElement(obj) {
return isObject(obj) && typeof obj.nodeType === 'number';
}
/**
* Utility function to check if an Object is a class.
*
* @function Highcharts.isClass
*
* @param {object|undefined} obj
* The item to check.
*
* @return {boolean}
* True if the argument is a class.
*/
function isClass(obj) {
var c = obj && obj.constructor;
return !!(isObject(obj, true) &&
!isDOMElement(obj) &&
(c && c.name && c.name !== 'Object'));
}
/**
* Utility function to check if an item is a number and it is finite (not NaN,
* Infinity or -Infinity).
*
* @function Highcharts.isNumber
*
* @param {*} n
* The item to check.
*
* @return {boolean}
* True if the item is a finite number
*/
function isNumber(n) {
return typeof n === 'number' && !isNaN(n) && n < Infinity && n > -Infinity;
}
/**
* Remove the last occurence of an item from an array.
*
* @function Highcharts.erase
*
* @param {Array<*>} arr
* The array.
*
* @param {*} item
* The item to remove.
*
* @return {void}
*/
function erase(arr, item) {
var i = arr.length;
while (i--) {
if (arr[i] === item) {
arr.splice(i, 1);
break;
}
}
}
/**
* Insert a series or an axis in a collection with other items, either the
* chart series or yAxis series or axis collections, in the correct order
* according to the index option and whether it is internal. Used internally
* when adding series and axes.
*
* @private
* @function Highcharts.Chart#insertItem
* @param {Highcharts.Series|Highcharts.Axis} item
* The item to insert
* @param {Array<Highcharts.Series>|Array<Highcharts.Axis>} collection
* A collection of items, like `chart.series` or `xAxis.series`.
* @return {number} The index of the series in the collection.
*/
function insertItem(item, collection) {
var indexOption = item.options.index,
length = collection.length;
var i;
for (
// Internal item (navigator) should always be pushed to the end
i = item.options.isInternal ? length : 0; i < length + 1; i++) {
if (
// No index option, reached the end of the collection,
// equivalent to pushing
!collection[i] ||
// Handle index option, the element to insert has lower index
(isNumber(indexOption) &&
indexOption < pick(collection[i].options.index, collection[i]._i)) ||
// Insert the new item before other internal items
// (navigator)
collection[i].options.isInternal) {
collection.splice(i, 0, item);
break;
}
}
return i;
}
/**
* Adds an item to an array, if it is not present in the array.
*
* @function Highcharts.pushUnique
*
* @param {Array<unknown>} array
* The array to add the item to.
*
* @param {unknown} item
* The item to add.
*
* @return {boolean}
* Returns true, if the item was not present and has been added.
*/
function pushUnique(array, item) {
return array.indexOf(item) < 0 && !!array.push(item);
}
/**
* Check if an object is null or undefined.
*
* @function Highcharts.defined
*
* @param {*} obj
* The object to check.
*
* @return {boolean}
* False if the object is null or undefined, otherwise true.
*/
function defined(obj) {
return typeof obj !== 'undefined' && obj !== null;
}
/**
* Set or get an attribute or an object of attributes.
*
* To use as a setter, pass a key and a value, or let the second argument be a
* collection of keys and values. When using a collection, passing a value of
* `null` or `undefined` will remove the attribute.
*
* To use as a getter, pass only a string as the second argument.
*
* @function Highcharts.attr
*
* @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} elem
* The DOM element to receive the attribute(s).
*
* @param {string|Highcharts.HTMLAttributes|Highcharts.SVGAttributes} [keyOrAttribs]
* The property or an object of key-value pairs.
*
* @param {number|string} [value]
* The value if a single property is set.
*
* @return {string|null|undefined}
* When used as a getter, return the value.
*/
function attr(elem, keyOrAttribs, value) {
var isGetter = isString(keyOrAttribs) && !defined(value);
var ret;
var attrSingle = function (value,
key) {
// Set the value
if (defined(value)) {
elem.setAttribute(key,
value);
// Get the value
}
else if (isGetter) {
ret = elem.getAttribute(key);
// IE7 and below cannot get class through getAttribute (#7850)
if (!ret && key === 'class') {
ret = elem.getAttribute(key + 'Name');
}
// Remove the value
}
else {
elem.removeAttribute(key);
}
};
// If keyOrAttribs is a string
if (isString(keyOrAttribs)) {
attrSingle(value, keyOrAttribs);
// Else if keyOrAttribs is defined, it is a hash of key/value pairs
}
else {
objectEach(keyOrAttribs, attrSingle);
}
return ret;
}
/**
* Check if an element is an array, and if not, make it into an array.
*
* @function Highcharts.splat
*
* @param {*} obj
* The object to splat.
*
* @return {Array}
* The produced or original array.
*/
function splat(obj) {
return isArray(obj) ? obj : [obj];
}
/**
* Set a timeout if the delay is given, otherwise perform the function
* synchronously.
*
* @function Highcharts.syncTimeout
*
* @param {Function} fn
* The function callback.
*
* @param {number} delay
* Delay in milliseconds.
*
* @param {*} [context]
* An optional context to send to the function callback.
*
* @return {number}
* An identifier for the timeout that can later be cleared with
* Highcharts.clearTimeout. Returns -1 if there is no timeout.
*/
function syncTimeout(fn, delay, context) {
if (delay > 0) {
return setTimeout(fn, delay, context);
}
fn.call(0, context);
return -1;
}
/**
* Internal clear timeout. The function checks that the `id` was not removed
* (e.g. by `chart.destroy()`). For the details see
* [issue #7901](https://github.com/highcharts/highcharts/issues/7901).
*
* @function Highcharts.clearTimeout
*
* @param {number|undefined} id
* Id of a timeout.
*/
function internalClearTimeout(id) {
if (defined(id)) {
clearTimeout(id);
}
}
/* eslint-disable valid-jsdoc */
/**
* Utility function to extend an object with the members of another.
*
* @function Highcharts.extend<T>
*
* @param {T|undefined} a
* The object to be extended.
*
* @param {Partial<T>} b
* The object to add to the first one.
*
* @return {T}
* Object a, the original object.
*/
function extend(a, b) {
/* eslint-enable valid-jsdoc */
var n;
if (!a) {
a = {};
}
for (n in b) { // eslint-disable-line guard-for-in
a[n] = b[n];
}
return a;
}
/* eslint-disable valid-jsdoc */
/**
* Return the first value that is not null or undefined.
*
* @function Highcharts.pick<T>
*
* @param {...Array<T|null|undefined>} items
* Variable number of arguments to inspect.
*
* @return {T}
* The value of the first argument that is not null or undefined.
*/
function pick() {
var args = arguments;
var length = args.length;
for (var i = 0; i < length; i++) {
var arg = args[i];
if (typeof arg !== 'undefined' && arg !== null) {
return arg;
}
}
}
/**
* Set CSS on a given element.
*
* @function Highcharts.css
*
* @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} el
* An HTML DOM element.
*
* @param {Highcharts.CSSObject} styles
* Style object with camel case property names.
*
* @return {void}
*/
function css(el, styles) {
extend(el.style, styles);
}
/**
* Utility function to create an HTML element with attributes and styles.
*
* @function Highcharts.createElement
*
* @param {string} tag
* The HTML tag.
*
* @param {Highcharts.HTMLAttributes} [attribs]
* Attributes as an object of key-value pairs.
*
* @param {Highcharts.CSSObject} [styles]
* Styles as an object of key-value pairs.
*
* @param {Highcharts.HTMLDOMElement} [parent]
* The parent HTML object.
*
* @param {boolean} [nopad=false]
* If true, remove all padding, border and margin.
*
* @return {Highcharts.HTMLDOMElement}
* The created DOM element.
*/
function createElement(tag, attribs, styles, parent, nopad) {
var el = doc.createElement(tag);
if (attribs) {
extend(el, attribs);
}
if (nopad) {
css(el, { padding: '0', border: 'none', margin: '0' });
}
if (styles) {
css(el, styles);
}
if (parent) {
parent.appendChild(el);
}
return el;
}
// eslint-disable-next-line valid-jsdoc
/**
* Extend a prototyped class by new members.
*
* @deprecated
* @function Highcharts.extendClass<T>
*
* @param {Highcharts.Class<T>} parent
* The parent prototype to inherit.
*
* @param {Highcharts.Dictionary<*>} members
* A collection of prototype members to add or override compared to the
* parent prototype.
*
* @return {Highcharts.Class<T>}
* A new prototype.
*/
function extendClass(parent, members) {
var obj = (function () { });
obj.prototype = new parent(); // eslint-disable-line new-cap
extend(obj.prototype, members);
return obj;
}
/**
* Left-pad a string to a given length by adding a character repetitively.
*
* @function Highcharts.pad
*
* @param {number} number
* The input string or number.
*
* @param {number} [length]
* The desired string length.
*
* @param {string} [padder=0]
* The character to pad with.
*
* @return {string}
* The padded string.
*/
function pad(number, length, padder) {
return new Array((length || 2) +
1 -
String(number)
.replace('-', '')
.length).join(padder || '0') + number;
}
/**
* Return a length based on either the integer value, or a percentage of a base.
*
* @function Highcharts.relativeLength
*
* @param {Highcharts.RelativeSize} value
* A percentage string or a number.
*
* @param {number} base
* The full length that represents 100%.
*
* @param {number} [offset=0]
* A pixel offset to apply for percentage values. Used internally in
* axis positioning.
*
* @return {number}
* The computed length.
*/
function relativeLength(value, base, offset) {
return (/%$/).test(value) ?
(base * parseFloat(value) / 100) + (offset || 0) :
parseFloat(value);
}
/**
* Replaces text in a string with a given replacement in a loop to catch nested
* matches after previous replacements.
*
* @function Highcharts.replaceNested
*
* @param {string} text
* Text to search and modify.
*
* @param {...Array<(RegExp|string)>} replacements
* One or multiple tuples with search pattern (`[0]: (string|RegExp)`) and
* replacement (`[1]: string`) for matching text.
*
* @return {string}
* Text with replacements.
*/
function replaceNested(text) {
var replacements = [];
for (var _a = 1; _a < arguments.length; _a++) {
replacements[_a - 1] = arguments[_a];
}
var previous,
replacement;
do {
previous = text;
for (var _b = 0, replacements_1 = replacements; _b < replacements_1.length; _b++) {
replacement = replacements_1[_b];
text = text.replace(replacement[0], replacement[1]);
}
} while (text !== previous);
return text;
}
/**
* Wrap a method with extended functionality, preserving the original function.
*
* @function Highcharts.wrap
*
* @param {*} obj
* The context object that the method belongs to. In real cases, this is
* often a prototype.
*
* @param {string} method
* The name of the method to extend.
*
* @param {Highcharts.WrapProceedFunction} func
* A wrapper function callback. This function is called with the same
* arguments as the original function, except that the original function
* is unshifted and passed as the first argument.
*/
function wrap(obj, method, func) {
var proceed = obj[method];
obj[method] = function () {
var outerArgs = arguments,
scope = this;
return func.apply(this, [
function () {
return proceed.apply(scope, arguments.length ? arguments : outerArgs);
}
].concat([].slice.call(arguments)));
};
}
/**
* Get the magnitude of a number.
*
* @function Highcharts.getMagnitude
*
* @param {number} num
* The number.
*
* @return {number}
* The magnitude, where 1-9 are magnitude 1, 10-99 magnitude 2 etc.
*/
function getMagnitude(num) {
return Math.pow(10, Math.floor(Math.log(num) / Math.LN10));
}
/**
* Take an interval and normalize it to multiples of round numbers.
*
* @deprecated
* @function Highcharts.normalizeTickInterval
*
* @param {number} interval
* The raw, un-rounded interval.
*
* @param {Array<*>} [multiples]
* Allowed multiples.
*
* @param {number} [magnitude]
* The magnitude of the number.
*
* @param {boolean} [allowDecimals]
* Whether to allow decimals.
*
* @param {boolean} [hasTickAmount]
* If it has tickAmount, avoid landing on tick intervals lower than
* original.
*
* @return {number}
* The normalized interval.
*
* @todo
* Move this function to the Axis prototype. It is here only for historical
* reasons.
*/
function normalizeTickInterval(interval, multiples, magnitude, allowDecimals, hasTickAmount) {
var i,
retInterval = interval;
// Round to a tenfold of 1, 2, 2.5 or 5
magnitude = pick(magnitude, getMagnitude(interval));
var normalized = interval / magnitude;
// Multiples for a linear scale
if (!multiples) {
multiples = hasTickAmount ?
// Finer grained ticks when the tick amount is hard set, including
// when alignTicks is true on multiple axes (#4580).
[1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10] :
// Else, let ticks fall on rounder numbers
[1, 2, 2.5, 5, 10];
// The allowDecimals option
if (allowDecimals === false) {
if (magnitude === 1) {
multiples = multiples.filter(function (num) {
return num % 1 === 0;
});
}
else if (magnitude <= 0.1) {
multiples = [1 / magnitude];
}
}
}
// Normalize the interval to the nearest multiple
for (i = 0; i < multiples.length; i++) {
retInterval = multiples[i];
// Only allow tick amounts smaller than natural
if ((hasTickAmount &&
retInterval * magnitude >= interval) ||
(!hasTickAmount &&
(normalized <=
(multiples[i] +
(multiples[i + 1] || multiples[i])) / 2))) {
break;
}
}
// Multiply back to the correct magnitude. Correct floats to appropriate
// precision (#6085).
retInterval = correctFloat(retInterval * magnitude, -Math.round(Math.log(0.001) / Math.LN10));
return retInterval;
}
/**
* Sort an object array and keep the order of equal items. The ECMAScript
* standard does not specify the behaviour when items are equal.
*
* @function Highcharts.stableSort
*
* @param {Array<*>} arr
* The array to sort.
*
* @param {Function} sortFunction
* The function to sort it with, like with regular Array.prototype.sort.
*/
function stableSort(arr, sortFunction) {
// @todo It seems like Chrome since v70 sorts in a stable way internally,
// plus all other browsers do it, so over time we may be able to remove this
// function
var length = arr.length;
var sortValue,
i;
// Add index to each item
for (i = 0; i < length; i++) {
arr[i].safeI = i; // Stable sort index
}
arr.sort(function (a, b) {
sortValue = sortFunction(a, b);
return sortValue === 0 ? a.safeI - b.safeI : sortValue;
});
// Remove index from items
for (i = 0; i < length; i++) {
delete arr[i].safeI; // Stable sort index
}
}
/**
* Non-recursive method to find the lowest member of an array. `Math.min` raises
* a maximum call stack size exceeded error in Chrome when trying to apply more
* than 150.000 points. This method is slightly slower, but safe.
*
* @function Highcharts.arrayMin
*
* @param {Array<*>} data
* An array of numbers.
*
* @return {number}
* The lowest number.
*/
function arrayMin(data) {
var i = data.length,
min = data[0];
while (i--) {
if (data[i] < min) {
min = data[i];
}
}
return min;
}
/**
* Non-recursive method to find the lowest member of an array. `Math.max` raises
* a maximum call stack size exceeded error in Chrome when trying to apply more
* than 150.000 points. This method is slightly slower, but safe.
*
* @function Highcharts.arrayMax
*
* @param {Array<*>} data
* An array of numbers.
*
* @return {number}
* The highest number.
*/
function arrayMax(data) {
var i = data.length,
max = data[0];
while (i--) {
if (data[i] > max) {
max = data[i];
}
}
return max;
}
/**
* Utility method that destroys any SVGElement instances that are properties on
* the given object. It loops all properties and invokes destroy if there is a
* destroy method. The property is then delete.
*
* @function Highcharts.destroyObjectProperties
*
* @param {*} obj
* The object to destroy properties on.
*
* @param {*} [except]
* Exception, do not destroy this property, only delete it.
*/
function destroyObjectProperties(obj, except, destructablesOnly) {
objectEach(obj, function (val, n) {
// If the object is non-null and destroy is defined
if (val !== except && (val === null || val === void 0 ? void 0 : val.destroy)) {
// Invoke the destroy
val.destroy();
}
// Delete the property from the object
if ((val === null || val === void 0 ? void 0 : val.destroy) || !destructablesOnly) {
delete obj[n];
}
});
}
/**
* Discard a HTML element
*
* @function Highcharts.discardElement
*
* @param {Highcharts.HTMLDOMElement} element
* The HTML node to discard.
*/
function discardElement(element) {
if (element && element.parentElement) {
element.parentElement.removeChild(element);
}
}
/**
* Fix JS round off float errors.
*
* @function Highcharts.correctFloat
*
* @param {number} num
* A float number to fix.
*
* @param {number} [prec=14]
* The precision.
*
* @return {number}
* The corrected float number.
*/
function correctFloat(num, prec) {
// When the number is higher than 1e14 use the number (#16275)
return num > 1e14 ? num : parseFloat(num.toPrecision(prec || 14));
}
/**
* The time unit lookup
*
* @ignore
*/
var timeUnits = {
millisecond: 1,
second: 1000,
minute: 60000,
hour: 3600000,
day: 24 * 3600000,
week: 7 * 24 * 3600000,
month: 28 * 24 * 3600000,
year: 364 * 24 * 3600000
};
/**
* Easing definition
*
* @private
* @function Math.easeInOutSine
*
* @param {number} pos
* Current position, ranging from 0 to 1.
*
* @return {number}
* Ease result
*/
Math.easeInOutSine = function (pos) {
return -0.5 * (Math.cos(Math.PI * pos) - 1);
};
/**
* Convenience function to get the align factor, used several places for
* computing positions
* @private
*/
var getAlignFactor = function (align) {
if (align === void 0) { align = ''; }
return ({
center: 0.5,
right: 1,
middle: 0.5,
bottom: 1
}[align] || 0);
};
/**
* Find the closest distance between two values of a two-dimensional array
* @private
* @function Highcharts.getClosestDistance
*
* @param {Array<Array<number>>} arrays
* An array of arrays of numbers
*
* @return {number | undefined}
* The closest distance between values
*/
function getClosestDistance(arrays, onError) {
var allowNegative = !onError;
var closest,
loopLength,
distance,
i;
arrays.forEach(function (xData) {
if (xData.length > 1) {
loopLength = xData.length - 1;
for (i = loopLength; i > 0; i--) {
distance = xData[i] - xData[i - 1];
if (distance < 0 && !allowNegative) {
onError === null || onError === void 0 ? void 0 : onError();
// Only one call
onError = void 0;
}
else if (distance && (typeof closest === 'undefined' || distance < closest)) {
closest = distance;
}
}
}
});
return closest;
}
/**
* Returns the value of a property path on a given object.
*
* @private
* @function getNestedProperty
*
* @param {string} path
* Path to the property, for example `custom.myValue`.
*
* @param {unknown} obj
* Instance containing the property on the specific path.
*
* @return {unknown}
* The unknown property value.
*/
function getNestedProperty(path, parent) {
var pathElements = path.split('.');
while (pathElements.length && defined(parent)) {
var pathElement = pathElements.shift();
// Filter on the key
if (typeof pathElement === 'undefined' ||
pathElement === '__proto__') {
return; // Undefined
}
if (pathElement === 'this') {
var thisProp = void 0;
if (isObject(parent)) {
thisProp = parent['@this'];
}
return thisProp !== null && thisProp !== void 0 ? thisProp : parent;
}
var child = parent[pathElement.replace(/[\\'"]/g, '')];
// Filter on the child
if (!defined(child) ||
typeof child === 'function' ||
typeof child.nodeType === 'number' ||
child === win) {
return; // Undefined
}
// Else, proceed
parent = child;
}
return parent;
}
/**
* Get the computed CSS value for given element and property, only for numerical
* properties. For width and height, the dimension of the inner box (excluding
* padding) is returned. Used for fitting the chart within the container.
*
* @function Highcharts.getStyle
*
* @param {Highcharts.HTMLDOMElement} el
* An HTML element.
*
* @param {string} prop
* The property name.
*
* @param {boolean} [toInt=true]
* Parse to integer.
*
* @return {number|string|undefined}
* The style value.
*/
function getStyle(el, prop, toInt) {
var style;
// For width and height, return the actual inner pixel size (#4913)
if (prop === 'width') {
var offsetWidth = Math.min(el.offsetWidth,
el.scrollWidth);
// In flex boxes, we need to use getBoundingClientRect and floor it,
// because scrollWidth doesn't support subpixel precision (#6427) ...
var boundingClientRectWidth = el.getBoundingClientRect &&
el.getBoundingClientRect().width;
// ...unless if the containing div or its parents are transform-scaled
// down, in which case the boundingClientRect can't be used as it is
// also scaled down (#9871, #10498).
if (boundingClientRectWidth < offsetWidth &&
boundingClientRectWidth >= offsetWidth - 1) {
offsetWidth = Math.floor(boundingClientRectWidth);
}
return Math.max(0, // #8377
(offsetWidth -
(getStyle(el, 'padding-left', true) || 0) -
(getStyle(el, 'padding-right', true) || 0)));
}
if (prop === 'height') {
return Math.max(0, // #8377
(Math.min(el.offsetHeight, el.scrollHeight) -
(getStyle(el, 'padding-top', true) || 0) -
(getStyle(el, 'padding-bottom', true) || 0)));
}
// Otherwise, get the computed style
var css = win.getComputedStyle(el,
void 0); // eslint-disable-line no-undefined
if (css) {
style = css.getPropertyValue(prop);
if (pick(toInt, prop !== 'opacity')) {
style = pInt(style);
}
}
return style;
}
/**
* Return the value of the first element in the array that satisfies the
* provided testing function.
*
* @function Highcharts.find<T>
*
* @param {Array<T>} arr
* The array to test.
*
* @param {Function} callback
* The callback function. The function receives the item as the first
* argument. Return `true` if this item satisfies the condition.
*
* @return {T|undefined}
* The value of the element.
*/
var find = Array.prototype.find ?
function (arr, callback) {
return arr.find(callback);
} :
// Legacy implementation. PhantomJS, IE <= 11 etc. #7223.
function (arr, callback) {
var i;
var length = arr.length;
for (i = 0; i < length; i++) {
if (callback(arr[i], i)) { // eslint-disable-line node/callback-return
return arr[i];
}
}
};
/**
* Get the element's offset position, corrected for `overflow: auto`.
*
* @function Highcharts.offset
*
* @param {global.Element} el
* The DOM element.
*
* @return {Highcharts.OffsetObject}
* An object containing `left` and `top` properties for the position in
* the page.
*/
function offset(el) {
var docElem = doc.documentElement,
box = (el.parentElement || el.parentNode) ?
el.getBoundingClientRect() :
{ top: 0,
left: 0,
width: 0,
height: 0 };
return {
top: box.top + (win.pageYOffset || docElem.scrollTop) -
(docElem.clientTop || 0),
left: box.left + (win.pageXOffset || docElem.scrollLeft) -
(docElem.clientLeft || 0),
width: box.width,
height: box.height
};
}
/* eslint-disable valid-jsdoc */
/**
* Iterate over object key pairs in an object.
*
* @function Highcharts.objectEach<T>
*
* @param {*} obj
* The object to iterate over.
*
* @param {Highcharts.ObjectEachCallbackFunction<T>} fn
* The iterator callback. It passes three arguments:
* * value - The property value.
* * key - The property key.
* * obj - The object that objectEach is being applied to.
*
* @param {T} [ctx]
* The context.
*/
function objectEach(obj, fn, ctx) {
/* eslint-enable valid-jsdoc */
for (var key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
fn.call(ctx || obj[key], obj[key], key, obj);
}
}
}
/* eslint-disable valid-jsdoc */
/**
* Add an event listener.
*
* @function Highcharts.addEvent<T>
*
* @param {Highcharts.Class<T>|T} el
* The element or object to add a listener to. It can be a
* {@link HTMLDOMElement}, an {@link SVGElement} or any other object.
*
* @param {string} type
* The event type.
*
* @param {Highcharts.EventCallbackFunction<T>|Function} fn
* The function callback to execute when the event is fired.
*
* @param {Highcharts.EventOptionsObject} [options]
* Options for adding the event.
*
* @sample highcharts/members/addevent
* Use a general `render` event to draw shapes on a chart
*
* @return {Function}
* A callback function to remove the added event.
*/
function addEvent(el, type, fn, options) {
/* eslint-enable valid-jsdoc */
if (options === void 0) { options = {}; }
// Add hcEvents to either the prototype (in case we're running addEvent on a
// class) or the instance. If hasOwnProperty('hcEvents') is false, it is
// inherited down the prototype chain, in which case we need to set the
// property on this instance (which may itself be a prototype).
var owner = typeof el === 'function' && el.prototype || el;
if (!Object.hasOwnProperty.call(owner, 'hcEvents')) {
owner.hcEvents = {};
}
var events = owner.hcEvents;
// Allow click events added to points, otherwise they will be prevented by
// the TouchPointer.pinch function after a pinch zoom operation (#7091).
if (Core_Globals.Point && // Without H a dependency loop occurs
el instanceof Core_Globals.Point &&
el.series &&
el.series.chart) {
el.series.chart.runTrackerClick = true;
}
// Handle DOM events
// If the browser supports passive events, add it to improve performance
// on touch events (#11353).
var addEventListener = el.addEventListener;
if (addEventListener) {
addEventListener.call(el, type, fn, Core_Globals.supportsPassiveEvents ? {
passive: options.passive === void 0 ?
type.indexOf('touch') !== -1 : options.passive,
capture: false
} : false);
}
if (!events[type]) {
events[type] = [];
}
var eventObject = {
fn: fn,
order: typeof options.order === 'number' ? options.order : Infinity
};
events[type].push(eventObject);
// Order the calls
events[type].sort(function (a, b) { return a.order - b.order; });
// Return a function that can be called to remove this event.
return function () {
removeEvent(el, type, fn);
};
}
/* eslint-disable valid-jsdoc */
/**
* Remove an event that was added with {@link Highcharts#addEvent}.
*
* @function Highcharts.removeEvent<T>
*
* @param {Highcharts.Class<T>|T} el
* The element to remove events on.
*
* @param {string} [type]
* The type of events to remove. If undefined, all events are removed
* from the element.
*
* @param {Highcharts.EventCallbackFunction<T>} [fn]
* The specific callback to remove. If undefined, all events that match
* the element and optionally the type are removed.
*
* @return {void}
*/
function removeEvent(el, type, fn) {
/* eslint-enable valid-jsdoc */
/**
* @private
*/
function removeOneEvent(type, fn) {
var removeEventListener = el.removeEventListener;
if (removeEventListener) {
removeEventListener.call(el, type, fn, false);
}
}
/**
* @private
*/
function removeAllEvents(eventCollection) {
var types,
len;
if (!el.nodeName) {
return; // Break on non-DOM events
}
if (type) {
types = {};
types[type] = true;
}
else {
types = eventCollection;
}
objectEach(types, function (_val, n) {
if (eventCollection[n]) {
len = eventCollection[n].length;
while (len--) {
removeOneEvent(n, eventCollection[n][len].fn);
}
}
});
}
var owner = typeof el === 'function' && el.prototype || el;
if (Object.hasOwnProperty.call(owner, 'hcEvents')) {
var events = owner.hcEvents;
if (type) {
var typeEvents = (events[type] || []);
if (fn) {
events[type] = typeEvents.filter(function (obj) {
return fn !== obj.fn;
});
removeOneEvent(type, fn);
}
else {
removeAllEvents(events);
events[type] = [];
}
}
else {
removeAllEvents(events);
delete owner.hcEvents;
}
}
}
/* eslint-disable valid-jsdoc */
/**
* Fire an event that was registered with {@link Highcharts#addEvent}.
*
* @function Highcharts.fireEvent<T>
*
* @param {T} el
* The object to fire the event on. It can be a {@link HTMLDOMElement},
* an {@link SVGElement} or any other object.
*
* @param {string} type
* The type of event.
*
* @param {Highcharts.Dictionary<*>|Event} [eventArguments]
* Custom event arguments that are passed on as an argument to the event
* handler.
*
* @param {Highcharts.EventCallbackFunction<T>|Function} [defaultFunction]
* The default function to execute if the other listeners haven't
* returned false.
*
* @return {void}
*/
function fireEvent(el, type, eventArguments, defaultFunction) {
/* eslint-enable valid-jsdoc */
eventArguments = eventArguments || {};
if (doc.createEvent &&
(el.dispatchEvent ||
(el.fireEvent &&
// Enable firing events on Highcharts instance.
el !== Core_Globals))) {
var e = doc.createEvent('Events');
e.initEvent(type, true, true);
eventArguments = extend(e, eventArguments);
if (el.dispatchEvent) {
el.dispatchEvent(eventArguments);
}
else {
el.fireEvent(type, eventArguments);
}
}
else if (el.hcEvents) {
if (!eventArguments.target) {
// We're running a custom event
extend(eventArguments, {
// Attach a simple preventDefault function to skip
// default handler if called. The built-in
// defaultPrevented property is not overwritable (#5112)
preventDefault: function () {
eventArguments.defaultPrevented = true;
},
// Setting target to native events fails with clicking
// the zoom-out button in Chrome.
target: el,
// If the type is not set, we're running a custom event
// (#2297). If it is set, we're running a browser event.
type: type
});
}
var events = [];
var object = el;
var multilevel = false;
// Recurse up the inheritance chain and collect hcEvents set as own
// objects on the prototypes.
while (object.hcEvents) {
if (Object.hasOwnProperty.call(object, 'hcEvents') &&
object.hcEvents[type]) {
if (events.length) {
multilevel = true;
}
events.unshift.apply(events, object.hcEvents[type]);
}
object = Object.getPrototypeOf(object);
}
// For performance reasons, only sort the event handlers in case we are
// dealing with multiple levels in the prototype chain. Otherwise, the
// events are already sorted in the addEvent function.
if (multilevel) {
// Order the calls
events.sort(function (a, b) { return a.order - b.order; });
}
// Call the collected event handlers
events.forEach(function (obj) {
// If the event handler returns false, prevent the default handler
// from executing
if (obj.fn.call(el, eventArguments) === false) {
eventArguments.preventDefault();
}
});
}
// Run the default if not prevented
if (defaultFunction && !eventArguments.defaultPrevented) {
defaultFunction.call(el, eventArguments);
}
}
var serialMode;
/**
* Get a unique key for using in internal element id's and pointers. The key is
* composed of a random hash specific to this Highcharts instance, and a
* counter.
*
* @example
* let id = uniqueKey(); // => 'highcharts-x45f6hp-0'
*
* @function Highcharts.uniqueKey
*
* @return {string}
* A unique key.
*/
var uniqueKey = (function () {
var hash = Math.random().toString(36).substring(2, 9) + '-';
var id = 0;
return function () {
return 'highcharts-' + (serialMode ? '' : hash) + id++;
};
}());
/**
* Activates a serial mode for element IDs provided by
* {@link Highcharts.uniqueKey}. This mode can be used in automated tests, where
* a simple comparison of two rendered SVG graphics is needed.
*
* **Note:** This is only for testing purposes and will break functionality in
* webpages with multiple charts.
*
* @example
* if (
* process &&
* process.env.NODE_ENV === 'development'
* ) {
* Highcharts.useSerialIds(true);
* }
*
* @function Highcharts.useSerialIds
*
* @param {boolean} [mode]
* Changes the state of serial mode.
*
* @return {boolean|undefined}
* State of the serial mode.
*/
function useSerialIds(mode) {
return (serialMode = pick(mode, serialMode));
}
function isFunction(obj) {
return typeof obj === 'function';
}
function ucfirst(s) {
return ((isString(s) ?
s.substring(0, 1).toUpperCase() + s.substring(1) :
String(s)));
}
/* *
*
* External
*
* */
// Register Highcharts as a plugin in jQuery
if (win.jQuery) {
/**
* Highcharts-extended JQuery.
*
* @external JQuery
*/
/**
* Helper function to return the chart of the current JQuery selector
* element.
*
* @function external:JQuery#highcharts
*
* @return {Highcharts.Chart}
* The chart that is linked to the JQuery selector element.
*/ /**
* Factory function to create a chart in the current JQuery selector
* element.
*
* @function external:JQuery#highcharts
*
* @param {'Chart'|'Map'|'StockChart'|string} [className]
* Name of the factory class in the Highcharts namespace.
*
* @param {Highcharts.Options} [options]
* The chart options structure.
*
* @param {Highcharts.ChartCallbackFunction} [callback]
* Function to run when the chart has loaded and all external
* images are loaded. Defining a
* [chart.events.load](https://api.highcharts.com/highcharts/chart.events.load)
* handler is equivalent.
*
* @return {JQuery}
* The current JQuery selector.
*/
win.jQuery.fn.highcharts = function () {
var args = [].slice.call(arguments);
if (this[0]) { // `this[0]` is the renderTo div
// Create the chart
if (args[0]) {
new Core_Globals[ // eslint-disable-line computed-property-spacing, no-new
// Constructor defaults to Chart
isString(args[0]) ? args.shift() : 'Chart'](this[0], args[0], args[1]);
return this;
}
// When called without parameters or with the return argument,
// return an existing chart
return charts[attr(this[0], 'data-highcharts-chart')];
}
};
}
/* *
*
* Default Export
*
* */
// TODO use named exports when supported.
var Utilities = {
addEvent: addEvent,
arrayMax: arrayMax,
arrayMin: arrayMin,
attr: attr,
clamp: clamp,
clearTimeout: internalClearTimeout,
correctFloat: correctFloat,
createElement: createElement,
crisp: crisp,
css: css,
defined: defined,
destroyObjectProperties: destroyObjectProperties,
diffObjects: diffObjects,
discardElement: discardElement,
erase: erase,
error: error,
extend: extend,
extendClass: extendClass,
find: find,
fireEvent: fireEvent,
getAlignFactor: getAlignFactor,
getClosestDistance: getClosestDistance,
getMagnitude: getMagnitude,
getNestedProperty: getNestedProperty,
getStyle: getStyle,
insertItem: insertItem,
isArray: isArray,
isClass: isClass,
isDOMElement: isDOMElement,
isFunction: isFunction,
isNumber: isNumber,
isObject: isObject,
isString: isString,
merge: merge,
normalizeTickInterval: normalizeTickInterval,
objectEach: objectEach,
offset: offset,
pad: pad,
pick: pick,
pInt: pInt,
pushUnique: pushUnique,
relativeLength: relativeLength,
removeEvent: removeEvent,
replaceNested: replaceNested,
splat: splat,
stableSort: stableSort,
syncTimeout: syncTimeout,
timeUnits: timeUnits,
ucfirst: ucfirst,
uniqueKey: uniqueKey,
useSerialIds: useSerialIds,
wrap: wrap
};
/* harmony default export */ var Core_Utilities = (Utilities);
/* *
*
* API Declarations
*
* */
/**
* An animation configuration. Animation configurations can also be defined as
* booleans, where `false` turns off animation and `true` defaults to a duration
* of 500ms and defer of 0ms.
*
* @interface Highcharts.AnimationOptionsObject
*/ /**
* A callback function to execute when the animation finishes.
* @name Highcharts.AnimationOptionsObject#complete
* @type {Function|undefined}
*/ /**
* The animation defer in milliseconds.
* @name Highcharts.AnimationOptionsObject#defer
* @type {number|undefined}
*/ /**
* The animation duration in milliseconds.
* @name Highcharts.AnimationOptionsObject#duration
* @type {number|undefined}
*/ /**
* The name of an easing function as defined on the `Math` object.
* @name Highcharts.AnimationOptionsObject#easing
* @type {string|Function|undefined}
*/ /**
* A callback function to execute on each step of each attribute or CSS property
* that's being animated. The first argument contains information about the
* animation and progress.
* @name Highcharts.AnimationOptionsObject#step
* @type {Function|undefined}
*/
/**
* Creates a frame for the animated SVG element.
*
* @callback Highcharts.AnimationStepCallbackFunction
*
* @param {Highcharts.SVGElement} this
* The SVG element to animate.
*
* @return {void}
*/
/**
* Interface description for a class.
*
* @interface Highcharts.Class<T>
* @extends Function
*/ /**
* Class constructor.
* @function Highcharts.Class<T>#new
* @param {...Array<*>} args
* Constructor arguments.
* @return {T}
* Class instance.
*/
/**
* A style object with camel case property names to define visual appearance of
* a SVG element or HTML element. The properties can be whatever styles are
* supported on the given SVG or HTML element.
*
* @example
* {
* fontFamily: 'monospace',
* fontSize: '1.2em'
* }
*
* @interface Highcharts.CSSObject
*/ /**
* @name Highcharts.CSSObject#[key:string]
* @type {boolean|number|string|undefined}
*/ /**
* Background style for the element.
* @name Highcharts.CSSObject#background
* @type {string|undefined}
*/ /**
* Background color of the element.
* @name Highcharts.CSSObject#backgroundColor
* @type {Highcharts.ColorString|undefined}
*/ /**
* Border style for the element.
* @name Highcharts.CSSObject#border
* @type {string|undefined}
*/ /**
* Radius of the element border.
* @name Highcharts.CSSObject#borderRadius
* @type {number|undefined}
*/ /**
* Color used in the element. The 'contrast' option is a Highcharts custom
* property that results in black or white, depending on the background of the
* element.
* @name Highcharts.CSSObject#color
* @type {'contrast'|Highcharts.ColorString|undefined}
*/ /**
* Style of the mouse cursor when resting over the element.
* @name Highcharts.CSSObject#cursor
* @type {Highcharts.CursorValue|undefined}
*/ /**
* Font family of the element text. Multiple values have to be in decreasing
* preference order and separated by comma.
* @name Highcharts.CSSObject#fontFamily
* @type {string|undefined}
*/ /**
* Font size of the element text.
* @name Highcharts.CSSObject#fontSize
* @type {string|undefined}
*/ /**
* Font weight of the element text.
* @name Highcharts.CSSObject#fontWeight
* @type {string|undefined}
*/ /**
* Height of the element.
* @name Highcharts.CSSObject#height
* @type {number|undefined}
*/ /**
* The maximum number of lines. If lines are cropped away, an ellipsis will be
* added.
* @name Highcharts.CSSObject#lineClamp
* @type {number|undefined}
*/ /**
* Width of the element border.
* @name Highcharts.CSSObject#lineWidth
* @type {number|undefined}
*/ /**
* Opacity of the element.
* @name Highcharts.CSSObject#opacity
* @type {number|undefined}
*/ /**
* Space around the element content.
* @name Highcharts.CSSObject#padding
* @type {string|undefined}
*/ /**
* Behaviour of the element when the mouse cursor rests over it.
* @name Highcharts.CSSObject#pointerEvents
* @type {string|undefined}
*/ /**
* Positioning of the element.
* @name Highcharts.CSSObject#position
* @type {string|undefined}
*/ /**
* Alignment of the element text.
* @name Highcharts.CSSObject#textAlign
* @type {string|undefined}
*/ /**
* Additional decoration of the element text.
* @name Highcharts.CSSObject#textDecoration
* @type {string|undefined}
*/ /**
* Outline style of the element text.
* @name Highcharts.CSSObject#textOutline
* @type {string|undefined}
*/ /**
* Line break style of the element text. Highcharts SVG elements support
* `ellipsis` when a `width` is set.
* @name Highcharts.CSSObject#textOverflow
* @type {string|undefined}
*/ /**
* Top spacing of the element relative to the parent element.
* @name Highcharts.CSSObject#top
* @type {string|undefined}
*/ /**
* Animated transition of selected element properties.
* @name Highcharts.CSSObject#transition
* @type {string|undefined}
*/ /**
* Line break style of the element text.
* @name Highcharts.CSSObject#whiteSpace
* @type {string|undefined}
*/ /**
* Width of the element.
* @name Highcharts.CSSObject#width
* @type {number|undefined}
*/
/**
* All possible cursor styles.
*
* @typedef {'alias'|'all-scroll'|'auto'|'cell'|'col-resize'|'context-menu'|'copy'|'crosshair'|'default'|'e-resize'|'ew-resize'|'grab'|'grabbing'|'help'|'move'|'n-resize'|'ne-resize'|'nesw-resize'|'no-drop'|'none'|'not-allowed'|'ns-resize'|'nw-resize'|'nwse-resize'|'pointer'|'progress'|'row-resize'|'s-resize'|'se-resize'|'sw-resize'|'text'|'vertical-text'|'w-resize'|'wait'|'zoom-in'|'zoom-out'} Highcharts.CursorValue
*/
/**
* All possible dash styles.
*
* @typedef {'Dash'|'DashDot'|'Dot'|'LongDash'|'LongDashDot'|'LongDashDotDot'|'ShortDash'|'ShortDashDot'|'ShortDashDotDot'|'ShortDot'|'Solid'} Highcharts.DashStyleValue
*/
/**
* Generic dictionary in TypeScript notation.
* Use the native `AnyRecord` instead.
*
* @deprecated
* @interface Highcharts.Dictionary<T>
*/ /**
* @name Highcharts.Dictionary<T>#[key:string]
* @type {T}
*/
/**
* The function callback to execute when the event is fired. The `this` context
* contains the instance, that fired the event.
*
* @callback Highcharts.EventCallbackFunction<T>
*
* @param {T} this
*
* @param {Highcharts.Dictionary<*>|Event} [eventArguments]
* Event arguments.
*
* @return {boolean|void}
*/
/**
* The event options for adding function callback.
*
* @interface Highcharts.EventOptionsObject
*/ /**
* The order the event handler should be called. This opens for having one
* handler be called before another, independent of in which order they were
* added.
* @name Highcharts.EventOptionsObject#order
* @type {number}
*/ /**
* Whether an event should be passive or not.
* When set to `true`, the function specified by listener will never call
* `preventDefault()`.
* @name Highcharts.EventOptionsObject#passive
* @type boolean
*/
/**
* Formats data as a string. Usually the data is accessible through the `this`
* keyword.
*
* @callback Highcharts.FormatterCallbackFunction<T>
*
* @param {T} this
* Context to format
*
* @return {string}
* Formatted text
*/
/**
* An object of key-value pairs for HTML attributes.
*
* @typedef {Highcharts.Dictionary<boolean|number|string|Function>} Highcharts.HTMLAttributes
*/
/**
* An HTML DOM element. The type is a reference to the regular HTMLElement in
* the global scope.
*
* @typedef {global.HTMLElement} Highcharts.HTMLDOMElement
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
*/
/**
* The iterator callback.
*
* @callback Highcharts.ObjectEachCallbackFunction<T>
*
* @param {T} this
* The context.
*
* @param {*} value
* The property value.
*
* @param {string} key
* The property key.
*
* @param {*} obj
* The object that objectEach is being applied to.
*/
/**
* An object containing `left` and `top` properties for the position in the
* page.
*
* @interface Highcharts.OffsetObject
*/ /**
* Left distance to the page border.
* @name Highcharts.OffsetObject#left
* @type {number}
*/ /**
* Top distance to the page border.
* @name Highcharts.OffsetObject#top
* @type {number}
*/
/**
* Describes a range.
*
* @interface Highcharts.RangeObject
*/ /**
* Maximum number of the range.
* @name Highcharts.RangeObject#max
* @type {number}
*/ /**
* Minimum number of the range.
* @name Highcharts.RangeObject#min
* @type {number}
*/
/**
* If a number is given, it defines the pixel length. If a percentage string is
* given, like for example `'50%'`, the setting defines a length relative to a
* base size, for example the size of a container.
*
* @typedef {number|string} Highcharts.RelativeSize
*/
/**
* Proceed function to call original (wrapped) function.
*
* @callback Highcharts.WrapProceedFunction
*
* @param {*} [arg1]
* Optional argument. Without any arguments defaults to first argument of
* the wrapping function.
*
* @param {*} [arg2]
* Optional argument. Without any arguments defaults to second argument
* of the wrapping function.
*
* @param {*} [arg3]
* Optional argument. Without any arguments defaults to third argument of
* the wrapping function.
*
* @return {*}
* Return value of the original function.
*/
/**
* The Highcharts object is the placeholder for all other members, and various
* utility functions. The most important member of the namespace would be the
* chart constructor.
*
* @example
* let chart = Highcharts.chart('container', { ... });
*
* @namespace Highcharts
*/
''; // Detach doclets above
;// ./code/es5/es-modules/Core/Chart/ChartDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* General options for the chart.
*
* @optionparent chart
*/
var ChartDefaults = {
/**
* Default `mapData` for all series, in terms of a GeoJSON or TopoJSON
* object. If set to a string, it functions as an index into the
* `Highcharts.maps` array.
*
* For picking out individual shapes and geometries to use for each series
* of the map, see [series.mapData](#series.map.mapData).
*
* @sample maps/demo/geojson
* Loading GeoJSON data
* @sample maps/chart/topojson
* Loading TopoJSON data
*
* @type {string|Array<*>|Highcharts.GeoJSON|Highcharts.TopoJSON}
* @since 5.0.0
* @product highmaps
* @apioption chart.map
*/
/**
* Set lat/lon transformation definitions for the chart. If not defined,
* these are extracted from the map data.
*
* @type {*}
* @since 5.0.0
* @product highmaps
* @apioption chart.mapTransforms
*/
/**
* When using multiple axes, the ticks of two or more opposite axes
* will automatically be aligned by adding ticks to the axis or axes
* with the least ticks, as if `tickAmount` were specified.
*
* This can be prevented by setting `alignTicks` to false. If the grid
* lines look messy, it's a good idea to hide them for the secondary
* axis by setting `gridLineWidth` to 0.
*
* If `startOnTick` or `endOnTick` in the axis options are set to false,
* then the `alignTicks ` will be disabled for the axis.
*
* Disabled for logarithmic axes.
*
* @sample {highcharts} highcharts/chart/alignticks-true/
* True by default
* @sample {highcharts} highcharts/chart/alignticks-false/
* False
* @sample {highstock} stock/chart/alignticks-true/
* True by default
* @sample {highstock} stock/chart/alignticks-false/
* False
*
* @type {boolean}
* @default true
* @product highcharts highstock gantt
* @apioption chart.alignTicks
*/
/**
* When using multiple axes, align the thresholds. When this is true, other
* ticks will also be aligned.
*
* Note that for line series and some other series types, the `threshold`
* option is set to `null` by default. This will in turn cause their y-axis
* to not have a threshold. In order to avoid that, set the series
* `threshold` to 0 or another number.
*
* If `startOnTick` or `endOnTick` in the axis options are set to false, or
* if the axis is logarithmic, the threshold will not be aligned.
*
* @sample {highcharts} highcharts/chart/alignthresholds/ Set to true
*
* @since 10.0.0
* @product highcharts highstock gantt
* @apioption chart.alignThresholds
*/
alignThresholds: false,
/**
* Set the overall animation for all chart updating. Animation can be
* disabled throughout the chart by setting it to false here. It can
* be overridden for each individual API method as a function parameter.
* The only animation not affected by this option is the initial series
* animation, see [plotOptions.series.animation](
* #plotOptions.series.animation).
*
* The animation can either be set as a boolean or a configuration
* object. If `true`, it will use the 'swing' jQuery easing and a
* duration of 500 ms. If used as a configuration object, the following
* properties are supported:
*
* - `defer`: The animation delay time in milliseconds.
*
* - `duration`: The duration of the animation in milliseconds.
*
* - `easing`: A string reference to an easing function set on the
* `Math` object. See
* [the easing demo](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-animation-easing/).
*
* When zooming on a series with less than 100 points, the chart redraw
* will be done with animation, but in case of more data points, it is
* necessary to set this option to ensure animation on zoom.
*
* @sample {highcharts} highcharts/chart/animation-none/
* Updating with no animation
* @sample {highcharts} highcharts/chart/animation-duration/
* With a longer duration
* @sample {highcharts} highcharts/chart/animation-easing/
* With a jQuery UI easing
* @sample {highmaps} maps/chart/animation-none/
* Updating with no animation
* @sample {highmaps} maps/chart/animation-duration/
* With a longer duration
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
* @default true
* @apioption chart.animation
*/
/**
* A CSS class name to apply to the charts container `div`, allowing
* unique CSS styling for each chart.
*
* @type {string}
* @apioption chart.className
*/
/**
* Event listeners for the chart.
*
* @apioption chart.events
*/
/**
* Fires when a series is added to the chart after load time, using the
* `addSeries` method. One parameter, `event`, is passed to the
* function, containing common event information. Through
* `event.options` you can access the series options that were passed to
* the `addSeries` method. Returning false prevents the series from
* being added.
*
* @sample {highcharts} highcharts/chart/events-addseries/
* Alert on add series
* @sample {highstock} stock/chart/events-addseries/
* Alert on add series
*
* @type {Highcharts.ChartAddSeriesCallbackFunction}
* @since 1.2.0
* @context Highcharts.Chart
* @apioption chart.events.addSeries
*/
/**
* Fires when clicking on the plot background. One parameter, `event`,
* is passed to the function, containing common event information.
*
* Information on the clicked spot can be found through `event.xAxis`
* and `event.yAxis`, which are arrays containing the axes of each
* dimension and each axis' value at the clicked spot. The primary axes
* are `event.xAxis[0]` and `event.yAxis[0]`. Remember the unit of a
* datetime axis is milliseconds since 1970-01-01 00:00:00.
*
* ```js
* click: function(e) {
* console.log(
* Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value),
* e.yAxis[0].value
* )
* }
* ```
*
* @sample {highcharts} highcharts/chart/events-click/
* Alert coordinates on click
* @sample {highcharts} highcharts/chart/events-container/
* Alternatively, attach event to container
* @sample {highstock} stock/chart/events-click/
* Alert coordinates on click
* @sample {highstock} highcharts/chart/events-container/
* Alternatively, attach event to container
* @sample {highmaps} maps/chart/events-click/
* Record coordinates on click
* @sample {highmaps} highcharts/chart/events-container/
* Alternatively, attach event to container
*
* @type {Highcharts.ChartClickCallbackFunction}
* @since 1.2.0
* @context Highcharts.Chart
* @apioption chart.events.click
*/
/**
* Fires when the chart is finished loading. Since v4.2.2, it also waits
* for images to be loaded, for example from point markers. One
* parameter, `event`, is passed to the function, containing common
* event information.
*
* There is also a second parameter to the chart constructor where a
* callback function can be passed to be executed on chart.load.
*
* @sample {highcharts} highcharts/chart/events-load/
* Alert on chart load
* @sample {highcharts} highcharts/chart/events-render/
* Load vs Redraw vs Render
* @sample {highstock} stock/chart/events-load/
* Alert on chart load
* @sample {highmaps} maps/chart/events-load/
* Add series on chart load
*
* @type {Highcharts.ChartLoadCallbackFunction}
* @context Highcharts.Chart
* @apioption chart.events.load
*/
/**
* Fires when the chart is redrawn, either after a call to
* `chart.redraw()` or after an axis, series or point is modified with
* the `redraw` option set to `true`. One parameter, `event`, is passed
* to the function, containing common event information.
*
* @sample {highcharts} highcharts/chart/events-redraw/
* Alert on chart redraw
* @sample {highcharts} highcharts/chart/events-render/
* Load vs Redraw vs Render
* @sample {highstock} stock/chart/events-redraw/
* Alert on chart redraw when adding a series or moving the
* zoomed range
* @sample {highmaps} maps/chart/events-redraw/
* Set subtitle on chart redraw
*
* @type {Highcharts.ChartRedrawCallbackFunction}
* @since 1.2.0
* @context Highcharts.Chart
* @apioption chart.events.redraw
*/
/**
* Fires after initial load of the chart (directly after the `load`
* event), and after each redraw (directly after the `redraw` event).
*
* @sample {highcharts} highcharts/chart/events-render/
* Load vs Redraw vs Render
*
* @type {Highcharts.ChartRenderCallbackFunction}
* @since 5.0.7
* @context Highcharts.Chart
* @apioption chart.events.render
*/
/**
* Fires when an area of the chart has been selected. Selection is
* enabled by setting the chart's zoomType. One parameter, `event`, is
* passed to the function, containing common event information. The
* default action for the selection event is to zoom the chart to the
* selected area. It can be prevented by calling
* `event.preventDefault()` or return false.
*
* Information on the selected area can be found through `event.xAxis`
* and `event.yAxis`, which are arrays containing the axes of each
* dimension and each axis' min and max values. The primary axes are
* `event.xAxis[0]` and `event.yAxis[0]`. Remember the unit of a
* datetime axis is milliseconds since 1970-01-01 00:00:00.
*
* ```js
* selection: function(event) {
* // log the min and max of the primary, datetime x-axis
* console.log(
* Highcharts.dateFormat(
* '%Y-%m-%d %H:%M:%S',
* event.xAxis[0].min
* ),
* Highcharts.dateFormat(
* '%Y-%m-%d %H:%M:%S',
* event.xAxis[0].max
* )
* );
* // log the min and max of the y axis
* console.log(event.yAxis[0].min, event.yAxis[0].max);
* }
* ```
*
* @sample {highcharts} highcharts/chart/events-selection/
* Report on selection and reset
* @sample {highcharts} highcharts/chart/events-selection-points/
* Select a range of points through a drag selection
* @sample {highstock} stock/chart/events-selection/
* Report on selection and reset
* @sample {highstock} highcharts/chart/events-selection-points/
* Select a range of points through a drag selection
* (Highcharts)
*
* @type {Highcharts.ChartSelectionCallbackFunction}
* @apioption chart.events.selection
*/
/**
* The margin between the outer edge of the chart and the plot area.
* The numbers in the array designate top, right, bottom and left
* respectively. Use the options `marginTop`, `marginRight`,
* `marginBottom` and `marginLeft` for shorthand setting of one option.
*
* By default there is no margin. The actual space is dynamically
* calculated from the offset of axis labels, axis title, title,
* subtitle and legend in addition to the `spacingTop`, `spacingRight`,
* `spacingBottom` and `spacingLeft` options.
*
* @sample {highcharts} highcharts/chart/margins-zero/
* Zero margins
* @sample {highstock} stock/chart/margin-zero/
* Zero margins
*
* @type {number|Array<number>}
* @apioption chart.margin
*/
/**
* The margin between the bottom outer edge of the chart and the plot
* area. Use this to set a fixed pixel value for the margin as opposed
* to the default dynamic margin. See also `spacingBottom`.
*
* @sample {highcharts} highcharts/chart/marginbottom/
* 100px bottom margin
* @sample {highstock} stock/chart/marginbottom/
* 100px bottom margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
*
* @type {number}
* @since 2.0
* @apioption chart.marginBottom
*/
/**
* The margin between the left outer edge of the chart and the plot
* area. Use this to set a fixed pixel value for the margin as opposed
* to the default dynamic margin. See also `spacingLeft`.
*
* @sample {highcharts} highcharts/chart/marginleft/
* 150px left margin
* @sample {highstock} stock/chart/marginleft/
* 150px left margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
*
* @type {number}
* @since 2.0
* @apioption chart.marginLeft
*/
/**
* The margin between the right outer edge of the chart and the plot
* area. Use this to set a fixed pixel value for the margin as opposed
* to the default dynamic margin. See also `spacingRight`.
*
* @sample {highcharts} highcharts/chart/marginright/
* 100px right margin
* @sample {highstock} stock/chart/marginright/
* 100px right margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
*
* @type {number}
* @since 2.0
* @apioption chart.marginRight
*/
/**
* The margin between the top outer edge of the chart and the plot area.
* Use this to set a fixed pixel value for the margin as opposed to
* the default dynamic margin. See also `spacingTop`.
*
* @sample {highcharts} highcharts/chart/margintop/ 100px top margin
* @sample {highstock} stock/chart/margintop/
* 100px top margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
*
* @type {number}
* @since 2.0
* @apioption chart.marginTop
*/
/**
* Callback function to override the default function that formats all
* the numbers in the chart. Returns a string with the formatted number.
*
* @sample highcharts/members/highcharts-numberformat
* Arabic digits in Highcharts
* @type {Highcharts.NumberFormatterCallbackFunction}
* @since 8.0.0
* @apioption chart.numberFormatter
*/
/**
* When a chart with an x and a y-axis is rendered, we first pre-render the
* labels of both in order to measure them. Then, if either of the axis
* labels take up so much space that it significantly affects the length of
* the other axis, we repeat the process.
*
* By default we stop at two axis layout runs, but it may be that the second
* run also alter the space required by either axis, for example if it
* causes the labels to rotate. In this situation, a subsequent redraw of
* the chart may cause the tick and label placement to change for apparently
* no reason.
*
* Use the `axisLayoutRuns` option to set the maximum allowed number of
* repetitions. But keep in mind that the default value of 2 is set because
* every run costs performance time.
*
* **Note:** Changing that option to higher than the default might decrease
* performance significantly, especially with bigger sets of data.
*
* @type {number}
* @default 2
* @since 11.3.0
* @apioption chart.axisLayoutRuns
*/
/**
* Allows setting a key to switch between zooming and panning. Can be
* one of `alt`, `ctrl`, `meta` (the command key on Mac and Windows
* key on Windows) or `shift`. The keys are mapped directly to the key
* properties of the click event argument (`event.altKey`,
* `event.ctrlKey`, `event.metaKey` and `event.shiftKey`).
*
* @type {string}
* @since 4.0.3
* @product highcharts gantt
* @validvalue ["alt", "ctrl", "meta", "shift"]
* @apioption chart.panKey
*/
/**
* Allow panning in a chart. Best used with [panKey](#chart.panKey)
* to combine zooming and panning.
*
* On touch devices, when the [tooltip.followTouchMove](
* #tooltip.followTouchMove) option is `true` (default), panning
* requires two fingers. To allow panning with one finger, set
* `followTouchMove` to `false`.
*
* @sample {highcharts} highcharts/chart/pankey/ Zooming and panning
* @sample {highstock} stock/chart/panning/ Zooming and xy panning
*/
panning: {
/**
* Enable or disable chart panning.
*
* @type {boolean}
* @default {highcharts} false
* @default {highstock|highmaps} true
*/
enabled: false,
/**
* Decides in what dimensions the user can pan the chart. Can be
* one of `x`, `y`, or `xy`.
*
* During panning, all axes will behave as if
* [`startOnTick`](#yAxis.startOnTick) and
* [`endOnTick`](#yAxis.endOnTick) were set to `false`. After the
* panning action is finished, the axes will adjust to their actual
* settings.
*
* @sample {highcharts} highcharts/chart/panning-type
* Zooming and xy panning
*
* @declare Highcharts.OptionsChartPanningTypeValue
* @type {string}
* @validvalue ["x", "y", "xy"]
* @product highcharts highstock gantt
*/
type: 'x'
},
/**
* Equivalent to [zoomType](#chart.zoomType), but for multitouch
* gestures only. By default, the `pinchType` is the same as the
* `zoomType` setting. However, pinching can be enabled separately in
* some cases, for example in stock charts where a mouse drag pans the
* chart, while pinching is enabled. When [tooltip.followTouchMove](
* #tooltip.followTouchMove) is true, pinchType only applies to
* two-finger touches.
*
* @type {string}
* @default {highcharts} undefined
* @default {highstock} undefined
* @since 3.0
* @product highcharts highstock gantt
* @deprecated
* @validvalue ["x", "y", "xy"]
* @apioption chart.pinchType
*/
/**
* Whether to apply styled mode. When in styled mode, no presentational
* attributes or CSS are applied to the chart SVG. Instead, CSS rules
* are required to style the chart. The default style sheet is
* available from `https://code.highcharts.com/css/highcharts.css`.
*
* [Read more in the docs](https://www.highcharts.com/docs/chart-design-and-style/style-by-css)
* on what classes and variables are available.
*
* @sample highcharts/css/colors
* Color theming with CSS
* @sample highcharts/css/prefers-color-scheme
* Dynamic theme based on system settings
* @type {boolean}
* @default false
* @since 7.0
* @apioption chart.styledMode
*/
styledMode: false,
/**
* The corner radius of the outer chart border.
*
* @sample {highcharts} highcharts/chart/borderradius/
* 20px radius
* @sample {highstock} stock/chart/border/
* 10px radius
* @sample {highmaps} maps/chart/border/
* Border options
*
*/
borderRadius: 0,
/**
* In styled mode, this sets how many colors the class names
* should rotate between. With ten colors, series (or points) are
* given class names like `highcharts-color-0`, `highcharts-color-1`
* [...] `highcharts-color-9`. The equivalent in non-styled mode
* is to set colors using the [colors](#colors) setting.
*
* @since 5.0.0
*/
colorCount: 10,
/**
* By default, (because of memory and performance reasons) the chart does
* not copy the data but keeps it as a reference. In some cases, this might
* result in mutating the original data source. In order to prevent that,
* set that property to false. Please note that changing that might decrease
* performance, especially with bigger sets of data.
*
* @type {boolean}
* @since 10.1.0
*/
allowMutatingData: true,
/**
* If true, the axes will scale to the remaining visible series once
* one series is hidden. If false, hiding and showing a series will
* not affect the axes or the other series. For stacks, once one series
* within the stack is hidden, the rest of the stack will close in
* around it even if the axis is not affected.
*
* @sample {highcharts} highcharts/chart/ignorehiddenseries-true/
* True by default
* @sample {highcharts} highcharts/chart/ignorehiddenseries-false/
* False
* @sample {highcharts} highcharts/chart/ignorehiddenseries-true-stacked/
* True with stack
* @sample {highstock} stock/chart/ignorehiddenseries-true/
* True by default
* @sample {highstock} stock/chart/ignorehiddenseries-false/
* False
*
* @since 1.2.0
* @product highcharts highstock gantt
*/
ignoreHiddenSeries: true,
/**
* Whether to invert the axes so that the x axis is vertical and y axis
* is horizontal. When `true`, the x axis is [reversed](#xAxis.reversed)
* by default.
*
* @productdesc {highcharts}
* If a bar series is present in the chart, it will be inverted
* automatically. Inverting the chart doesn't have an effect if there
* are no cartesian series in the chart.
*
* @sample {highcharts} highcharts/chart/inverted/
* Inverted line
* @sample {highstock} stock/navigator/inverted/
* Inverted stock chart
*
* @type {boolean}
* @default false
* @product highcharts highstock gantt
* @apioption chart.inverted
*/
/**
* The distance between the outer edge of the chart and the content,
* like title or legend, or axis title and labels if present. The
* numbers in the array designate top, right, bottom and left
* respectively. Use the options spacingTop, spacingRight, spacingBottom
* and spacingLeft options for shorthand setting of one option.
*
* @type {Array<number>}
* @see [chart.margin](#chart.margin)
* @default [10, 10, 15, 10]
* @since 3.0.6
*/
spacing: [10, 10, 15, 10],
/**
* The button that appears after a selection zoom, allowing the user
* to reset zoom. This option is deprecated in favor of
* [zooming](#chart.zooming).
*
* @since 2.2
* @deprecated 10.2.1
*/
resetZoomButton: {
/**
* What frame the button placement should be related to. Can be
* either `plotBox` or `spacingBox`.
*
* @sample {highcharts} highcharts/chart/resetzoombutton-relativeto/
* Relative to the chart
* @sample {highstock} highcharts/chart/resetzoombutton-relativeto/
* Relative to the chart
*
* @type {Highcharts.ButtonRelativeToValue}
* @apioption chart.resetZoomButton.relativeTo
*/
/**
* A collection of attributes for the button. The object takes SVG
* attributes like `fill`, `stroke`, `stroke-width` or `r`, the
* border radius. The theme also supports `style`, a collection of
* CSS properties for the text. Equivalent attributes for the hover
* state are given in `theme.states.hover`.
*
* @sample {highcharts} highcharts/chart/resetzoombutton-theme/
* Theming the button
* @sample {highstock} highcharts/chart/resetzoombutton-theme/
* Theming the button
*
* @type {Highcharts.SVGAttributes}
*/
theme: {
/**
* The z-index of the button.
*
* @type {number}
* @apioption chart.resetZoomButton.theme.zIndex
*/
},
/**
* The position of the button.
*
* @sample {highcharts} highcharts/chart/resetzoombutton-position/
* Above the plot area
* @sample {highstock} highcharts/chart/resetzoombutton-position/
* Above the plot area
* @sample {highmaps} highcharts/chart/resetzoombutton-position/
* Above the plot area
*
* @type {Highcharts.AlignObject}
*/
position: {
/**
* The horizontal alignment of the button.
*
* @type {number}
* @apioption chart.resetZoomButton.position.align
*/
/**
* The horizontal offset of the button.
*
* @type {number}
* @apioption chart.resetZoomButton.position.x
*/
/**
* The vertical alignment of the button.
*
* @type {Highcharts.VerticalAlignValue}
* @apioption chart.resetZoomButton.position.verticalAlign
*/
/**
* The vertical offset of the button.
*
* @type {number}
* @apioption chart.resetZoomButton.position.y
*/
}
},
/**
* The pixel width of the plot area border.
*
* @sample {highcharts} highcharts/chart/plotborderwidth/
* 1px border
* @sample {highstock} stock/chart/plotborder/
* 2px border
* @sample {highmaps} maps/chart/plotborder/
* Plot border options
*
* @type {number}
* @default 0
* @apioption chart.plotBorderWidth
*/
/**
* Whether to apply a drop shadow to the plot area. Requires that
* plotBackgroundColor be set. The shadow can be an object configuration
* containing `color`, `offsetX`, `offsetY`, `opacity` and `width`.
*
* @sample {highcharts} highcharts/chart/plotshadow/
* Plot shadow
* @sample {highstock} stock/chart/plotshadow/
* Plot shadow
* @sample {highmaps} maps/chart/plotborder/
* Plot border options
*
* @type {boolean|Highcharts.ShadowOptionsObject}
* @default false
* @apioption chart.plotShadow
*/
/**
* When true, cartesian charts like line, spline, area and column are
* transformed into the polar coordinate system. This produces _polar
* charts_, also known as _radar charts_.
*
* @sample {highcharts} highcharts/demo/polar/
* Polar chart
* @sample {highcharts} highcharts/demo/polar-wind-rose/
* Wind rose, stacked polar column chart
* @sample {highcharts} highcharts/demo/polar-spider/
* Spider web chart
* @sample {highcharts} highcharts/parallel-coordinates/polar/
* Star plot, multivariate data in a polar chart
*
* @type {boolean}
* @default false
* @since 2.3.0
* @product highcharts
* @requires highcharts-more
* @apioption chart.polar
*/
/**
* Whether to reflow the chart to fit the width of the container div
* on resizing the window.
*
* @sample {highcharts} highcharts/chart/reflow-true/
* True by default
* @sample {highcharts} highcharts/chart/reflow-false/
* False
* @sample {highstock} stock/chart/reflow-true/
* True by default
* @sample {highstock} stock/chart/reflow-false/
* False
* @sample {highmaps} maps/chart/reflow-true/
* True by default
* @sample {highmaps} maps/chart/reflow-false/
* False
*
* @since 2.1
*/
reflow: true,
/**
* The HTML element where the chart will be rendered. If it is a string,
* the element by that id is used. The HTML element can also be passed
* by direct reference, or as the first argument of the chart
* constructor, in which case the option is not needed.
*
* @sample {highcharts} highcharts/chart/reflow-true/
* String
* @sample {highcharts} highcharts/chart/renderto-object/
* Object reference
* @sample {highstock} stock/chart/renderto-string/
* String
* @sample {highstock} stock/chart/renderto-object/
* Object reference
*
* @type {string|Highcharts.HTMLDOMElement}
* @apioption chart.renderTo
*/
/**
* The background color of the marker square when selecting (zooming
* in on) an area of the chart.
*
* @see In styled mode, the selection marker fill is set with the
* `.highcharts-selection-marker` class.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default rgba(51,92,173,0.25)
* @since 2.1.7
* @apioption chart.selectionMarkerFill
*/
/**
* Whether to apply a drop shadow to the global series group. This causes
* all the series to have the same shadow. Contrary to the `series.shadow`
* option, this prevents items from casting shadows on each other, like for
* others series in a stack. The shadow can be an object configuration
* containing `color`, `offsetX`, `offsetY`, `opacity` and `width`.
*
* @sample highcharts/chart/seriesgroupshadow/ Shadow
*
* @type {boolean|Highcharts.ShadowOptionsObject}
* @default false
* @apioption chart.shadow
*/
/**
* Whether to apply a drop shadow to the outer chart area. Requires
* that backgroundColor be set. The shadow can be an object
* configuration containing `color`, `offsetX`, `offsetY`, `opacity` and
* `width`.
*
* @sample {highcharts} highcharts/chart/shadow/
* Shadow
* @sample {highstock} stock/chart/shadow/
* Shadow
* @sample {highmaps} maps/chart/border/
* Chart border and shadow
*
* @type {boolean|Highcharts.ShadowOptionsObject}
* @default false
* @apioption chart.shadow
*/
/**
* Whether to show the axes initially. This only applies to empty charts
* where series are added dynamically, as axes are automatically added
* to cartesian series.
*
* @sample {highcharts} highcharts/chart/showaxes-false/
* False by default
* @sample {highcharts} highcharts/chart/showaxes-true/
* True
*
* @type {boolean}
* @since 1.2.5
* @product highcharts gantt
* @apioption chart.showAxes
*/
/**
* The space between the bottom edge of the chart and the content (plot
* area, axis title and labels, title, subtitle or legend in top
* position).
*
* @sample {highcharts} highcharts/chart/spacingbottom/
* Spacing bottom set to 100
* @sample {highstock} stock/chart/spacingbottom/
* Spacing bottom set to 100
* @sample {highmaps} maps/chart/spacing/
* Spacing 100 all around
*
* @type {number}
* @default 15
* @since 2.1
* @apioption chart.spacingBottom
*/
/**
* The space between the left edge of the chart and the content (plot
* area, axis title and labels, title, subtitle or legend in top
* position).
*
* @sample {highcharts} highcharts/chart/spacingleft/
* Spacing left set to 100
* @sample {highstock} stock/chart/spacingleft/
* Spacing left set to 100
* @sample {highmaps} maps/chart/spacing/
* Spacing 100 all around
*
* @type {number}
* @default 10
* @since 2.1
* @apioption chart.spacingLeft
*/
/**
* The space between the right edge of the chart and the content (plot
* area, axis title and labels, title, subtitle or legend in top
* position).
*
* @sample {highcharts} highcharts/chart/spacingright-100/
* Spacing set to 100
* @sample {highcharts} highcharts/chart/spacingright-legend/
* Legend in right position with default spacing
* @sample {highstock} stock/chart/spacingright/
* Spacing set to 100
* @sample {highmaps} maps/chart/spacing/
* Spacing 100 all around
*
* @type {number}
* @default 10
* @since 2.1
* @apioption chart.spacingRight
*/
/**
* The space between the top edge of the chart and the content (plot
* area, axis title and labels, title, subtitle or legend in top
* position).
*
* @sample {highcharts} highcharts/chart/spacingtop-100/
* A top spacing of 100
* @sample {highcharts} highcharts/chart/spacingtop-10/
* Floating chart title makes the plot area align to the default
* spacingTop of 10.
* @sample {highstock} stock/chart/spacingtop/
* A top spacing of 100
* @sample {highmaps} maps/chart/spacing/
* Spacing 100 all around
*
* @type {number}
* @default 10
* @since 2.1
* @apioption chart.spacingTop
*/
/**
* Additional CSS styles to apply inline to the container `div` and the root
* SVG.
*
* According to the CSS syntax documentation, it is recommended to quote
* font family names that contain white space, digits, or punctuation
* characters other than hyphens. In such cases, wrap the fontFamily
* name as follows: `fontFamily: '"Font name"'`.
*
* Since v11, the root font size is 1rem by default, and all child element
* are given a relative `em` font size by default. This allows implementers
* to control all the chart's font sizes by only setting the root level.
*
* @see In styled mode, general chart styles can be set with the
* `.highcharts-root` class.
* @sample {highcharts} highcharts/chart/style-serif-font/
* Using a serif type font
* @sample {highcharts} highcharts/chart/style-special-font/
* Using a font with special character in name
* @sample {highcharts} highcharts/members/relative-font-size/
* Relative font sizes
* @sample {highcharts} highcharts/css/em/
* Styled mode with relative font sizes
* @sample {highstock} stock/chart/style/
* Using a serif type font
* @sample {highmaps} maps/chart/style-serif-font/
* Using a serif type font
*
* @type {Highcharts.CSSObject}
* @default {"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif", "fontSize":"1rem"}
* @apioption chart.style
*/
/**
* The default series type for the chart. Can be any of the chart types
* listed under [plotOptions](#plotOptions) and [series](#series) or can
* be a series provided by an additional module.
*
* In TypeScript this option has no effect in sense of typing and
* instead the `type` option must always be set in the series.
*
* @sample {highcharts} highcharts/chart/type-bar/
* Bar
* @sample {highstock} stock/chart/type/
* Areaspline
* @sample {highmaps} maps/chart/type-mapline/
* Mapline
*
* @type {string}
* @default {highcharts} line
* @default {highstock} line
* @default {highmaps} map
* @since 2.1.0
* @apioption chart.type
*/
type: 'line',
/**
* Decides in what dimensions the user can zoom by dragging the mouse.
* Can be one of `x`, `y` or `xy`.
*
* @see [panKey](#chart.panKey)
*
* @sample {highcharts} highcharts/chart/zoomtype-none/
* None by default
* @sample {highcharts} highcharts/chart/zoomtype-x/
* X
* @sample {highcharts} highcharts/chart/zoomtype-y/
* Y
* @sample {highcharts} highcharts/chart/zoomtype-xy/
* Xy
* @sample {highcharts} highcharts/chart/zoomtype-polar/
* Zoom on polar chart
* @sample {highstock} stock/demo/basic-line/
* None by default
* @sample {highstock} stock/chart/zoomtype-x/
* X
* @sample {highstock} stock/chart/zoomtype-y/
* Y
* @sample {highstock} stock/chart/zoomtype-xy/
* Xy
* @sample {highmaps} maps/chart/zoomtype-xy/
* Map with selection zoom
*
* @type {string}
* @validvalue ["x", "y", "xy"]
* @deprecated
* @apioption chart.zoomType
*/
/**
* Enables zooming by a single touch, in combination with
* [chart.zoomType](#chart.zoomType). When enabled, two-finger pinch
* will still work as set up by [chart.pinchType](#chart.pinchType).
* However, `zoomBySingleTouch` will interfere with touch-dragging the
* chart to read the tooltip. And especially when vertical zooming is
* enabled, it will make it hard to scroll vertically on the page.
* @since 9.0.0
* @sample highcharts/chart/zoombysingletouch
* Zoom by single touch enabled, with buttons to toggle
* @product highcharts highstock gantt
* @deprecated
*/
/**
* Chart zooming options.
* @since 10.2.1
*/
zooming: {
/**
* Equivalent to [type](#chart.zooming.type), but for multitouch
* gestures only. By default, the `pinchType` is the same as the
* `type` setting. However, pinching can be enabled separately in
* some cases, for example in stock charts where a mouse drag pans the
* chart, while pinching is enabled. When [tooltip.followTouchMove](
* #tooltip.followTouchMove) is true, pinchType only applies to
* two-finger touches.
*
* @type {string}
* @default {highcharts} undefined
* @default {highstock} x
* @product highcharts highstock gantt
* @validvalue ["x", "y", "xy"]
* @apioption chart.zooming.pinchType
*/
/**
* Decides in what dimensions the user can zoom by dragging the mouse.
* Can be one of `x`, `y` or `xy`.
*
* @declare Highcharts.OptionsChartZoomingTypeValue
* @type {string}
* @default {highcharts} undefined
* @product highcharts highstock gantt
* @validvalue ["x", "y", "xy"]
* @apioption chart.zooming.type
*/
/**
* Set a key to hold when dragging to zoom the chart. This is useful to
* avoid zooming while moving points. Should be set different than
* [chart.panKey](#chart.panKey).
*
* @type {string}
* @default {highcharts} undefined
* @validvalue ["alt", "ctrl", "meta", "shift"]
* @requires modules/draggable-points
* @apioption chart.zooming.key
*/
/**
* Enables zooming by a single touch, in combination with
* [chart.zooming.type](#chart.zooming.type). When enabled, two-finger
* pinch will still work as set up by [chart.zooming.pinchType]
* (#chart.zooming.pinchType). However, `singleTouch` will interfere
* with touch-dragging the chart to read the tooltip. And especially
* when vertical zooming is enabled, it will make it hard to scroll
* vertically on the page.
*
* @sample highcharts/chart/zoombysingletouch
* Zoom by single touch enabled, with buttons to toggle
*
* @product highcharts highstock gantt
*/
singleTouch: false,
/**
* The button that appears after a selection zoom, allowing the user
* to reset zoom.
*/
resetButton: {
/**
* What frame the button placement should be related to. Can be
* either `plotBox` or `spacingBox`.
*
* @sample {highcharts} highcharts/chart/resetzoombutton-relativeto/
* Relative to the chart
* @sample {highstock} highcharts/chart/resetzoombutton-relativeto/
* Relative to the chart
*
* @type {Highcharts.ButtonRelativeToValue}
* @default plot
* @apioption chart.zooming.resetButton.relativeTo
*/
/**
* A collection of attributes for the button. The object takes SVG
* attributes like `fill`, `stroke`, `stroke-width` or `r`, the
* border radius. The theme also supports `style`, a collection of
* CSS properties for the text. Equivalent attributes for the hover
* state are given in `theme.states.hover`.
*
* @sample {highcharts} highcharts/chart/resetzoombutton-theme/
* Theming the button
* @sample {highstock} highcharts/chart/resetzoombutton-theme/
* Theming the button
*
* @type {Highcharts.SVGAttributes}
* @since 10.2.1
*/
theme: {
/** @internal */
zIndex: 6
},
/**
* The position of the button.
*
* Note: Adjusting position values might cause overlap with chart
* elements. Ensure coordinates do not obstruct other components or
* data visibility.
*
* @sample {highcharts} highcharts/chart/resetzoombutton-position/
* Above the plot area
* @sample {highstock} highcharts/chart/resetzoombutton-position/
* Above the plot area
* @sample {highmaps} highcharts/chart/resetzoombutton-position/
* Above the plot area
*
* @type {Highcharts.AlignObject}
* @since 10.2.1
*/
position: {
/**
* The horizontal alignment of the button.
*/
align: 'right',
/**
* The horizontal offset of the button.
*/
x: -10,
/**
* The vertical alignment of the button.
*
* @type {Highcharts.VerticalAlignValue}
* @default top
* @apioption chart.zooming.resetButton.position.verticalAlign
*/
/**
* The vertical offset of the button.
*/
y: 10
}
}
},
/**
* An explicit width for the chart. By default (when `null`) the width
* is calculated from the offset width of the containing element.
*
* @sample {highcharts} highcharts/chart/width/
* 800px wide
* @sample {highstock} stock/chart/width/
* 800px wide
* @sample {highmaps} maps/chart/size/
* Chart with explicit size
*
* @type {null|number|string}
*/
width: null,
/**
* An explicit height for the chart. If a _number_, the height is
* given in pixels. If given a _percentage string_ (for example
* `'56%'`), the height is given as the percentage of the actual chart
* width. This allows for preserving the aspect ratio across responsive
* sizes.
*
* By default (when `null`) the height is calculated from the offset
* height of the containing element, or 400 pixels if the containing
* element's height is 0.
*
* @sample {highcharts} highcharts/chart/height/
* Forced 200px height
* @sample {highstock} stock/chart/height/
* 300px height
* @sample {highmaps} maps/chart/size/
* Chart with explicit size
* @sample highcharts/chart/height-percent/
* Highcharts with percentage height
* @sample highcharts/chart/height-inherited/
* Chart with inherited height
*
* @type {null|number|string}
*/
height: null,
/**
* The color of the outer chart border.
*
* @see In styled mode, the stroke is set with the
* `.highcharts-background` class.
*
* @sample {highcharts} highcharts/chart/bordercolor/
* Brown border
* @sample {highstock} stock/chart/border/
* Brown border
* @sample {highmaps} maps/chart/border/
* Border options
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
borderColor: "#334eff" /* Palette.highlightColor80 */,
/**
* The pixel width of the outer chart border.
*
* @see In styled mode, the stroke is set with the
* `.highcharts-background` class.
*
* @sample {highcharts} highcharts/chart/borderwidth/
* 5px border
* @sample {highstock} stock/chart/border/
* 2px border
* @sample {highmaps} maps/chart/border/
* Border options
*
* @type {number}
* @default 0
* @apioption chart.borderWidth
*/
/**
* The background color or gradient for the outer chart area.
*
* @see In styled mode, the background is set with the
* `.highcharts-background` class.
*
* @sample {highcharts} highcharts/chart/backgroundcolor-color/
* Color
* @sample {highcharts} highcharts/chart/backgroundcolor-gradient/
* Gradient
* @sample {highstock} stock/chart/backgroundcolor-color/
* Color
* @sample {highstock} stock/chart/backgroundcolor-gradient/
* Gradient
* @sample {highmaps} maps/chart/backgroundcolor-color/
* Color
* @sample {highmaps} maps/chart/backgroundcolor-gradient/
* Gradient
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
backgroundColor: "#ffffff" /* Palette.backgroundColor */,
/**
* The background color or gradient for the plot area.
*
* @see In styled mode, the plot background is set with the
* `.highcharts-plot-background` class.
*
* @sample {highcharts} highcharts/chart/plotbackgroundcolor-color/
* Color
* @sample {highcharts} highcharts/chart/plotbackgroundcolor-gradient/
* Gradient
* @sample {highstock} stock/chart/plotbackgroundcolor-color/
* Color
* @sample {highstock} stock/chart/plotbackgroundcolor-gradient/
* Gradient
* @sample {highmaps} maps/chart/plotbackgroundcolor-color/
* Color
* @sample {highmaps} maps/chart/plotbackgroundcolor-gradient/
* Gradient
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption chart.plotBackgroundColor
*/
/**
* The URL for an image to use as the plot background. To set an image
* as the background for the entire chart, set a CSS background image
* to the container element. Note that for the image to be applied to
* exported charts, its URL needs to be accessible by the export server.
*
* @see In styled mode, a plot background image can be set with the
* `.highcharts-plot-background` class and a [custom pattern](
* https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns).
*
* @sample {highcharts} highcharts/chart/plotbackgroundimage/
* Skies
* @sample {highstock} stock/chart/plotbackgroundimage/
* Skies
*
* @type {string}
* @apioption chart.plotBackgroundImage
*/
/**
* The color of the inner chart or plot area border.
*
* @see In styled mode, a plot border stroke can be set with the
* `.highcharts-plot-border` class.
*
* @sample {highcharts} highcharts/chart/plotbordercolor/
* Blue border
* @sample {highstock} stock/chart/plotborder/
* Blue border
* @sample {highmaps} maps/chart/plotborder/
* Plot border options
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
plotBorderColor: "#cccccc" /* Palette.neutralColor20 */
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var Chart_ChartDefaults = (ChartDefaults);
;// ./code/es5/es-modules/Core/Color/Palettes.js
/*
* Series palettes for Highcharts. Series colors are defined in highcharts.css.
* **Do not edit this file!** This file is generated using the 'gulp palette' task.
*/
var SeriesPalettes = {
/**
* Colors for data series and points
*/
colors: [
'#2caffe',
'#544fc5',
'#00e272',
'#fe6a35',
'#6b8abc',
'#d568fb',
'#2ee0ca',
'#fa4b42',
'#feb56a',
'#91e8e1'
],
};
/* harmony default export */ var Palettes = (SeriesPalettes);
;// ./code/es5/es-modules/Core/Time.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var pageLang = Core_Globals.pageLang, Time_win = Core_Globals.win;
var Time_defined = Core_Utilities.defined, Time_error = Core_Utilities.error, Time_extend = Core_Utilities.extend, Time_isNumber = Core_Utilities.isNumber, Time_isObject = Core_Utilities.isObject, Time_isString = Core_Utilities.isString, Time_merge = Core_Utilities.merge, Time_objectEach = Core_Utilities.objectEach, Time_pad = Core_Utilities.pad, Time_splat = Core_Utilities.splat, Time_timeUnits = Core_Utilities.timeUnits, Time_ucfirst = Core_Utilities.ucfirst;
/* *
*
* Constants
*
* */
// To do: Remove this when we no longer need support for Safari < v14.1
var hasOldSafariBug = Core_Globals.isSafari &&
Time_win.Intl &&
!Time_win.Intl.DateTimeFormat.prototype.formatRange;
var isDateTimeFormatOptions = function (obj) {
return obj.main === void 0;
};
// We use the Spanish locale for internal weekday handling because it uses
// unique letters for narrow weekdays
var spanishWeekdayIndex = function (weekday) {
return ['D', 'L', 'M', 'X', 'J', 'V', 'S'].indexOf(weekday);
};
/* *
*
* Class
*
* */
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* The Time class. Time settings are applied in general for each page using
* `Highcharts.setOptions`, or individually for each Chart item through the
* [time](https://api.highcharts.com/highcharts/time) options set.
*
* The Time object is available from {@link Highcharts.Chart#time}, which refers
* to `Highcharts.time` unless individual time settings are applied for each
* chart.
*
* When configuring time settings for individual chart instances, be aware that
* using `Highcharts.dateFormat` or `Highcharts.time.dateFormat` within
* formatter callbacks relies on the global time object, which applies the
* global language and time zone settings. To ensure charts with local time
* settings function correctly, use `chart.time.dateFormat? instead. However,
* the recommended best practice is to use `setOptions` to define global time
* settings unless specific configurations are needed for each chart.
*
* @example
* // Apply time settings globally
* Highcharts.setOptions({
* time: {
* timezone: 'Europe/London'
* }
* });
*
* // Apply time settings by instance
* const chart = Highcharts.chart('container', {
* time: {
* timezone: 'America/New_York'
* },
* series: [{
* data: [1, 4, 3, 5]
* }]
* });
*
* // Use the Time object of a chart instance
* console.log(
* 'Current time in New York',
* chart.time.dateFormat('%Y-%m-%d %H:%M:%S', Date.now())
* );
*
* // Standalone use
* const time = new Highcharts.Time({
* timezone: 'America/New_York'
* });
* const s = time.dateFormat('%Y-%m-%d %H:%M:%S', Date.UTC(2020, 0, 1));
* console.log(s); // => 2019-12-31 19:00:00
*
* @since 6.0.5
*
* @class
* @name Highcharts.Time
*
* @param {Highcharts.TimeOptions} [options] Time options as defined in
* [chart.options.time](/highcharts/time).
*/
var Time = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function Time(options) {
/* *
*
* Properties
*
* */
this.options = {
timezone: 'UTC'
};
this.variableTimezone = false;
this.Date = Time_win.Date;
this.update(options);
}
/* *
*
* Functions
*
* */
/**
* Update the Time object with current options. It is called internally on
* initializing Highcharts, after running `Highcharts.setOptions` and on
* `Chart.update`.
*
* @private
* @function Highcharts.Time#update
*
* @param {Highcharts.TimeOptions} [options]
*
*/
Time.prototype.update = function (options) {
var _this = this;
if (options === void 0) { options = {}; }
this.dTLCache = {};
this.options = options = Time_merge(true, this.options, options);
var timezoneOffset = options.timezoneOffset,
useUTC = options.useUTC;
// Allow using a different Date class
this.Date = options.Date || Time_win.Date || Date;
// Assign the time zone. Handle the legacy, deprecated `useUTC` option.
var timezone = options.timezone;
if (Time_defined(useUTC)) {
timezone = useUTC ? 'UTC' : void 0;
}
// The Etc/GMT time zones do not support offsets with half-hour
// resolutions
if (timezoneOffset && timezoneOffset % 60 === 0) {
timezone = 'Etc/GMT' + ((timezoneOffset > 0 ? '+' : '')) + timezoneOffset / 60;
}
/*
* The time object has options allowing for variable time zones, meaning
* the axis ticks or series data needs to consider this.
*/
this.variableTimezone = timezone !== 'UTC' &&
(timezone === null || timezone === void 0 ? void 0 : timezone.indexOf('Etc/GMT')) !== 0;
this.timezone = timezone;
// Assign default time formats from locale strings
['months', 'shortMonths', 'weekdays', 'shortWeekdays'].forEach(function (name) {
var isMonth = /months/i.test(name), isShort = /short/.test(name), options = { timeZone: 'UTC' };
options[isMonth ? 'month' : 'weekday'] = isShort ? 'short' : 'long';
_this[name] = (isMonth ?
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] :
[3, 4, 5, 6, 7, 8, 9]).map(function (position) { return _this.dateFormat(options, (isMonth ? 31 : 1) * 24 * 36e5 * position); });
});
};
/**
* Get a date in terms of numbers (year, month, day etc) for further
* processing. Takes the current `timezone` setting into account. Inverse of
* `makeTime` and the native `Date` constructor and `Date.UTC`.
*
* The date is returned in array format with the following indices:
*
* 0: year,
* 1: month (zero based),
* 2: day,
* 3: hours,
* 4: minutes,
* 5: seconds,
* 6: milliseconds,
* 7: weekday (Sunday as 0)
*
* @function Highcharts.Time#toParts
*
* @param {number|Date} [timestamp]
* The timestamp in milliseconds since January 1st 1970.
* A Date object is also accepted.
*
* @return {Array<number>} The date parts in array format.
*/
Time.prototype.toParts = function (timestamp) {
var _a = this.dateTimeFormat({
weekday: 'narrow',
day: 'numeric',
month: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
}, timestamp, 'es')
.split(/(?:, |\/|:)/g), weekday = _a[0], dayOfMonth = _a[1], month = _a[2], year = _a[3], hours = _a[4], minutes = _a[5], seconds = _a[6];
return [
year,
+month - 1,
dayOfMonth,
hours,
minutes,
seconds,
// Milliseconds
Math.floor(Number(timestamp) || 0) % 1000,
// Weekday index
spanishWeekdayIndex(weekday)
].map(Number);
};
/**
* Shorthand to get a cached `Intl.DateTimeFormat` instance.
*/
Time.prototype.dateTimeFormat = function (options, timestamp, locale) {
var _a;
if (locale === void 0) { locale = this.options.locale || pageLang; }
var cacheKey = JSON.stringify(options) + locale;
if (Time_isString(options)) {
options = this.str2dtf(options);
}
var dTL = this.dTLCache[cacheKey];
if (!dTL) {
(_a = options.timeZone) !== null && _a !== void 0 ? _a : (options.timeZone = this.timezone);
try {
dTL = new Intl.DateTimeFormat(locale, options);
}
catch (e) {
if (/Invalid time zone/i.test(e.message)) {
Time_error(34);
options.timeZone = 'UTC';
dTL = new Intl.DateTimeFormat(locale, options);
}
else {
Time_error(e.message, false);
}
}
}
this.dTLCache[cacheKey] = dTL;
return (dTL === null || dTL === void 0 ? void 0 : dTL.format(timestamp)) || '';
};
/**
* Take a locale-aware string format and return a full DateTimeFormat in
* object form.
*/
Time.prototype.str2dtf = function (s, dtf) {
if (dtf === void 0) { dtf = {}; }
var mapping = {
L: { fractionalSecondDigits: 3 },
S: { second: '2-digit' },
M: { minute: 'numeric' },
H: { hour: '2-digit' },
k: { hour: 'numeric' },
E: { weekday: 'narrow' },
a: { weekday: 'short' },
A: { weekday: 'long' },
d: { day: '2-digit' },
e: { day: 'numeric' },
b: { month: 'short' },
B: { month: 'long' },
m: { month: '2-digit' },
o: { month: 'numeric' },
y: { year: '2-digit' },
Y: { year: 'numeric' }
};
Object.keys(mapping).forEach(function (key) {
if (s.indexOf(key) !== -1) {
Time_extend(dtf, mapping[key]);
}
});
return dtf;
};
/**
* Make a time and returns milliseconds. Similar to `Date.UTC`, but takes
* the current `timezone` setting into account.
*
* @function Highcharts.Time#makeTime
*
* @param {number} year
* The year
*
* @param {number} month
* The month. Zero-based, so January is 0.
*
* @param {number} [date=1]
* The day of the month
*
* @param {number} [hours=0]
* The hour of the day, 0-23.
*
* @param {number} [minutes=0]
* The minutes
*
* @param {number} [seconds=0]
* The seconds
*
* @return {number}
* The time in milliseconds since January 1st 1970.
*/
Time.prototype.makeTime = function (year, month, date, hours, minutes, seconds, milliseconds) {
if (date === void 0) { date = 1; }
if (hours === void 0) { hours = 0; }
// eslint-disable-next-line new-cap
var d = this.Date.UTC(year,
month,
date,
hours,
minutes || 0,
seconds || 0,
milliseconds || 0);
if (this.timezone !== 'UTC') {
var offset = this.getTimezoneOffset(d);
d += offset;
// Adjustments close to DST transitions
if (
// Optimize for speed by limiting the number of calls to
// `getTimezoneOffset`. According to
// https://en.wikipedia.org/wiki/Daylight_saving_time_by_country,
// DST change may only occur in these months.
[2, 3, 8, 9, 10, 11].indexOf(month) !== -1 &&
// DST transitions occur only in the night-time
(hours < 5 || hours > 20)) {
var newOffset = this.getTimezoneOffset(d);
if (offset !== newOffset) {
d += newOffset - offset;
// A special case for transitioning from summer time to winter
// time. When the clock is set back, the same time is repeated
// twice, i.e. 02:30 am is repeated since the clock is set back
// from 3 am to 2 am. We need to make the same time as local
// Date does.
}
else if (offset - 36e5 === this.getTimezoneOffset(d - 36e5) &&
!hasOldSafariBug) {
d -= 36e5;
}
}
}
return d;
};
/**
* Parse a datetime string. Unless the string contains time zone
* information, apply the current `timezone` from options. If the argument
* is a number, return it.
*
* @function Highcharts.Time#parse
* @param {string|number|undefined} s The datetime string to parse
* @return {number|undefined} Parsed JavaScript timestamp
*/
Time.prototype.parse = function (s) {
if (!Time_isString(s)) {
return s !== null && s !== void 0 ? s : void 0;
}
s = s
// Firefox fails on YYYY/MM/DD
.replace(/\//g, '-')
// Replace some non-standard notations
.replace(/(GMT|UTC)/, '');
// Extend shorthand hour timezone offset like +02
// .replace(/([+-][0-9]{2})$/, '$1:00');
// Check if the string has time zone information
var hasTimezone = s.indexOf('Z') > -1 ||
/([+-][0-9]{2}):?[0-9]{2}$/.test(s), isYYYYMMDD = /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(s);
if (!hasTimezone && !isYYYYMMDD) {
s += 'Z';
}
var ts = Date.parse(s);
if (Time_isNumber(ts)) {
// Unless the string contains time zone information, convert from
// the local time result of `Date.parse` via UTC into the current
// timezone of the time object.
return ts + ((!hasTimezone || isYYYYMMDD) ?
this.getTimezoneOffset(ts) :
0);
}
};
/**
* Get the time zone offset based on the current timezone information as
* set in the global options.
*
* @function Highcharts.Time#getTimezoneOffset
*
* @param {number} timestamp
* The JavaScript timestamp to inspect.
*
* @return {number}
* The timezone offset in minutes compared to UTC.
*/
Time.prototype.getTimezoneOffset = function (timestamp) {
if (this.timezone !== 'UTC') {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var _a = this.dateTimeFormat({ timeZoneName: 'shortOffset' }, timestamp, 'en')
.split(/(GMT|:)/)
.map(Number), date = _a[0], gmt = _a[1], hours = _a[2], colon = _a[3], _b = _a[4], minutes = _b === void 0 ? 0 : _b, offset = -(hours + minutes / 60) * 60 * 60000;
// Possible future NaNs stop here
if (Time_isNumber(offset)) {
return offset;
}
}
return 0;
};
/**
* Formats a JavaScript date timestamp (milliseconds since January 1 1970)
* into a human readable date string.
*
* The `format` parameter accepts two types of values:
* - An object containing settings that are passed directly on to
* [Intl.DateTimeFormat.prototype.format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format).
* - A format string containing either individual or locale-aware format
* keys. **Individual keys**, for example `%Y-%m-%d`, are listed below.
* **Locale-aware keys** are grouped by square brackets, for example
* `%[Ymd]`. The order of keys within the square bracket doesn't affect
* the output, which is determined by the locale. See example below.
* Internally, the locale-aware format keys are just a shorthand for the
* full object formats, but are particularly practical in
* [templating](https://www.highcharts.com/docs/chart-concepts/templating)
* where full object definitions are not an option.
*
* The available string format keys are listed below. Additional formats can
* be given in the {@link Highcharts.dateFormats} hook.
*
* Supported format keys:
* | Key | Description | Notes on locale-aware format |
* -------|----------------------------------------------|-------|
* | `%A` | Long weekday, like 'Monday' | |
* | `%a` | Short weekday, like 'Mon' | |
* | `%E` | Narrow weekday, single character | |
* | `%d` | Two digit day of the month, 01 to 31 | |
* | `%e` | Day of the month, 1 through 31 | |
* | `%w` | Day of the week, 0 through 6 | N/A |
* | `%b` | Short month, like 'Jan' | |
* | `%B` | Long month, like 'January' | |
* | `%m` | Two digit month number, 01 through 12 | |
* | `%o` | Month number, 1 through 12 | |
* | `%y` | Two digits year, like 24 for 2024 | |
* | `%Y` | Four digits year, like 2024 | |
* | `%H` | Two digits hours in 24h format, 00 through 23 | Depending on the locale, 12h format may be instered. |
* | `%k` | Hours in 24h format, 0 through 23 | Depending on the locale, 12h format may be instered. |
* | `%I` | Two digits hours in 12h format, 00 through 11 | N/A. The locale determines the hour format. |
* | `%l` | Hours in 12h format, 1 through 12 | N/A. The locale determines the hour format. |
* | `%M` | Two digits minutes, 00 through 59 | |
* | `%p` | Upper case AM or PM | N/A. The locale determines whether to add AM and PM. |
* | `%P` | Lower case AM or PM | N/A. The locale determines whether to add AM and PM. |
* | `%S` | Two digits seconds, 00 through 59 | |
* | `%L` | Milliseconds (naming from Ruby) | |
*
* @example
* // Object format, US English
* const time1 = new Highcharts.Time({ locale: 'en-US' });
* console.log(
* time1.dateFormat({
* day: 'numeric',
* month: 'short',
* year: 'numeric',
* hour: 'numeric',
* minute: 'numeric'
* }, Date.UTC(2024, 11, 31))
* ); // => Dec 31, 2024, 12:00 AM
*
* // Object format, British English
* const time2 = new Highcharts.Time({ locale: 'en-GB' });
* console.log(
* time2.dateFormat({
* day: 'numeric',
* month: 'short',
* year: 'numeric',
* hour: 'numeric',
* minute: 'numeric'
* }, Date.UTC(2024, 11, 31))
* ); // => 31 Dec 2024, 00:00
*
* // Individual key string replacement
* const time3 = new Highcharts.Time();
* console.log(
* time3.dateFormat('%Y-%m-%d %H:%M:%S', Date.UTC(2024, 11, 31))
* ); // => 2024-12-31 00:00:00
*
* // Locale-aware keys, US English
* const time4 = new Highcharts.Time({ locale: 'en-US' });
* console.log(
* time4.dateFormat('%[YebHM]', Date.UTC(2024, 11, 31))
* ); // => Dec 31, 2024, 12:00 AM
*
* // Locale-aware keys, British English
* const time5 = new Highcharts.Time({ locale: 'en-GB' });
* console.log(
* time5.dateFormat('%[YebHM]', Date.UTC(2024, 11, 31))
* ); // => 31 Dec 2024, 00:00
*
* // Mixed locale-aware and individual keys
* console.log(
* time5.dateFormat('%[Yeb], %H:%M', Date.UTC(2024, 11, 31))
* ); // => 31 Dec 2024, 00:00
*
* @function Highcharts.Time#dateFormat
*
* @param {string|Highcharts.DateTimeFormatOptions} format
* The desired string format where various time representations are
* prefixed with %, or an object representing the locale-aware format
* options.
*
* @param {number} [timestamp]
* The JavaScript timestamp.
*
* @param {boolean} [upperCaseFirst=false]
* Upper case first letter in the return.
*
* @return {string}
* The formatted date.
*/
Time.prototype.dateFormat = function (format, timestamp, upperCaseFirst) {
var _a;
var lang = (_a = Core_Globals.defaultOptions) === null || _a === void 0 ? void 0 : _a.lang;
if (!Time_defined(timestamp) || isNaN(timestamp)) {
return (lang === null || lang === void 0 ? void 0 : lang.invalidDate) || '';
}
format = format !== null && format !== void 0 ? format : '%Y-%m-%d %H:%M:%S';
// First, identify and replace locale-aware formats like %[Ymd]
if (Time_isString(format)) {
var localeAwareRegex = /%\[([a-zA-Z]+)\]/g;
var match = void 0;
while ((match = localeAwareRegex.exec(format))) {
format = format.replace(match[0], this.dateTimeFormat(match[1], timestamp));
}
}
// Then, replace static formats like %Y, %m, %d etc.
if (Time_isString(format) && format.indexOf('%') !== -1) {
var time_1 = this,
_b = this.toParts(timestamp),
fullYear = _b[0],
month = _b[1],
dayOfMonth = _b[2],
hours = _b[3],
minutes = _b[4],
seconds = _b[5],
milliseconds = _b[6],
weekday = _b[7],
langWeekdays = (lang === null || lang === void 0 ? void 0 : lang.weekdays) || this.weekdays,
shortWeekdays = (lang === null || lang === void 0 ? void 0 : lang.shortWeekdays) || this.shortWeekdays,
months = (lang === null || lang === void 0 ? void 0 : lang.months) || this.months,
shortMonths = (lang === null || lang === void 0 ? void 0 : lang.shortMonths) || this.shortMonths,
// List all format keys. Custom formats can be added from the
// outside.
replacements = Time_extend({
// Day
// Short weekday, like 'Mon'
a: shortWeekdays ?
shortWeekdays[weekday] :
langWeekdays[weekday].substr(0, 3),
// Long weekday, like 'Monday'
A: langWeekdays[weekday],
// Two digit day of the month, 01 to 31
d: Time_pad(dayOfMonth),
// Day of the month, 1 through 31
e: Time_pad(dayOfMonth, 2, ' '),
// Day of the week, 0 through 6
w: weekday,
// Week (none implemented)
// 'W': weekNumber(),
// Month
// Short month, like 'Jan'
b: shortMonths[month],
// Long month, like 'January'
B: months[month],
// Two digit month number, 01 through 12
m: Time_pad(month + 1),
// Month number, 1 through 12 (#8150)
o: month + 1,
// Year
// Two digits year, like 09 for 2009
y: fullYear.toString().substr(2, 2),
// Four digits year, like 2009
Y: fullYear,
// Time
// Two digits hours in 24h format, 00 through 23
H: Time_pad(hours),
// Hours in 24h format, 0 through 23
k: hours,
// Two digits hours in 12h format, 00 through 11
I: Time_pad((hours % 12) || 12),
// Hours in 12h format, 1 through 12
l: (hours % 12) || 12,
// Two digits minutes, 00 through 59
M: Time_pad(minutes),
// Upper case AM or PM
p: hours < 12 ? 'AM' : 'PM',
// Lower case AM or PM
P: hours < 12 ? 'am' : 'pm',
// Two digits seconds, 00 through 59
S: Time_pad(seconds),
// Milliseconds (naming from Ruby)
L: Time_pad(milliseconds, 3)
},
Core_Globals.dateFormats);
// Do the replaces
Time_objectEach(replacements, function (val, key) {
if (Time_isString(format)) {
// Regex would do it in one line, but this is faster
while (format.indexOf('%' + key) !== -1) {
format = format.replace('%' + key, typeof val === 'function' ?
val.call(time_1, timestamp) :
val);
}
}
});
}
else if (Time_isObject(format)) {
var tzHours = (this.getTimezoneOffset(timestamp) || 0) /
(60000 * 60), timeZone = this.timezone || ('Etc/GMT' + (tzHours >= 0 ? '+' : '') + tzHours), _c = format.prefix, prefix = _c === void 0 ? '' : _c, _d = format.suffix, suffix = _d === void 0 ? '' : _d;
format = prefix + this.dateTimeFormat(Time_extend({ timeZone: timeZone }, format), timestamp) + suffix;
}
// Optionally sentence-case the string and return
return upperCaseFirst ? Time_ucfirst(format) : format;
};
/**
* Resolve legacy formats of dateTimeLabelFormats (strings and arrays) into
* an object.
* @private
* @param {string|Array<T>|Highcharts.Dictionary<T>} f
* General format description
* @return {Highcharts.Dictionary<T>}
* The object definition
*/
Time.prototype.resolveDTLFormat = function (f) {
if (!Time_isObject(f, true)) { // Check for string or array
f = Time_splat(f);
return {
main: f[0],
from: f[1],
to: f[2]
};
}
// Type-check DateTimeFormatOptions against DateTimeLabelFormatObject
if (Time_isObject(f, true) && isDateTimeFormatOptions(f)) {
return { main: f };
}
return f;
};
/**
* Return an array with time positions distributed on round time values
* right and right after min and max. Used in datetime axes as well as for
* grouping data on a datetime axis.
*
* @function Highcharts.Time#getTimeTicks
*
* @param {Highcharts.TimeNormalizedObject} normalizedInterval
* The interval in axis values (ms) and the count
*
* @param {number} [min]
* The minimum in axis values
*
* @param {number} [max]
* The maximum in axis values
*
* @param {number} [startOfWeek=1]
*
* @return {Highcharts.AxisTickPositionsArray}
* Time positions
*/
Time.prototype.getTimeTicks = function (normalizedInterval, min, max, startOfWeek) {
var time = this,
tickPositions = [],
higherRanks = {},
_a = normalizedInterval.count,
count = _a === void 0 ? 1 : _a,
unitRange = normalizedInterval.unitRange;
var _b = time.toParts(min),
year = _b[0],
month = _b[1],
dayOfMonth = _b[2],
hours = _b[3],
minutes = _b[4],
seconds = _b[5],
milliseconds = (min || 0) % 1000,
variableDayLength;
startOfWeek !== null && startOfWeek !== void 0 ? startOfWeek : (startOfWeek = 1);
if (Time_defined(min)) { // #1300
milliseconds = unitRange >= Time_timeUnits.second ?
0 : // #3935
count * Math.floor(milliseconds / count);
if (unitRange >= Time_timeUnits.second) { // Second
seconds = unitRange >= Time_timeUnits.minute ?
0 : // #3935
count * Math.floor(seconds / count);
}
if (unitRange >= Time_timeUnits.minute) { // Minute
minutes = unitRange >= Time_timeUnits.hour ?
0 :
count * Math.floor(minutes / count);
}
if (unitRange >= Time_timeUnits.hour) { // Hour
hours = unitRange >= Time_timeUnits.day ?
0 :
count * Math.floor(hours / count);
}
if (unitRange >= Time_timeUnits.day) { // Day
dayOfMonth = unitRange >= Time_timeUnits.month ?
1 :
Math.max(1, count * Math.floor(dayOfMonth / count));
}
if (unitRange >= Time_timeUnits.month) { // Month
month = unitRange >= Time_timeUnits.year ? 0 :
count * Math.floor(month / count);
}
if (unitRange >= Time_timeUnits.year) { // Year
year -= year % count;
}
// Week is a special case that runs outside the hierarchy
if (unitRange === Time_timeUnits.week) {
if (count) {
min = time.makeTime(year, month, dayOfMonth, hours, minutes, seconds, milliseconds);
}
// Get start of current week, independent of count
var weekday = this.dateTimeFormat({
timeZone: this.timezone,
weekday: 'narrow'
},
min, 'es'),
weekdayNo = spanishWeekdayIndex(weekday);
dayOfMonth += -weekdayNo + startOfWeek +
// We don't want to skip days that are before
// startOfWeek (#7051)
(weekdayNo < startOfWeek ? -7 : 0);
}
min = time.makeTime(year, month, dayOfMonth, hours, minutes, seconds, milliseconds);
// Handle local timezone offset
if (time.variableTimezone && Time_defined(max)) {
// Detect whether we need to take the DST crossover into
// consideration. If we're crossing over DST, the day length may
// be 23h or 25h and we need to compute the exact clock time for
// each tick instead of just adding hours. This comes at a cost,
// so first we find out if it is needed (#4951).
variableDayLength = (
// Long range, assume we're crossing over.
max - min > 4 * Time_timeUnits.month ||
// Short range, check if min and max are in different time
// zones.
time.getTimezoneOffset(min) !==
time.getTimezoneOffset(max));
}
// Iterate and add tick positions at appropriate values
var t = min,
i = 1;
while (t < max) {
tickPositions.push(t);
// Increase the years
if (unitRange === Time_timeUnits.year) {
t = time.makeTime(year + i * count, 0);
// Increase the months
}
else if (unitRange === Time_timeUnits.month) {
t = time.makeTime(year, month + i * count);
// If we're using local time, the interval is not fixed as it
// jumps one hour at the DST crossover
}
else if (variableDayLength && (unitRange === Time_timeUnits.day ||
unitRange === Time_timeUnits.week)) {
t = time.makeTime(year, month, dayOfMonth +
i * count * (unitRange === Time_timeUnits.day ? 1 : 7));
}
else if (variableDayLength &&
unitRange === Time_timeUnits.hour &&
count > 1) {
// Make sure higher ranks are preserved across DST (#6797,
// #7621)
t = time.makeTime(year, month, dayOfMonth, hours + i * count);
// Else, the interval is fixed and we use simple addition
}
else {
t += unitRange * count;
}
i++;
}
// Push the last time
tickPositions.push(t);
// Handle higher ranks. Mark new days if the time is on midnight
// (#950, #1649, #1760, #3349). Use a reasonable dropout threshold
// to prevent looping over dense data grouping (#6156).
if (unitRange <= Time_timeUnits.hour && tickPositions.length < 10000) {
tickPositions.forEach(function (t) {
if (
// Speed optimization, no need to run dateFormat unless
// we're on a full or half hour
t % 1800000 === 0 &&
// Check for local or global midnight
time.dateFormat('%H%M%S%L', t) === '000000000') {
higherRanks[t] = 'day';
}
});
}
}
// Record information on the chosen unit - for dynamic label formatter
tickPositions.info = Time_extend(normalizedInterval, {
higherRanks: higherRanks,
totalRange: unitRange * count
});
return tickPositions;
};
/**
* Get the optimal date format for a point, based on a range.
*
* @private
* @function Highcharts.Time#getDateFormat
*
* @param {number} range
* The time range
*
* @param {number} timestamp
* The timestamp of the date
*
* @param {number} startOfWeek
* An integer representing the first day of the week, where 0 is
* Sunday.
*
* @param {Highcharts.Dictionary<string>} dateTimeLabelFormats
* A map of time units to formats.
*
* @return {string}
* The optimal date format for a point.
*/
Time.prototype.getDateFormat = function (range, timestamp, startOfWeek, dateTimeLabelFormats) {
var dateStr = this.dateFormat('%m-%d %H:%M:%S.%L', timestamp), blank = '01-01 00:00:00.000', strpos = {
millisecond: 15,
second: 12,
minute: 9,
hour: 6,
day: 3
};
var n = 'millisecond',
// For sub-millisecond data, #4223
lastN = n;
for (n in Time_timeUnits) { // eslint-disable-line guard-for-in
// If the range is exactly one week and we're looking at a
// Sunday/Monday, go for the week format
if (range === Time_timeUnits.week &&
+this.dateFormat('%w', timestamp) === startOfWeek &&
dateStr.substr(6) === blank.substr(6)) {
n = 'week';
break;
}
// The first format that is too great for the range
if (Time_timeUnits[n] > range) {
n = lastN;
break;
}
// If the point is placed every day at 23:59, we need to show
// the minutes as well. #2637.
if (strpos[n] &&
dateStr.substr(strpos[n]) !== blank.substr(strpos[n])) {
break;
}
// Weeks are outside the hierarchy, only apply them on
// Mondays/Sundays like in the first condition
if (n !== 'week') {
lastN = n;
}
}
return this.resolveDTLFormat(dateTimeLabelFormats[n]).main;
};
return Time;
}());
/* *
*
* Default export
*
* */
/* harmony default export */ var Core_Time = (Time);
/* *
*
* API Declarations
*
* */
/**
* Normalized interval.
*
* @interface Highcharts.TimeNormalizedObject
*/ /**
* The count.
*
* @name Highcharts.TimeNormalizedObject#count
* @type {number|undefined}
*/ /**
* The interval in axis values (ms).
*
* @name Highcharts.TimeNormalizedObject#unitRange
* @type {number}
*/
/**
* Function of an additional date format specifier.
*
* @callback Highcharts.TimeFormatCallbackFunction
*
* @param {number} timestamp
* The time to format.
*
* @return {string}
* The formatted portion of the date.
*/
/**
* Time ticks.
*
* @interface Highcharts.AxisTickPositionsArray
* @extends global.Array<number>
*/ /**
* @name Highcharts.AxisTickPositionsArray#info
* @type {Highcharts.TimeTicksInfoObject|undefined}
*/
/**
* A callback to return the time zone offset for a given datetime. It
* takes the timestamp in terms of milliseconds since January 1 1970,
* and returns the timezone offset in minutes. This provides a hook
* for drawing time based charts in specific time zones using their
* local DST crossover dates, with the help of external libraries.
*
* @callback Highcharts.TimezoneOffsetCallbackFunction
*
* @param {number} timestamp
* Timestamp in terms of milliseconds since January 1 1970.
*
* @return {number}
* Timezone offset in minutes.
*/
/**
* Options for formatting dates and times using the [Intl.DateTimeFormat](
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
* ) API, and extended with some custom options for Highcharts.
*
* @interface Highcharts.DateTimeFormatOptions
*/ /**
* The locale matching algorithm to use.
*
* @name Highcharts.DateTimeFormatOptions#localeMatcher
* @type {string|undefined}
*/ /**
* The time zone to use. The default is the browser's default time zone.
*
* @name Highcharts.DateTimeFormatOptions#timeZone
* @type {string|undefined}
*/ /**
* Whether to use 12-hour time (as opposed to 24-hour time).
*
* @name Highcharts.DateTimeFormatOptions#hour12
* @type {'auto'|'always'|'never'|undefined}
*/ /**
* The format matching algorithm to use.
*
* @name Highcharts.DateTimeFormatOptions#formatMatcher
* @type {string|undefined}
*/ /**
* The representation of the weekday.
*
* @name Highcharts.DateTimeFormatOptions#weekday
* @type {'narrow'|'short'|'long'|undefined}
*/ /**
* The representation of the era.
*
* @name Highcharts.DateTimeFormatOptions#era
* @type {'narrow'|'short'|'long'|undefined}
*/ /**
* The representation of the year.
*
* @name Highcharts.DateTimeFormatOptions#year
* @type {'numeric'|'2-digit'|undefined}
*/ /**
* The representation of the month.
* "narrow", "short", "long".
*
* @name Highcharts.DateTimeFormatOptions#month
* @type {'numeric'|'2-digit'|'narrow'|'short'|'long'|undefined}
*/ /**
* The representation of the day.
*
* @name Highcharts.DateTimeFormatOptions#day
* @type {'numeric'|'2-digit'|undefined}
*/ /**
* The representation of the hour.
*
* @name Highcharts.DateTimeFormatOptions#hour
* @type {'numeric'|'2-digit'|undefined}
*/ /**
* The representation of the minute.
*
* @name Highcharts.DateTimeFormatOptions#minute
* @type {'numeric'|'2-digit'|undefined}
*/ /**
* The representation of the second.
*
* @name Highcharts.DateTimeFormatOptions#second
* @type {'numeric'|'2-digit'|undefined}
*/ /**
* The number of fractional digits to use. 3 means milliseconds.
*
* @name Highcharts.DateTimeFormatOptions#fractionalSecondDigits
* @type {number|undefined}
*/ /**
* The representation of the time zone name.
*
* @name Highcharts.DateTimeFormatOptions#timeZoneName
* @type {'short'|'long'|undefined}
*/ /**
* A prefix for the time string. Custom Highcharts option.
*
* @name Highcharts.DateTimeFormatOptions#prefix
* @type {'string'|undefined}
*/ /**
* A suffix for the time string. Custom Highcharts option.
*
* @name Highcharts.DateTimeFormatOptions#suffix
* @type {'string'|undefined}
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Defaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var isTouchDevice = Core_Globals.isTouchDevice;
var Defaults_fireEvent = Core_Utilities.fireEvent, Defaults_merge = Core_Utilities.merge;
/* *
*
* API Options
*
* */
/**
* Global default settings.
*
* @name Highcharts.defaultOptions
* @type {Highcharts.Options}
*/ /**
* @optionparent
* @private
*/
var defaultOptions = {
/**
* An array containing the default colors for the chart's series. When
* all colors are used, new colors are pulled from the start again.
*
* Default colors can also be set on a series or series.type basis,
* see [column.colors](#plotOptions.column.colors),
* [pie.colors](#plotOptions.pie.colors).
*
* In styled mode, the colors option doesn't exist. Instead, colors
* are defined in CSS and applied either through series or point class
* names, or through the [chart.colorCount](#chart.colorCount) option.
*
* @sample {highcharts} highcharts/chart/colors/
* Assign a global color theme
* @sample highcharts/members/theme-v10/
* Latest release styled like version 10
*
* @type {Array<(Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject)>}
* @default [
* "#2caffe",
* "#544fc5",
* "#00e272",
* "#fe6a35",
* "#6b8abc",
* "#d568fb",
* "#2ee0ca",
* "#fa4b42",
* "#feb56a",
* "#91e8e1"
* ]
*/
colors: Palettes.colors,
/**
* Styled mode only. Configuration object for adding SVG definitions for
* reusable elements. See [gradients, shadows and
* patterns](https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns)
* for more information and code examples.
*
* @type {*}
* @since 5.0.0
* @apioption defs
*/
/**
* @ignore-option
*/
symbols: ['circle', 'diamond', 'square', 'triangle', 'triangle-down'],
/**
* An object containing language-related strings and settings. A typical
* setup uses `Highcharts.setOptions` to make the options apply to all
* charts in the same page.
*
* ```js
* Highcharts.setOptions({
* lang: {
* locale: 'fr'
* }
* });
* ```
*/
lang: {
/**
* The browser locale to use for date and number formatting. The actual
* locale used for each chart is determined in three steps:
* 1. If this `lang.locale` option is specified, it is used.
* 2. Else, look for the closest ancestor HTML element with a `lang`
* attribute, typically the `<html>` element.
* 3. If no 'lang' attribute is found, use the default browser locale.
*
* Use `en-GB`, British English, for approximate consistency with
* Highcharts v < 12.
*
* @sample highcharts/lang/locale/
* Set the locale using the `lang.locale` option
* @sample highcharts/lang/locale-attribute/
* Pick up the locale from the HTML `lang` attribute
* @sample highcharts/members/highcharts-numberformat
* Arabic locale with digits and dates *
*
* @since 12.0.0
* @type {string|Array<string>}
*/
locale: void 0,
/**
* The loading text that appears when the chart is set into the loading
* state following a call to `chart.showLoading`.
*/
loading: 'Loading...',
/**
* An array containing the months names. Corresponds to the `%B` format
* in `Highcharts.dateFormat()`. Defaults to 'undefined',
* meaning the default month names are used according to the
* `lang.locale` setting.
*
* @type {Array<string>}
*/
months: void 0,
/**
* An array containing the months names in abbreviated form. Corresponds
* to the `%b` format in `Highcharts.dateFormat()`. Defaults to
* 'undefined', meaning the default short month names are used according
* to the `lang.locale` setting.
*
* @type {Array<string>}
*/
shortMonths: void 0,
/**
* An array containing the weekday names. Defaults to 'undefined',
* meaning the default weekday names are used according to the
* `lang.locale` setting.
*
* @type {Array<string>}
*/
weekdays: void 0,
/**
* Short week days, starting Sunday. Defaults to 'undefined', meaning
* the default short weekday names are used according to the
* `lang.locale` setting.
*
* @sample highcharts/lang/shortweekdays/
* Finnish two-letter abbreviations
*
* @type {Array<string>}
* @since 4.2.4
* @apioption lang.shortWeekdays
*/
/**
* What to show in a date field for invalid dates. Defaults to an empty
* string.
*
* @type {string}
* @since 4.1.8
* @product highcharts highstock
* @apioption lang.invalidDate
*/
/**
* The title appearing on hovering the zoom in button. The text itself
* defaults to "+" and can be changed in the button options.
*
* @type {string}
* @default Zoom in
* @product highmaps
* @apioption lang.zoomIn
*/
/**
* The title appearing on hovering the zoom out button. The text itself
* defaults to "-" and can be changed in the button options.
*
* @type {string}
* @default Zoom out
* @product highmaps
* @apioption lang.zoomOut
*/
/**
* The default decimal point used in the `Highcharts.numberFormat`
* method unless otherwise specified in the function arguments. Defaults
* to the locale decimal point as determined by `lang.locale`.
*
* @type {string}
* @default undefined
* @since 1.2.2
* @apioption lang.decimalPoint
*/
/**
* [Metric prefixes](https://en.wikipedia.org/wiki/Metric_prefix) used
* to shorten high numbers in axis labels. Replacing any of the
* positions with `null` causes the full number to be written. Setting
* `numericSymbols` to `undefined` disables shortening altogether.
*
* @sample {highcharts} highcharts/lang/numericsymbols/
* Replacing the symbols with text
* @sample {highstock} highcharts/lang/numericsymbols/
* Replacing the symbols with text
*
* @type {Array<string>}
* @default ["k", "M", "G", "T", "P", "E"]
* @since 2.3.0
*/
numericSymbols: ['k', 'M', 'G', 'T', 'P', 'E'],
/**
* The magnitude of [numericSymbols](#lang.numericSymbol) replacements.
* Use 10000 for Japanese, Korean and various Chinese locales, which
* use symbols for 10^4, 10^8 and 10^12.
*
* @sample highcharts/lang/numericsymbolmagnitude/
* 10000 magnitude for Japanese
*
* @type {number}
* @default 1000
* @since 5.0.3
* @apioption lang.numericSymbolMagnitude
*/
/**
* The default thousands separator used in the `Highcharts.numberFormat`
* method unless otherwise specified in the function arguments. Defaults
* to the locale thousands separator as determined by `lang.locale`.
*
* @type {string}
* @default undefined
* @since 1.2.2
* @apioption lang.thousandsSep
*/
/**
* The text for the label appearing when a chart is zoomed.
*
* @since 1.2.4
*/
resetZoom: 'Reset zoom',
/**
* The tooltip title for the label appearing when a chart is zoomed.
*
* @since 1.2.4
*/
resetZoomTitle: 'Reset zoom level 1:1'
},
/**
* Global options that don't apply to each chart. These options, like
* the `lang` options, must be set using the `Highcharts.setOptions`
* method.
*
* ```js
* Highcharts.setOptions({
* global: {
* buttonTheme: {
* fill: '#d0d0d0'
* }
* }
* });
* ```
*/
global: {
/**
* General theme for buttons. This applies to the zoom button, exporting
* context menu, map navigation, range selector buttons and custom
* buttons generated using the `SVGRenderer.button` function. However,
* each of these may be overridden with more specific options.
*
* @sample highcharts/global/buttontheme
* General button theme
* @since 11.4.2
*/
buttonTheme: {
/**
* The fill color for buttons
*/
fill: "#f7f7f7" /* Palette.neutralColor3 */,
/**
* The padding of buttons
*/
padding: 8,
/**
* The border radius for buttons
*/
r: 2,
/**
* The stroke color for buttons
*/
stroke: "#cccccc" /* Palette.neutralColor20 */,
/**
* The stroke width for buttons
*/
'stroke-width': 1,
/**
* CSS styling for the buttons' text
*/
style: {
color: "#333333" /* Palette.neutralColor80 */,
cursor: 'pointer',
fontSize: '0.8em',
fontWeight: 'normal'
},
/**
* State overrides for the buttons
*/
states: {
/**
* Hover state overrides for the buttons are applied in addition
* to the normal state options
*/
hover: {
fill: "#e6e6e6" /* Palette.neutralColor10 */
},
/**
* Select state overrides for the buttons are applied in
* addition to the normal state options
*/
select: {
fill: "#e6e9ff" /* Palette.highlightColor10 */,
style: {
color: "#000000" /* Palette.neutralColor100 */,
fontWeight: 'bold'
}
},
/**
* Disabled state overrides for the buttons are applied in
* addition to the normal state options
*/
disabled: {
/**
* Disabled state CSS style overrides for the buttons' text
*/
style: {
color: "#cccccc" /* Palette.neutralColor20 */
}
}
}
}
},
/**
* Time options that can apply globally or to individual charts. These
* settings affect how `datetime` axes are laid out, how tooltips are
* formatted, how series
* [pointIntervalUnit](#plotOptions.series.pointIntervalUnit) works and how
* the Highcharts Stock range selector handles time.
*
* The common use case is that all charts in the same Highcharts object
* share the same time settings, in which case the global settings are set
* using `setOptions`.
*
* ```js
* // Apply time settings globally
* Highcharts.setOptions({
* time: {
* timezone: 'Europe/London'
* }
* });
* // Apply time settings by instance
* const chart = Highcharts.chart('container', {
* time: {
* timezone: 'America/New_York'
* },
* series: [{
* data: [1, 4, 3, 5]
* }]
* });
*
* // Use the Time object
* console.log(
* 'Current time in New York',
* chart.time.dateFormat('%Y-%m-%d %H:%M:%S', Date.now())
* );
* ```
*
* Since v6.0.5, the time options were moved from the `global` object to the
* `time` object, and time options can be set on each individual chart.
*
* @sample {highcharts|highstock}
* highcharts/time/timezone/
* Set the timezone globally
* @sample {highcharts}
* highcharts/time/individual/
* Set the timezone per chart instance
* @sample {highstock}
* stock/time/individual/
* Set the timezone per chart instance
*
* @since 6.0.5
* @optionparent time
*/
time: {
/**
* A custom `Date` class for advanced date handling. For example,
* [JDate](https://github.com/tahajahangir/jdate) can be hooked in to
* handle Jalali dates.
*
* @type {*}
* @since 4.0.4
* @product highcharts highstock gantt
*/
Date: void 0,
/**
* A named time zone. Supported time zone names rely on the browser
* implementations, as described in the [mdn
* docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timezone).
* If the given time zone is not recognized by the browser, Highcharts
* provides a warning and falls back to returning a 0 offset,
* corresponding to the UTC time zone.
*
* The time zone affects axis scaling, tickmark placement and
* time display in `Highcharts.dateFormat`.
*
* Setting `timezone` to `undefined` falls back to the default browser
* timezone setting.
*
* Until v11.2.0, this option depended on moment.js.
*
* @sample {highcharts|highstock} highcharts/time/timezone/ Europe/Oslo
*
* @type {string}
* @since 5.0.7
* @product highcharts highstock gantt
*/
timezone: 'UTC',
/**
* The timezone offset in minutes. Positive values are west, negative
* values are east of UTC, as in the ECMAScript
* [getTimezoneOffset](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset)
* method. Use this to display UTC based data in a predefined time zone.
*
* This option is deprecated as of v11.4.1 and will be removed in a
* future release. Use the [time.timezone](#time.timezone) option
* instead.
*
* @see [time.getTimezoneOffset](#time.getTimezoneOffset)
*
* @sample {highcharts|highstock} highcharts/time/timezoneoffset/
* Timezone offset
*
* @since 3.0.8
* @deprecated 11.4.2
* @product highcharts highstock gantt
*/
timezoneOffset: 0,
/**
* Whether to use UTC time for axis scaling, tickmark placement and
* time display in `Highcharts.dateFormat`. Advantages of using UTC
* is that the time displays equally regardless of the user agent's
* time zone settings. Local time can be used when the data is loaded
* in real time or when correct Daylight Saving Time transitions are
* required.
*
* Setting `useUTC` to true is equivalent to setting `time.timezone` to
* `"UTC"`. Setting `useUTC` to false is equivalent to setting
* `time.timezone` to `undefined`.
*
* @see [time.timezone](#timezone)
*
* @sample {highcharts} highcharts/time/useutc-true/
* True by default
* @sample {highcharts} highcharts/time/useutc-false/
* False
*
* @deprecated
*/
useUTC: void 0
},
chart: Chart_ChartDefaults,
/**
* The chart's main title.
*
* @sample {highmaps} maps/title/title/
* Title options demonstrated
* @sample {highcharts} highcharts/title/align-auto/
* Default title alignment
*/
title: {
/**
* When the title is floating, the plot area will not move to make space
* for it.
*
* @sample {highcharts} highcharts/chart/zoomtype-none/
* False by default
* @sample {highcharts} highcharts/title/floating/
* True - title on top of the plot area
* @sample {highstock} stock/chart/title-floating/
* True - title on top of the plot area
*
* @type {boolean}
* @default false
* @since 2.1
* @apioption title.floating
*/
/**
* Whether to
* [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the text.
*
* @type {boolean}
* @default false
* @apioption title.useHTML
*/
/**
* The vertical alignment of the title. Can be one of `"top"`,
* `"middle"` and `"bottom"`. When a value is given, the title behaves
* as if [floating](#title.floating) were `true`.
*
* @sample {highcharts} highcharts/title/verticalalign/
* Chart title in bottom right corner
* @sample {highstock} stock/chart/title-verticalalign/
* Chart title in bottom right corner
*
* @type {Highcharts.VerticalAlignValue}
* @since 2.1
* @apioption title.verticalAlign
*/
/**
* The x position of the title relative to the alignment within
* `chart.spacingLeft` and `chart.spacingRight`.
*
* @sample {highcharts} highcharts/title/align/
* Aligned to the plot area (x = 70px = margin left - spacing
* left)
* @sample {highstock} stock/chart/title-align/
* Aligned to the plot area (x = 50px = margin left - spacing
* left)
*
* @type {number}
* @default 0
* @since 2.0
* @apioption title.x
*/
/**
* The y position of the title relative to the alignment within
* [chart.spacingTop](#chart.spacingTop) and [chart.spacingBottom](
* #chart.spacingBottom). By default it depends on the font size.
*
* @sample {highcharts} highcharts/title/y/
* Title inside the plot area
* @sample {highstock} stock/chart/title-verticalalign/
* Chart title in bottom right corner
*
* @type {number}
* @since 2.0
* @apioption title.y
*/
/**
* CSS styles for the title. Use this for font styling, but use `align`,
* `x` and `y` for text alignment.
*
* Note that the default [title.minScale](#title.minScale) option also
* affects the rendered font size. In order to keep the font size fixed
* regardless of title length, set `minScale` to 1.
*
* In styled mode, the title style is given in the `.highcharts-title`
* class.
*
* @sample {highcharts} highcharts/title/style/
* Custom color and weight
* @sample {highstock} stock/chart/title-style/
* Custom color and weight
* @sample highcharts/css/titles/
* Styled mode
*
* @type {Highcharts.CSSObject}
* @default {highcharts|highmaps} { "color": "#333333", "fontSize": "18px" }
* @default {highstock} { "color": "#333333", "fontSize": "16px" }
*/
style: {
color: "#333333" /* Palette.neutralColor80 */,
fontWeight: 'bold'
},
/**
* The title of the chart. To disable the title, set the `text` to
* `undefined`.
*
* @sample {highcharts} highcharts/title/text/
* Custom title
* @sample {highstock} stock/chart/title-text/
* Custom title
*
* @default {highcharts|highmaps} Chart title
* @default {highstock} undefined
*/
text: 'Chart title',
/**
* The horizontal alignment of the title. Can be one of "left", "center"
* and "right".
*
* Since v12 it defaults to `undefined`, meaning the alignment is
* computed for best fit. If the text fits in one line, it aligned to
* the center, but if it is wrapped into multiple lines, it is aligned
* to the left.
*
* @sample {highcharts} highcharts/title/align-auto/
* Default alignment, dynamic
* @sample {highcharts} highcharts/title/align/
* Aligned to the plot area (x = 70px = margin left - spacing
* left)
* @sample {highstock} stock/chart/title-align/
* Aligned to the plot area (x = 50px = margin left - spacing
* left)
*
* @type {Highcharts.AlignValue}
* @default undefined
* @since 2.0
* @apioption title.align
*/
/**
* The margin between the title and the plot area, or if a subtitle
* is present, the margin between the subtitle and the plot area.
*
* @sample {highcharts} highcharts/title/margin-50/
* A chart title margin of 50
* @sample {highcharts} highcharts/title/margin-subtitle/
* The same margin applied with a subtitle
* @sample {highstock} stock/chart/title-margin/
* A chart title margin of 50
*
* @since 2.1
*/
margin: 15,
/**
* When the title is too wide to fit in the chart, the default behavior
* is to scale it down to fit, or apply word wrap if it is scaled down
* to `minScale` and still doesn't fit.
*
* The default value reflects the scale, when using default font sizes,
* when the title font size matches that of the subtitle. The title
* still stands out as it is bold by default.
*
* Set `minScale` to 1 to avoid downscaling.
*
* @sample {highcharts} highcharts/title/align-auto/
* Downscaling demonstrated
*
* @since 12.0.0
*/
minScale: 0.67
},
/**
* The chart's subtitle. This can be used both to display a subtitle below
* the main title, and to display random text anywhere in the chart. The
* subtitle can be updated after chart initialization through the
* `Chart.setTitle` method.
*
* @sample {highcharts} highcharts/title/align-auto/
* Default title alignment
* @sample {highmaps} maps/title/subtitle/
* Subtitle options demonstrated
*/
subtitle: {
/**
* When the subtitle is floating, the plot area will not move to make
* space for it.
*
* @sample {highcharts} highcharts/subtitle/floating/
* Floating title and subtitle
* @sample {highstock} stock/chart/subtitle-footnote
* Footnote floating at bottom right of plot area
*
* @type {boolean}
* @default false
* @since 2.1
* @apioption subtitle.floating
*/
/**
* CSS styles for the title.
*
* In styled mode, the subtitle style is given in the
* `.highcharts-subtitle` class.
*
* @sample {highcharts} highcharts/subtitle/style/
* Custom color and weight
* @sample {highcharts} highcharts/css/titles/
* Styled mode
* @sample {highstock} stock/chart/subtitle-style
* Custom color and weight
* @sample {highstock} highcharts/css/titles/
* Styled mode
* @sample {highmaps} highcharts/css/titles/
* Styled mode
*
* @type {Highcharts.CSSObject}
* @default {"color": "#666666"}
* @apioption subtitle.style
*/
/**
* Whether to
* [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the text.
*
* @type {boolean}
* @default false
* @apioption subtitle.useHTML
*/
/**
* The vertical alignment of the title. Can be one of `"top"`,
* `"middle"` and `"bottom"`. When middle, the subtitle behaves as
* floating.
*
* @sample {highcharts} highcharts/subtitle/verticalalign/
* Footnote at the bottom right of plot area
* @sample {highstock} stock/chart/subtitle-footnote
* Footnote at the bottom right of plot area
*
* @type {Highcharts.VerticalAlignValue}
* @since 2.1
* @apioption subtitle.verticalAlign
*/
/**
* The x position of the subtitle relative to the alignment within
* `chart.spacingLeft` and `chart.spacingRight`.
*
* @sample {highcharts} highcharts/subtitle/align/
* Footnote at right of plot area
* @sample {highstock} stock/chart/subtitle-footnote
* Footnote at the bottom right of plot area
*
* @type {number}
* @default 0
* @since 2.0
* @apioption subtitle.x
*/
/**
* The y position of the subtitle relative to the alignment within
* `chart.spacingTop` and `chart.spacingBottom`. By default the subtitle
* is laid out below the title unless the title is floating.
*
* @sample {highcharts} highcharts/subtitle/verticalalign/
* Footnote at the bottom right of plot area
* @sample {highstock} stock/chart/subtitle-footnote
* Footnote at the bottom right of plot area
*
* @type {number}
* @since 2.0
* @apioption subtitle.y
*/
/**
* CSS styles for the title.
*
* In styled mode, the subtitle style is given in the
* `.highcharts-subtitle` class.
*
* @sample {highcharts} highcharts/subtitle/style/
* Custom color and weight
* @sample {highcharts} highcharts/css/titles/
* Styled mode
* @sample {highstock} stock/chart/subtitle-style
* Custom color and weight
* @sample {highstock} highcharts/css/titles/
* Styled mode
* @sample {highmaps} highcharts/css/titles/
* Styled mode
*
* @type {Highcharts.CSSObject}
* @default {"color": "#666666"}
*/
style: {
color: "#666666" /* Palette.neutralColor60 */,
/**
* @type {number|string}
*/
fontSize: '0.8em'
},
/**
* The subtitle of the chart.
*
* @sample {highcharts|highstock} highcharts/subtitle/text/
* Custom subtitle
* @sample {highcharts|highstock} highcharts/subtitle/text-formatted/
* Formatted and linked text.
*/
text: ''
/**
* The horizontal alignment of the subtitle. Can be one of "left",
* "center" and "right". Since v12, it defaults to `undefined`, meaning
* the actual alignment is inherited from the alignment of the main
* title.
*
* @sample {highcharts} highcharts/title/align-auto/
* Default title and subtitle alignment, dynamic
* @sample {highcharts} highcharts/subtitle/align/
* Footnote at right of plot area
* @sample {highstock} stock/chart/subtitle-footnote
* Footnote at bottom right of plot area
*
* @type {Highcharts.AlignValue}
* @default undefined
* @since 2.0
* @apioption subtitle.align
*/
},
/**
* The chart's caption, which will render below the chart and will be part
* of exported charts. The caption can be updated after chart initialization
* through the `Chart.update` or `Chart.caption.update` methods.
*
* @sample highcharts/caption/text/
* A chart with a caption
* @since 7.2.0
*/
caption: {
/**
* When the caption is floating, the plot area will not move to make
* space for it.
*
* @type {boolean}
* @default false
* @apioption caption.floating
*/
/**
* The margin between the caption and the plot area.
*/
margin: 15,
/**
* Whether to
* [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the text.
*
* @type {boolean}
* @default false
* @apioption caption.useHTML
*/
/**
* The x position of the caption relative to the alignment within
* `chart.spacingLeft` and `chart.spacingRight`.
*
* @type {number}
* @default 0
* @apioption caption.x
*/
/**
* The y position of the caption relative to the alignment within
* `chart.spacingTop` and `chart.spacingBottom`.
*
* @type {number}
* @apioption caption.y
*/
/**
* CSS styles for the caption.
*
* In styled mode, the caption style is given in the
* `.highcharts-caption` class.
*
* @sample {highcharts} highcharts/css/titles/
* Styled mode
*
* @type {Highcharts.CSSObject}
* @default {"color": "#666666"}
*/
style: {
color: "#666666" /* Palette.neutralColor60 */,
/**
* @type {number|string}
*/
fontSize: '0.8em'
},
/**
* The caption text of the chart.
*
* @sample {highcharts} highcharts/caption/text/
* Custom caption
*/
text: '',
/**
* The horizontal alignment of the caption. Can be one of "left",
* "center" and "right".
*
* @type {Highcharts.AlignValue}
*/
align: 'left',
/**
* The vertical alignment of the caption. Can be one of `"top"`,
* `"middle"` and `"bottom"`. When middle, the caption behaves as
* floating.
*
* @type {Highcharts.VerticalAlignValue}
*/
verticalAlign: 'bottom'
},
/**
* The plotOptions is a wrapper object for config objects for each series
* type. The config objects for each series can also be overridden for
* each series item as given in the series array.
*
* Configuration options for the series are given in three levels. Options
* for all series in a chart are given in the [plotOptions.series](
* #plotOptions.series) object. Then options for all series of a specific
* type are given in the plotOptions of that type, for example
* `plotOptions.line`. Next, options for one single series are given in
* [the series array](#series).
*/
plotOptions: {},
/**
* The legend is a box containing a symbol and name for each series
* item or point item in the chart. Each series (or points in case
* of pie charts) is represented by a symbol and its name in the legend.
*
* It is possible to override the symbol creator function and create
* [custom legend symbols](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/legend-custom-symbol/).
*
* @productdesc {highmaps}
* A Highmaps legend by default contains one legend item per series, but if
* a `colorAxis` is defined, the axis will be displayed in the legend.
* Either as a gradient, or as multiple legend items for `dataClasses`.
*/
legend: {
/**
* The background color of the legend.
*
* @see In styled mode, the legend background fill can be applied with
* the `.highcharts-legend-box` class.
*
* @sample {highcharts} highcharts/legend/backgroundcolor/
* Yellowish background
* @sample {highstock} stock/legend/align/
* Various legend options
* @sample {highmaps} maps/legend/border-background/
* Border and background options
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption legend.backgroundColor
*/
/**
* The width of the drawn border around the legend.
*
* @see In styled mode, the legend border stroke width can be applied
* with the `.highcharts-legend-box` class.
*
* @sample {highcharts} highcharts/legend/borderwidth/
* 2px border width
* @sample {highstock} stock/legend/align/
* Various legend options
* @sample {highmaps} maps/legend/border-background/
* Border and background options
*
* @type {number}
* @default 0
* @apioption legend.borderWidth
*/
/**
* Enable or disable the legend. There is also a series-specific option,
* [showInLegend](#plotOptions.series.showInLegend), that can hide the
* series from the legend. In some series types this is `false` by
* default, so it must set to `true` in order to show the legend for the
* series.
*
* @sample {highcharts} highcharts/legend/enabled-false/ Legend disabled
* @sample {highstock} stock/legend/align/ Various legend options
* @sample {highmaps} maps/legend/enabled-false/ Legend disabled
*
* @default {highstock} false
* @default {highmaps} true
* @default {gantt} false
*/
enabled: true,
/**
* The horizontal alignment of the legend box within the chart area.
* Valid values are `left`, `center` and `right`.
*
* In the case that the legend is aligned in a corner position, the
* `layout` option will determine whether to place it above/below
* or on the side of the plot area.
*
* @sample {highcharts} highcharts/legend/align/
* Legend at the right of the chart
* @sample {highstock} stock/legend/align/
* Various legend options
* @sample {highmaps} maps/legend/alignment/
* Legend alignment
*
* @type {Highcharts.AlignValue}
* @since 2.0
*/
align: 'center',
/**
* If the [layout](legend.layout) is `horizontal` and the legend items
* span over two lines or more, whether to align the items into vertical
* columns. Setting this to `false` makes room for more items, but will
* look more messy.
*
* @since 6.1.0
*/
alignColumns: true,
/**
* A CSS class name to apply to the legend group.
*/
className: 'highcharts-no-tooltip',
/**
* General event handlers for the legend. These event hooks can
* also be attached to the legend at run time using the
* `Highcharts.addEvent` function.
*
* @declare Highcharts.LegendEventsOptionsObject
*
* @private
*/
events: {},
/**
* Fires when the legend item belonging to the series is clicked. One
* parameter, `event`, is passed to the function. The default action
* is to toggle the visibility of the series, point or data class. This
* can be prevented by returning `false` or calling
* `event.preventDefault()`.
*
* @sample {highcharts} highcharts/legend/itemclick/
* Confirm hiding and showing
* @sample {highcharts} highcharts/legend/pie-legend-itemclick/
* Confirm toggle visibility of pie slices
*
* @type {Highcharts.LegendItemClickCallbackFunction}
* @context Highcharts.Legend
* @apioption legend.events.itemClick
*/
/**
* When the legend is floating, the plot area ignores it and is allowed
* to be placed below it.
*
* @sample {highcharts} highcharts/legend/floating-false/
* False by default
* @sample {highcharts} highcharts/legend/floating-true/
* True
* @sample {highmaps} maps/legend/alignment/
* Floating legend
*
* @type {boolean}
* @default false
* @since 2.1
* @apioption legend.floating
*/
/**
* The layout of the legend items. Can be one of `horizontal` or
* `vertical` or `proximate`. When `proximate`, the legend items will be
* placed as close as possible to the graphs they're representing,
* except in inverted charts or when the legend position doesn't allow
* it.
*
* @sample {highcharts} highcharts/legend/layout-horizontal/
* Horizontal by default
* @sample {highcharts} highcharts/legend/layout-vertical/
* Vertical
* @sample highcharts/legend/layout-proximate
* Labels proximate to the data
* @sample {highstock} stock/legend/layout-horizontal/
* Horizontal by default
* @sample {highmaps} maps/legend/padding-itemmargin/
* Vertical with data classes
* @sample {highmaps} maps/legend/layout-vertical/
* Vertical with color axis gradient
*
* @validvalue ["horizontal", "vertical", "proximate"]
*/
layout: 'horizontal',
/**
* In a legend with horizontal layout, the itemDistance defines the
* pixel distance between each item.
*
* @sample {highcharts} highcharts/legend/layout-horizontal/
* 50px item distance
* @sample {highstock} highcharts/legend/layout-horizontal/
* 50px item distance
*
* @type {number}
* @default {highcharts} 20
* @default {highstock} 20
* @default {highmaps} 8
* @since 3.0.3
* @apioption legend.itemDistance
*/
/**
* The pixel bottom margin for each legend item.
*
* @sample {highcharts|highstock} highcharts/legend/padding-itemmargin/
* Padding and item margins demonstrated
* @sample {highmaps} maps/legend/padding-itemmargin/
* Padding and item margins demonstrated
*
* @since 2.2.0
*/
itemMarginBottom: 2,
/**
* The pixel top margin for each legend item.
*
* @sample {highcharts|highstock} highcharts/legend/padding-itemmargin/
* Padding and item margins demonstrated
* @sample {highmaps} maps/legend/padding-itemmargin/
* Padding and item margins demonstrated
*
* @since 2.2.0
*/
itemMarginTop: 2,
/**
* The width for each legend item. By default the items are laid out
* successively. In a [horizontal layout](legend.layout), if the items
* are laid out across two rows or more, they will be vertically aligned
* depending on the [legend.alignColumns](legend.alignColumns) option.
*
* @sample {highcharts} highcharts/legend/itemwidth-default/
* Undefined by default
* @sample {highcharts} highcharts/legend/itemwidth-80/
* 80 for aligned legend items
*
* @type {number}
* @since 2.0
* @apioption legend.itemWidth
*/
/**
* A [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
* for each legend label. Available variables relates to properties on
* the series, or the point in case of pies.
*
* @type {string}
* @default {name}
* @since 1.3
* @apioption legend.labelFormat
*/
/* eslint-disable valid-jsdoc */
/**
* Callback function to format each of the series' labels. The `this`
* keyword refers to the series object, or the point object in case of
* pie charts. By default the series or point name is printed.
*
* @productdesc {highmaps}
* In Highmaps the context can also be a data class in case of a
* `colorAxis`.
*
* @sample {highcharts} highcharts/legend/labelformatter/
* Add text
* @sample {highmaps} maps/legend/labelformatter/
* Data classes with label formatter
*
* @type {Highcharts.FormatterCallbackFunction<Point|Series>}
*/
labelFormatter: function () {
// eslint-enable valid-jsdoc
return this.name;
},
/**
* Line height for the legend items. Deprecated as of 2.1\. Instead,
* the line height for each item can be set using
* `itemStyle.lineHeight`, and the padding between items using
* `itemMarginTop` and `itemMarginBottom`.
*
* @sample {highcharts} highcharts/legend/lineheight/
* Setting padding
*
* @deprecated
*
* @type {number}
* @default 16
* @since 2.0
* @product highcharts gantt
* @apioption legend.lineHeight
*/
/**
* If the plot area sized is calculated automatically and the legend is
* not floating, the legend margin is the space between the legend and
* the axis labels or plot area.
*
* @sample {highcharts} highcharts/legend/margin-default/
* 12 pixels by default
* @sample {highcharts} highcharts/legend/margin-30/
* 30 pixels
*
* @type {number}
* @default 12
* @since 2.1
* @apioption legend.margin
*/
/**
* Maximum pixel height for the legend. When the maximum height is
* extended, navigation will show.
*
* @type {number}
* @since 2.3.0
* @apioption legend.maxHeight
*/
/**
* The color of the drawn border around the legend.
*
* @see In styled mode, the legend border stroke can be applied with the
* `.highcharts-legend-box` class.
*
* @sample {highcharts} highcharts/legend/bordercolor/
* Brown border
* @sample {highstock} stock/legend/align/
* Various legend options
* @sample {highmaps} maps/legend/border-background/
* Border and background options
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
borderColor: "#999999" /* Palette.neutralColor40 */,
/**
* The border corner radius of the legend.
*
* @sample {highcharts} highcharts/legend/borderradius-default/
* Square by default
* @sample {highcharts} highcharts/legend/borderradius-round/
* 5px rounded
* @sample {highmaps} maps/legend/border-background/
* Border and background options
*/
borderRadius: 0,
/**
* Options for the paging or navigation appearing when the legend is
* overflown. Navigation works well on screen, but not in static
* exported images. One way of working around that is to
* [increase the chart height in
* export](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/legend/navigation-enabled-false/).
*
* @sample highcharts/legend/scrollable-vertical/
* Legend with vertical scrollable extension
* @sample highcharts/legend/scrollable-horizontal/
* Legend with horizontal scrollable extension
*
*/
navigation: {
/**
* How to animate the pages when navigating up or down. A value of
* `true` applies the default navigation given in the
* `chart.animation` option. Additional options can be given as an
* object containing values for easing and duration.
*
* @sample {highcharts} highcharts/legend/navigation/
* Legend page navigation demonstrated
* @sample {highstock} highcharts/legend/navigation/
* Legend page navigation demonstrated
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
* @default true
* @since 2.2.4
* @apioption legend.navigation.animation
*/
/**
* The pixel size of the up and down arrows in the legend paging
* navigation.
*
* @sample {highcharts} highcharts/legend/navigation/
* Legend page navigation demonstrated
* @sample {highstock} highcharts/legend/navigation/
* Legend page navigation demonstrated
*
* @type {number}
* @default 12
* @since 2.2.4
* @apioption legend.navigation.arrowSize
*/
/**
* Whether to enable the legend navigation. In most cases, disabling
* the navigation results in an unwanted overflow.
*
* See also the
* [adapt chart to legend](https://github.com/highcharts/adapt-chart-to-legend)
* plugin for a solution to extend the chart height to make room for
* the legend, optionally in exported charts only.
*
* @type {boolean}
* @default true
* @since 4.2.4
* @apioption legend.navigation.enabled
*/
/**
* Text styles for the legend page navigation.
*
* @see In styled mode, the navigation items are styled with the
* `.highcharts-legend-navigation` class.
*
* @sample {highcharts} highcharts/legend/navigation/
* Legend page navigation demonstrated
* @sample {highstock} highcharts/legend/navigation/
* Legend page navigation demonstrated
*
* @type {Highcharts.CSSObject}
* @since 2.2.4
* @apioption legend.navigation.style
*/
style: {
/**
* @type {number|string}
*/
fontSize: '0.8em'
},
/**
* The color for the active up or down arrow in the legend page
* navigation.
*
* @see In styled mode, the active arrow be styled with the
* `.highcharts-legend-nav-active` class.
*
* @sample {highcharts} highcharts/legend/navigation/
* Legend page navigation demonstrated
* @sample {highstock} highcharts/legend/navigation/
* Legend page navigation demonstrated
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 2.2.4
*/
activeColor: "#0022ff" /* Palette.highlightColor100 */,
/**
* The color of the inactive up or down arrow in the legend page
* navigation. .
*
* @see In styled mode, the inactive arrow be styled with the
* `.highcharts-legend-nav-inactive` class.
*
* @sample {highcharts} highcharts/legend/navigation/
* Legend page navigation demonstrated
* @sample {highstock} highcharts/legend/navigation/
* Legend page navigation demonstrated
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 2.2.4
*/
inactiveColor: "#cccccc" /* Palette.neutralColor20 */
},
/**
* The inner padding of the legend box.
*
* @sample {highcharts|highstock} highcharts/legend/padding-itemmargin/
* Padding and item margins demonstrated
* @sample {highmaps} maps/legend/padding-itemmargin/
* Padding and item margins demonstrated
*
* @type {number}
* @default 8
* @since 2.2.0
* @apioption legend.padding
*/
/**
* Whether to reverse the order of the legend items compared to the
* order of the series or points as defined in the configuration object.
*
* @see [yAxis.reversedStacks](#yAxis.reversedStacks),
* [series.legendIndex](#series.legendIndex)
*
* @sample {highcharts} highcharts/legend/reversed/
* Stacked bar with reversed legend
*
* @type {boolean}
* @default false
* @since 1.2.5
* @apioption legend.reversed
*/
/**
* Whether to show the symbol on the right side of the text rather than
* the left side. This is common in Arabic and Hebrew.
*
* @sample {highcharts} highcharts/legend/rtl/
* Symbol to the right
*
* @type {boolean}
* @default false
* @since 2.2
* @apioption legend.rtl
*/
/**
* CSS styles for the legend area. In the 1.x versions the position
* of the legend area was determined by CSS. In 2.x, the position is
* determined by properties like `align`, `verticalAlign`, `x` and `y`,
* but the styles are still parsed for backwards compatibility.
*
* @deprecated
*
* @type {Highcharts.CSSObject}
* @product highcharts highstock
* @apioption legend.style
*/
/**
* CSS styles for each legend item. Only a subset of CSS is supported,
* notably those options related to text. The default `textOverflow`
* property makes long texts truncate. Set it to `undefined` to wrap
* text instead. A `width` property can be added to control the text
* width.
*
* @see In styled mode, the legend items can be styled with the
* `.highcharts-legend-item` class.
*
* @sample {highcharts} highcharts/legend/itemstyle/
* Bold black text
* @sample {highmaps} maps/legend/itemstyle/
* Item text styles
*
* @type {Highcharts.CSSObject}
* @default {"color": "#333333", "cursor": "pointer", "fontSize": "0.8em", "fontWeight": "bold", "textOverflow": "ellipsis"}
*/
itemStyle: {
/**
* @ignore
*/
color: "#333333" /* Palette.neutralColor80 */,
/**
* @ignore
*/
cursor: 'pointer',
/**
* @ignore
*/
fontSize: '0.8em',
/**
* @ignore
*/
textDecoration: 'none',
/**
* @ignore
*/
textOverflow: 'ellipsis'
},
/**
* CSS styles for each legend item in hover mode. Only a subset of
* CSS is supported, notably those options related to text. Properties
* are inherited from `style` unless overridden here.
*
* @see In styled mode, the hovered legend items can be styled with
* the `.highcharts-legend-item:hover` pseudo-class.
*
* @sample {highcharts} highcharts/legend/itemhoverstyle/
* Red on hover
* @sample {highmaps} maps/legend/itemstyle/
* Item text styles
*
* @type {Highcharts.CSSObject}
* @default {"color": "#000000"}
*/
itemHoverStyle: {
/**
* @ignore
*/
color: "#000000" /* Palette.neutralColor100 */
},
/**
* CSS styles for each legend item when the corresponding series or
* point is hidden. Only a subset of CSS is supported, notably those
* options related to text. Properties are inherited from `style`
* unless overridden here.
*
* @see In styled mode, the hidden legend items can be styled with
* the `.highcharts-legend-item-hidden` class.
*
* @sample {highcharts} highcharts/legend/itemhiddenstyle/
* Darker gray color
*
* @type {Highcharts.CSSObject}
* @default {"color": "#cccccc"}
*/
itemHiddenStyle: {
/**
* @ignore
*/
color: "#666666" /* Palette.neutralColor60 */,
/**
* @ignore
*/
textDecoration: 'line-through'
},
/**
* Whether to apply a drop shadow to the legend. A `backgroundColor`
* also needs to be applied for this to take effect. The shadow can be
* an object configuration containing `color`, `offsetX`, `offsetY`,
* `opacity` and `width`.
*
* @sample {highcharts} highcharts/legend/shadow/
* White background and drop shadow
* @sample {highstock} stock/legend/align/
* Various legend options
* @sample {highmaps} maps/legend/border-background/
* Border and background options
*
* @type {boolean|Highcharts.CSSObject}
*/
shadow: false,
/**
* Default styling for the checkbox next to a legend item when
* `showCheckbox` is true.
*
* @type {Highcharts.CSSObject}
* @default {"width": "13px", "height": "13px", "position":"absolute"}
*/
itemCheckboxStyle: {
/**
* @ignore
*/
position: 'absolute',
/**
* @ignore
*/
width: '13px', // For IE precision
/**
* @ignore
*/
height: '13px'
},
/// itemWidth: undefined,
/**
* When this is true, the legend symbol width will be the same as
* the symbol height, which in turn defaults to the font size of the
* legend items.
*
* @since 5.0.0
*/
squareSymbol: true,
/**
* The pixel height of the symbol for series types that use a rectangle
* in the legend. Defaults to the font size of legend items.
*
* Note: This option is a default source of color axis height, if the
* [colorAxis.height](https://api.highcharts.com/highcharts/colorAxis.height)
* option is not set.
*
* @productdesc {highmaps}
* In Highmaps, when the symbol is the gradient of a vertical color
* axis, the height defaults to 200.
*
* @sample {highmaps} maps/legend/layout-vertical-sized/
* Sized vertical gradient
* @sample {highmaps} maps/legend/padding-itemmargin/
* No distance between data classes
*
* @type {number}
* @since 3.0.8
* @apioption legend.symbolHeight
*/
/**
* The border radius of the symbol for series types that use a rectangle
* in the legend. Defaults to half the `symbolHeight`, effectively
* creating a circle.
*
* For color axis scales, it defaults to 3.
*
* @sample {highcharts} highcharts/legend/symbolradius/
* Round symbols
* @sample {highstock} highcharts/legend/symbolradius/
* Round symbols
* @sample {highmaps} highcharts/legend/symbolradius/
* Round symbols
*
* @type {number}
* @since 3.0.8
* @apioption legend.symbolRadius
*/
/**
* The pixel width of the legend item symbol. When the `squareSymbol`
* option is set, this defaults to the `symbolHeight`, otherwise 16.
*
* Note: This option is a default source of color axis width, if the
* [colorAxis.width](https://api.highcharts.com/highcharts/colorAxis.width)
* option is not set.
*
* @productdesc {highmaps}
* In Highmaps, when the symbol is the gradient of a horizontal color
* axis, the width defaults to 200.
*
* @sample {highcharts} highcharts/legend/symbolwidth/
* Greater symbol width and padding
* @sample {highmaps} maps/legend/padding-itemmargin/
* Padding and item margins demonstrated
* @sample {highmaps} maps/legend/layout-vertical-sized/
* Sized vertical gradient
*
* @type {number}
* @apioption legend.symbolWidth
*/
/**
* Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the legend item texts.
*
* Prior to 4.1.7, when using HTML, [legend.navigation](
* #legend.navigation) was disabled.
*
* @sample highcharts/legend/scrollable-vertical/
* Legend with vertical scrollable extension
* @sample highcharts/legend/scrollable-horizontal/
* Legend with horizontal scrollable extension
*
* @type {boolean}
* @default false
* @apioption legend.useHTML
*/
/**
* For a color axis with data classes, how many decimals to render in
* the legend. The default preserves the decimals of the range numbers.
*
* @type {number}
* @default -1
* @product highcharts highmaps
* @apioption legend.valueDecimals
*/
/**
* For a color axis with data classes, a suffix for the range numbers in
* the legend.
*
* @type {string}
* @default ''
* @product highcharts highmaps
* @apioption legend.valueSuffix
*/
/**
* The width of the legend box. If a number is set, it translates to
* pixels. Since v7.0.2 it allows setting a percent string of the full
* chart width, for example `40%`.
*
* Defaults to the full chart width for legends below or above the
* chart, half the chart width for legends to the left and right.
*
* @sample {highcharts} highcharts/legend/width/
* Aligned to the plot area
* @sample {highcharts} highcharts/legend/width-percent/
* A percent of the chart width
*
* @type {number|string}
* @since 2.0
* @apioption legend.width
*/
/**
* The pixel padding between the legend item symbol and the legend
* item text.
*
* @sample {highcharts} highcharts/legend/symbolpadding/
* Greater symbol width and padding
*/
symbolPadding: 5,
/**
* The vertical alignment of the legend box. Can be one of `top`,
* `middle` or `bottom`. Vertical position can be further determined
* by the `y` option.
*
* In the case that the legend is aligned in a corner position, the
* `layout` option will determine whether to place it above/below
* or on the side of the plot area.
*
* When the [layout](#legend.layout) option is `proximate`, the
* `verticalAlign` option doesn't apply.
*
* @sample {highcharts} highcharts/legend/verticalalign/
* Legend 100px from the top of the chart
* @sample {highstock} stock/legend/align/
* Various legend options
* @sample {highmaps} maps/legend/alignment/
* Legend alignment
*
* @type {Highcharts.VerticalAlignValue}
* @since 2.0
*/
verticalAlign: 'bottom',
// Width: undefined,
/**
* The x offset of the legend relative to its horizontal alignment
* `align` within chart.spacingLeft and chart.spacingRight. Negative
* x moves it to the left, positive x moves it to the right.
*
* @sample {highcharts} highcharts/legend/width/
* Aligned to the plot area
*
* @since 2.0
*/
x: 0,
/**
* The vertical offset of the legend relative to it's vertical alignment
* `verticalAlign` within chart.spacingTop and chart.spacingBottom.
* Negative y moves it up, positive y moves it down.
*
* @sample {highcharts} highcharts/legend/verticalalign/
* Legend 100px from the top of the chart
* @sample {highstock} stock/legend/align/
* Various legend options
* @sample {highmaps} maps/legend/alignment/
* Legend alignment
*
* @since 2.0
*/
y: 0,
/**
* A title to be added on top of the legend.
*
* @sample {highcharts} highcharts/legend/title/
* Legend title
* @sample {highmaps} maps/legend/alignment/
* Legend with title
*
* @since 3.0
*/
title: {
/**
* A text or HTML string for the title.
*
* @type {string}
* @since 3.0
* @apioption legend.title.text
*/
/**
* Generic CSS styles for the legend title.
*
* @see In styled mode, the legend title is styled with the
* `.highcharts-legend-title` class.
*
* @type {Highcharts.CSSObject}
* @default {"fontSize": "0.8em", "fontWeight": "bold"}
* @since 3.0
*/
style: {
/**
* @ignore
*/
fontSize: '0.8em',
/**
* @ignore
*/
fontWeight: 'bold'
}
}
},
/**
* The loading options control the appearance of the loading screen
* that covers the plot area on chart operations. This screen only
* appears after an explicit call to `chart.showLoading()`. It is a
* utility for developers to communicate to the end user that something
* is going on, for example while retrieving new data via an XHR connection.
* The "Loading..." text itself is not part of this configuration
* object, but part of the `lang` object.
*/
loading: {
/**
* The duration in milliseconds of the fade out effect.
*
* @sample highcharts/loading/hideduration/
* Fade in and out over a second
*
* @type {number}
* @default 100
* @since 1.2.0
* @apioption loading.hideDuration
*/
/**
* The duration in milliseconds of the fade in effect.
*
* @sample highcharts/loading/hideduration/
* Fade in and out over a second
*
* @type {number}
* @default 100
* @since 1.2.0
* @apioption loading.showDuration
*/
/**
* CSS styles for the loading label `span`.
*
* @see In styled mode, the loading label is styled with the
* `.highcharts-loading-inner` class.
*
* @sample {highcharts|highmaps} highcharts/loading/labelstyle/
* Vertically centered
* @sample {highstock} stock/loading/general/
* Label styles
*
* @type {Highcharts.CSSObject}
* @default {"fontWeight": "bold", "position": "relative", "top": "45%"}
* @since 1.2.0
*/
labelStyle: {
/**
* @ignore
*/
fontWeight: 'bold',
/**
* @ignore
*/
position: 'relative',
/**
* @ignore
*/
top: '45%'
},
/**
* CSS styles for the loading screen that covers the plot area.
*
* In styled mode, the loading label is styled with the
* `.highcharts-loading` class.
*
* @sample {highcharts|highmaps} highcharts/loading/style/
* Gray plot area, white text
* @sample {highstock} stock/loading/general/
* Gray plot area, white text
*
* @type {Highcharts.CSSObject}
* @default {"position": "absolute", "backgroundColor": "#ffffff", "opacity": 0.5, "textAlign": "center"}
* @since 1.2.0
*/
style: {
/**
* @ignore
*/
position: 'absolute',
/**
* @ignore
*/
backgroundColor: "#ffffff" /* Palette.backgroundColor */,
/**
* @ignore
*/
opacity: 0.5,
/**
* @ignore
*/
textAlign: 'center'
}
},
/**
* Options for the tooltip that appears when the user hovers over a
* series or point.
*
* @declare Highcharts.TooltipOptions
*/
tooltip: {
/**
* The color of the tooltip border. When `undefined`, the border takes
* the color of the corresponding series or point.
*
* Note that the [borderWidth](#tooltip.borderWidth) is usually 0 by
* default, so the border color may not be visible until a border width
* is set.
*
* @sample {highcharts} highcharts/tooltip/bordercolor-default/ Follow
* series by default
* @sample {highcharts} highcharts/tooltip/bordercolor-black/ Black
* border
* @sample {highstock} stock/tooltip/general/ Styled tooltip
* @sample {highmaps} maps/tooltip/background-border/ Background and
* border demo
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption tooltip.borderColor
*/
/**
* A CSS class name to apply to the tooltip's container div,
* allowing unique CSS styling for each chart.
*
* @type {string}
* @apioption tooltip.className
*/
/**
* Since 4.1, the crosshair definitions are moved to the Axis object
* in order for a better separation from the tooltip. See
* [xAxis.crosshair](#xAxis.crosshair).
*
* @sample {highcharts} highcharts/tooltip/crosshairs-x/
* Enable a crosshair for the x value
*
* @deprecated
*
* @type {*}
* @default true
* @apioption tooltip.crosshairs
*/
/**
* Distance from point to tooltip in pixels.
*
* @type {number}
* @default 16
* @apioption tooltip.distance
*/
/**
* Whether the tooltip should follow the mouse as it moves across
* columns, pie slices and other point types with an extent.
* By default it behaves this way for pie, polygon, map, sankey
* and wordcloud series by override in the `plotOptions`
* for those series types.
*
* Does not apply if [split](#tooltip.split) is `true`.
*
* For touch moves to behave the same way, [followTouchMove](
* #tooltip.followTouchMove) must be `true` also.
*
* @sample highcharts/tooltip/followpointer/
* Tooltip follow pointer comparison
*
* @type {boolean}
* @default {highcharts} false
* @default {highstock} false
* @default {highmaps} true
* @since 3.0
* @apioption tooltip.followPointer
*/
/**
* Whether the tooltip should update as the finger moves on a touch
* device. If this is `true` and [chart.panning](#chart.panning) is
* set,`followTouchMove` will take over one-finger touches, so the user
* needs to use two fingers for zooming and panning.
*
* Note the difference to [followPointer](#tooltip.followPointer) that
* only defines the _position_ of the tooltip. If `followPointer` is
* false in for example a column series, the tooltip will show above or
* below the column, but as `followTouchMove` is true, the tooltip will
* jump from column to column as the user swipes across the plot area.
*
* @type {boolean}
* @default {highcharts} true
* @default {highstock} true
* @default {highmaps} false
* @since 3.0.1
* @apioption tooltip.followTouchMove
*/
/**
* A [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
* for the whole shared tooltip. When format strings are a requirement,
* it is usually more convenient to use `headerFormat`, `pointFormat`
* and `footerFormat`, but the `format` option allows combining them
* into one setting.
*
* The context of the format string is the same as that of the
* `tooltip.formatter` callback.
*
* @sample {highcharts} highcharts/tooltip/format-shared/
* Format for shared tooltip
*
* @type {string}
* @default undefined
* @since 11.1.0
* @apioption tooltip.format
*/
/**
* Callback function to format the text of the tooltip from scratch. In
* case of single or [shared](#tooltip.shared) tooltips, a string should
* be returned. In case of [split](#tooltip.split) tooltips, it should
* return an array where the first item is the header, and subsequent
* items are mapped to the points. Return `false` to disable tooltip for
* a specific point on series.
*
* A subset of HTML is supported. Unless `useHTML` is true, the HTML of
* the tooltip is parsed and converted to SVG, therefore this isn't a
* complete HTML renderer. The following HTML tags are supported: `b`,
* `br`, `em`, `i`, `span`, `strong`. Spans can be styled with a `style`
* attribute, but only text-related CSS, that is shared with SVG, is
* handled.
*
* The context of the formatter (since v12) is the
* [Point](https://api.highcharts.com/class-reference/Highcharts.Point)
* instance. If the tooltip is shared or split, an array `this.points`
* contains all points of the hovered x-value.
*
* Common properties from the Point to use in the formatter include:
*
* - **Point.percentage**:
* Stacked series and pies only. The point's percentage of the total.
*
* - **Point.points**:
* In a shared or split tooltip, this is an array containing all the
* hovered points.
*
* - **this.series**:
* The series object. The series name is available through
* `this.series.name`.
*
* - **this.total**:
* The total value at this point's x value in a stacked series, or the
* sum of all slices in a pie series.
*
* - **this.x**:
* The x value.
*
* - **this.y**:
* The y value.
*
* @sample {highcharts} highcharts/tooltip/formatter-simple/
* Simple string formatting
* @sample {highcharts} highcharts/tooltip/formatter-shared/
* Formatting with shared tooltip
* @sample {highcharts|highstock} highcharts/tooltip/formatter-split/
* Formatting with split tooltip
* @sample highcharts/tooltip/formatter-conditional-default/
* Extending default formatter
* @sample {highstock} stock/tooltip/formatter/
* Formatting with shared tooltip
* @sample {highmaps} maps/tooltip/formatter/
* String formatting
*
* @type {Highcharts.TooltipFormatterCallbackFunction}
* @apioption tooltip.formatter
*/
/**
* Callback function to format the text of the tooltip for
* visible null points.
* Works analogously to [formatter](#tooltip.formatter).
*
* @sample highcharts/plotoptions/series-nullformat
* Format data label and tooltip for null point.
*
* @type {Highcharts.TooltipFormatterCallbackFunction}
* @apioption tooltip.nullFormatter
*/
/**
* Whether to allow the tooltip to render outside the chart's SVG
* element box. By default (`false`), the tooltip is rendered within the
* chart's SVG element, which results in the tooltip being aligned
* inside the chart area. For small charts, this may result in clipping
* or overlapping. When `true`, a separate SVG element is created and
* overlaid on the page, allowing the tooltip to be aligned inside the
* page itself. Beware that with this option active, CSS classes on the
* chart's target container, with classnames matching the pattern
* 'highcharts-*', will be set on the tooltip as well. This is done to
* support theming for tooltips with this option.
*
* Defaults to `true` if `chart.scrollablePlotArea` is activated,
* otherwise `false`.
*
* @sample highcharts/tooltip/outside
* Small charts with tooltips outside
*
* @type {boolean|undefined}
* @default undefined
* @since 6.1.1
* @apioption tooltip.outside
*/
/**
* A callback function for formatting the HTML output for a single point
* in the tooltip. Like the `pointFormat` string, but with more
* flexibility.
*
* @type {Highcharts.FormatterCallbackFunction<Highcharts.Point>}
* @since 4.1.0
* @context Highcharts.Point
* @apioption tooltip.pointFormatter
*/
/**
* A callback function to place the tooltip in a custom position. The
* callback receives three parameters: `labelWidth`, `labelHeight` and
* `point`, where point contains values for `plotX` and `plotY` telling
* where the reference point is in the plot area. Add `chart.plotLeft`
* and `chart.plotTop` to get the full coordinates.
*
* To find the actual hovered `Point` instance, use
* `this.chart.hoverPoint`. For shared or split tooltips, all the hover
* points are available in `this.chart.hoverPoints`.
*
* Since v7, when [tooltip.split](#tooltip.split) option is enabled,
* positioner is called for each of the boxes separately, including
* xAxis header. xAxis header is not a point, instead `point` argument
* contains info: `{ plotX: Number, plotY: Number, isHeader: Boolean }`
*
* The return should be an object containing x and y values, for example
* `{ x: 100, y: 100 }`.
*
* @sample {highcharts} highcharts/tooltip/positioner/
* A fixed tooltip position
* @sample {highstock} stock/tooltip/positioner/
* A fixed tooltip position on top of the chart
* @sample {highmaps} maps/tooltip/positioner/
* A fixed tooltip position
* @sample {highstock} stock/tooltip/split-positioner/
* Split tooltip with fixed positions
* @sample {highstock} stock/tooltip/positioner-scrollable-plotarea/
* Scrollable plot area combined with tooltip positioner
*
* @type {Highcharts.TooltipPositionerCallbackFunction}
* @since 2.2.4
* @apioption tooltip.positioner
*/
/**
* Shows tooltip for all points with the same X value. Splits the
* tooltip into one label per series, with the header close to the axis.
* This is recommended over [shared](#tooltip.shared)
* tooltips for charts with multiple line series, generally making them
* easier to read. This option takes precedence over `tooltip.shared`.
*
* Not supported for [polar](#chart.polar) and [inverted](#chart.inverted) charts.
*
* @productdesc {highstock} In Highcharts Stock, tooltips are split
* by default since v6.0.0. Stock charts typically contain
* multi-dimension points and multiple panes, making split tooltips
* the preferred layout over
* the previous `shared` tooltip.
*
* @sample highcharts/tooltip/split/
* Split tooltip
* @sample {highcharts|highstock} highcharts/tooltip/formatter-split/
* Split tooltip and custom formatter callback
*
* @type {boolean}
* @default {highcharts} false
* @default {highstock} true
* @since 5.0.0
* @product highcharts highstock
* @apioption tooltip.split
*/
/**
* Prevents the tooltip from switching or closing, when touched or
* pointed.
*
* @sample highcharts/tooltip/stickoncontact/
* Tooltip sticks on pointer contact
*
* @type {boolean}
* @since 8.0.1
* @apioption tooltip.stickOnContact
*/
/**
* Use HTML to render the contents of the tooltip instead of SVG. Using
* HTML allows advanced formatting like tables and images in the
* tooltip. It is also recommended for rtl languages as it works around
* rtl bugs in early Firefox.
*
* @sample {highcharts|highstock} highcharts/tooltip/footerformat/
* A table for value alignment
* @sample {highcharts|highstock} highcharts/tooltip/fullhtml/
* Full HTML tooltip
* @sample {highmaps} maps/tooltip/usehtml/
* Pure HTML tooltip
*
* @type {boolean}
* @default false
* @since 2.2
* @apioption tooltip.useHTML
*/
/**
* How many decimals to show in each series' y value. This is
* overridable in each series' tooltip options object. The default is to
* preserve all decimals.
*
* @sample {highcharts|highstock} highcharts/tooltip/valuedecimals/
* Set decimals, prefix and suffix for the value
* @sample {highmaps} maps/tooltip/valuedecimals/
* Set decimals, prefix and suffix for the value
*
* @type {number|undefined}
* @since 2.2
* @apioption tooltip.valueDecimals
*/
/**
* A string to prepend to each series' y value. Overridable in each
* series' tooltip options object.
*
* @sample {highcharts|highstock} highcharts/tooltip/valuedecimals/
* Set decimals, prefix and suffix for the value
* @sample {highmaps} maps/tooltip/valuedecimals/
* Set decimals, prefix and suffix for the value
*
* @type {string}
* @since 2.2
* @apioption tooltip.valuePrefix
*/
/**
* A string to append to each series' y value. Overridable in each
* series' tooltip options object.
*
* @sample {highcharts|highstock} highcharts/tooltip/valuedecimals/
* Set decimals, prefix and suffix for the value
* @sample {highmaps} maps/tooltip/valuedecimals/
* Set decimals, prefix and suffix for the value
*
* @type {string}
* @since 2.2
* @apioption tooltip.valueSuffix
*/
/**
* The format for the date in the tooltip header if the X axis is a
* datetime axis. The default is a best guess based on the smallest
* distance between points in the chart.
*
* @sample {highcharts} highcharts/tooltip/xdateformat/
* A different format
*
* @type {string|Highcharts.DateTimeFormatOptions}
* @product highcharts highstock gantt
* @apioption tooltip.xDateFormat
*/
/**
* How many decimals to show for the `point.change`
* or the `point.cumulativeSum` value when the `series.compare`
* or the `series.cumulative` option is set.
* This is overridable in each series' tooltip options object.
*
* @type {number}
* @default 2
* @since 1.0.1
* @product highstock
* @apioption tooltip.changeDecimals
*/
/**
* Enable or disable the tooltip.
*
* @sample {highcharts} highcharts/tooltip/enabled/
* Disabled
* @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
* Disable tooltip and show values on chart instead
*/
enabled: true,
/**
* Enable or disable animation of the tooltip.
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
* @since 2.3.0
*/
animation: {
duration: 300,
// EaseOutCirc
easing: function (x) { return Math.sqrt(1 - Math.pow(x - 1, 2)); }
},
/**
* The radius of the rounded border corners.
*
* @sample {highcharts} highcharts/tooltip/bordercolor-default/
* Default border radius
* @sample {highcharts} highcharts/tooltip/borderradius-0/
* Square borders
* @sample {highmaps} maps/tooltip/background-border/
* Background and border demo
*/
borderRadius: 3,
/**
* For series on datetime axes, the date format in the tooltip's
* header will by default be guessed based on the closest data points.
* This member gives the default string representations used for
* each unit. For an overview of the string or object configuration, see
* [dateFormat](/class-reference/Highcharts.Time#dateFormat).
*
* @see [xAxis.dateTimeLabelFormats](#xAxis.dateTimeLabelFormats)
*
* @type {Highcharts.Dictionary<string|Highcharts.DateTimeFormatOptions>}
* @product highcharts highstock gantt
*/
dateTimeLabelFormats: {
/** @internal */
millisecond: '%[AebHMSL]',
/** @internal */
second: '%[AebHMS]',
/** @internal */
minute: '%[AebHM]',
/** @internal */
hour: '%[AebHM]',
/** @internal */
day: '%[AebY]',
/** @internal */
week: 'Week from %[AebY]',
/** @internal */
month: '%[BY]',
/** @internal */
year: '%Y'
},
/**
* A string to append to the tooltip format.
*
* @sample {highcharts} highcharts/tooltip/footerformat/
* A table for value alignment
* @sample {highmaps} maps/tooltip/format/
* Format demo
*
* @since 2.2
*/
footerFormat: '',
/**
* The name of a symbol to use for the border around the tooltip
* header. Applies only when [tooltip.split](#tooltip.split) is
* enabled.
*
* Custom callbacks for symbol path generation can also be added to
* `Highcharts.SVGRenderer.prototype.symbols` the same way as for
* [series.marker.symbol](plotOptions.line.marker.symbol).
*
* @see [tooltip.shape](#tooltip.shape)
*
* @sample {highstock} stock/tooltip/split-positioner/
* Different shapes for header and split boxes
*
* @type {Highcharts.TooltipShapeValue}
* @validvalue ["callout", "rect"]
* @since 7.0
*/
headerShape: 'callout',
/**
* The number of milliseconds to wait until the tooltip is hidden when
* mouse out from a point or chart.
*
* @since 3.0
*/
hideDelay: 500,
/**
* Padding inside the tooltip, in pixels.
*
* @since 5.0.0
*/
padding: 8,
/**
* The name of a symbol to use for the border around the tooltip. Can
* be one of: `"callout"`, `"circle"` or `"rect"`. When
* [tooltip.split](#tooltip.split)
* option is enabled, shape is applied to all boxes except header, which
* is controlled by
* [tooltip.headerShape](#tooltip.headerShape).
*
* Custom callbacks for symbol path generation can also be added to
* `Highcharts.SVGRenderer.prototype.symbols` the same way as for
* [series.marker.symbol](plotOptions.line.marker.symbol).
*
* @type {Highcharts.TooltipShapeValue}
* @since 4.0
*/
shape: 'callout',
/**
* Shows information in the tooltip for all points with the same X
* value. When the tooltip is shared, the entire plot area will capture
* mouse movement or touch events. Tooltip texts for series types with
* ordered data (not pie, scatter, flags etc) will be shown in a single
* bubble. This is recommended for single series charts and for
* tablet/mobile optimized charts.
*
* See also [tooltip.split](#tooltip.split), that is better suited for
* charts with many series, especially line-type series. The
* `tooltip.split` option takes precedence over `tooltip.shared`.
*
* @sample {highcharts} highcharts/tooltip/shared-false/
* False by default
* @sample {highcharts} highcharts/tooltip/shared-true/
* True
* @sample {highcharts} highcharts/tooltip/shared-x-crosshair/
* True with x axis crosshair
* @sample {highcharts} highcharts/tooltip/shared-true-mixed-types/
* True with mixed series types
*
* @since 2.1
* @product highcharts highstock
*/
shared: false,
/**
* Proximity snap for graphs or single points. It defaults to 10 for
* mouse-powered devices and 25 for touch devices.
*
* Note that in most cases the whole plot area captures the mouse
* movement, and in these cases `tooltip.snap` doesn't make sense. This
* applies when [stickyTracking](#plotOptions.series.stickyTracking)
* is `true` (default) and when the tooltip is [shared](#tooltip.shared)
* or [split](#tooltip.split).
*
* @sample {highcharts} highcharts/tooltip/bordercolor-default/
* 10 px by default
* @sample {highcharts} highcharts/tooltip/snap-50/
* 50 px on graph
*
* @type {number}
* @default 10/25
* @since 1.2.0
* @product highcharts highstock
*/
snap: isTouchDevice ? 25 : 10,
/**
* The HTML of the tooltip header line. The context is the
* [Point class](https://api.highcharts.com/class-reference/Highcharts.Point).
* Variables are enclosed in curly brackets. Examples of common
* variables to include are `x`, `y`, `series.name` and `series.color`
* and other properties on the same form. The `point.key` variable
* contains the category name, x value or datetime string depending on
* the type of axis. For datetime axes, the `point.key` date format can
* be set using `tooltip.xDateFormat`.
*
* @sample {highcharts} highcharts/tooltip/footerformat/
* An HTML table in the tooltip
* @sample {highstock} highcharts/tooltip/footerformat/
* An HTML table in the tooltip
* @sample {highmaps} maps/tooltip/format/
* Format demo
*
* @type {string}
* @apioption tooltip.headerFormat
*/
headerFormat: '<span style="font-size: 0.8em">{ucfirst point.key}</span><br/>',
/**
* The HTML of the null point's line in the tooltip. Works analogously
* to [pointFormat](#tooltip.pointFormat).
*
* @sample {highcharts} highcharts/plotoptions/series-nullformat
* Format data label and tooltip for null point.
*
* @type {string}
* @apioption tooltip.nullFormat
*/
/**
* The HTML of the point's line in the tooltip. The context is the
* [Point class](https://api.highcharts.com/class-reference/Highcharts.Point).
* Variables are enclosed in curly brackets. Examples of common
* variables to include are `x`, `y`, `series.name` and `series.color`
* and other properties on the same form. Furthermore, `y` can be
* extended by the `tooltip.valuePrefix` and `tooltip.valueSuffix`
* variables. This can also be overridden for each series, which makes
* it a good hook for displaying units.
*
* In styled mode, the dot is colored by a class name rather than the
* point color.
*
* @sample {highcharts} highcharts/tooltip/pointformat/
* A different point format with value suffix
* @sample {highcharts|highstock} highcharts/tooltip/pointformat-extra-information/
* Show extra information about points in the tooltip
* @sample {highmaps} maps/tooltip/format/
* Format demo
*
* @type {string}
* @since 2.2
* @apioption tooltip.pointFormat
*/
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
/**
* The background color or gradient for the tooltip.
*
* In styled mode, the stroke width is set in the
* `.highcharts-tooltip-box` class.
*
* @sample {highcharts} highcharts/tooltip/backgroundcolor-solid/
* Yellowish background
* @sample {highcharts} highcharts/tooltip/backgroundcolor-gradient/
* Gradient
* @sample {highcharts} highcharts/css/tooltip-border-background/
* Tooltip in styled mode
* @sample {highstock} stock/tooltip/general/
* Custom tooltip
* @sample {highstock} highcharts/css/tooltip-border-background/
* Tooltip in styled mode
* @sample {highmaps} maps/tooltip/background-border/
* Background and border demo
* @sample {highmaps} highcharts/css/tooltip-border-background/
* Tooltip in styled mode
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
backgroundColor: "#ffffff" /* Palette.backgroundColor */,
/**
* The pixel width of the tooltip border. Defaults to 0 for single
* tooltips and 1 for split tooltips.
*
* In styled mode, the stroke width is set in the
* `.highcharts-tooltip-box` class.
*
* @sample {highcharts} highcharts/tooltip/bordercolor-default/
* 2 pixels
* @sample {highcharts} highcharts/tooltip/borderwidth/
* No border (shadow only)
* @sample {highcharts} highcharts/css/tooltip-border-background/
* Tooltip in styled mode
* @sample {highstock} stock/tooltip/general/
* Custom tooltip
* @sample {highstock} highcharts/css/tooltip-border-background/
* Tooltip in styled mode
* @sample {highmaps} maps/tooltip/background-border/
* Background and border demo
* @sample {highmaps} highcharts/css/tooltip-border-background/
* Tooltip in styled mode
*
* @type {number}
*/
borderWidth: void 0,
/**
* Whether to apply a drop shadow to the tooltip.
*
* @sample {highcharts} highcharts/tooltip/bordercolor-default/
* True by default
* @sample {highcharts} highcharts/tooltip/shadow/
* False
* @sample {highmaps} maps/tooltip/positioner/
* Fixed tooltip position, border and shadow disabled
*
* @type {boolean|Highcharts.ShadowOptionsObject}
*/
shadow: true,
/**
* Prevents the tooltip from switching or closing when touched or
* pointed.
*
* @sample highcharts/tooltip/stickoncontact/
* Tooltip sticks on pointer contact
*
* @since 8.0.1
*/
stickOnContact: false,
/**
* CSS styles for the tooltip. The tooltip can also be styled through
* the CSS class `.highcharts-tooltip`.
*
* Note that the default `pointerEvents` style makes the tooltip ignore
* mouse events, so in order to use clickable tooltips, this value must
* be set to `auto`.
*
* @sample {highcharts} highcharts/tooltip/style/
* Greater padding, bold text
*
* @type {Highcharts.CSSObject}
*/
style: {
/** @internal */
color: "#333333" /* Palette.neutralColor80 */,
/** @internal */
cursor: 'default',
/**
* @type {number|string}
*/
fontSize: '0.8em'
},
/**
* Use HTML to render the contents of the tooltip instead of SVG. Using
* HTML allows advanced formatting like tables and images in the
* tooltip. It is also recommended for rtl languages as it works around
* rtl bugs in early Firefox.
*
* @sample {highcharts|highstock} highcharts/tooltip/footerformat/
* A table for value alignment
* @sample {highcharts|highstock} highcharts/tooltip/fullhtml/
* Full HTML tooltip
* @sample {highmaps} maps/tooltip/usehtml/
* Pure HTML tooltip
*
* @since 2.2
*/
useHTML: false
},
/**
* Highchart by default puts a credits label in the lower right corner
* of the chart. This can be changed using these options.
*/
credits: {
/**
* Credits for map source to be concatenated with conventional credit
* text. By default this is a format string that collects copyright
* information from the map if available.
*
* @see [mapTextFull](#credits.mapTextFull)
* @see [text](#credits.text)
*
* @type {string}
* @default \u00a9 <a href="{geojson.copyrightUrl}">{geojson.copyrightShort}</a>
* @since 4.2.2
* @product highmaps
* @apioption credits.mapText
*/
/**
* Detailed credits for map source to be displayed on hover of credits
* text. By default this is a format string that collects copyright
* information from the map if available.
*
* @see [mapText](#credits.mapText)
* @see [text](#credits.text)
*
* @type {string}
* @default {geojson.copyright}
* @since 4.2.2
* @product highmaps
* @apioption credits.mapTextFull
*/
/**
* Whether to show the credits text.
*
* @sample {highcharts} highcharts/credits/enabled-false/
* Credits disabled
* @sample {highstock} stock/credits/enabled/
* Credits disabled
* @sample {highmaps} maps/credits/enabled-false/
* Credits disabled
*/
enabled: true,
/**
* The URL for the credits label.
*
* @sample {highcharts} highcharts/credits/href/
* Custom URL and text
* @sample {highmaps} maps/credits/customized/
* Custom URL and text
*/
href: 'https://www.highcharts.com?credits',
/**
* Position configuration for the credits label.
*
* @sample {highcharts} highcharts/credits/position-left/
* Left aligned
* @sample {highcharts} highcharts/credits/position-left/
* Left aligned
* @sample {highmaps} maps/credits/customized/
* Left aligned
* @sample {highmaps} maps/credits/customized/
* Left aligned
*
* @type {Highcharts.AlignObject}
* @since 2.1
*/
position: {
/** @internal */
align: 'right',
/** @internal */
x: -10,
/** @internal */
verticalAlign: 'bottom',
/** @internal */
y: -5
},
/**
* CSS styles for the credits label.
*
* @see In styled mode, credits styles can be set with the
* `.highcharts-credits` class.
*
* @type {Highcharts.CSSObject}
*/
style: {
/** @internal */
cursor: 'pointer',
/** @internal */
color: "#999999" /* Palette.neutralColor40 */,
/**
* @type {number|string}
*/
fontSize: '0.6em'
},
/**
* The text for the credits label.
*
* @productdesc {highmaps}
* If a map is loaded as GeoJSON, the text defaults to
* `Highcharts @ {map-credits}`. Otherwise, it defaults to
* `Highcharts.com`.
*
* @sample {highcharts} highcharts/credits/href/
* Custom URL and text
* @sample {highmaps} maps/credits/customized/
* Custom URL and text
*/
text: 'Highcharts.com'
}
};
var defaultTime = new Core_Time(defaultOptions.time);
/**
* Get the updated default options. Until 3.0.7, merely exposing defaultOptions
* for outside modules wasn't enough because the setOptions method created a new
* object.
*
* @function Highcharts.getOptions
*
* @return {Highcharts.Options}
* Default options.
*/
function getOptions() {
return defaultOptions;
}
/**
* Merge the default options with custom options and return the new options
* structure. Commonly used for defining reusable templates.
*
* @sample highcharts/members/setoptions Applying a global theme
*
* @function Highcharts.setOptions
*
* @param {Highcharts.Options} options
* The new custom chart options.
*
* @return {Highcharts.Options}
* Updated options.
*/
function setOptions(options) {
Defaults_fireEvent(Core_Globals, 'setOptions', { options: options });
// Copy in the default options
Defaults_merge(true, defaultOptions, options);
// Update the time object
if (options.time) {
defaultTime.update(defaultOptions.time);
}
if (options.lang && 'locale' in options.lang) {
defaultTime.update({
locale: options.lang.locale
});
}
return defaultOptions;
}
/* *
*
* Default Export
*
* */
var DefaultOptions = {
defaultOptions: defaultOptions,
defaultTime: defaultTime,
getOptions: getOptions,
setOptions: setOptions
};
/* harmony default export */ var Defaults = (DefaultOptions);
/* *
*
* API Declarations
*
* */
/**
* @typedef {"plotBox"|"spacingBox"} Highcharts.ButtonRelativeToValue
*/
/**
* Gets fired when a series is added to the chart after load time, using the
* `addSeries` method. Returning `false` prevents the series from being added.
*
* @callback Highcharts.ChartAddSeriesCallbackFunction
*
* @param {Highcharts.Chart} this
* The chart on which the event occurred.
*
* @param {Highcharts.ChartAddSeriesEventObject} event
* The event that occurred.
*/
/**
* Contains common event information. Through the `options` property you can
* access the series options that were passed to the `addSeries` method.
*
* @interface Highcharts.ChartAddSeriesEventObject
*/ /**
* The series options that were passed to the `addSeries` method.
* @name Highcharts.ChartAddSeriesEventObject#options
* @type {Highcharts.SeriesOptionsType}
*/ /**
* Prevents the default behaviour of the event.
* @name Highcharts.ChartAddSeriesEventObject#preventDefault
* @type {Function}
*/ /**
* The event target.
* @name Highcharts.ChartAddSeriesEventObject#target
* @type {Highcharts.Chart}
*/ /**
* The event type.
* @name Highcharts.ChartAddSeriesEventObject#type
* @type {"addSeries"}
*/
/**
* Gets fired when clicking on the plot background.
*
* @callback Highcharts.ChartClickCallbackFunction
*
* @param {Highcharts.Chart} this
* The chart on which the event occurred.
*
* @param {Highcharts.PointerEventObject} event
* The event that occurred.
*/
/**
* Contains an axes of the clicked spot.
*
* @interface Highcharts.ChartClickEventAxisObject
*/ /**
* Axis at the clicked spot.
* @name Highcharts.ChartClickEventAxisObject#axis
* @type {Highcharts.Axis}
*/ /**
* Axis value at the clicked spot.
* @name Highcharts.ChartClickEventAxisObject#value
* @type {number}
*/
/**
* Contains information about the clicked spot on the chart. Remember the unit
* of a datetime axis is milliseconds since 1970-01-01 00:00:00.
*
* @interface Highcharts.ChartClickEventObject
* @extends Highcharts.PointerEventObject
*/ /**
* Information about the x-axis on the clicked spot.
* @name Highcharts.ChartClickEventObject#xAxis
* @type {Array<Highcharts.ChartClickEventAxisObject>}
*/ /**
* Information about the y-axis on the clicked spot.
* @name Highcharts.ChartClickEventObject#yAxis
* @type {Array<Highcharts.ChartClickEventAxisObject>}
*/ /**
* Information about the z-axis on the clicked spot.
* @name Highcharts.ChartClickEventObject#zAxis
* @type {Array<Highcharts.ChartClickEventAxisObject>|undefined}
*/
/**
* Gets fired when the chart is finished loading.
*
* @callback Highcharts.ChartLoadCallbackFunction
*
* @param {Highcharts.Chart} this
* The chart on which the event occurred.
*
* @param {global.Event} event
* The event that occurred.
*/
/**
* Fires when the chart is redrawn, either after a call to `chart.redraw()` or
* after an axis, series or point is modified with the `redraw` option set to
* `true`.
*
* @callback Highcharts.ChartRedrawCallbackFunction
*
* @param {Highcharts.Chart} this
* The chart on which the event occurred.
*
* @param {global.Event} event
* The event that occurred.
*/
/**
* Gets fired after initial load of the chart (directly after the `load` event),
* and after each redraw (directly after the `redraw` event).
*
* @callback Highcharts.ChartRenderCallbackFunction
*
* @param {Highcharts.Chart} this
* The chart on which the event occurred.
*
* @param {global.Event} event
* The event that occurred.
*/
/**
* Gets fired when an area of the chart has been selected. The default action
* for the selection event is to zoom the chart to the selected area. It can be
* prevented by calling `event.preventDefault()` or return false.
*
* @callback Highcharts.ChartSelectionCallbackFunction
*
* @param {Highcharts.Chart} this
* The chart on which the event occurred.
*
* @param {Highcharts.SelectEventObject} event
* Event informations
*
* @return {boolean|undefined}
* Return false to prevent the default action, usually zoom.
*/
(''); // Detach doclets above
;// ./code/es5/es-modules/Core/Color/Color.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Color_isNumber = Core_Utilities.isNumber, Color_merge = Core_Utilities.merge, Color_pInt = Core_Utilities.pInt, Color_defined = Core_Utilities.defined;
/* *
*
* Class
*
* */
/* eslint-disable valid-jsdoc */
/**
* Handle color operations. Some object methods are chainable.
*
* @class
* @name Highcharts.Color
*
* @param {Highcharts.ColorType} input
* The input color in either rgba or hex format
*/
var Color = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function Color(input) {
this.rgba = [NaN, NaN, NaN, NaN];
this.input = input;
var GlobalColor = Core_Globals.Color;
// Backwards compatibility, allow class overwrite
if (GlobalColor && GlobalColor !== Color) {
return new GlobalColor(input);
}
var result,
rgba,
i,
parser;
// Gradients
if (typeof input === 'object' &&
typeof input.stops !== 'undefined') {
this.stops = input.stops.map(function (stop) { return new Color(stop[1]); });
// Solid colors
}
else if (typeof input === 'string') {
this.input = input = (Color.names[input.toLowerCase()] || input);
i = Color.parsers.length;
while (i-- && !rgba) {
parser = Color.parsers[i];
result = parser.regex.exec(input);
if (result) {
rgba = parser.parse(result);
}
}
}
if (rgba) {
this.rgba = rgba;
}
}
/* *
*
* Static Functions
*
* */
/**
* Creates a color instance out of a color string or object.
*
* @function Highcharts.Color.parse
*
* @param {Highcharts.ColorType} [input]
* The input color in either rgba or hex format.
*
* @return {Highcharts.Color}
* Color instance.
*/
Color.parse = function (input) {
return input ? new Color(input) : Color.None;
};
/* *
*
* Functions
*
* */
/**
* Return the color or gradient stops in the specified format
*
* @function Highcharts.Color#get
*
* @param {string} [format]
* Possible values are 'a', 'rgb', 'rgba' (default).
*
* @return {Highcharts.ColorType}
* This color as a string or gradient stops.
*/
Color.prototype.get = function (format) {
var input = this.input,
rgba = this.rgba;
if (typeof input === 'object' &&
typeof this.stops !== 'undefined') {
var ret_1 = Color_merge(input);
ret_1.stops = [].slice.call(ret_1.stops);
this.stops.forEach(function (stop, i) {
ret_1.stops[i] = [
ret_1.stops[i][0],
stop.get(format)
];
});
return ret_1;
}
// It's NaN if gradient colors on a column chart
if (rgba && Color_isNumber(rgba[0])) {
if (format === 'rgb' || (!format && rgba[3] === 1)) {
return 'rgb(' + rgba[0] + ',' + rgba[1] + ',' + rgba[2] + ')';
}
if (format === 'a') {
return "".concat(rgba[3]);
}
return 'rgba(' + rgba.join(',') + ')';
}
return input;
};
/**
* Brighten the color instance.
*
* @function Highcharts.Color#brighten
*
* @param {number} alpha
* The alpha value.
*
* @return {Highcharts.Color}
* This color with modifications.
*/
Color.prototype.brighten = function (alpha) {
var rgba = this.rgba;
if (this.stops) {
this.stops.forEach(function (stop) {
stop.brighten(alpha);
});
}
else if (Color_isNumber(alpha) && alpha !== 0) {
for (var i = 0; i < 3; i++) {
rgba[i] += Color_pInt(alpha * 255);
if (rgba[i] < 0) {
rgba[i] = 0;
}
if (rgba[i] > 255) {
rgba[i] = 255;
}
}
}
return this;
};
/**
* Set the color's opacity to a given alpha value.
*
* @function Highcharts.Color#setOpacity
*
* @param {number} alpha
* Opacity between 0 and 1.
*
* @return {Highcharts.Color}
* Color with modifications.
*/
Color.prototype.setOpacity = function (alpha) {
this.rgba[3] = alpha;
return this;
};
/**
* Return an intermediate color between two colors.
*
* @function Highcharts.Color#tweenTo
*
* @param {Highcharts.Color} to
* The color object to tween to.
*
* @param {number} pos
* The intermediate position, where 0 is the from color (current color
* item), and 1 is the `to` color.
*
* @return {Highcharts.ColorType}
* The intermediate color in rgba notation, or unsupported type.
*/
Color.prototype.tweenTo = function (to, pos) {
var fromRgba = this.rgba,
toRgba = to.rgba;
// Unsupported color, return to-color (#3920, #7034)
if (!Color_isNumber(fromRgba[0]) || !Color_isNumber(toRgba[0])) {
return to.input || 'none';
}
// Check for has alpha, because rgba colors perform worse due to
// lack of support in WebKit.
var hasAlpha = (toRgba[3] !== 1 || fromRgba[3] !== 1),
channel = function (to,
i) {
return to + (fromRgba[i] - to) * (1 - pos);
}, rgba = toRgba.slice(0, 3).map(channel).map(Math.round);
if (hasAlpha) {
rgba.push(channel(toRgba[3], 3));
}
return (hasAlpha ? 'rgba(' : 'rgb(') + rgba.join(',') + ')';
};
/* *
*
* Static Properties
*
* */
/**
* Collection of named colors. Can be extended from the outside by adding
* colors to Highcharts.Color.names.
* @private
*/
Color.names = {
white: '#ffffff',
black: '#000000'
};
/**
* Collection of parsers. This can be extended from the outside by pushing
* parsers to `Color.parsers`.
* @private
*/
Color.parsers = [{
// RGBA color
// eslint-disable-next-line max-len
regex: /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d?(?:\.\d+)?)\s*\)/,
parse: function (result) {
return [
Color_pInt(result[1]),
Color_pInt(result[2]),
Color_pInt(result[3]),
parseFloat(result[4], 10)
];
}
}, {
// RGB color
regex: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/,
parse: function (result) {
return [Color_pInt(result[1]), Color_pInt(result[2]), Color_pInt(result[3]), 1];
}
}, {
// RGBA 3 & 4 digit hex color, e.g. #F0F, #F0FA
regex: /^#([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?$/i,
parse: function (result) {
// #abcd => #aabbccdd, hence result + result.
return [
(Color_pInt(result[1] + result[1], 16)),
(Color_pInt(result[2] + result[2], 16)),
(Color_pInt(result[3] + result[3], 16)),
!Color_defined(result[4]) ?
1 :
(Color_pInt(result[4] + result[4], 16) / 255)
];
}
}, {
// RGBA 6 & 8 digit hex color, e.g. #FFCC00, #FFCC00FF
regex: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?$/i,
parse: function (result) {
return [
Color_pInt(result[1], 16),
Color_pInt(result[2], 16),
Color_pInt(result[3], 16),
!Color_defined(result[4]) ?
1 :
(Color_pInt(result[4], 16) / 255)
];
}
}];
// Must be last static member for init cycle
Color.None = new Color('');
return Color;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Color_Color = (Color);
/* *
*
* API Declarations
*
* */
/**
* A valid color to be parsed and handled by Highcharts. Highcharts internally
* supports hex colors like `#ffffff`, rgb colors like `rgb(255,255,255)` and
* rgba colors like `rgba(255,255,255,1)`. Other colors may be supported by the
* browsers and displayed correctly, but Highcharts is not able to process them
* and apply concepts like opacity and brightening.
*
* @typedef {string} Highcharts.ColorString
*/
/**
* A valid color type than can be parsed and handled by Highcharts. It can be a
* color string, a gradient object, or a pattern object.
*
* @typedef {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject} Highcharts.ColorType
*/
/**
* Gradient options instead of a solid color.
*
* @example
* // Linear gradient used as a color option
* color: {
* linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
* stops: [
* [0, '#003399'], // start
* [0.5, '#ffffff'], // middle
* [1, '#3366AA'] // end
* ]
* }
*
* @interface Highcharts.GradientColorObject
*/ /**
* Holds an object that defines the start position and the end position relative
* to the shape.
* @name Highcharts.GradientColorObject#linearGradient
* @type {Highcharts.LinearGradientColorObject|undefined}
*/ /**
* Holds an object that defines the center position and the radius.
* @name Highcharts.GradientColorObject#radialGradient
* @type {Highcharts.RadialGradientColorObject|undefined}
*/ /**
* The first item in each tuple is the position in the gradient, where 0 is the
* start of the gradient and 1 is the end of the gradient. Multiple stops can be
* applied. The second item is the color for each stop. This color can also be
* given in the rgba format.
* @name Highcharts.GradientColorObject#stops
* @type {Array<Highcharts.GradientColorStopObject>}
*/
/**
* Color stop tuple.
*
* @see Highcharts.GradientColorObject
*
* @interface Highcharts.GradientColorStopObject
*/ /**
* @name Highcharts.GradientColorStopObject#0
* @type {number}
*/ /**
* @name Highcharts.GradientColorStopObject#1
* @type {Highcharts.ColorString}
*/ /**
* @name Highcharts.GradientColorStopObject#color
* @type {Highcharts.Color|undefined}
*/
/**
* Defines the start position and the end position for a gradient relative
* to the shape. Start position (x1, y1) and end position (x2, y2) are relative
* to the shape, where 0 means top/left and 1 is bottom/right.
*
* @interface Highcharts.LinearGradientColorObject
*/ /**
* Start horizontal position of the gradient. Float ranges 0-1.
* @name Highcharts.LinearGradientColorObject#x1
* @type {number}
*/ /**
* End horizontal position of the gradient. Float ranges 0-1.
* @name Highcharts.LinearGradientColorObject#x2
* @type {number}
*/ /**
* Start vertical position of the gradient. Float ranges 0-1.
* @name Highcharts.LinearGradientColorObject#y1
* @type {number}
*/ /**
* End vertical position of the gradient. Float ranges 0-1.
* @name Highcharts.LinearGradientColorObject#y2
* @type {number}
*/
/**
* Defines the center position and the radius for a gradient.
*
* @interface Highcharts.RadialGradientColorObject
*/ /**
* Center horizontal position relative to the shape. Float ranges 0-1.
* @name Highcharts.RadialGradientColorObject#cx
* @type {number}
*/ /**
* Center vertical position relative to the shape. Float ranges 0-1.
* @name Highcharts.RadialGradientColorObject#cy
* @type {number}
*/ /**
* Radius relative to the shape. Float ranges 0-1.
* @name Highcharts.RadialGradientColorObject#r
* @type {number}
*/
/**
* Creates a color instance out of a color string.
*
* @function Highcharts.color
*
* @param {Highcharts.ColorType} input
* The input color in either rgba or hex format
*
* @return {Highcharts.Color}
* Color instance
*/
(''); // Detach doclets above
;// ./code/es5/es-modules/Core/Animation/Fx.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var color = Color_Color.parse;
var Fx_win = Core_Globals.win;
var Fx_isNumber = Core_Utilities.isNumber, Fx_objectEach = Core_Utilities.objectEach;
/* eslint-disable no-invalid-this, valid-jsdoc */
/* *
*
* Class
*
* */
/**
* An animator object used internally. One instance applies to one property
* (attribute or style prop) on one element. Animation is always initiated
* through {@link SVGElement#animate}.
*
* @example
* let rect = renderer.rect(0, 0, 10, 10).add();
* rect.animate({ width: 100 });
*
* @private
* @class
* @name Highcharts.Fx
*
* @param {Highcharts.HTMLDOMElement|Highcharts.SVGElement} elem
* The element to animate.
*
* @param {Partial<Highcharts.AnimationOptionsObject>} options
* Animation options.
*
* @param {string} prop
* The single attribute or CSS property to animate.
*/
var Fx = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function Fx(elem, options, prop) {
this.pos = NaN;
this.options = options;
this.elem = elem;
this.prop = prop;
}
/* *
*
* Functions
*
* */
/**
* Set the current step of a path definition on SVGElement.
*
* @function Highcharts.Fx#dSetter
*
*/
Fx.prototype.dSetter = function () {
var paths = this.paths,
start = paths && paths[0],
end = paths && paths[1],
now = this.now || 0;
var path = [];
// Land on the final path without adjustment points appended in the ends
if (now === 1 || !start || !end) {
path = this.toD || [];
}
else if (start.length === end.length && now < 1) {
for (var i = 0; i < end.length; i++) {
// Tween between the start segment and the end segment. Start
// with a copy of the end segment and tween the appropriate
// numerics
var startSeg = start[i];
var endSeg = end[i];
var tweenSeg = [];
for (var j = 0; j < endSeg.length; j++) {
var startItem = startSeg[j];
var endItem = endSeg[j];
// Tween numbers
if (Fx_isNumber(startItem) &&
Fx_isNumber(endItem) &&
// Arc boolean flags
!(endSeg[0] === 'A' && (j === 4 || j === 5))) {
tweenSeg[j] = startItem + now * (endItem - startItem);
// Strings, take directly from the end segment
}
else {
tweenSeg[j] = endItem;
}
}
path.push(tweenSeg);
}
// If animation is finished or length not matching, land on right value
}
else {
path = end;
}
this.elem.attr('d', path, void 0, true);
};
/**
* Update the element with the current animation step.
*
* @function Highcharts.Fx#update
*
*/
Fx.prototype.update = function () {
var elem = this.elem,
prop = this.prop, // If destroyed, it is null
now = this.now,
step = this.options.step;
// Animation setter defined from outside
if (this[prop + 'Setter']) {
this[prop + 'Setter']();
// Other animations on SVGElement
}
else if (elem.attr) {
if (elem.element) {
elem.attr(prop, now, null, true);
}
// HTML styles, raw HTML content like container size
}
else {
elem.style[prop] = now + this.unit;
}
if (step) {
step.call(elem, now, this);
}
};
/**
* Run an animation.
*
* @function Highcharts.Fx#run
*
* @param {number} from
* The current value, value to start from.
*
* @param {number} to
* The end value, value to land on.
*
* @param {string} unit
* The property unit, for example `px`.
*
*/
Fx.prototype.run = function (from, to, unit) {
var self = this,
options = self.options,
timer = function (gotoEnd) {
return timer.stopped ? false : self.step(gotoEnd);
}, requestAnimationFrame = Fx_win.requestAnimationFrame ||
function (step) {
setTimeout(step, 13);
}, step = function () {
for (var i = 0; i < Fx.timers.length; i++) {
if (!Fx.timers[i]()) {
Fx.timers.splice(i--, 1);
}
}
if (Fx.timers.length) {
requestAnimationFrame(step);
}
};
if (from === to && !this.elem['forceAnimate:' + this.prop]) {
delete options.curAnim[this.prop];
if (options.complete &&
Object.keys(options.curAnim).length === 0) {
options.complete.call(this.elem);
}
}
else { // #7166
this.startTime = +new Date();
this.start = from;
this.end = to;
this.unit = unit;
this.now = this.start;
this.pos = 0;
timer.elem = this.elem;
timer.prop = this.prop;
if (timer() && Fx.timers.push(timer) === 1) {
requestAnimationFrame(step);
}
}
};
/**
* Run a single step in the animation.
*
* @function Highcharts.Fx#step
*
* @param {boolean} [gotoEnd]
* Whether to go to the endpoint of the animation after abort.
*
* @return {boolean}
* Returns `true` if animation continues.
*/
Fx.prototype.step = function (gotoEnd) {
var t = +new Date(),
options = this.options,
elem = this.elem,
complete = options.complete,
duration = options.duration,
curAnim = options.curAnim;
var ret,
done;
if (!!elem.attr && !elem.element) { // #2616, element is destroyed
ret = false;
}
else if (gotoEnd || t >= duration + this.startTime) {
this.now = this.end;
this.pos = 1;
this.update();
curAnim[this.prop] = true;
done = true;
Fx_objectEach(curAnim, function (val) {
if (val !== true) {
done = false;
}
});
if (done && complete) {
complete.call(elem);
}
ret = false;
}
else {
this.pos = options.easing((t - this.startTime) / duration);
this.now = this.start + ((this.end -
this.start) * this.pos);
this.update();
ret = true;
}
return ret;
};
/**
* Prepare start and end values so that the path can be animated one to one.
*
* @function Highcharts.Fx#initPath
*
* @param {Highcharts.SVGElement} elem
* The SVGElement item.
*
* @param {Highcharts.SVGPathArray|undefined} fromD
* Starting path definition.
*
* @param {Highcharts.SVGPathArray} toD
* Ending path definition.
*
* @return {Array<Highcharts.SVGPathArray,Highcharts.SVGPathArray>}
* An array containing start and end paths in array form so that
* they can be animated in parallel.
*/
Fx.prototype.initPath = function (elem, fromD, toD) {
var startX = elem.startX,
endX = elem.endX,
end = toD.slice(), // Copy
isArea = elem.isArea,
positionFactor = isArea ? 2 : 1,
disableAnimation = fromD &&
toD.length > fromD.length &&
toD.hasStackedCliffs; // #16925
var shift,
fullLength,
i,
reverse,
start = fromD && fromD.slice(); // Copy
if (!start || disableAnimation) {
return [end,
end];
}
/**
* If shifting points, prepend a dummy point to the end path.
* @private
*/
function prepend(arr, other) {
while (arr.length < fullLength) {
// Move to, line to or curve to?
var moveSegment = arr[0],
otherSegment = other[fullLength - arr.length];
if (otherSegment && moveSegment[0] === 'M') {
if (otherSegment[0] === 'C') {
arr[0] = [
'C',
moveSegment[1],
moveSegment[2],
moveSegment[1],
moveSegment[2],
moveSegment[1],
moveSegment[2]
];
}
else {
arr[0] = ['L', moveSegment[1], moveSegment[2]];
}
}
// Prepend a copy of the first point
arr.unshift(moveSegment);
// For areas, the bottom path goes back again to the left, so we
// need to append a copy of the last point.
if (isArea) {
var z = arr.pop();
arr.push(arr[arr.length - 1], z); // Append point and the Z
}
}
}
/**
* Copy and append last point until the length matches the end length.
* @private
*/
function append(arr) {
while (arr.length < fullLength) {
// Pull out the slice that is going to be appended or inserted.
// In a line graph, the positionFactor is 1, and the last point
// is sliced out. In an area graph, the positionFactor is 2,
// causing the middle two points to be sliced out, since an area
// path starts at left, follows the upper path then turns and
// follows the bottom back.
var segmentToAdd = arr[Math.floor(arr.length / positionFactor) - 1].slice();
// Disable the first control point of curve segments
if (segmentToAdd[0] === 'C') {
segmentToAdd[1] = segmentToAdd[5];
segmentToAdd[2] = segmentToAdd[6];
}
if (!isArea) {
arr.push(segmentToAdd);
}
else {
var lowerSegmentToAdd = arr[Math.floor(arr.length / positionFactor)].slice();
arr.splice(arr.length / 2, 0, segmentToAdd, lowerSegmentToAdd);
}
}
}
// For sideways animation, find out how much we need to shift to get the
// start path Xs to match the end path Xs.
if (startX && endX && endX.length) {
for (i = 0; i < startX.length; i++) {
// Moving left, new points coming in on right
if (startX[i] === endX[0]) {
shift = i;
break;
// Moving right
}
else if (startX[0] ===
endX[endX.length - startX.length + i]) {
shift = i;
reverse = true;
break;
// Fixed from the right side, "scaling" left
}
else if (startX[startX.length - 1] ===
endX[endX.length - startX.length + i]) {
shift = startX.length - i;
break;
}
}
if (typeof shift === 'undefined') {
start = [];
}
}
if (start.length && Fx_isNumber(shift)) {
// The common target length for the start and end array, where both
// arrays are padded in opposite ends
fullLength = end.length + shift * positionFactor;
if (!reverse) {
prepend(end, start);
append(start);
}
else {
prepend(start, end);
append(end);
}
}
return [start, end];
};
/**
* Handle animation of the color attributes directly.
*
* @function Highcharts.Fx#fillSetter
*
*/
Fx.prototype.fillSetter = function () {
Fx.prototype.strokeSetter.apply(this, arguments);
};
/**
* Handle animation of the color attributes directly.
*
* @function Highcharts.Fx#strokeSetter
*
*/
Fx.prototype.strokeSetter = function () {
this.elem.attr(this.prop, color(this.start).tweenTo(color(this.end), this.pos), void 0, true);
};
/* *
*
* Static Properties
*
* */
Fx.timers = [];
return Fx;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Animation_Fx = (Fx);
;// ./code/es5/es-modules/Core/Animation/AnimationUtilities.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var AnimationUtilities_defined = Core_Utilities.defined, AnimationUtilities_getStyle = Core_Utilities.getStyle, AnimationUtilities_isArray = Core_Utilities.isArray, AnimationUtilities_isNumber = Core_Utilities.isNumber, AnimationUtilities_isObject = Core_Utilities.isObject, AnimationUtilities_merge = Core_Utilities.merge, AnimationUtilities_objectEach = Core_Utilities.objectEach, AnimationUtilities_pick = Core_Utilities.pick;
/* *
*
* Functions
*
* */
/**
* Set the global animation to either a given value, or fall back to the given
* chart's animation option.
*
* @function Highcharts.setAnimation
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>|undefined} animation
* The animation object.
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @todo
* This function always relates to a chart, and sets a property on the renderer,
* so it should be moved to the SVGRenderer.
*/
function setAnimation(animation, chart) {
chart.renderer.globalAnimation = AnimationUtilities_pick(animation, chart.options.chart.animation, true);
}
/**
* Get the animation in object form, where a disabled animation is always
* returned as `{ duration: 0 }`.
*
* @function Highcharts.animObject
*
* @param {boolean|Highcharts.AnimationOptionsObject} [animation=0]
* An animation setting. Can be an object with duration, complete and
* easing properties, or a boolean to enable or disable.
*
* @return {Highcharts.AnimationOptionsObject}
* An object with at least a duration property.
*/
function animObject(animation) {
return AnimationUtilities_isObject(animation) ?
AnimationUtilities_merge({ duration: 500, defer: 0 }, animation) :
{ duration: animation ? 500 : 0, defer: 0 };
}
/**
* Get the defer as a number value from series animation options.
*
* @function Highcharts.getDeferredAnimation
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {boolean|Highcharts.AnimationOptionsObject} animation
* An animation setting. Can be an object with duration, complete and
* easing properties, or a boolean to enable or disable.
*
* @param {Highcharts.Series} [series]
* Series to defer animation.
*
* @return {number}
* The numeric value.
*/
function getDeferredAnimation(chart, animation, series) {
var labelAnimation = animObject(animation),
s = series ? [series] : chart.series;
var defer = 0,
duration = 0;
s.forEach(function (series) {
var seriesAnim = animObject(series.options.animation);
defer = AnimationUtilities_isObject(animation) && AnimationUtilities_defined(animation.defer) ?
labelAnimation.defer :
Math.max(defer, seriesAnim.duration + seriesAnim.defer);
duration = Math.min(labelAnimation.duration, seriesAnim.duration);
});
// Disable defer for exporting
if (chart.renderer.forExport) {
defer = 0;
}
var anim = {
defer: Math.max(0,
defer - duration),
duration: Math.min(defer,
duration)
};
return anim;
}
/**
* The global animate method, which uses Fx to create individual animators.
*
* @function Highcharts.animate
*
* @param {Highcharts.HTMLDOMElement|Highcharts.SVGElement} el
* The element to animate.
*
* @param {Highcharts.CSSObject|Highcharts.SVGAttributes} params
* An object containing key-value pairs of the properties to animate.
* Supports numeric as pixel-based CSS properties for HTML objects and
* attributes for SVGElements.
*
* @param {Partial<Highcharts.AnimationOptionsObject>} [opt]
* Animation options.
*
* @return {void}
*/
function animate(el, params, opt) {
var start,
unit = '',
end,
fx,
args;
if (!AnimationUtilities_isObject(opt)) { // Number or undefined/null
args = arguments;
opt = {
duration: args[2],
easing: args[3],
complete: args[4]
};
}
if (!AnimationUtilities_isNumber(opt.duration)) {
opt.duration = 400;
}
opt.easing = typeof opt.easing === 'function' ?
opt.easing :
(Math[opt.easing] || Math.easeInOutSine);
opt.curAnim = AnimationUtilities_merge(params);
AnimationUtilities_objectEach(params, function (val, prop) {
// Stop current running animation of this property
stop(el, prop);
fx = new Animation_Fx(el, opt, prop);
end = void 0;
if (prop === 'd' && AnimationUtilities_isArray(params.d)) {
fx.paths = fx.initPath(el, el.pathArray, params.d);
fx.toD = params.d;
start = 0;
end = 1;
}
else if (el.attr) {
start = el.attr(prop);
}
else {
start = parseFloat(AnimationUtilities_getStyle(el, prop)) || 0;
if (prop !== 'opacity') {
unit = 'px';
}
}
if (!end) {
end = val;
}
if (typeof end === 'string' && end.match('px')) {
end = end.replace(/px/g, ''); // #4351
}
fx.run(start, end, unit);
});
}
/**
* Stop running animation.
*
* @function Highcharts.stop
*
* @param {Highcharts.SVGElement} el
* The SVGElement to stop animation on.
*
* @param {string} [prop]
* The property to stop animating. If given, the stop method will stop a
* single property from animating, while others continue.
*
* @return {void}
*
* @todo
* A possible extension to this would be to stop a single property, when
* we want to continue animating others. Then assign the prop to the timer
* in the Fx.run method, and check for the prop here. This would be an
* improvement in all cases where we stop the animation from .attr. Instead of
* stopping everything, we can just stop the actual attributes we're setting.
*/
function stop(el, prop) {
var i = Animation_Fx.timers.length;
// Remove timers related to this element (#4519)
while (i--) {
if (Animation_Fx.timers[i].elem === el && (!prop || prop === Animation_Fx.timers[i].prop)) {
Animation_Fx.timers[i].stopped = true; // #4667
}
}
}
var animationExports = {
animate: animate,
animObject: animObject,
getDeferredAnimation: getDeferredAnimation,
setAnimation: setAnimation,
stop: stop
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var AnimationUtilities = (animationExports);
;// ./code/es5/es-modules/Core/Renderer/HTML/AST.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var SVG_NS = Core_Globals.SVG_NS, AST_win = Core_Globals.win;
var AST_attr = Core_Utilities.attr, AST_createElement = Core_Utilities.createElement, AST_css = Core_Utilities.css, AST_error = Core_Utilities.error, AST_isFunction = Core_Utilities.isFunction, AST_isString = Core_Utilities.isString, AST_objectEach = Core_Utilities.objectEach, AST_splat = Core_Utilities.splat;
var trustedTypes = AST_win.trustedTypes;
/* *
*
* Constants
*
* */
// Create the trusted type policy. This should not be exposed.
var trustedTypesPolicy = (trustedTypes &&
AST_isFunction(trustedTypes.createPolicy) &&
trustedTypes.createPolicy('highcharts', {
createHTML: function (s) { return s; }
}));
var emptyHTML = trustedTypesPolicy ?
trustedTypesPolicy.createHTML('') :
'';
/* *
*
* Class
*
* */
/**
* The AST class represents an abstract syntax tree of HTML or SVG content. It
* can take HTML as an argument, parse it, optionally transform it to SVG, then
* perform sanitation before inserting it into the DOM.
*
* @class
* @name Highcharts.AST
*
* @param {string|Array<Highcharts.ASTNode>} source
* Either an HTML string or an ASTNode list to populate the tree.
*/
var AST = /** @class */ (function () {
/* *
*
* Constructor
*
* */
// Construct an AST from HTML markup, or wrap an array of existing AST nodes
function AST(source) {
this.nodes = typeof source === 'string' ?
this.parseMarkup(source) : source;
}
/* *
*
* Static Functions
*
* */
/**
* Filter an object of SVG or HTML attributes against the allow list.
*
* @static
*
* @function Highcharts.AST#filterUserAttributes
*
* @param {Highcharts.SVGAttributes} attributes The attributes to filter
*
* @return {Highcharts.SVGAttributes}
* The filtered attributes
*/
AST.filterUserAttributes = function (attributes) {
AST_objectEach(attributes, function (val, key) {
var valid = true;
if (AST.allowedAttributes.indexOf(key) === -1) {
valid = false;
}
if (['background', 'dynsrc', 'href', 'lowsrc', 'src']
.indexOf(key) !== -1) {
valid = AST_isString(val) && AST.allowedReferences.some(function (ref) { return val.indexOf(ref) === 0; });
}
if (!valid) {
AST_error(33, false, void 0, {
'Invalid attribute in config': "".concat(key)
});
delete attributes[key];
}
// #17753, < is not allowed in SVG attributes
if (AST_isString(val) && attributes[key]) {
attributes[key] = val.replace(/</g, '<');
}
});
return attributes;
};
AST.parseStyle = function (style) {
return style
.split(';')
.reduce(function (styles, line) {
var pair = line.split(':').map(function (s) { return s.trim(); }),
key = pair.shift();
if (key && pair.length) {
styles[key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })] = pair.join(':'); // #17146
}
return styles;
}, {});
};
/**
* Utility function to set html content for an element by passing in a
* markup string. The markup is safely parsed by the AST class to avoid
* XSS vulnerabilities. This function should be used instead of setting
* `innerHTML` in all cases where the content is not fully trusted.
*
* @static
* @function Highcharts.AST#setElementHTML
*
* @param {SVGDOMElement|HTMLDOMElement} el
* Node to set content of.
*
* @param {string} html
* Markup string
*/
AST.setElementHTML = function (el, html) {
el.innerHTML = AST.emptyHTML; // Clear previous
if (html) {
var ast = new AST(html);
ast.addToDOM(el);
}
};
/* *
*
* Functions
*
* */
/**
* Add the tree defined as a hierarchical JS structure to the DOM
*
* @function Highcharts.AST#addToDOM
*
* @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} parent
* The node where it should be added
*
* @return {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement}
* The inserted node.
*/
AST.prototype.addToDOM = function (parent) {
/**
* @private
* @param {Highcharts.ASTNode} subtree
* HTML/SVG definition
* @param {Element} [subParent]
* parent node
* @return {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement}
* The inserted node.
*/
function recurse(subtree, subParent) {
var ret;
AST_splat(subtree).forEach(function (item) {
var tagName = item.tagName;
var textNode = item.textContent ?
Core_Globals.doc.createTextNode(item.textContent) :
void 0;
// Whether to ignore the AST filtering totally, #15345
var bypassHTMLFiltering = AST.bypassHTMLFiltering;
var node;
if (tagName) {
if (tagName === '#text') {
node = textNode;
}
else if (AST.allowedTags.indexOf(tagName) !== -1 ||
bypassHTMLFiltering) {
var NS = tagName === 'svg' ?
SVG_NS :
(subParent.namespaceURI || SVG_NS);
var element = Core_Globals.doc.createElementNS(NS,
tagName);
var attributes_1 = item.attributes || {};
// Apply attributes from root of AST node, legacy from
// from before TextBuilder
AST_objectEach(item, function (val, key) {
if (key !== 'tagName' &&
key !== 'attributes' &&
key !== 'children' &&
key !== 'style' &&
key !== 'textContent') {
attributes_1[key] = val;
}
});
AST_attr(element, bypassHTMLFiltering ?
attributes_1 :
AST.filterUserAttributes(attributes_1));
if (item.style) {
AST_css(element, item.style);
}
// Add text content
if (textNode) {
element.appendChild(textNode);
}
// Recurse
recurse(item.children || [], element);
node = element;
}
else {
AST_error(33, false, void 0, {
'Invalid tagName in config': tagName
});
}
}
// Add to the tree
if (node) {
subParent.appendChild(node);
}
ret = node;
});
// Return last node added (on top level it's the only one)
return ret;
}
return recurse(this.nodes, parent);
};
/**
* Parse HTML/SVG markup into AST Node objects. Used internally from the
* constructor.
*
* @private
*
* @function Highcharts.AST#getNodesFromMarkup
*
* @param {string} markup The markup string.
*
* @return {Array<Highcharts.ASTNode>} The parsed nodes.
*/
AST.prototype.parseMarkup = function (markup) {
var nodes = [];
markup = markup
.trim()
// The style attribute throws a warning when parsing when CSP is
// enabled (#6884), so use an alias and pick it up below
// Make all quotation marks parse correctly to DOM (#17627)
.replace(/ style=(["'])/g, ' data-style=$1');
var doc;
try {
doc = new DOMParser().parseFromString(trustedTypesPolicy ?
trustedTypesPolicy.createHTML(markup) :
markup, 'text/html');
}
catch (e) {
// There are two cases where this fails:
// 1. IE9 and PhantomJS, where the DOMParser only supports parsing
// XML
// 2. Due to a Chromium issue where chart redraws are triggered by
// a `beforeprint` event (#16931),
// https://issues.chromium.org/issues/40222135
}
if (!doc) {
var body = AST_createElement('div');
body.innerHTML = markup;
doc = { body: body };
}
var appendChildNodes = function (node,
addTo) {
var tagName = node.nodeName.toLowerCase();
// Add allowed tags
var astNode = {
tagName: tagName
};
if (tagName === '#text') {
astNode.textContent = node.textContent || '';
}
var parsedAttributes = node.attributes;
// Add attributes
if (parsedAttributes) {
var attributes_2 = {};
[].forEach.call(parsedAttributes, function (attrib) {
if (attrib.name === 'data-style') {
astNode.style = AST.parseStyle(attrib.value);
}
else {
attributes_2[attrib.name] = attrib.value;
}
});
astNode.attributes = attributes_2;
}
// Handle children
if (node.childNodes.length) {
var children_1 = [];
[].forEach.call(node.childNodes, function (childNode) {
appendChildNodes(childNode, children_1);
});
if (children_1.length) {
astNode.children = children_1;
}
}
addTo.push(astNode);
};
[].forEach.call(doc.body.childNodes, function (childNode) { return appendChildNodes(childNode, nodes); });
return nodes;
};
/* *
*
* Static Properties
*
* */
/**
* The list of allowed SVG or HTML attributes, used for sanitizing
* potentially harmful content from the chart configuration before adding to
* the DOM.
*
* @see [Source code with default values](
* https://github.com/highcharts/highcharts/blob/master/ts/Core/Renderer/HTML/AST.ts#:~:text=public%20static%20allowedAttributes)
*
* @example
* // Allow a custom, trusted attribute
* Highcharts.AST.allowedAttributes.push('data-value');
*
* @name Highcharts.AST.allowedAttributes
* @type {Array<string>}
*/
AST.allowedAttributes = [
'alt',
'aria-controls',
'aria-describedby',
'aria-expanded',
'aria-haspopup',
'aria-hidden',
'aria-label',
'aria-labelledby',
'aria-live',
'aria-pressed',
'aria-readonly',
'aria-roledescription',
'aria-selected',
'class',
'clip-path',
'color',
'colspan',
'cx',
'cy',
'd',
'dx',
'dy',
'disabled',
'fill',
'filterUnits',
'flood-color',
'flood-opacity',
'height',
'href',
'id',
'in',
'in2',
'markerHeight',
'markerWidth',
'offset',
'opacity',
'operator',
'orient',
'padding',
'paddingLeft',
'paddingRight',
'patternUnits',
'r',
'radius',
'refX',
'refY',
'role',
'scope',
'slope',
'src',
'startOffset',
'stdDeviation',
'stroke',
'stroke-linecap',
'stroke-width',
'style',
'tableValues',
'result',
'rowspan',
'summary',
'target',
'tabindex',
'text-align',
'text-anchor',
'textAnchor',
'textLength',
'title',
'type',
'valign',
'width',
'x',
'x1',
'x2',
'xlink:href',
'y',
'y1',
'y2',
'zIndex'
];
/**
* The list of allowed references for referring attributes like `href` and
* `src`. Attribute values will only be allowed if they start with one of
* these strings.
*
* @see [Source code with default values](
* https://github.com/highcharts/highcharts/blob/master/ts/Core/Renderer/HTML/AST.ts#:~:text=public%20static%20allowedReferences)
*
* @example
* // Allow tel:
* Highcharts.AST.allowedReferences.push('tel:');
*
* @name Highcharts.AST.allowedReferences
* @type {Array<string>}
*/
AST.allowedReferences = [
'https://',
'http://',
'mailto:',
'/',
'../',
'./',
'#'
];
/**
* The list of allowed SVG or HTML tags, used for sanitizing potentially
* harmful content from the chart configuration before adding to the DOM.
*
* @see [Source code with default values](
* https://github.com/highcharts/highcharts/blob/master/ts/Core/Renderer/HTML/AST.ts#:~:text=public%20static%20allowedTags)
*
* @example
* // Allow a custom, trusted tag
* Highcharts.AST.allowedTags.push('blink'); // ;)
*
* @name Highcharts.AST.allowedTags
* @type {Array<string>}
*/
AST.allowedTags = [
'a',
'abbr',
'b',
'br',
'button',
'caption',
'circle',
'clipPath',
'code',
'dd',
'defs',
'div',
'dl',
'dt',
'em',
'feComponentTransfer',
'feComposite',
'feDropShadow',
'feFlood',
'feFuncA',
'feFuncB',
'feFuncG',
'feFuncR',
'feGaussianBlur',
'feMorphology',
'feOffset',
'feMerge',
'feMergeNode',
'filter',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'hr',
'i',
'img',
'li',
'linearGradient',
'marker',
'ol',
'p',
'path',
'pattern',
'pre',
'rect',
'small',
'span',
'stop',
'strong',
'style',
'sub',
'sup',
'svg',
'table',
'text',
'textPath',
'thead',
'title',
'tbody',
'tspan',
'td',
'th',
'tr',
'u',
'ul',
'#text'
];
AST.emptyHTML = emptyHTML;
/**
* Allow all custom SVG and HTML attributes, references and tags (together
* with potentially harmful ones) to be added to the DOM from the chart
* configuration. In other words, disable the allow-listing which is the
* primary functionality of the AST.
*
* WARNING: Setting this property to `true` while allowing untrusted user
* data in the chart configuration will expose your application to XSS
* security risks!
*
* Note that in case you want to allow a known set of tags or attributes,
* you should allow-list them instead of disabling the filtering totally.
* See [allowedAttributes](Highcharts.AST#.allowedAttributes),
* [allowedReferences](Highcharts.AST#.allowedReferences) and
* [allowedTags](Highcharts.AST#.allowedTags). The `bypassHTMLFiltering`
* setting is intended only for those cases where allow-listing is not
* practical, and the chart configuration already comes from a secure
* source.
*
* @example
* // Allow all custom attributes, references and tags (disable DOM XSS
* // filtering)
* Highcharts.AST.bypassHTMLFiltering = true;
*
* @name Highcharts.AST.bypassHTMLFiltering
* @static
*/
AST.bypassHTMLFiltering = false;
return AST;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var HTML_AST = (AST);
/* *
*
* API Declarations
*
* */
/**
* Serialized form of an SVG/HTML definition, including children.
*
* @interface Highcharts.ASTNode
*/ /**
* @name Highcharts.ASTNode#attributes
* @type {Highcharts.SVGAttributes|undefined}
*/ /**
* @name Highcharts.ASTNode#children
* @type {Array<Highcharts.ASTNode>|undefined}
*/ /**
* @name Highcharts.ASTNode#tagName
* @type {string|undefined}
*/ /**
* @name Highcharts.ASTNode#textContent
* @type {string|undefined}
*/
(''); // Keeps doclets above in file
;// ./code/es5/es-modules/Core/Templating.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Templating_defaultOptions = Defaults.defaultOptions, Templating_defaultTime = Defaults.defaultTime;
var Templating_pageLang = Core_Globals.pageLang;
var Templating_extend = Core_Utilities.extend, Templating_getNestedProperty = Core_Utilities.getNestedProperty, Templating_isArray = Core_Utilities.isArray, Templating_isNumber = Core_Utilities.isNumber, Templating_isObject = Core_Utilities.isObject, Templating_isString = Core_Utilities.isString, Templating_pick = Core_Utilities.pick, Templating_ucfirst = Core_Utilities.ucfirst;
var helpers = {
// Built-in helpers
add: function (a, b) { return a + b; },
divide: function (a, b) { return (b !== 0 ? a / b : ''); },
// eslint-disable-next-line eqeqeq
eq: function (a, b) { return a == b; },
each: function (arr) {
var match = arguments[arguments.length - 1];
return Templating_isArray(arr) ?
arr.map(function (item, i) { return format(match.body, Templating_extend(Templating_isObject(item) ? item : { '@this': item }, {
'@index': i,
'@first': i === 0,
'@last': i === arr.length - 1
})); }).join('') :
false;
},
ge: function (a, b) { return a >= b; },
gt: function (a, b) { return a > b; },
'if': function (condition) { return !!condition; },
le: function (a, b) { return a <= b; },
lt: function (a, b) { return a < b; },
multiply: function (a, b) { return a * b; },
// eslint-disable-next-line eqeqeq
ne: function (a, b) { return a != b; },
subtract: function (a, b) { return a - b; },
ucfirst: Templating_ucfirst,
unless: function (condition) { return !condition; }
};
var numberFormatCache = {};
/* *
*
* Functions
*
* */
// Internal convenience function
var isQuotedString = function (str) { return /^["'].+["']$/.test(str); };
/**
* Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970) into a
* human readable date string. The format is a subset of the formats for PHP's
* [strftime](https://www.php.net/manual/en/function.strftime.php) function.
* Additional formats can be given in the {@link Highcharts.dateFormats} hook.
*
* Since v6.0.5, all internal dates are formatted through the
* {@link Highcharts.Chart#time} instance to respect chart-level time settings.
* The `Highcharts.dateFormat` function only reflects global time settings set
* with `setOptions`.
*
* Supported format keys:
* - `%a`: Short weekday, like 'Mon'
* - `%A`: Long weekday, like 'Monday'
* - `%d`: Two digit day of the month, 01 to 31
* - `%e`: Day of the month, 1 through 31
* - `%w`: Day of the week, 0 through 6
* - `%b`: Short month, like 'Jan'
* - `%B`: Long month, like 'January'
* - `%m`: Two digit month number, 01 through 12
* - `%y`: Two digits year, like 09 for 2009
* - `%Y`: Four digits year, like 2009
* - `%H`: Two digits hours in 24h format, 00 through 23
* - `%k`: Hours in 24h format, 0 through 23
* - `%I`: Two digits hours in 12h format, 00 through 11
* - `%l`: Hours in 12h format, 1 through 12
* - `%M`: Two digits minutes, 00 through 59
* - `%p`: Upper case AM or PM
* - `%P`: Lower case AM or PM
* - `%S`: Two digits seconds, 00 through 59
* - `%L`: Milliseconds (naming from Ruby)
*
* @function Highcharts.dateFormat
*
* @param {string} format
* The desired format where various time representations are prefixed
* with `%`.
*
* @param {number} timestamp
* The JavaScript timestamp.
*
* @param {boolean} [upperCaseFirst=false]
* Upper case first letter in the return.
*
* @return {string}
* The formatted date.
*/
function dateFormat(format, timestamp, upperCaseFirst) {
return Templating_defaultTime.dateFormat(format, timestamp, upperCaseFirst);
}
/**
* Format a string according to a subset of the rules of Python's String.format
* method.
*
* @example
* let s = Highcharts.format(
* 'The {color} fox was {len:.2f} feet long',
* { color: 'red', len: Math.PI }
* );
* // => The red fox was 3.14 feet long
*
* @function Highcharts.format
*
* @param {string} str
* The string to format.
*
* @param {Record<string, *>} ctx
* The context, a collection of key-value pairs where each key is
* replaced by its value.
*
* @param {Highcharts.Chart} [chart]
* A `Chart` instance used to get numberFormatter and time.
*
* @return {string}
* The formatted string.
*/
function format(str, ctx, chart) {
if (str === void 0) { str = ''; }
var regex = /\{([\p{L}\d:\.,;\-\/<>\[\]%_@+"'’= #\(\)]+)\}/gu,
// The sub expression regex is the same as the top expression regex,
// but except parens and block helpers (#), and surrounded by parens
// instead of curly brackets.
subRegex = /\(([\p{L}\d:\.,;\-\/<>\[\]%_@+"'= ]+)\)/gu, matches = [], floatRegex = /f$/, decRegex = /\.(\d)/, lang = (chart === null || chart === void 0 ? void 0 : chart.options.lang) || Templating_defaultOptions.lang, time = chart && chart.time || Templating_defaultTime, numberFormatter = chart && chart.numberFormatter || numberFormat;
/*
* Get a literal or variable value inside a template expression. May be
* extended with other types like string or null if needed, but keep it
* small for now.
*/
var resolveProperty = function (key) {
if (key === void 0) { key = ''; }
var n;
// Literals
if (key === 'true') {
return true;
}
if (key === 'false') {
return false;
}
if ((n = Number(key)).toString() === key) {
return n;
}
if (isQuotedString(key)) {
return key.slice(1, -1);
}
// Variables and constants
return Templating_getNestedProperty(key, ctx);
};
var match,
currentMatch,
depth = 0,
hasSub;
// Parse and create tree
while ((match = regex.exec(str)) !== null) {
// When a sub expression is found, it is evaluated first, and the
// results recursively evaluated until no subexpression exists.
var mainMatch = match,
subMatch = subRegex.exec(match[1]);
if (subMatch) {
match = subMatch;
hasSub = true;
}
if (!currentMatch || !currentMatch.isBlock) {
currentMatch = {
ctx: ctx,
expression: match[1],
find: match[0],
isBlock: match[1].charAt(0) === '#',
start: match.index,
startInner: match.index + match[0].length,
length: match[0].length
};
}
// Identify helpers
var fn = (currentMatch.isBlock ? mainMatch : match)[1].split(' ')[0].replace('#', '');
if (helpers[fn]) {
// Block helper, only 0 level is handled
if (currentMatch.isBlock && fn === currentMatch.fn) {
depth++;
}
if (!currentMatch.fn) {
currentMatch.fn = fn;
}
}
// Closing a block helper
var startingElseSection = match[1] === 'else';
if (currentMatch.isBlock &&
currentMatch.fn && (match[1] === "/".concat(currentMatch.fn) ||
startingElseSection)) {
if (!depth) { // === 0
var start = currentMatch.startInner,
body = str.substr(start,
match.index - start);
// Either closing without an else section, or when encountering
// an else section
if (currentMatch.body === void 0) {
currentMatch.body = body;
currentMatch.startInner = match.index + match[0].length;
// The body exists already, so this is the else section
}
else {
currentMatch.elseBody = body;
}
currentMatch.find += body + match[0];
if (!startingElseSection) {
matches.push(currentMatch);
currentMatch = void 0;
}
}
else if (!startingElseSection) {
depth--;
}
// Common expression
}
else if (!currentMatch.isBlock) {
matches.push(currentMatch);
}
// Evaluate sub-matches one by one to prevent orphaned block closers
if (subMatch && !(currentMatch === null || currentMatch === void 0 ? void 0 : currentMatch.isBlock)) {
break;
}
}
// Execute
matches.forEach(function (match) {
var body = match.body,
elseBody = match.elseBody,
expression = match.expression,
fn = match.fn;
var replacement,
i;
// Helper function
if (fn) {
// Pass the helpers the amount of arguments defined by the function,
// then the match as the last argument.
var args = [match],
parts = [],
len = expression.length;
var start = 0,
startChar = void 0;
for (i = 0; i <= len; i++) {
var char = expression.charAt(i);
// Start of string
if (!startChar && (char === '"' || char === '\'')) {
startChar = char;
// End of string
}
else if (startChar === char) {
startChar = '';
}
if (!startChar &&
(char === ' ' || i === len)) {
parts.push(expression.substr(start, i - start));
start = i + 1;
}
}
i = helpers[fn].length;
while (i--) {
args.unshift(resolveProperty(parts[i + 1]));
}
replacement = helpers[fn].apply(ctx, args);
// Block helpers may return true or false. They may also return a
// string, like the `each` helper.
if (match.isBlock && typeof replacement === 'boolean') {
replacement = format(replacement ? body : elseBody, ctx, chart);
}
// Simple variable replacement
}
else {
var valueAndFormat = isQuotedString(expression) ?
[expression] : expression.split(':');
replacement = resolveProperty(valueAndFormat.shift() || '');
// Format the replacement
if (valueAndFormat.length && typeof replacement === 'number') {
var segment = valueAndFormat.join(':');
if (floatRegex.test(segment)) { // Float
var decimals = parseInt((segment.match(decRegex) || ['', '-1'])[1], 10);
if (replacement !== null) {
replacement = numberFormatter(replacement, decimals, lang.decimalPoint, segment.indexOf(',') > -1 ? lang.thousandsSep : '');
}
}
else {
replacement = time.dateFormat(segment, replacement);
}
}
// Use string literal in order to be preserved in the outer
// expression
subRegex.lastIndex = 0;
if (subRegex.test(match.find) && Templating_isString(replacement)) {
replacement = "\"".concat(replacement, "\"");
}
}
str = str.replace(match.find, Templating_pick(replacement, ''));
});
return hasSub ? format(str, ctx, chart) : str;
}
/**
* Format a number and return a string based on input settings.
*
* @sample highcharts/members/highcharts-numberformat/
* Custom number format
*
* @function Highcharts.numberFormat
*
* @param {number} number
* The input number to format.
*
* @param {number} decimals
* The amount of decimals. A value of -1 preserves the amount in the
* input number.
*
* @param {string} [decimalPoint]
* The decimal point, defaults to the one given in the lang options, or
* a dot.
*
* @param {string} [thousandsSep]
* The thousands separator, defaults to the one given in the lang
* options, or a space character.
*
* @return {string}
* The formatted number.
*/
function numberFormat(number, decimals, decimalPoint, thousandsSep) {
var _a,
_b;
number = +number || 0;
decimals = +decimals;
var ret,
fractionDigits,
_c = number.toString().split('e').map(Number),
mantissa = _c[0],
exp = _c[1];
var lang = ((_a = this === null || this === void 0 ? void 0 : this.options) === null || _a === void 0 ? void 0 : _a.lang) || Templating_defaultOptions.lang,
origDec = (number.toString().split('.')[1] || '').split('e')[0].length,
firstDecimals = decimals,
options = {};
decimalPoint !== null && decimalPoint !== void 0 ? decimalPoint : (decimalPoint = lang.decimalPoint);
thousandsSep !== null && thousandsSep !== void 0 ? thousandsSep : (thousandsSep = lang.thousandsSep);
if (decimals === -1) {
// Preserve decimals. Not huge numbers (#3793).
decimals = Math.min(origDec, 20);
}
else if (!Templating_isNumber(decimals)) {
decimals = 2;
}
else if (decimals && exp < 0) {
// Expose decimals from exponential notation (#7042)
fractionDigits = decimals + exp;
if (fractionDigits >= 0) {
// Remove too small part of the number while keeping the notation
mantissa = +mantissa.toExponential(fractionDigits).split('e')[0];
decimals = fractionDigits;
}
else {
// `fractionDigits < 0`
mantissa = Math.floor(mantissa);
if (decimals < 20) {
// Use number instead of exponential notation (#7405)
number = +(mantissa * Math.pow(10, exp)).toFixed(decimals);
}
else {
// Or zero
number = 0;
}
exp = 0;
}
}
if (exp) {
decimals !== null && decimals !== void 0 ? decimals : (decimals = 2);
number = mantissa;
}
if (Templating_isNumber(decimals) && decimals >= 0) {
options.minimumFractionDigits = decimals;
options.maximumFractionDigits = decimals;
}
if (thousandsSep === '') {
options.useGrouping = false;
}
var hasSeparators = thousandsSep || decimalPoint,
locale = hasSeparators ?
'en' :
((this === null || this === void 0 ? void 0 : this.locale) || lang.locale || Templating_pageLang),
cacheKey = JSON.stringify(options) + locale,
nf = (_b = numberFormatCache[cacheKey]) !== null && _b !== void 0 ? _b : (numberFormatCache[cacheKey] = new Intl.NumberFormat(locale,
options));
ret = nf.format(number);
// If thousandsSep or decimalPoint are set, fall back to using English
// format with string replacement for the separators.
if (hasSeparators) {
ret = ret
// Preliminary step to avoid re-swapping (#22402)
.replace(/([,\.])/g, '_$1')
.replace(/_\,/g, thousandsSep !== null && thousandsSep !== void 0 ? thousandsSep : ',')
.replace('_.', decimalPoint !== null && decimalPoint !== void 0 ? decimalPoint : '.');
}
if (
// Remove signed zero (#20564)
(!decimals && +ret === 0) ||
// Small numbers, no decimals (#14023)
(exp < 0 && !firstDecimals)) {
ret = '0';
}
if (exp && +ret !== 0) {
ret += 'e' + (exp < 0 ? '' : '+') + exp;
}
return ret;
}
/* *
*
* Default Export
*
* */
var Templating = {
dateFormat: dateFormat,
format: format,
helpers: helpers,
numberFormat: numberFormat
};
/* harmony default export */ var Core_Templating = (Templating);
;// ./code/es5/es-modules/Core/Renderer/RendererRegistry.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Namespace
*
* */
var RendererRegistry;
(function (RendererRegistry) {
/* *
*
* Constants
*
* */
RendererRegistry.rendererTypes = {};
/* *
*
* Variables
*
* */
var defaultRenderer;
/* *
*
* Functions
*
* */
/**
* Gets a registered renderer class. If no renderer type is provided or the
* requested renderer was not founded, the default renderer is returned.
*
* @param {string} [rendererType]
* Renderer type or the default renderer.
*
* @return {Highcharts.Class<Highcharts.SVGRenderer>}
* Returns the requested renderer class or the default renderer class.
*/
function getRendererType(rendererType) {
if (rendererType === void 0) { rendererType = defaultRenderer; }
return (RendererRegistry.rendererTypes[rendererType] || RendererRegistry.rendererTypes[defaultRenderer]);
}
RendererRegistry.getRendererType = getRendererType;
/**
* Register a renderer class.
*
* @param {string} rendererType
* Renderer type to register.
*
* @param {Highcharts.Class<Highcharts.SVGRenderer>} rendererClass
* Returns the requested renderer class or the default renderer class.
*
* @param {boolean} setAsDefault
* Sets the renderer class as the default renderer.
*/
function registerRendererType(rendererType, rendererClass, setAsDefault) {
RendererRegistry.rendererTypes[rendererType] = rendererClass;
if (!defaultRenderer || setAsDefault) {
defaultRenderer = rendererType;
Core_Globals.Renderer = rendererClass; // Compatibility
}
}
RendererRegistry.registerRendererType = registerRendererType;
})(RendererRegistry || (RendererRegistry = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Renderer_RendererRegistry = (RendererRegistry);
;// ./code/es5/es-modules/Core/Renderer/RendererUtilities.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Imports
*
* */
var RendererUtilities_clamp = Core_Utilities.clamp, RendererUtilities_pick = Core_Utilities.pick, RendererUtilities_pushUnique = Core_Utilities.pushUnique, RendererUtilities_stableSort = Core_Utilities.stableSort;
/* *
*
* Namespace
*
* */
var RendererUtilities;
(function (RendererUtilities) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* General distribution algorithm for distributing labels of differing size
* along a confined length in two dimensions. The algorithm takes an array
* of objects containing a size, a target and a rank. It will place the
* labels as close as possible to their targets, skipping the lowest ranked
* labels if necessary.
* @private
*/
function distribute(boxes, len, maxDistance) {
// Original array will be altered with added .pos
var origBoxes = boxes,
reducedLen = origBoxes.reducedLen || len,
sortByRank = function (a,
b) {
return (b.rank || 0) - (a.rank || 0);
}, sortByTarget = function (a, b) {
return a.target - b.target;
}, restBoxes = [], // The outranked overshoot
boxesLength = boxes.length, forDeletion = [], push = restBoxes.push;
var i,
cursor,
step,
overlapping = true,
box,
target,
total = 0,
equalRank;
// If the total size exceeds the len, remove those boxes with the lowest
// rank
i = boxesLength;
while (i--) {
total += boxes[i].size;
}
// Sort by rank, then slice away overshoot
if (total > reducedLen) {
RendererUtilities_stableSort(boxes, sortByRank);
equalRank = boxes[0].rank === boxes[boxes.length - 1].rank;
step = equalRank ? boxesLength / 2 : -1;
cursor = equalRank ? step : boxesLength - 1;
// When the boxes have equal rank (pie data labels, flags - #10073),
// decimate the boxes by starting in the middle and gradually remove
// more items inside the array. When they are sorted by rank, just
// remove the ones with the lowest rank from the end.
while (step && total > reducedLen) {
i = Math.floor(cursor);
box = boxes[i];
if (RendererUtilities_pushUnique(forDeletion, i)) {
total -= box.size;
}
cursor += step;
// Start over the decimation with smaller steps
if (equalRank && cursor >= boxes.length) {
step /= 2;
cursor = step;
}
}
// Clean out the boxes marked for deletion
forDeletion
.sort(function (a, b) { return b - a; })
.forEach(function (i) {
return push.apply(restBoxes, boxes.splice(i, 1));
});
}
// Order by target
RendererUtilities_stableSort(boxes, sortByTarget);
// So far we have been mutating the original array. Now
// create a copy with target arrays
boxes = boxes.map(function (box) { return ({
size: box.size,
targets: [box.target],
align: RendererUtilities_pick(box.align, 0.5)
}); });
while (overlapping) {
// Initial positions: target centered in box
i = boxes.length;
while (i--) {
box = boxes[i];
// Composite box, average of targets
target = (Math.min.apply(0, box.targets) +
Math.max.apply(0, box.targets)) / 2;
box.pos = RendererUtilities_clamp(target - box.size * box.align, 0, len - box.size);
}
// Detect overlap and join boxes
i = boxes.length;
overlapping = false;
while (i--) {
// Overlap
if (i > 0 &&
boxes[i - 1].pos + boxes[i - 1].size >
boxes[i].pos) {
// Add this size to the previous box
boxes[i - 1].size += boxes[i].size;
boxes[i - 1].targets = boxes[i - 1]
.targets
.concat(boxes[i].targets);
boxes[i - 1].align = 0.5;
// Overlapping right, push left
if (boxes[i - 1].pos + boxes[i - 1].size > len) {
boxes[i - 1].pos = len - boxes[i - 1].size;
}
boxes.splice(i, 1); // Remove this item
overlapping = true;
}
}
}
// Add the rest (hidden boxes)
push.apply(origBoxes, restBoxes);
// Now the composite boxes are placed, we need to put the original boxes
// within them
i = 0;
boxes.some(function (box) {
var posInCompositeBox = 0;
// Exceeded maxDistance => abort
return (box.targets || []).some(function () {
origBoxes[i].pos = box.pos + posInCompositeBox;
// If the distance between the position and the target exceeds
// maxDistance, abort the loop and decrease the length in
// increments of 10% to recursively reduce the number of
// visible boxes by rank. Once all boxes are within the
// maxDistance, we're good.
if (typeof maxDistance !== 'undefined' &&
Math.abs(origBoxes[i].pos - origBoxes[i].target) > maxDistance) {
// Reset the positions that are already set
origBoxes
.slice(0, i + 1)
.forEach(function (box) { return delete box.pos; });
// Try with a smaller length
origBoxes.reducedLen =
(origBoxes.reducedLen || len) - (len * 0.1);
// Recurse
if (origBoxes.reducedLen > len * 0.1) {
distribute(origBoxes, len, maxDistance);
}
// Exceeded maxDistance => abort
return true;
}
posInCompositeBox += origBoxes[i].size;
i++;
return false;
});
});
// Add the rest (hidden) boxes and sort by target
RendererUtilities_stableSort(origBoxes, sortByTarget);
return origBoxes;
}
RendererUtilities.distribute = distribute;
})(RendererUtilities || (RendererUtilities = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Renderer_RendererUtilities = (RendererUtilities);
;// ./code/es5/es-modules/Core/Renderer/SVG/SVGElement.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var SVGElement_animate = AnimationUtilities.animate, SVGElement_animObject = AnimationUtilities.animObject, SVGElement_stop = AnimationUtilities.stop;
var deg2rad = Core_Globals.deg2rad, SVGElement_doc = Core_Globals.doc, svg = Core_Globals.svg, SVGElement_SVG_NS = Core_Globals.SVG_NS, SVGElement_win = Core_Globals.win, isFirefox = Core_Globals.isFirefox;
var SVGElement_addEvent = Core_Utilities.addEvent, SVGElement_attr = Core_Utilities.attr, SVGElement_createElement = Core_Utilities.createElement, SVGElement_crisp = Core_Utilities.crisp, SVGElement_css = Core_Utilities.css, SVGElement_defined = Core_Utilities.defined, SVGElement_erase = Core_Utilities.erase, SVGElement_extend = Core_Utilities.extend, SVGElement_fireEvent = Core_Utilities.fireEvent, SVGElement_getAlignFactor = Core_Utilities.getAlignFactor, SVGElement_isArray = Core_Utilities.isArray, SVGElement_isFunction = Core_Utilities.isFunction, SVGElement_isNumber = Core_Utilities.isNumber, SVGElement_isObject = Core_Utilities.isObject, SVGElement_isString = Core_Utilities.isString, SVGElement_merge = Core_Utilities.merge, SVGElement_objectEach = Core_Utilities.objectEach, SVGElement_pick = Core_Utilities.pick, SVGElement_pInt = Core_Utilities.pInt, SVGElement_pushUnique = Core_Utilities.pushUnique, SVGElement_replaceNested = Core_Utilities.replaceNested, SVGElement_syncTimeout = Core_Utilities.syncTimeout, SVGElement_uniqueKey = Core_Utilities.uniqueKey;
/* *
*
* Class
*
* */
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* The SVGElement prototype is a JavaScript wrapper for SVG elements used in the
* rendering layer of Highcharts. Combined with the
* {@link Highcharts.SVGRenderer}
* object, these prototypes allow freeform annotation in the charts or even in
* HTML pages without instanciating a chart. The SVGElement can also wrap HTML
* labels, when `text` or `label` elements are created with the `useHTML`
* parameter.
*
* The SVGElement instances are created through factory functions on the
* {@link Highcharts.SVGRenderer}
* object, like
* {@link Highcharts.SVGRenderer#rect|rect},
* {@link Highcharts.SVGRenderer#path|path},
* {@link Highcharts.SVGRenderer#text|text},
* {@link Highcharts.SVGRenderer#label|label},
* {@link Highcharts.SVGRenderer#g|g}
* and more.
*
* See [How to use the SVG Renderer](
* https://www.highcharts.com/docs/advanced-chart-features/renderer) for a
* comprehensive tutorial on how to draw SVG elements on a chart.
*
* @class
* @name Highcharts.SVGElement
*/
var SVGElement = /** @class */ (function () {
/**
* Initialize the SVG element. This function only exists to make the
* initialization process overridable. It should not be called directly.
*
* @function Highcharts.SVGElement#init
*
* @param {Highcharts.SVGRenderer} renderer
* The SVGRenderer instance to initialize to.
*
* @param {string} nodeName
* The SVG node name.
*/
function SVGElement(renderer, nodeName) {
this.onEvents = {};
this.opacity = 1; // Default base for animation
this.SVG_NS = SVGElement_SVG_NS;
/**
* The primary DOM node. Each `SVGElement` instance wraps a main DOM
* node, but may also represent more nodes.
*
* @name Highcharts.SVGElement#element
* @type {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement}
*/
this.element = nodeName === 'span' || nodeName === 'body' ?
SVGElement_createElement(nodeName) :
SVGElement_doc.createElementNS(this.SVG_NS, nodeName);
/**
* The renderer that the SVGElement belongs to.
*
* @name Highcharts.SVGElement#renderer
* @type {Highcharts.SVGRenderer}
*/
this.renderer = renderer;
this.styles = {};
SVGElement_fireEvent(this, 'afterInit');
}
// @todo public zIndex?: number;
/* *
*
* Functions
*
* */
/**
* Get the current value of an attribute or pseudo attribute,
* used mainly for animation. Called internally from
* the {@link Highcharts.SVGRenderer#attr} function.
*
* @private
* @function Highcharts.SVGElement#_defaultGetter
*
* @param {string} key
* Property key.
*
* @return {number|string}
* Property value.
*/
SVGElement.prototype._defaultGetter = function (key) {
var ret = SVGElement_pick(this[key + 'Value'], // Align getter
this[key],
this.element ? this.element.getAttribute(key) : null, 0);
if (/^-?[\d\.]+$/.test(ret)) { // Is numerical
ret = parseFloat(ret);
}
return ret;
};
/**
* @private
* @function Highcharts.SVGElement#_defaultSetter
*
* @param {string} value
*
* @param {string} key
*
* @param {Highcharts.SVGDOMElement} element
*
*/
SVGElement.prototype._defaultSetter = function (value, key, element) {
element.setAttribute(key, value);
};
/**
* Add the element to the DOM. All elements must be added this way.
*
* @sample highcharts/members/renderer-g
* Elements added to a group
*
* @function Highcharts.SVGElement#add
*
* @param {Highcharts.SVGElement} [parent]
* The parent item to add it to. If undefined, the element is added
* to the {@link Highcharts.SVGRenderer.box}.
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.add = function (parent) {
var renderer = this.renderer,
element = this.element;
var inserted;
if (parent) {
this.parentGroup = parent;
}
// Build formatted text
if (typeof this.textStr !== 'undefined' &&
this.element.nodeName === 'text' // Not for SVGLabel instances
) {
renderer.buildText(this);
}
// Mark as added
this.added = true;
// If we're adding to renderer root, or other elements in the group
// have a z index, we need to handle it
if (!parent || parent.handleZ || this.zIndex) {
inserted = this.zIndexSetter();
}
// If zIndex is not handled, append at the end
if (!inserted) {
(parent ?
parent.element :
renderer.box).appendChild(element);
}
// Fire an event for internal hooks
if (this.onAdd) {
this.onAdd();
}
return this;
};
/**
* Add a class name to an element.
*
* @function Highcharts.SVGElement#addClass
*
* @param {string} className
* The new class name to add.
*
* @param {boolean} [replace=false]
* When true, the existing class name(s) will be overwritten with the new
* one. When false, the new one is added.
*
* @return {Highcharts.SVGElement}
* Return the SVG element for chainability.
*/
SVGElement.prototype.addClass = function (className, replace) {
var currentClassName = replace ? '' : (this.attr('class') || '');
// Trim the string and remove duplicates
className = (className || '')
.split(/ /g)
.reduce(function (newClassName, name) {
if (currentClassName.indexOf(name) === -1) {
newClassName.push(name);
}
return newClassName;
}, (currentClassName ?
[currentClassName] :
[]))
.join(' ');
if (className !== currentClassName) {
this.attr('class', className);
}
return this;
};
/**
* This method is executed in the end of `attr()`, after setting all
* attributes in the hash. In can be used to efficiently consolidate
* multiple attributes in one SVG property -- e.g., translate, rotate and
* scale are merged in one "transform" attribute in the SVG node.
*
* @private
* @function Highcharts.SVGElement#afterSetters
*/
SVGElement.prototype.afterSetters = function () {
// Update transform. Do this outside the loop to prevent redundant
// updating for batch setting of attributes.
if (this.doTransform) {
this.updateTransform();
this.doTransform = false;
}
};
/**
* Align the element relative to the chart or another box.
*
* @function Highcharts.SVGElement#align
*
* @param {Highcharts.AlignObject} [alignOptions]
* The alignment options. The function can be called without this
* parameter in order to re-align an element after the box has been
* updated.
*
* @param {boolean} [alignByTranslate]
* Align element by translation.
*
* @param {string|Highcharts.BBoxObject} [alignTo]
* The box to align to, needs a width and height. When the box is a
* string, it refers to an object in the Renderer. For example, when
* box is `spacingBox`, it refers to `Renderer.spacingBox` which
* holds `width`, `height`, `x` and `y` properties.
*
* @param {boolean} [redraw]
* Decide if SVGElement should be redrawn with new alignment or
* just change its attributes.
*
* @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
*/
SVGElement.prototype.align = function (alignOptions, alignByTranslate, alignTo, redraw) {
if (redraw === void 0) { redraw = true; }
var renderer = this.renderer,
alignedObjects = renderer.alignedObjects,
initialAlignment = Boolean(alignOptions);
// First call on instanciate
if (alignOptions) {
this.alignOptions = alignOptions;
this.alignByTranslate = alignByTranslate;
this.alignTo = alignTo;
// When called on resize, no arguments are supplied
}
else {
alignOptions = this.alignOptions || {};
alignByTranslate = this.alignByTranslate;
alignTo = this.alignTo;
}
var alignToKey = !alignTo || SVGElement_isString(alignTo) ?
alignTo || 'renderer' :
void 0;
// When aligned to a key, automatically re-align on redraws
if (alignToKey) {
// Prevent duplicates, like legendGroup after resize
if (initialAlignment) {
SVGElement_pushUnique(alignedObjects, this);
}
alignTo = void 0; // Do not use the box
}
var alignToBox = SVGElement_pick(alignTo,
renderer[alignToKey],
renderer),
// Default: left align
x = (alignToBox.x || 0) + (alignOptions.x || 0) +
((alignToBox.width || 0) - (alignOptions.width || 0)) *
SVGElement_getAlignFactor(alignOptions.align),
// Default: top align
y = (alignToBox.y || 0) + (alignOptions.y || 0) +
((alignToBox.height || 0) - (alignOptions.height || 0)) *
SVGElement_getAlignFactor(alignOptions.verticalAlign),
attribs = {
'text-align': alignOptions === null || alignOptions === void 0 ? void 0 : alignOptions.align
};
attribs[alignByTranslate ? 'translateX' : 'x'] = Math.round(x);
attribs[alignByTranslate ? 'translateY' : 'y'] = Math.round(y);
// Animate only if already placed
if (redraw) {
this[this.placed ? 'animate' : 'attr'](attribs);
this.placed = true;
}
this.alignAttr = attribs;
return this;
};
/**
* @private
* @function Highcharts.SVGElement#alignSetter
* @param {"left"|"center"|"right"} value
*/
SVGElement.prototype.alignSetter = function (value) {
var convert = {
left: 'start',
center: 'middle',
right: 'end'
};
if (convert[value]) {
this.alignValue = value;
this.element.setAttribute('text-anchor', convert[value]);
}
};
/**
* Animate to given attributes or CSS properties.
*
* @sample highcharts/members/element-on/
* Setting some attributes by animation
*
* @function Highcharts.SVGElement#animate
*
* @param {Highcharts.SVGAttributes} params
* SVG attributes or CSS to animate.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [options]
* Animation options.
*
* @param {Function} [complete]
* Function to perform at the end of animation.
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.animate = function (params, options, complete) {
var _this = this;
var animOptions = SVGElement_animObject(SVGElement_pick(options,
this.renderer.globalAnimation,
true)),
deferTime = animOptions.defer;
// When the page is hidden save resources in the background by not
// running animation at all (#9749).
if (SVGElement_doc.hidden) {
animOptions.duration = 0;
}
if (animOptions.duration !== 0) {
// Allows using a callback with the global animation without
// overwriting it
if (complete) {
animOptions.complete = complete;
}
// If defer option is defined delay the animation #12901
SVGElement_syncTimeout(function () {
if (_this.element) {
SVGElement_animate(_this, params, animOptions);
}
}, deferTime);
}
else {
this.attr(params, void 0, complete || animOptions.complete);
// Call the end step synchronously
SVGElement_objectEach(params, function (val, prop) {
if (animOptions.step) {
animOptions.step.call(this, val, { prop: prop, pos: 1, elem: this });
}
}, this);
}
return this;
};
/**
* Apply a text outline through a custom CSS property, by copying the text
* element and apply stroke to the copy. Used internally. Contrast checks at
* [example](https://jsfiddle.net/highcharts/43soe9m1/2/).
*
* @example
* // Specific color
* text.css({
* textOutline: '1px black'
* });
* // Automatic contrast
* text.css({
* color: '#000000', // black text
* textOutline: '1px contrast' // => white outline
* });
*
* @private
* @function Highcharts.SVGElement#applyTextOutline
*
* @param {string} textOutline
* A custom CSS `text-outline` setting, defined by `width color`.
*/
SVGElement.prototype.applyTextOutline = function (textOutline) {
var elem = this.element,
hasContrast = textOutline.indexOf('contrast') !== -1,
styles = {};
// When the text shadow is set to contrast, use dark stroke for light
// text and vice versa.
if (hasContrast) {
styles.textOutline = textOutline = textOutline.replace(/contrast/g, this.renderer.getContrast(elem.style.fill));
}
// Extract the stroke width and color
var parts = textOutline.split(' ');
var color = parts[parts.length - 1];
var strokeWidth = parts[0];
if (strokeWidth && strokeWidth !== 'none' && Core_Globals.svg) {
this.fakeTS = true; // Fake text shadow
// Since the stroke is applied on center of the actual outline, we
// need to double it to get the correct stroke-width outside the
// glyphs.
strokeWidth = strokeWidth.replace(/(^[\d\.]+)(.*?)$/g, function (match, digit, unit) {
return (2 * Number(digit)) + unit;
});
// Remove shadows from previous runs.
this.removeTextOutline();
var outline_1 = SVGElement_doc.createElementNS(SVGElement_SVG_NS, 'tspan');
SVGElement_attr(outline_1, {
'class': 'highcharts-text-outline',
fill: color,
stroke: color,
'stroke-width': strokeWidth,
'stroke-linejoin': 'round'
});
// For each of the tspans and text nodes, create a copy in the
// outline.
var parentElem = elem.querySelector('textPath') || elem;
[].forEach.call(parentElem.childNodes, function (childNode) {
var clone = childNode.cloneNode(true);
if (clone.removeAttribute) {
['fill', 'stroke', 'stroke-width', 'stroke'].forEach(function (prop) { return clone
.removeAttribute(prop); });
}
outline_1.appendChild(clone);
});
// Collect the sum of dy from all children, included nested ones
var totalHeight_1 = 0;
[].forEach.call(parentElem.querySelectorAll('text tspan'), function (element) {
totalHeight_1 += Number(element.getAttribute('dy'));
});
// Insert an absolutely positioned break before the original text
// to keep it in place
var br = SVGElement_doc.createElementNS(SVGElement_SVG_NS, 'tspan');
br.textContent = '\u200B';
// Reset the position for the following text
SVGElement_attr(br, {
x: Number(elem.getAttribute('x')),
dy: -totalHeight_1
});
// Insert the outline
outline_1.appendChild(br);
parentElem.insertBefore(outline_1, parentElem.firstChild);
}
};
/**
* @function Highcharts.SVGElement#attr
* @param {string} key
* @return {number|string}
*/ /**
* Apply native and custom attributes to the SVG elements.
*
* In order to set the rotation center for rotation, set x and y to 0 and
* use `translateX` and `translateY` attributes to position the element
* instead.
*
* Attributes frequently used in Highcharts are `fill`, `stroke`,
* `stroke-width`.
*
* @sample highcharts/members/renderer-rect/
* Setting some attributes
*
* @example
* // Set multiple attributes
* element.attr({
* stroke: 'red',
* fill: 'blue',
* x: 10,
* y: 10
* });
*
* // Set a single attribute
* element.attr('stroke', 'red');
*
* // Get an attribute
* element.attr('stroke'); // => 'red'
*
* @function Highcharts.SVGElement#attr
*
* @param {string|Highcharts.SVGAttributes} [hash]
* The native and custom SVG attributes.
*
* @param {number|string|Highcharts.SVGPathArray} [val]
* If the type of the first argument is `string`, the second can be a
* value, which will serve as a single attribute setter. If the first
* argument is a string and the second is undefined, the function
* serves as a getter and the current value of the property is
* returned.
*
* @param {Function} [complete]
* A callback function to execute after setting the attributes. This
* makes the function compliant and interchangeable with the
* {@link SVGElement#animate} function.
*
* @param {boolean} [continueAnimation=true]
* Used internally when `.attr` is called as part of an animation
* step. Otherwise, calling `.attr` for an attribute will stop
* animation for that attribute.
*
* @return {Highcharts.SVGElement}
* If used as a setter, it returns the current
* {@link Highcharts.SVGElement} so the calls can be chained. If
* used as a getter, the current value of the attribute is returned.
*/
SVGElement.prototype.attr = function (hash, val, complete, continueAnimation) {
var element = this.element,
symbolCustomAttribs = SVGElement.symbolCustomAttribs;
var key,
hasSetSymbolSize,
ret = this,
skipAttr,
setter;
// Single key-value pair
if (typeof hash === 'string' && typeof val !== 'undefined') {
key = hash;
hash = {};
hash[key] = val;
}
// Used as a getter: first argument is a string, second is undefined
if (typeof hash === 'string') {
ret = (this[hash + 'Getter'] ||
this._defaultGetter).call(this, hash, element);
// Setter
}
else {
SVGElement_objectEach(hash, function eachAttribute(val, key) {
skipAttr = false;
// Unless .attr is from the animator update, stop current
// running animation of this property
if (!continueAnimation) {
SVGElement_stop(this, key);
}
// Special handling of symbol attributes
if (this.symbolName &&
symbolCustomAttribs.indexOf(key) !== -1) {
if (!hasSetSymbolSize) {
this.symbolAttr(hash);
hasSetSymbolSize = true;
}
skipAttr = true;
}
if (this.rotation && (key === 'x' || key === 'y')) {
this.doTransform = true;
}
if (!skipAttr) {
setter = (this[key + 'Setter'] ||
this._defaultSetter);
setter.call(this, val, key, element);
}
}, this);
this.afterSetters();
}
// In accordance with animate, run a complete callback
if (complete) {
complete.call(this);
}
return ret;
};
/**
* Apply a clipping shape to this element.
*
* @function Highcharts.SVGElement#clip
*
* @param {SVGElement} [clipElem]
* The clipping shape. If skipped, the current clip is removed.
*
* @return {Highcharts.SVGElement}
* Returns the SVG element to allow chaining.
*/
SVGElement.prototype.clip = function (clipElem) {
if (clipElem && !clipElem.clipPath) {
// Add a hyphen at the end to avoid confusion in testing indexes
// -1 and -10, -11 etc (#6550)
var id = SVGElement_uniqueKey() + '-', clipPath = this.renderer.createElement('clipPath')
.attr({ id: id })
.add(this.renderer.defs);
SVGElement_extend(clipElem, { clipPath: clipPath, id: id, count: 0 });
clipElem.add(clipPath);
}
return this.attr('clip-path', clipElem ?
"url(".concat(this.renderer.url, "#").concat(clipElem.id, ")") :
'none');
};
/**
* Calculate the coordinates needed for drawing a rectangle crisply and
* return the calculated attributes.
*
* @function Highcharts.SVGElement#crisp
*
* @param {Highcharts.RectangleObject} rect
* Rectangle to crisp.
*
* @param {number} [strokeWidth]
* The stroke width to consider when computing crisp positioning. It can
* also be set directly on the rect parameter.
*
* @return {Highcharts.RectangleObject}
* The modified rectangle arguments.
*/
SVGElement.prototype.crisp = function (rect, strokeWidth) {
// Math.round because strokeWidth can sometimes have roundoff errors
strokeWidth = Math.round(strokeWidth || rect.strokeWidth || 0);
var x1 = rect.x || this.x || 0,
y1 = rect.y || this.y || 0,
x2 = (rect.width || this.width || 0) + x1,
y2 = (rect.height || this.height || 0) + y1,
// Find all the rounded coordinates for corners
x = SVGElement_crisp(x1,
strokeWidth),
y = SVGElement_crisp(y1,
strokeWidth),
x2Crisp = SVGElement_crisp(x2,
strokeWidth),
y2Crisp = SVGElement_crisp(y2,
strokeWidth);
SVGElement_extend(rect, {
x: x,
y: y,
width: x2Crisp - x,
height: y2Crisp - y
});
if (SVGElement_defined(rect.strokeWidth)) {
rect.strokeWidth = strokeWidth;
}
return rect;
};
/**
* Build and apply an SVG gradient out of a common JavaScript configuration
* object. This function is called from the attribute setters. An event
* hook is added for supporting other complex color types.
*
* @private
* @function Highcharts.SVGElement#complexColor
*
* @param {Highcharts.GradientColorObject|Highcharts.PatternObject} colorOptions
* The gradient or pattern options structure.
*
* @param {string} prop
* The property to apply, can either be `fill` or `stroke`.
*
* @param {Highcharts.SVGDOMElement} elem
* SVG element to apply the gradient on.
*/
SVGElement.prototype.complexColor = function (colorOptions, prop, elem) {
var renderer = this.renderer;
var colorObject,
gradName,
gradAttr,
radAttr,
gradients,
stops,
stopColor,
stopOpacity,
radialReference,
id,
key = [],
value;
SVGElement_fireEvent(this.renderer, 'complexColor', {
args: arguments
}, function () {
// Apply linear or radial gradients
if (colorOptions.radialGradient) {
gradName = 'radialGradient';
}
else if (colorOptions.linearGradient) {
gradName = 'linearGradient';
}
if (gradName) {
gradAttr = colorOptions[gradName];
gradients = renderer.gradients;
stops = colorOptions.stops;
radialReference = elem.radialReference;
// Keep < 2.2 compatibility
if (SVGElement_isArray(gradAttr)) {
colorOptions[gradName] = gradAttr = {
x1: gradAttr[0],
y1: gradAttr[1],
x2: gradAttr[2],
y2: gradAttr[3],
gradientUnits: 'userSpaceOnUse'
};
}
// Correct the radial gradient for the radial reference system
if (gradName === 'radialGradient' &&
radialReference &&
!SVGElement_defined(gradAttr.gradientUnits)) {
// Save the radial attributes for updating
radAttr = gradAttr;
gradAttr = SVGElement_merge(gradAttr, renderer.getRadialAttr(radialReference, radAttr), { gradientUnits: 'userSpaceOnUse' });
}
// Build the unique key to detect whether we need to create a
// new element (#1282)
SVGElement_objectEach(gradAttr, function (value, n) {
if (n !== 'id') {
key.push(n, value);
}
});
SVGElement_objectEach(stops, function (val) {
key.push(val);
});
key = key.join(',');
// Check if a gradient object with the same config object is
// created within this renderer
if (gradients[key]) {
id = gradients[key].attr('id');
}
else {
// Set the id and create the element
gradAttr.id = id = SVGElement_uniqueKey();
var gradientObject_1 = gradients[key] =
renderer.createElement(gradName)
.attr(gradAttr)
.add(renderer.defs);
gradientObject_1.radAttr = radAttr;
// The gradient needs to keep a list of stops to be able to
// destroy them
gradientObject_1.stops = [];
stops.forEach(function (stop) {
if (stop[1].indexOf('rgba') === 0) {
colorObject = Color_Color.parse(stop[1]);
stopColor = colorObject.get('rgb');
stopOpacity = colorObject.get('a');
}
else {
stopColor = stop[1];
stopOpacity = 1;
}
var stopObject = renderer.createElement('stop').attr({
offset: stop[0],
'stop-color': stopColor,
'stop-opacity': stopOpacity
}).add(gradientObject_1);
// Add the stop element to the gradient
gradientObject_1.stops.push(stopObject);
});
}
// Set the reference to the gradient object
value = 'url(' + renderer.url + '#' + id + ')';
elem.setAttribute(prop, value);
elem.gradient = key;
// Allow the color to be concatenated into tooltips formatters
// etc. (#2995)
colorOptions.toString = function () {
return value;
};
}
});
};
/**
* Set styles for the element. In addition to CSS styles supported by
* native SVG and HTML elements, there are also some custom made for
* Highcharts, like `width`, `ellipsis` and `textOverflow` for SVG text
* elements.
*
* @sample highcharts/members/renderer-text-on-chart/
* Styled text
*
* @function Highcharts.SVGElement#css
*
* @param {Highcharts.CSSObject} styles
* The new CSS styles.
*
* @return {Highcharts.SVGElement}
* Return the SVG element for chaining.
*/
SVGElement.prototype.css = function (styles) {
var oldStyles = this.styles,
newStyles = {},
elem = this.element;
var textWidth,
hasNew = !oldStyles;
// Filter out existing styles to increase performance (#2640)
if (oldStyles) {
SVGElement_objectEach(styles, function (value, n) {
if (oldStyles && oldStyles[n] !== value) {
newStyles[n] = value;
hasNew = true;
}
});
}
if (hasNew) {
// Merge the new styles with the old ones
if (oldStyles) {
styles = SVGElement_extend(oldStyles, newStyles);
}
// Get the text width from style
// Previously set, unset it (#8234)
if (styles.width === null || styles.width === 'auto') {
delete this.textWidth;
// Apply new
}
else if (elem.nodeName.toLowerCase() === 'text' &&
styles.width) {
textWidth = this.textWidth = SVGElement_pInt(styles.width);
}
// Store object
SVGElement_extend(this.styles, styles);
if (textWidth && (!svg && this.renderer.forExport)) {
delete styles.width;
}
var fontSize = isFirefox && styles.fontSize || null;
// Necessary in firefox to be able to set font-size, #22124
if (fontSize && (SVGElement_isNumber(fontSize) ||
/^\d+$/.test(fontSize))) {
styles.fontSize += 'px';
}
var stylesToApply_1 = SVGElement_merge(styles);
if (elem.namespaceURI === this.SVG_NS) {
// These CSS properties are interpreted internally by the SVG
// renderer, but are not supported by SVG and should not be
// added to the DOM. In styled mode, no CSS should find its way
// to the DOM whatsoever (#6173, #6474).
['textOutline', 'textOverflow', 'whiteSpace', 'width'].forEach(function (key) { return (stylesToApply_1 &&
delete stylesToApply_1[key]); });
// SVG requires fill for text
if (stylesToApply_1.color) {
stylesToApply_1.fill = stylesToApply_1.color;
}
}
SVGElement_css(elem, stylesToApply_1);
}
if (this.added) {
// Rebuild text after added. Cache mechanisms in the buildText will
// prevent building if there are no significant changes.
if (this.element.nodeName === 'text') {
this.renderer.buildText(this);
}
// Apply text outline after added
if (styles.textOutline) {
this.applyTextOutline(styles.textOutline);
}
}
return this;
};
/**
* @private
* @function Highcharts.SVGElement#dashstyleSetter
* @param {string} value
*/
SVGElement.prototype.dashstyleSetter = function (value) {
var i,
strokeWidth = this['stroke-width'];
// If "inherit", like maps in IE, assume 1 (#4981). With HC5 and the new
// strokeWidth function, we should be able to use that instead.
if (strokeWidth === 'inherit') {
strokeWidth = 1;
}
value = value && value.toLowerCase();
if (value) {
var v = value
.replace('shortdashdotdot', '3,1,1,1,1,1,')
.replace('shortdashdot', '3,1,1,1')
.replace('shortdot', '1,1,')
.replace('shortdash', '3,1,')
.replace('longdash', '8,3,')
.replace(/dot/g, '1,3,')
.replace('dash', '4,3,')
.replace(/,$/, '')
.split(','); // Ending comma
i = v.length;
while (i--) {
v[i] = '' + (SVGElement_pInt(v[i]) * SVGElement_pick(strokeWidth, NaN));
}
value = v.join(',').replace(/NaN/g, 'none'); // #3226
this.element.setAttribute('stroke-dasharray', value);
}
};
/**
* Destroy the element and element wrapper and clear up the DOM and event
* hooks.
*
* @function Highcharts.SVGElement#destroy
*/
SVGElement.prototype.destroy = function () {
var _a;
var wrapper = this,
element = wrapper.element || {},
renderer = wrapper.renderer,
ownerSVGElement = element.ownerSVGElement;
var parentToClean = (element.nodeName === 'SPAN' &&
wrapper.parentGroup ||
void 0),
grandParent,
i;
// Remove events
element.onclick = element.onmouseout = element.onmouseover =
element.onmousemove = element.point = null;
SVGElement_stop(wrapper); // Stop running animations
if (wrapper.clipPath && ownerSVGElement) {
var clipPath_1 = wrapper.clipPath;
// Look for existing references to this clipPath and remove them
// before destroying the element (#6196).
// The upper case version is for Edge
[].forEach.call(ownerSVGElement.querySelectorAll('[clip-path],[CLIP-PATH]'), function (el) {
if (el.getAttribute('clip-path').indexOf(clipPath_1.element.id) > -1) {
el.removeAttribute('clip-path');
}
});
wrapper.clipPath = clipPath_1.destroy();
}
wrapper.connector = (_a = wrapper.connector) === null || _a === void 0 ? void 0 : _a.destroy();
// Destroy stops in case this is a gradient object @todo old code?
if (wrapper.stops) {
for (i = 0; i < wrapper.stops.length; i++) {
wrapper.stops[i].destroy();
}
wrapper.stops.length = 0;
wrapper.stops = void 0;
}
// Remove element
wrapper.safeRemoveChild(element);
// In case of useHTML, clean up empty containers emulating SVG groups
// (#1960, #2393, #2697).
while (parentToClean &&
parentToClean.div &&
parentToClean.div.childNodes.length === 0) {
grandParent = parentToClean.parentGroup;
wrapper.safeRemoveChild(parentToClean.div);
delete parentToClean.div;
parentToClean = grandParent;
}
// Remove from alignObjects
if (wrapper.alignOptions) {
SVGElement_erase(renderer.alignedObjects, wrapper);
}
SVGElement_objectEach(wrapper, function (val, key) {
// Destroy child elements of a group
if (wrapper[key] &&
wrapper[key].parentGroup === wrapper &&
wrapper[key].destroy) {
wrapper[key].destroy();
}
// Delete all properties
delete wrapper[key];
});
return;
};
/**
* @private
* @function Highcharts.SVGElement#dSettter
* @param {number|string|Highcharts.SVGPathArray} value
* @param {string} key
* @param {Highcharts.SVGDOMElement} element
*/
SVGElement.prototype.dSetter = function (value, key, element) {
if (SVGElement_isArray(value)) {
// Backwards compatibility, convert one-dimensional array into an
// array of segments
if (typeof value[0] === 'string') {
value = this.renderer.pathToSegments(value);
}
this.pathArray = value;
value = value.reduce(function (acc, seg, i) {
if (!seg || !seg.join) {
return (seg || '').toString();
}
return (i ? acc + ' ' : '') + seg.join(' ');
}, '');
}
if (/(NaN| {2}|^$)/.test(value)) {
value = 'M 0 0';
}
// Check for cache before resetting. Resetting causes disturbance in the
// DOM, causing flickering in some cases in Edge/IE (#6747). Also
// possible performance gain.
if (this[key] !== value) {
element.setAttribute(key, value);
this[key] = value;
}
};
/**
* @private
* @function Highcharts.SVGElement#fillSetter
* @param {Highcharts.ColorType} value
* @param {string} key
* @param {Highcharts.SVGDOMElement} element
*/
SVGElement.prototype.fillSetter = function (value, key, element) {
if (typeof value === 'string') {
element.setAttribute(key, value);
}
else if (value) {
this.complexColor(value, key, element);
}
};
/**
* @private
* @function Highcharts.SVGElement#hrefSetter
* @param {Highcharts.ColorType} value
* @param {string} key
* @param {Highcharts.SVGDOMElement} element
*/
SVGElement.prototype.hrefSetter = function (value, key, element) {
// Namespace is needed for offline export, #19106
element.setAttributeNS('http://www.w3.org/1999/xlink', key, value);
};
/**
* Get the bounding box (width, height, x and y) for the element. Generally
* used to get rendered text size. Since this is called a lot in charts,
* the results are cached based on text properties, in order to save DOM
* traffic. The returned bounding box includes the rotation, so for example
* a single text line of rotation 90 will report a greater height, and a
* width corresponding to the line-height.
*
* @sample highcharts/members/renderer-on-chart/
* Draw a rectangle based on a text's bounding box
*
* @function Highcharts.SVGElement#getBBox
*
* @param {boolean} [reload]
* Skip the cache and get the updated DOM bounding box.
*
* @param {number} [rot]
* Override the element's rotation. This is internally used on axis
* labels with a value of 0 to find out what the bounding box would
* be have been if it were not rotated.
*
* @return {Highcharts.BBoxObject}
* The bounding box with `x`, `y`, `width` and `height` properties.
*/
SVGElement.prototype.getBBox = function (reload, rot) {
var wrapper = this,
alignValue = wrapper.alignValue,
element = wrapper.element,
renderer = wrapper.renderer,
styles = wrapper.styles,
textStr = wrapper.textStr,
cache = renderer.cache,
cacheKeys = renderer.cacheKeys,
isSVG = element.namespaceURI === wrapper.SVG_NS,
rotation = SVGElement_pick(rot,
wrapper.rotation, 0),
fontSize = renderer.styledMode ? (element &&
SVGElement.prototype.getStyle.call(element, 'font-size')) : (styles.fontSize);
var bBox,
height,
toggleTextShadowShim,
cacheKey;
// Avoid undefined and null (#7316)
if (SVGElement_defined(textStr)) {
cacheKey = textStr.toString();
// Since numbers are monospaced, and numerical labels appear a lot
// in a chart, we assume that a label of n characters has the same
// bounding box as others of the same length. Unless there is inner
// HTML in the label. In that case, leave the numbers as is (#5899).
if (cacheKey.indexOf('<') === -1) {
cacheKey = cacheKey.replace(/\d/g, '0');
}
// Properties that affect bounding box
cacheKey += [
'',
renderer.rootFontSize,
fontSize,
rotation,
wrapper.textWidth, // #7874, also useHTML
alignValue,
styles.lineClamp,
styles.textOverflow, // #5968
styles.fontWeight // #12163
].join(',');
}
if (cacheKey && !reload) {
bBox = cache[cacheKey];
}
// No cache found
if (!bBox || bBox.polygon) {
// SVG elements
if (isSVG || renderer.forExport) {
try { // Fails in Firefox if the container has display: none.
// When the text shadow shim is used, we need to hide the
// fake shadows to get the correct bounding box (#3872)
toggleTextShadowShim = this.fakeTS && function (display) {
var outline = element.querySelector('.highcharts-text-outline');
if (outline) {
SVGElement_css(outline, { display: display });
}
};
// Workaround for #3842, Firefox reporting wrong bounding
// box for shadows
if (SVGElement_isFunction(toggleTextShadowShim)) {
toggleTextShadowShim('none');
}
bBox = element.getBBox ?
// SVG: use extend because IE9 is not allowed to change
// width and height in case of rotation (below)
SVGElement_extend({}, element.getBBox()) : {
// HTML elements with `exporting.allowHTML` and
// legacy IE in export mode
width: element.offsetWidth,
height: element.offsetHeight,
x: 0,
y: 0
};
// #3842
if (SVGElement_isFunction(toggleTextShadowShim)) {
toggleTextShadowShim('');
}
}
catch (e) {
'';
}
// If the bBox is not set, the try-catch block above failed. The
// other condition is for Opera that returns a width of
// -Infinity on hidden elements.
if (!bBox || bBox.width < 0) {
bBox = { x: 0, y: 0, width: 0, height: 0 };
}
// Use HTML within SVG
}
else {
bBox = wrapper.htmlGetBBox();
}
// True SVG elements as well as HTML elements in modern browsers
// using the .useHTML option need to compensated for rotation
height = bBox.height;
// Workaround for wrong bounding box in IE, Edge and Chrome on
// Windows. With Highcharts' default font, IE and Edge report
// a box height of 16.899 and Chrome rounds it to 17. If this
// stands uncorrected, it results in more padding added below
// the text than above when adding a label border or background.
// Also vertical positioning is affected.
// https://jsfiddle.net/highcharts/em37nvuj/
// (#1101, #1505, #1669, #2568, #6213).
if (isSVG) {
bBox.height = height = ({
'11px,17': 14,
'13px,20': 16
}["" + (fontSize || '') + ",".concat(Math.round(height))] ||
height);
}
// Adjust for rotated text
if (rotation) {
bBox = this.getRotatedBox(bBox, rotation);
}
// Create a reference to catch changes to bBox
var e = { bBox: bBox };
SVGElement_fireEvent(this, 'afterGetBBox', e);
// Pick up any changes after the fired event
bBox = e.bBox;
}
// Cache it. When loading a chart in a hidden iframe in Firefox and
// IE/Edge, the bounding box height is 0, so don't cache it (#5620).
if (cacheKey && (textStr === '' || bBox.height > 0)) {
// Rotate (#4681)
while (cacheKeys.length > 250) {
delete cache[cacheKeys.shift()];
}
if (!cache[cacheKey]) {
cacheKeys.push(cacheKey);
}
cache[cacheKey] = bBox;
}
return bBox;
};
/**
* Get the rotated box.
* @private
*/
SVGElement.prototype.getRotatedBox = function (box, rotation) {
var boxX = box.x,
boxY = box.y,
width = box.width,
height = box.height,
_a = this,
alignValue = _a.alignValue,
translateY = _a.translateY,
_b = _a.rotationOriginX,
rotationOriginX = _b === void 0 ? 0 : _b,
_c = _a.rotationOriginY,
rotationOriginY = _c === void 0 ? 0 : _c,
alignFactor = SVGElement_getAlignFactor(alignValue),
baseline = Number(this.element.getAttribute('y') || 0) -
(translateY ? 0 : boxY),
rad = rotation * deg2rad,
rad90 = (rotation - 90) * deg2rad,
cosRad = Math.cos(rad),
sinRad = Math.sin(rad),
wCosRad = width * cosRad,
wSinRad = width * sinRad,
cosRad90 = Math.cos(rad90),
sinRad90 = Math.sin(rad90),
_d = [
rotationOriginX,
rotationOriginY
].map(function (rotOrigin) { return [
rotOrigin - (rotOrigin * cosRad),
rotOrigin * sinRad
]; }),
_e = _d[0],
xOriginCosRad = _e[0],
xOriginSinRad = _e[1],
_f = _d[1],
yOriginCosRad = _f[0],
yOriginSinRad = _f[1],
// Find the starting point on the left side baseline of
// the text
pX = ((boxX + alignFactor * (width - wCosRad)) +
xOriginCosRad + yOriginSinRad),
pY = ((boxY + baseline - alignFactor * wSinRad) -
xOriginSinRad + yOriginCosRad),
// Find all corners
aX = pX + baseline * cosRad90,
bX = aX + wCosRad,
cX = bX - height * cosRad90,
dX = cX - wCosRad,
aY = pY + baseline * sinRad90,
bY = aY + wSinRad,
cY = bY - height * sinRad90,
dY = cY - wSinRad;
// Deduct the bounding box from the corners
var x = Math.min(aX,
bX,
cX,
dX),
y = Math.min(aY,
bY,
cY,
dY),
boxWidth = Math.max(aX,
bX,
cX,
dX) - x,
boxHeight = Math.max(aY,
bY,
cY,
dY) - y;
/* Uncomment to debug boxes
this.renderer.path([
['M', aX, aY],
['L', bX, bY],
['L', cX, cY],
['L', dX, dY],
['Z']
])
.attr({
stroke: 'red',
'stroke-width': 1
})
.add();
// */
return {
x: x,
y: y,
width: boxWidth,
height: boxHeight,
polygon: [
[aX, aY],
[bX, bY],
[cX, cY],
[dX, dY]
]
};
};
/**
* Get the computed style. Only in styled mode.
*
* @example
* chart.series[0].points[0].graphic.getStyle('stroke-width'); // => '1px'
*
* @function Highcharts.SVGElement#getStyle
*
* @param {string} prop
* The property name to check for.
*
* @return {string}
* The current computed value.
*/
SVGElement.prototype.getStyle = function (prop) {
return SVGElement_win
.getComputedStyle(this.element || this, '')
.getPropertyValue(prop);
};
/**
* Check if an element has the given class name.
*
* @function Highcharts.SVGElement#hasClass
*
* @param {string} className
* The class name to check for.
*
* @return {boolean}
* Whether the class name is found.
*/
SVGElement.prototype.hasClass = function (className) {
return ('' + this.attr('class'))
.split(' ')
.indexOf(className) !== -1;
};
/**
* Hide the element, similar to setting the `visibility` attribute to
* `hidden`.
*
* @function Highcharts.SVGElement#hide
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.hide = function () {
return this.attr({ visibility: 'hidden' });
};
/**
* @private
*/
SVGElement.prototype.htmlGetBBox = function () {
return { height: 0, width: 0, x: 0, y: 0 };
};
/**
* Add an event listener. This is a simple setter that replaces the
* previous event of the same type added by this function, as opposed to
* the {@link Highcharts#addEvent} function.
*
* @sample highcharts/members/element-on/
* A clickable rectangle
*
* @function Highcharts.SVGElement#on
*
* @param {string} eventType
* The event type.
*
* @param {Function} handler
* The handler callback.
*
* @return {Highcharts.SVGElement}
* The SVGElement for chaining.
*/
SVGElement.prototype.on = function (eventType, handler) {
var onEvents = this.onEvents;
if (onEvents[eventType]) {
// Unbind existing event
onEvents[eventType]();
}
onEvents[eventType] = SVGElement_addEvent(this.element, eventType, handler);
return this;
};
/**
* @private
* @function Highcharts.SVGElement#opacitySetter
* @param {string} value
* @param {string} key
* @param {Highcharts.SVGDOMElement} element
*/
SVGElement.prototype.opacitySetter = function (value, key, element) {
// Round off to avoid float errors, like tests where opacity lands on
// 9.86957e-06 instead of 0
var opacity = Number(Number(value).toFixed(3));
this.opacity = opacity;
element.setAttribute(key, opacity);
};
/**
* Re-align an aligned text or label after setting the text.
*
* @private
* @function Highcharts.SVGElement#reAlign
*
*/
SVGElement.prototype.reAlign = function () {
var _a;
if (((_a = this.alignOptions) === null || _a === void 0 ? void 0 : _a.width) && this.alignOptions.align !== 'left') {
this.alignOptions.width = this.getBBox().width;
this.placed = false; // Block animation
this.align();
}
};
/**
* Remove a class name from the element.
*
* @function Highcharts.SVGElement#removeClass
*
* @param {string|RegExp} className
* The class name to remove.
*
* @return {Highcharts.SVGElement} Returns the SVG element for chainability.
*/
SVGElement.prototype.removeClass = function (className) {
return this.attr('class', ('' + this.attr('class'))
.replace(SVGElement_isString(className) ?
new RegExp("(^| )".concat(className, "( |$)")) : // #12064, #13590
className, ' ')
.replace(/ +/g, ' ')
.trim());
};
/**
*
* @private
*/
SVGElement.prototype.removeTextOutline = function () {
var outline = this.element
.querySelector('tspan.highcharts-text-outline');
if (outline) {
this.safeRemoveChild(outline);
}
};
/**
* Removes an element from the DOM.
*
* @private
* @function Highcharts.SVGElement#safeRemoveChild
*
* @param {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} element
* The DOM node to remove.
*/
SVGElement.prototype.safeRemoveChild = function (element) {
var parentNode = element.parentNode;
if (parentNode) {
parentNode.removeChild(element);
}
};
/**
* Set the coordinates needed to draw a consistent radial gradient across
* a shape regardless of positioning inside the chart. Used on pie slices
* to make all the slices have the same radial reference point.
*
* @function Highcharts.SVGElement#setRadialReference
*
* @param {Array<number>} coordinates
* The center reference. The format is `[centerX, centerY, diameter]` in
* pixels.
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.setRadialReference = function (coordinates) {
var existingGradient = (this.element.gradient &&
this.renderer.gradients[this.element.gradient]);
this.element.radialReference = coordinates;
// On redrawing objects with an existing gradient, the gradient needs
// to be repositioned (#3801)
if (existingGradient && existingGradient.radAttr) {
existingGradient.animate(this.renderer.getRadialAttr(coordinates, existingGradient.radAttr));
}
return this;
};
/**
* Add a shadow to the element. In styled mode, this method is not used,
* instead use `defs` and filters.
*
* @example
* renderer.rect(10, 100, 100, 100)
* .attr({ fill: 'red' })
* .shadow(true);
*
* @function Highcharts.SVGElement#shadow
*
* @param {boolean|Highcharts.ShadowOptionsObject} [shadowOptions] The
* shadow options. If `true`, the default options are applied. If
* `false`, the current shadow will be removed.
*
* @return {Highcharts.SVGElement} Returns the SVGElement for chaining.
*/
SVGElement.prototype.shadow = function (shadowOptions) {
var _a;
var renderer = this.renderer,
options = SVGElement_merge(((_a = this.parentGroup) === null || _a === void 0 ? void 0 : _a.rotation) === 90 ? {
offsetX: -1,
offsetY: -1
} : {},
SVGElement_isObject(shadowOptions) ? shadowOptions : {}),
id = renderer.shadowDefinition(options);
return this.attr({
filter: shadowOptions ?
"url(".concat(renderer.url, "#").concat(id, ")") :
'none'
});
};
/**
* Show the element after it has been hidden.
*
* @function Highcharts.SVGElement#show
*
* @param {boolean} [inherit=true]
* Set the visibility attribute to `inherit` rather than `visible`.
* The difference is that an element with `visibility="visible"`
* will be visible even if the parent is hidden.
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.show = function (inherit) {
if (inherit === void 0) { inherit = true; }
return this.attr({ visibility: inherit ? 'inherit' : 'visible' });
};
/**
* Set the stroke-width and record it on the SVGElement
*
* @private
* @function Highcharts.SVGElement#strokeSetter
* @param {number|string|ColorType} value
* @param {string} key
* @param {Highcharts.SVGDOMElement} element
*/
SVGElement.prototype['stroke-widthSetter'] = function (value, key, element) {
// Record it for quick access in getter
this[key] = value;
element.setAttribute(key, value);
};
/**
* Get the computed stroke width in pixel values. This is used extensively
* when drawing shapes to ensure the shapes are rendered crisp and
* positioned correctly relative to each other. Using
* `shape-rendering: crispEdges` leaves us less control over positioning,
* for example when we want to stack columns next to each other, or position
* things pixel-perfectly within the plot box.
*
* The common pattern when placing a shape is:
* - Create the SVGElement and add it to the DOM. In styled mode, it will
* now receive a stroke width from the style sheet. In classic mode we
* will add the `stroke-width` attribute.
* - Read the computed `elem.strokeWidth()`.
* - Place it based on the stroke width.
*
* @function Highcharts.SVGElement#strokeWidth
*
* @return {number}
* The stroke width in pixels. Even if the given stroke width (in CSS or by
* attributes) is based on `em` or other units, the pixel size is returned.
*/
SVGElement.prototype.strokeWidth = function () {
// In non-styled mode, read the stroke width as set by .attr
if (!this.renderer.styledMode) {
return this['stroke-width'] || 0;
}
// In styled mode, read computed stroke width
var val = this.getStyle('stroke-width');
var ret = 0,
tempElement;
// Read pixel values directly
if (/px$/.test(val)) {
ret = SVGElement_pInt(val);
// Other values like em, pt etc need to be measured
}
else if (val !== '') {
tempElement = SVGElement_doc.createElementNS(SVGElement_SVG_NS, 'rect');
SVGElement_attr(tempElement, {
width: val,
'stroke-width': 0
});
this.element.parentNode.appendChild(tempElement);
ret = tempElement.getBBox().width;
tempElement.parentNode.removeChild(tempElement);
}
return ret;
};
/**
* If one of the symbol size affecting parameters are changed,
* check all the others only once for each call to an element's
* .attr() method
*
* @private
* @function Highcharts.SVGElement#symbolAttr
*
* @param {Highcharts.SVGAttributes} hash
* The attributes to set.
*/
SVGElement.prototype.symbolAttr = function (hash) {
var wrapper = this;
SVGElement.symbolCustomAttribs.forEach(function (key) {
wrapper[key] = SVGElement_pick(hash[key], wrapper[key]);
});
wrapper.attr({
d: wrapper.renderer.symbols[wrapper.symbolName](wrapper.x, wrapper.y, wrapper.width, wrapper.height, wrapper)
});
};
/**
* @private
* @function Highcharts.SVGElement#textSetter
* @param {string} value
*/
SVGElement.prototype.textSetter = function (value) {
if (value !== this.textStr) {
// Delete size caches when the text changes
// delete this.bBox; // old code in series-label
delete this.textPxLength;
this.textStr = value;
if (this.added) {
this.renderer.buildText(this);
}
this.reAlign();
}
};
/**
* @private
* @function Highcharts.SVGElement#titleSetter
* @param {string} value
*/
SVGElement.prototype.titleSetter = function (value) {
var el = this.element;
var titleNode = el.getElementsByTagName('title')[0] ||
SVGElement_doc.createElementNS(this.SVG_NS, 'title');
// Move to first child
if (el.insertBefore) {
el.insertBefore(titleNode, el.firstChild);
}
else {
el.appendChild(titleNode);
}
// Replace text content and escape markup
titleNode.textContent = SVGElement_replaceNested(// Scan #[73]
SVGElement_pick(value, ''), // #3276, #3895
[/<[^>]*>/g, '']).replace(/</g, '<').replace(/>/g, '>');
};
/**
* Bring the element to the front. Alternatively, a new zIndex can be set.
*
* @sample highcharts/members/element-tofront/
* Click an element to bring it to front
*
* @function Highcharts.SVGElement#toFront
*
* @return {Highcharts.SVGElement}
* Returns the SVGElement for chaining.
*/
SVGElement.prototype.toFront = function () {
var element = this.element;
element.parentNode.appendChild(element);
return this;
};
/**
* Move an object and its children by x and y values.
*
* @function Highcharts.SVGElement#translate
*
* @param {number} x
* The x value.
*
* @param {number} y
* The y value.
*
* @return {Highcharts.SVGElement}
* Translated element.
*/
SVGElement.prototype.translate = function (x, y) {
return this.attr({
translateX: x,
translateY: y
});
};
/**
* Update the transform attribute based on internal properties. Deals with
* the custom `translateX`, `translateY`, `rotation`, `scaleX` and `scaleY`
* attributes and updates the SVG `transform` attribute.
*
* @private
* @function Highcharts.SVGElement#updateTransform
*/
SVGElement.prototype.updateTransform = function (attrib) {
var _a;
if (attrib === void 0) { attrib = 'transform'; }
var _b = this,
element = _b.element,
matrix = _b.matrix,
_c = _b.rotation,
rotation = _c === void 0 ? 0 : _c,
rotationOriginX = _b.rotationOriginX,
rotationOriginY = _b.rotationOriginY,
scaleX = _b.scaleX,
scaleY = _b.scaleY,
_d = _b.translateX,
translateX = _d === void 0 ? 0 : _d,
_e = _b.translateY,
translateY = _e === void 0 ? 0 : _e;
// Apply translate. Nearly all transformed elements have translation,
// so instead of checking for translate = 0, do it always (#1767,
// #1846).
var transform = ['translate(' + translateX + ',' + translateY + ')'];
// Apply matrix
if (SVGElement_defined(matrix)) {
transform.push('matrix(' + matrix.join(',') + ')');
}
// Apply rotation
if (rotation) {
transform.push('rotate(' + rotation + ' ' +
SVGElement_pick(rotationOriginX, element.getAttribute('x'), 0) +
' ' +
SVGElement_pick(rotationOriginY, element.getAttribute('y') || 0) + ')');
// HTML labels rotation (#20685)
if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.element.tagName) === 'SPAN') {
this.text.attr({
rotation: rotation,
rotationOriginX: (rotationOriginX || 0) - this.padding,
rotationOriginY: (rotationOriginY || 0) - this.padding
});
}
}
// Apply scale
if (SVGElement_defined(scaleX) || SVGElement_defined(scaleY)) {
transform.push('scale(' + SVGElement_pick(scaleX, 1) + ' ' + SVGElement_pick(scaleY, 1) + ')');
}
if (transform.length && !(this.text || this).textPath) {
element.setAttribute(attrib, transform.join(' '));
}
};
/**
* @private
* @function Highcharts.SVGElement#visibilitySetter
*
* @param {string} value
*
* @param {string} key
*
* @param {Highcharts.SVGDOMElement} element
*
*/
SVGElement.prototype.visibilitySetter = function (value, key, element) {
// IE9-11 doesn't handle visibility:inherit well, so we remove the
// attribute instead (#2881, #3909)
if (value === 'inherit') {
element.removeAttribute(key);
}
else if (this[key] !== value) { // #6747
element.setAttribute(key, value);
}
this[key] = value;
};
/**
* @private
* @function Highcharts.SVGElement#xGetter
*/
SVGElement.prototype.xGetter = function (key) {
if (this.element.nodeName === 'circle') {
if (key === 'x') {
key = 'cx';
}
else if (key === 'y') {
key = 'cy';
}
}
return this._defaultGetter(key);
};
/**
* @private
* @function Highcharts.SVGElement#zIndexSetter
*/
SVGElement.prototype.zIndexSetter = function (value, key) {
var renderer = this.renderer,
parentGroup = this.parentGroup,
parentWrapper = parentGroup || renderer,
parentNode = parentWrapper.element || renderer.box,
element = this.element,
svgParent = parentNode === renderer.box;
var childNodes,
otherElement,
otherZIndex,
inserted = false,
undefinedOtherZIndex,
run = this.added,
i;
if (SVGElement_defined(value)) {
// So we can read it for other elements in the group
element.setAttribute('data-z-index', value);
value = +value;
if (this[key] === value) {
// Only update when needed (#3865)
run = false;
}
}
else if (SVGElement_defined(this[key])) {
element.removeAttribute('data-z-index');
}
this[key] = value;
// Insert according to this and other elements' zIndex. Before .add() is
// called, nothing is done. Then on add, or by later calls to
// zIndexSetter, the node is placed on the right place in the DOM.
if (run) {
value = this.zIndex;
if (value && parentGroup) {
parentGroup.handleZ = true;
}
childNodes = parentNode.childNodes;
for (i = childNodes.length - 1; i >= 0 && !inserted; i--) {
otherElement = childNodes[i];
otherZIndex = otherElement.getAttribute('data-z-index');
undefinedOtherZIndex = !SVGElement_defined(otherZIndex);
if (otherElement !== element) {
if (
// Negative zIndex versus no zIndex:
// On all levels except the highest. If the parent is
// <svg>, then we don't want to put items before <desc>
// or <defs>
value < 0 &&
undefinedOtherZIndex &&
!svgParent &&
!i) {
parentNode.insertBefore(element, childNodes[i]);
inserted = true;
}
else if (
// Insert after the first element with a lower zIndex
SVGElement_pInt(otherZIndex) <= value ||
// If negative zIndex, add this before first undefined
// zIndex element
(undefinedOtherZIndex &&
(!SVGElement_defined(value) || value >= 0))) {
parentNode.insertBefore(element, childNodes[i + 1]);
inserted = true;
}
}
}
if (!inserted) {
parentNode.insertBefore(element, childNodes[svgParent ? 3 : 0]);
inserted = true;
}
}
return inserted;
};
/* *
*
* Properties
*
* */
// Custom attributes used for symbols, these should be filtered out when
// setting SVGElement attributes (#9375).
SVGElement.symbolCustomAttribs = [
'anchorX',
'anchorY',
'clockwise',
'end',
'height',
'innerR',
'r',
'start',
'width',
'x',
'y'
];
return SVGElement;
}());
// Some shared setters and getters
SVGElement.prototype.strokeSetter = SVGElement.prototype.fillSetter;
SVGElement.prototype.yGetter = SVGElement.prototype.xGetter;
SVGElement.prototype.matrixSetter =
SVGElement.prototype.rotationOriginXSetter =
SVGElement.prototype.rotationOriginYSetter =
SVGElement.prototype.rotationSetter =
SVGElement.prototype.scaleXSetter =
SVGElement.prototype.scaleYSetter =
SVGElement.prototype.translateXSetter =
SVGElement.prototype.translateYSetter =
SVGElement.prototype.verticalAlignSetter = function (value, key) {
this[key] = value;
this.doTransform = true;
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var SVG_SVGElement = (SVGElement);
/* *
*
* API Declarations
*
* */
/**
* Reference to the global SVGElement class as a workaround for a name conflict
* in the Highcharts namespace.
*
* @global
* @typedef {global.SVGElement} GlobalSVGElement
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
*/
/**
* The horizontal alignment of an element.
*
* @typedef {"center"|"left"|"right"} Highcharts.AlignValue
*/
/**
* Options to align the element relative to the chart or another box.
*
* @interface Highcharts.AlignObject
*/ /**
* Horizontal alignment. Can be one of `left`, `center` and `right`.
*
* @name Highcharts.AlignObject#align
* @type {Highcharts.AlignValue|undefined}
*
* @default left
*/ /**
* Vertical alignment. Can be one of `top`, `middle` and `bottom`.
*
* @name Highcharts.AlignObject#verticalAlign
* @type {Highcharts.VerticalAlignValue|undefined}
*
* @default top
*/ /**
* Horizontal pixel offset from alignment.
*
* @name Highcharts.AlignObject#x
* @type {number|undefined}
*
* @default 0
*/ /**
* Vertical pixel offset from alignment.
*
* @name Highcharts.AlignObject#y
* @type {number|undefined}
*
* @default 0
*/ /**
* Use the `transform` attribute with translateX and translateY custom
* attributes to align this elements rather than `x` and `y` attributes.
*
* @name Highcharts.AlignObject#alignByTranslate
* @type {boolean|undefined}
*
* @default false
*/
/**
* Bounding box of an element.
*
* @interface Highcharts.BBoxObject
* @extends Highcharts.PositionObject
*/ /**
* Height of the bounding box.
*
* @name Highcharts.BBoxObject#height
* @type {number}
*/ /**
* Width of the bounding box.
*
* @name Highcharts.BBoxObject#width
* @type {number}
*/ /**
* Horizontal position of the bounding box.
*
* @name Highcharts.BBoxObject#x
* @type {number}
*/ /**
* Vertical position of the bounding box.
*
* @name Highcharts.BBoxObject#y
* @type {number}
*/
/**
* An object of key-value pairs for SVG attributes. Attributes in Highcharts
* elements for the most parts correspond to SVG, but some are specific to
* Highcharts, like `zIndex`, `rotation`, `rotationOriginX`,
* `rotationOriginY`, `translateX`, `translateY`, `scaleX` and `scaleY`. SVG
* attributes containing a hyphen are _not_ camel-cased, they should be
* quoted to preserve the hyphen.
*
* @example
* {
* 'stroke': '#ff0000', // basic
* 'stroke-width': 2, // hyphenated
* 'rotation': 45 // custom
* 'd': ['M', 10, 10, 'L', 30, 30, 'z'] // path definition, note format
* }
*
* @interface Highcharts.SVGAttributes
*/ /**
* @name Highcharts.SVGAttributes#[key:string]
* @type {*}
*/ /**
* @name Highcharts.SVGAttributes#d
* @type {string|Highcharts.SVGPathArray|undefined}
*/ /**
* @name Highcharts.SVGAttributes#dx
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#dy
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#fill
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
*/ /**
* @name Highcharts.SVGAttributes#inverted
* @type {boolean|undefined}
*/ /**
* @name Highcharts.SVGAttributes#matrix
* @type {Array<number>|undefined}
*/ /**
* @name Highcharts.SVGAttributes#rotation
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#rotationOriginX
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#rotationOriginY
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#scaleX
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#scaleY
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#stroke
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
*/ /**
* @name Highcharts.SVGAttributes#style
* @type {string|Highcharts.CSSObject|undefined}
*/ /**
* @name Highcharts.SVGAttributes#translateX
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#translateY
* @type {number|undefined}
*/ /**
* @name Highcharts.SVGAttributes#zIndex
* @type {number|undefined}
*/
/**
* An SVG DOM element. The type is a reference to the regular SVGElement in the
* global scope.
*
* @typedef {globals.GlobalSVGElement} Highcharts.SVGDOMElement
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
*/
/**
* The vertical alignment of an element.
*
* @typedef {"bottom"|"middle"|"top"} Highcharts.VerticalAlignValue
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Renderer/SVG/SVGLabel.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var __extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var SVGLabel_defined = Core_Utilities.defined, SVGLabel_extend = Core_Utilities.extend, SVGLabel_getAlignFactor = Core_Utilities.getAlignFactor, SVGLabel_isNumber = Core_Utilities.isNumber, SVGLabel_merge = Core_Utilities.merge, SVGLabel_pick = Core_Utilities.pick, SVGLabel_removeEvent = Core_Utilities.removeEvent;
/* *
*
* Class
*
* */
/**
* SVG label to render text.
* @private
* @class
* @name Highcharts.SVGLabel
* @augments Highcharts.SVGElement
*/
var SVGLabel = /** @class */ (function (_super) {
__extends(SVGLabel, _super);
/* *
*
* Constructor
*
* */
function SVGLabel(renderer, str, x, y, shape, anchorX, anchorY, useHTML, baseline, className) {
var _this = _super.call(this,
renderer, 'g') || this;
_this.paddingLeftSetter = _this.paddingSetter;
_this.paddingRightSetter = _this.paddingSetter;
_this.doUpdate = false;
_this.textStr = str;
_this.x = x;
_this.y = y;
_this.anchorX = anchorX;
_this.anchorY = anchorY;
_this.baseline = baseline;
_this.className = className;
_this.addClass(className === 'button' ?
'highcharts-no-tooltip' :
'highcharts-label');
if (className) {
_this.addClass('highcharts-' + className);
}
// Create the text element. An undefined text content prevents redundant
// box calculation (#16121)
_this.text = renderer.text(void 0, 0, 0, useHTML).attr({ zIndex: 1 });
// Validate the shape argument
var hasBGImage;
if (typeof shape === 'string') {
hasBGImage = /^url\((.*?)\)$/.test(shape);
if (hasBGImage || _this.renderer.symbols[shape]) {
_this.symbolKey = shape;
}
}
_this.bBox = SVGLabel.emptyBBox;
_this.padding = 3;
_this.baselineOffset = 0;
_this.needsBox = renderer.styledMode || hasBGImage;
_this.deferredAttr = {};
_this.alignFactor = 0;
return _this;
}
/* *
*
* Functions
*
* */
SVGLabel.prototype.alignSetter = function (value) {
var alignFactor = SVGLabel_getAlignFactor(value);
this.textAlign = value;
if (alignFactor !== this.alignFactor) {
this.alignFactor = alignFactor;
// Bounding box exists, means we're dynamically changing
if (this.bBox && SVGLabel_isNumber(this.xSetting)) {
this.attr({ x: this.xSetting }); // #5134
}
}
};
SVGLabel.prototype.anchorXSetter = function (value, key) {
this.anchorX = value;
this.boxAttr(key, Math.round(value) - this.getCrispAdjust() - this.xSetting);
};
SVGLabel.prototype.anchorYSetter = function (value, key) {
this.anchorY = value;
this.boxAttr(key, value - this.ySetting);
};
/*
* Set a box attribute, or defer it if the box is not yet created
*/
SVGLabel.prototype.boxAttr = function (key, value) {
if (this.box) {
this.box.attr(key, value);
}
else {
this.deferredAttr[key] = value;
}
};
/*
* Pick up some properties and apply them to the text instead of the
* wrapper.
*/
SVGLabel.prototype.css = function (styles) {
if (styles) {
var textStyles_1 = {};
// Create a copy to avoid altering the original object
// (#537)
styles = SVGLabel_merge(styles);
SVGLabel.textProps.forEach(function (prop) {
if (typeof styles[prop] !== 'undefined') {
textStyles_1[prop] = styles[prop];
delete styles[prop];
}
});
this.text.css(textStyles_1);
// Update existing text, box (#9400, #12163, #18212)
if ('fontSize' in textStyles_1 || 'fontWeight' in textStyles_1) {
this.updateTextPadding();
}
else if ('width' in textStyles_1 || 'textOverflow' in textStyles_1) {
this.updateBoxSize();
}
}
return SVG_SVGElement.prototype.css.call(this, styles);
};
/*
* Destroy and release memory.
*/
SVGLabel.prototype.destroy = function () {
// Added by button implementation
SVGLabel_removeEvent(this.element, 'mouseenter');
SVGLabel_removeEvent(this.element, 'mouseleave');
if (this.text) {
this.text.destroy();
}
if (this.box) {
this.box = this.box.destroy();
}
// Call base implementation to destroy the rest
SVG_SVGElement.prototype.destroy.call(this);
return void 0;
};
SVGLabel.prototype.fillSetter = function (value, key) {
if (value) {
this.needsBox = true;
}
// For animation getter (#6776)
this.fill = value;
this.boxAttr(key, value);
};
/*
* Return the bounding box of the box, not the group.
*/
SVGLabel.prototype.getBBox = function (reload, rot) {
// If we have a text string and the DOM bBox was 0, it typically means
// that the label was first rendered hidden, so we need to update the
// bBox (#15246)
if (this.textStr && this.bBox.width === 0 && this.bBox.height === 0) {
this.updateBoxSize();
}
var _a = this,
padding = _a.padding,
_b = _a.height,
height = _b === void 0 ? 0 : _b,
_c = _a.translateX,
translateX = _c === void 0 ? 0 : _c,
_d = _a.translateY,
translateY = _d === void 0 ? 0 : _d,
_e = _a.width,
width = _e === void 0 ? 0 : _e,
paddingLeft = SVGLabel_pick(this.paddingLeft,
padding),
rotation = rot !== null && rot !== void 0 ? rot : (this.rotation || 0);
var bBox = {
width: width,
height: height,
x: translateX + this.bBox.x - paddingLeft,
y: translateY + this.bBox.y - padding + this.baselineOffset
};
if (rotation) {
bBox = this.getRotatedBox(bBox, rotation);
}
return bBox;
};
SVGLabel.prototype.getCrispAdjust = function () {
return (this.renderer.styledMode && this.box ?
this.box.strokeWidth() :
(this['stroke-width'] ?
parseInt(this['stroke-width'], 10) :
0)) % 2 / 2;
};
SVGLabel.prototype.heightSetter = function (value) {
this.heightSetting = value;
this.doUpdate = true;
};
/**
* This method is executed in the end of `attr()`, after setting all
* attributes in the hash. In can be used to efficiently consolidate
* multiple attributes in one SVG property -- e.g., translate, rotate and
* scale are merged in one "transform" attribute in the SVG node.
* Also updating height or width should trigger update of the box size.
*
* @private
* @function Highcharts.SVGLabel#afterSetters
*/
SVGLabel.prototype.afterSetters = function () {
_super.prototype.afterSetters.call(this);
if (this.doUpdate) {
this.updateBoxSize();
this.doUpdate = false;
}
};
/*
* After the text element is added, get the desired size of the border
* box and add it before the text in the DOM.
*/
SVGLabel.prototype.onAdd = function () {
this.text.add(this);
this.attr({
// Alignment is available now (#3295, 0 not rendered if given
// as a value)
text: SVGLabel_pick(this.textStr, ''),
x: this.x || 0,
y: this.y || 0
});
if (this.box && SVGLabel_defined(this.anchorX)) {
this.attr({
anchorX: this.anchorX,
anchorY: this.anchorY
});
}
};
SVGLabel.prototype.paddingSetter = function (value, key) {
if (!SVGLabel_isNumber(value)) {
this[key] = void 0;
}
else if (value !== this[key]) {
this[key] = value;
this.updateTextPadding();
}
};
SVGLabel.prototype.rSetter = function (value, key) {
this.boxAttr(key, value);
};
SVGLabel.prototype.strokeSetter = function (value, key) {
// For animation getter (#6776)
this.stroke = value;
this.boxAttr(key, value);
};
SVGLabel.prototype['stroke-widthSetter'] = function (value, key) {
if (value) {
this.needsBox = true;
}
this['stroke-width'] = value;
this.boxAttr(key, value);
};
SVGLabel.prototype['text-alignSetter'] = function (value) {
// The text-align variety is for the pre-animation getter. The code
// should be unified to either textAlign or text-align.
this.textAlign = this['text-align'] = value;
this.updateTextPadding();
};
SVGLabel.prototype.textSetter = function (text) {
if (typeof text !== 'undefined') {
// Must use .attr to ensure transforms are done (#10009)
this.text.attr({ text: text });
}
this.updateTextPadding();
this.reAlign();
};
/*
* This function runs after the label is added to the DOM (when the bounding
* box is available), and after the text of the label is updated to detect
* the new bounding box and reflect it in the border box.
*/
SVGLabel.prototype.updateBoxSize = function () {
var text = this.text,
attribs = {},
padding = this.padding,
// #12165 error when width is null (auto)
// #12163 when fontweight: bold, recalculate bBox without cache
// #3295 && 3514 box failure when string equals 0
bBox = this.bBox = (((!SVGLabel_isNumber(this.widthSetting) ||
!SVGLabel_isNumber(this.heightSetting) ||
this.textAlign) && SVGLabel_defined(text.textStr)) ?
text.getBBox(void 0, 0) :
SVGLabel.emptyBBox);
var crispAdjust;
this.width = this.getPaddedWidth();
this.height = (this.heightSetting || bBox.height || 0) + 2 * padding;
var metrics = this.renderer.fontMetrics(text);
// Update the label-scoped y offset. Math.min because of inline
// style (#9400)
this.baselineOffset = padding + Math.min(
// When applicable, use the font size of the first line (#15707)
(this.text.firstLineMetrics || metrics).b,
// When the height is 0, there is no bBox, so go with the font
// metrics. Highmaps CSS demos.
bBox.height || Infinity);
// #15491: Vertical centering
if (this.heightSetting) {
this.baselineOffset += (this.heightSetting - metrics.h) / 2;
}
if (this.needsBox && !text.textPath) {
// Create the border box if it is not already present
if (!this.box) {
// Symbol definition exists (#5324)
var box = this.box = this.symbolKey ?
this.renderer.symbol(this.symbolKey) :
this.renderer.rect();
box.addClass(// Don't use label className for buttons
(this.className === 'button' ?
'' : 'highcharts-label-box') +
(this.className ?
' highcharts-' + this.className + '-box' : ''));
box.add(this);
}
crispAdjust = this.getCrispAdjust();
attribs.x = crispAdjust;
attribs.y = ((this.baseline ? -this.baselineOffset : 0) + crispAdjust);
// Apply the box attributes
attribs.width = Math.round(this.width);
attribs.height = Math.round(this.height);
this.box.attr(SVGLabel_extend(attribs, this.deferredAttr));
this.deferredAttr = {};
}
};
/*
* This function runs after setting text or padding, but only if padding
* is changed.
*/
SVGLabel.prototype.updateTextPadding = function () {
var _a,
_b;
var text = this.text,
textAlign = text.styles.textAlign || this.textAlign;
if (!text.textPath) {
this.updateBoxSize();
// Determine y based on the baseline
var textY = this.baseline ? 0 : this.baselineOffset,
textX = ((_a = this.paddingLeft) !== null && _a !== void 0 ? _a : this.padding) +
// Compensate for alignment
SVGLabel_getAlignFactor(textAlign) * ((_b = this.widthSetting) !== null && _b !== void 0 ? _b : this.bBox.width);
// Update if anything changed
if (textX !== text.x || textY !== text.y) {
text.attr({
align: textAlign,
x: textX
});
if (typeof textY !== 'undefined') {
text.attr('y', textY);
}
}
// Record current values
text.x = textX;
text.y = textY;
}
};
SVGLabel.prototype.widthSetter = function (value) {
// `width:auto` => null
this.widthSetting = SVGLabel_isNumber(value) ? value : void 0;
this.doUpdate = true;
};
SVGLabel.prototype.getPaddedWidth = function () {
var padding = this.padding;
var paddingLeft = SVGLabel_pick(this.paddingLeft,
padding);
var paddingRight = SVGLabel_pick(this.paddingRight,
padding);
return ((this.widthSetting || this.bBox.width || 0) +
paddingLeft +
paddingRight);
};
SVGLabel.prototype.xSetter = function (value) {
this.x = value; // For animation getter
if (this.alignFactor) {
value -= this.alignFactor * this.getPaddedWidth();
// Force animation even when setting to the same value (#7898)
this['forceAnimate:x'] = true;
}
this.xSetting = Math.round(value);
this.attr('translateX', this.xSetting);
};
SVGLabel.prototype.ySetter = function (value) {
this.ySetting = this.y = Math.round(value);
this.attr('translateY', this.ySetting);
};
/* *
*
* Static Properties
*
* */
SVGLabel.emptyBBox = {
width: 0,
height: 0,
x: 0,
y: 0
};
/**
* For labels, these CSS properties are applied to the `text` node directly.
*
* @private
* @name Highcharts.SVGLabel#textProps
* @type {Array<string>}
*/
SVGLabel.textProps = [
'color', 'direction', 'fontFamily', 'fontSize', 'fontStyle',
'fontWeight', 'lineClamp', 'lineHeight', 'textAlign', 'textDecoration',
'textOutline', 'textOverflow', 'whiteSpace', 'width'
];
return SVGLabel;
}(SVG_SVGElement));
/* *
*
* Default Export
*
* */
/* harmony default export */ var SVG_SVGLabel = (SVGLabel);
;// ./code/es5/es-modules/Core/Renderer/SVG/Symbols.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Symbols_defined = Core_Utilities.defined, Symbols_isNumber = Core_Utilities.isNumber, Symbols_pick = Core_Utilities.pick;
/* *
*
* Functions
*
* */
/* eslint-disable require-jsdoc, valid-jsdoc */
/**
*
*/
function arc(cx, cy, w, h, options) {
var arc = [];
if (options) {
var start = options.start || 0,
rx = Symbols_pick(options.r,
w),
ry = Symbols_pick(options.r,
h || w),
// Subtract a small number to prevent cos and sin of start and end
// from becoming equal on 360 arcs (#1561). The size of the circle
// affects the constant, therefore the division by `rx`. If the
// proximity is too small, the arc disappears. If it is too great, a
// gap appears. This can be seen in the animation of the official
// bubble demo (#20586).
proximity = 0.0002 / (options.borderRadius ? 1 : Math.max(rx, 1)),
fullCircle = (Math.abs((options.end || 0) - start - 2 * Math.PI) <
proximity),
end = (options.end || 0) - (fullCircle ? proximity : 0),
innerRadius = options.innerR,
open_1 = Symbols_pick(options.open,
fullCircle),
cosStart = Math.cos(start),
sinStart = Math.sin(start),
cosEnd = Math.cos(end),
sinEnd = Math.sin(end),
// Proximity takes care of rounding errors around PI (#6971)
longArc = Symbols_pick(options.longArc,
end - start - Math.PI < proximity ? 0 : 1);
var arcSegment = [
'A', // ArcTo
rx, // X radius
ry, // Y radius
0, // Slanting
longArc, // Long or short arc
Symbols_pick(options.clockwise, 1), // Clockwise
cx + rx * cosEnd,
cy + ry * sinEnd
];
arcSegment.params = { start: start, end: end, cx: cx, cy: cy }; // Memo for border radius
arc.push([
'M',
cx + rx * cosStart,
cy + ry * sinStart
], arcSegment);
if (Symbols_defined(innerRadius)) {
arcSegment = [
'A', // ArcTo
innerRadius, // X radius
innerRadius, // Y radius
0, // Slanting
longArc, // Long or short arc
// Clockwise - opposite to the outer arc clockwise
Symbols_defined(options.clockwise) ? 1 - options.clockwise : 0,
cx + innerRadius * cosStart,
cy + innerRadius * sinStart
];
// Memo for border radius
arcSegment.params = {
start: end,
end: start,
cx: cx,
cy: cy
};
arc.push(open_1 ?
[
'M',
cx + innerRadius * cosEnd,
cy + innerRadius * sinEnd
] : [
'L',
cx + innerRadius * cosEnd,
cy + innerRadius * sinEnd
], arcSegment);
}
if (!open_1) {
arc.push(['Z']);
}
}
return arc;
}
/**
* Callout shape used for default tooltips.
*/
function callout(x, y, w, h, options) {
var arrowLength = 6,
halfDistance = 6,
r = Math.min((options && options.r) || 0,
w,
h),
safeDistance = r + halfDistance,
anchorX = options && options.anchorX,
anchorY = options && options.anchorY || 0;
var path = roundedRect(x,
y,
w,
h, { r: r });
if (!Symbols_isNumber(anchorX)) {
return path;
}
// Do not render a connector, if anchor starts inside the label
if (anchorX < w && anchorX > 0 && anchorY < h && anchorY > 0) {
return path;
}
// Anchor on right side
if (x + anchorX > w - safeDistance) {
// Chevron
if (anchorY > y + safeDistance &&
anchorY < y + h - safeDistance) {
path.splice(3, 1, ['L', x + w, anchorY - halfDistance], ['L', x + w + arrowLength, anchorY], ['L', x + w, anchorY + halfDistance], ['L', x + w, y + h - r]);
// Simple connector
}
else {
if (anchorX < w) { // Corner connector
var isTopCorner = anchorY < y + safeDistance,
cornerY = isTopCorner ? y : y + h,
sliceStart = isTopCorner ? 2 : 5;
path.splice(sliceStart, 0, ['L', anchorX, anchorY], ['L', x + w - r, cornerY]);
}
else { // Side connector
path.splice(3, 1, ['L', x + w, h / 2], ['L', anchorX, anchorY], ['L', x + w, h / 2], ['L', x + w, y + h - r]);
}
}
// Anchor on left side
}
else if (x + anchorX < safeDistance) {
// Chevron
if (anchorY > y + safeDistance &&
anchorY < y + h - safeDistance) {
path.splice(7, 1, ['L', x, anchorY + halfDistance], ['L', x - arrowLength, anchorY], ['L', x, anchorY - halfDistance], ['L', x, y + r]);
// Simple connector
}
else {
if (anchorX > 0) { // Corner connector
var isTopCorner = anchorY < y + safeDistance,
cornerY = isTopCorner ? y : y + h,
sliceStart = isTopCorner ? 1 : 6;
path.splice(sliceStart, 0, ['L', anchorX, anchorY], ['L', x + r, cornerY]);
}
else { // Side connector
path.splice(7, 1, ['L', x, h / 2], ['L', anchorX, anchorY], ['L', x, h / 2], ['L', x, y + r]);
}
}
}
else if ( // Replace bottom
anchorY > h &&
anchorX < w - safeDistance) {
path.splice(5, 1, ['L', anchorX + halfDistance, y + h], ['L', anchorX, y + h + arrowLength], ['L', anchorX - halfDistance, y + h], ['L', x + r, y + h]);
}
else if ( // Replace top
anchorY < 0 &&
anchorX > safeDistance) {
path.splice(1, 1, ['L', anchorX - halfDistance, y], ['L', anchorX, y - arrowLength], ['L', anchorX + halfDistance, y], ['L', w - r, y]);
}
return path;
}
/**
*
*/
function circle(x, y, w, h) {
// Return a full arc
return arc(x + w / 2, y + h / 2, w / 2, h / 2, {
start: Math.PI * 0.5,
end: Math.PI * 2.5,
open: false
});
}
/**
*
*/
function diamond(x, y, w, h) {
return [
['M', x + w / 2, y],
['L', x + w, y + h / 2],
['L', x + w / 2, y + h],
['L', x, y + h / 2],
['Z']
];
}
// #15291
/**
*
*/
function rect(x, y, w, h, options) {
if (options && options.r) {
return roundedRect(x, y, w, h, options);
}
return [
['M', x, y],
['L', x + w, y],
['L', x + w, y + h],
['L', x, y + h],
['Z']
];
}
/**
*
*/
function roundedRect(x, y, w, h, options) {
var r = (options === null || options === void 0 ? void 0 : options.r) || 0;
return [
['M', x + r, y],
['L', x + w - r, y], // Top side
['A', r, r, 0, 0, 1, x + w, y + r], // Top-right corner
['L', x + w, y + h - r], // Right side
['A', r, r, 0, 0, 1, x + w - r, y + h], // Bottom-right corner
['L', x + r, y + h], // Bottom side
['A', r, r, 0, 0, 1, x, y + h - r], // Bottom-left corner
['L', x, y + r], // Left side
['A', r, r, 0, 0, 1, x + r, y],
['Z'] // Top-left corner
];
}
/**
*
*/
function triangle(x, y, w, h) {
return [
['M', x + w / 2, y],
['L', x + w, y + h],
['L', x, y + h],
['Z']
];
}
/**
*
*/
function triangleDown(x, y, w, h) {
return [
['M', x, y],
['L', x + w, y],
['L', x + w / 2, y + h],
['Z']
];
}
var Symbols = {
arc: arc,
callout: callout,
circle: circle,
diamond: diamond,
rect: rect,
roundedRect: roundedRect,
square: rect,
triangle: triangle,
'triangle-down': triangleDown
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var SVG_Symbols = (Symbols);
;// ./code/es5/es-modules/Core/Renderer/SVG/TextBuilder.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var TextBuilder_doc = Core_Globals.doc, TextBuilder_SVG_NS = Core_Globals.SVG_NS, TextBuilder_win = Core_Globals.win;
var TextBuilder_attr = Core_Utilities.attr, TextBuilder_extend = Core_Utilities.extend, TextBuilder_fireEvent = Core_Utilities.fireEvent, TextBuilder_isString = Core_Utilities.isString, TextBuilder_objectEach = Core_Utilities.objectEach, TextBuilder_pick = Core_Utilities.pick;
// Function used to test string length including an ellipsis
var stringWithEllipsis = function (text, currentIndex) {
return text.substring(0, currentIndex) + '\u2026';
};
/* *
*
* Class
*
* */
/**
* SVG Text Builder
* @private
* @class
* @name Highcharts.TextBuilder
*/
var TextBuilder = /** @class */ (function () {
function TextBuilder(svgElement) {
var textStyles = svgElement.styles;
this.renderer = svgElement.renderer;
this.svgElement = svgElement;
this.width = svgElement.textWidth;
this.textLineHeight = textStyles && textStyles.lineHeight;
this.textOutline = textStyles && textStyles.textOutline;
this.ellipsis = Boolean(textStyles && textStyles.textOverflow === 'ellipsis');
this.lineClamp = textStyles === null || textStyles === void 0 ? void 0 : textStyles.lineClamp;
this.noWrap = Boolean(textStyles && textStyles.whiteSpace === 'nowrap');
}
/**
* Build an SVG representation of the pseudo HTML given in the object's
* svgElement.
*
* @private
*
* @return {void}.
*/
TextBuilder.prototype.buildSVG = function () {
var wrapper = this.svgElement, textNode = wrapper.element, renderer = wrapper.renderer, textStr = TextBuilder_pick(wrapper.textStr, '').toString(), hasMarkup = textStr.indexOf('<') !== -1, childNodes = textNode.childNodes, tempParent = !wrapper.added && renderer.box, regexMatchBreaks = /<br.*?>/g,
// The buildText code is quite heavy, so if we're not changing
// something that affects the text, skip it (#6113).
textCache = [
textStr,
this.ellipsis,
this.noWrap,
this.textLineHeight,
this.textOutline,
wrapper.getStyle('font-size'),
wrapper.styles.lineClamp,
this.width
].join(',');
if (textCache === wrapper.textCache) {
return;
}
wrapper.textCache = textCache;
delete wrapper.actualWidth;
// Remove old text
for (var i = childNodes.length; i--;) {
textNode.removeChild(childNodes[i]);
}
// Simple strings, add text directly and return
if (!hasMarkup &&
!this.ellipsis &&
!this.width &&
!wrapper.textPath &&
(textStr.indexOf(' ') === -1 ||
(this.noWrap && !regexMatchBreaks.test(textStr)))) {
textNode.appendChild(TextBuilder_doc.createTextNode(this.unescapeEntities(textStr)));
// Complex strings, add more logic
}
else if (textStr !== '') {
if (tempParent) {
// Attach it to the DOM to read offset width and font size
tempParent.appendChild(textNode);
}
// Step 1. Parse the markup safely and directly into a tree
// structure.
var ast = new HTML_AST(textStr);
// Step 2. Do as many as we can of the modifications to the tree
// structure before it is added to the DOM
this.modifyTree(ast.nodes);
ast.addToDOM(textNode);
// Step 3. Some modifications can't be done until the structure is
// in the DOM, because we need to read computed metrics.
this.modifyDOM();
// Add title if an ellipsis was added
if (this.ellipsis &&
(textNode.textContent || '').indexOf('\u2026') !== -1) {
wrapper.attr('title', this.unescapeEntities(wrapper.textStr || '', ['<', '>']) // #7179
);
}
if (tempParent) {
tempParent.removeChild(textNode);
}
}
// Apply the text outline
if (TextBuilder_isString(this.textOutline) && wrapper.applyTextOutline) {
wrapper.applyTextOutline(this.textOutline);
}
};
/**
* Modify the DOM of the generated SVG structure. This function only does
* operations that cannot be done until the elements are attached to the
* DOM, like doing layout based on rendered metrics of the added elements.
*
* @private
*
*/
TextBuilder.prototype.modifyDOM = function () {
var _this = this;
var wrapper = this.svgElement;
var x = TextBuilder_attr(wrapper.element, 'x');
wrapper.firstLineMetrics = void 0;
// Remove empty tspans (including breaks) from the beginning because
// SVG's getBBox doesn't count empty lines. The use case is tooltip
// where the header is empty. By doing this in the DOM rather than in
// the AST, we can inspect the textContent directly and don't have to
// recurse down to look for valid content.
var firstChild;
while ((firstChild = wrapper.element.firstChild)) {
if (/^[\s\u200B]*$/.test(firstChild.textContent || ' ')) {
wrapper.element.removeChild(firstChild);
}
else {
break;
}
}
// Modify hard line breaks by applying the rendered line height
[].forEach.call(wrapper.element.querySelectorAll('tspan.highcharts-br'), function (br, i) {
if (br.nextSibling && br.previousSibling) { // #5261
if (i === 0 && br.previousSibling.nodeType === 1) {
wrapper.firstLineMetrics = wrapper.renderer
.fontMetrics(br.previousSibling);
}
TextBuilder_attr(br, {
// Since the break is inserted in front of the next
// line, we need to use the next sibling for the line
// height
dy: _this.getLineHeight(br.nextSibling),
x: x
});
}
});
// Constrain the line width, either by ellipsis or wrapping
var width = this.width || 0;
if (!width) {
return;
}
// Insert soft line breaks into each text node
var modifyTextNode = function (textNode,
parentElement) {
var _a;
var text = textNode.textContent || '';
var words = text
.replace(/([^\^])-/g, '$1- ') // Split on hyphens
// .trim()
.split(' '); // #1273
var hasWhiteSpace = !_this.noWrap && (words.length > 1 || wrapper.element.childNodes.length > 1);
var dy = _this.getLineHeight(parentElement),
ellipsisWidth = Math.max(0,
// Subtract the font face to make room for
// the ellipsis itself
width - 0.8 * dy);
var lineNo = 0;
var startAt = wrapper.actualWidth;
if (hasWhiteSpace) {
var lines = [];
// Remove preceding siblings in order to make the text length
// calculation correct in the truncate function
var precedingSiblings = [];
while (parentElement.firstChild &&
parentElement.firstChild !== textNode) {
precedingSiblings.push(parentElement.firstChild);
parentElement.removeChild(parentElement.firstChild);
}
while (words.length) {
// Apply the previous line
if (words.length && !_this.noWrap && lineNo > 0) {
lines.push(textNode.textContent || '');
textNode.textContent = words.join(' ')
.replace(/- /g, '-');
}
// For each line, truncate the remaining
// words into the line length.
_this.truncate(textNode, void 0, words, lineNo === 0 ? (startAt || 0) : 0, width, ellipsisWidth,
// Build the text to test for
function (t, currentIndex) {
return words
.slice(0, currentIndex)
.join(' ')
.replace(/- /g, '-');
});
startAt = wrapper.actualWidth;
lineNo++;
// Line clamp. Break out after n lines and append an
// ellipsis regardless of the text length.
if (_this.lineClamp && lineNo >= _this.lineClamp) {
// Only if there are remaining words that should have
// been rendered.
if (words.length) {
_this.truncate(textNode, textNode.textContent || '', void 0, 0,
// Target width
width, ellipsisWidth, stringWithEllipsis);
textNode.textContent = ((_a = textNode.textContent) === null || _a === void 0 ? void 0 : _a.replace('\u2026', '')) + '\u2026';
}
break;
}
}
// Reinsert the preceding child nodes
precedingSiblings.forEach(function (childNode) {
parentElement.insertBefore(childNode, textNode);
});
// Insert the previous lines before the original text node
lines.forEach(function (line) {
// Insert the line
parentElement.insertBefore(TextBuilder_doc.createTextNode(line), textNode);
// Insert a break
var br = TextBuilder_doc.createElementNS(TextBuilder_SVG_NS, 'tspan');
br.textContent = '\u200B'; // Zero-width space
TextBuilder_attr(br, { dy: dy, x: x });
parentElement.insertBefore(br, textNode);
});
}
else if (_this.ellipsis) {
if (text) {
_this.truncate(textNode, text, void 0, 0,
// Target width
width, ellipsisWidth, stringWithEllipsis);
}
}
};
// Recurse down the DOM tree and handle line breaks for each text node
var modifyChildren = (function (node) {
var childNodes = [].slice.call(node.childNodes);
childNodes.forEach(function (childNode) {
if (childNode.nodeType === TextBuilder_win.Node.TEXT_NODE) {
modifyTextNode(childNode, node);
}
else {
// Reset word-wrap width readings after hard breaks
if (childNode.className.baseVal
.indexOf('highcharts-br') !== -1) {
wrapper.actualWidth = 0;
}
// Recurse down to child node
modifyChildren(childNode);
}
});
});
modifyChildren(wrapper.element);
};
/**
* Get the rendered line height of a <text>, <tspan> or pure text node.
* @private
* @param {DOMElementType|Text} node The node to check for
* @return {number} The rendered line height
*/
TextBuilder.prototype.getLineHeight = function (node) {
// If the node is a text node, use its parent
var element = (node.nodeType === TextBuilder_win.Node.TEXT_NODE) ?
node.parentElement :
node;
return this.textLineHeight ?
parseInt(this.textLineHeight.toString(), 10) :
this.renderer.fontMetrics(element || this.svgElement.element).h;
};
/**
* Transform a pseudo HTML AST node tree into an SVG structure. We do as
* much heavy lifting as we can here, before doing the final processing in
* the modifyDOM function. The original data is mutated.
*
* @private
*
* @param {ASTNode[]} nodes The AST nodes
*
*/
TextBuilder.prototype.modifyTree = function (nodes) {
var _this = this;
var modifyChild = function (node,
i) {
var _a = node.attributes,
attributes = _a === void 0 ? {} : _a,
children = node.children,
_b = node.style,
style = _b === void 0 ? {} : _b,
tagName = node.tagName,
styledMode = _this.renderer.styledMode;
// Apply styling to text tags
if (tagName === 'b' || tagName === 'strong') {
if (styledMode) {
// eslint-disable-next-line dot-notation
attributes['class'] = 'highcharts-strong';
}
else {
style.fontWeight = 'bold';
}
}
else if (tagName === 'i' || tagName === 'em') {
if (styledMode) {
// eslint-disable-next-line dot-notation
attributes['class'] = 'highcharts-emphasized';
}
else {
style.fontStyle = 'italic';
}
}
// Modify styling
if (style && style.color) {
style.fill = style.color;
}
// Handle breaks
if (tagName === 'br') {
attributes['class'] = 'highcharts-br'; // eslint-disable-line dot-notation
node.textContent = '\u200B'; // Zero-width space
// Trim whitespace off the beginning of new lines
var nextNode = nodes[i + 1];
if (nextNode && nextNode.textContent) {
nextNode.textContent =
nextNode.textContent.replace(/^ +/gm, '');
}
// If an anchor has direct text node children, the text is unable to
// wrap because there is no `getSubStringLength` function on the
// element. Therefore we need to wrap the child text node or nodes
// in a tspan. #16173.
}
else if (tagName === 'a' &&
children &&
children.some(function (child) { return child.tagName === '#text'; })) {
node.children = [{ children: children, tagName: 'tspan' }];
}
if (tagName !== '#text' && tagName !== 'a') {
node.tagName = 'tspan';
}
TextBuilder_extend(node, { attributes: attributes, style: style });
// Recurse
if (children) {
children
.filter(function (c) { return c.tagName !== '#text'; })
.forEach(modifyChild);
}
};
nodes.forEach(modifyChild);
TextBuilder_fireEvent(this.svgElement, 'afterModifyTree', { nodes: nodes });
};
/*
* Truncate the text node contents to a given length. Used when the css
* width is set. If the `textOverflow` is `ellipsis`, the text is truncated
* character by character to the given length. If not, the text is
* word-wrapped line by line.
*/
TextBuilder.prototype.truncate = function (textNode, text, words, startAt, width, ellipsisWidth, getString) {
var svgElement = this.svgElement;
var rotation = svgElement.rotation;
// Cache the lengths to avoid checking the same twice
var lengths = [];
// Word wrap cannot be truncated to shorter than one word, ellipsis
// text can be completely blank.
var minIndex = words && !startAt ? 1 : 0;
var maxIndex = (text || words || '').length;
var currentIndex = maxIndex;
var str;
var actualWidth;
if (!words) {
width = ellipsisWidth;
}
var getSubStringLength = function (charEnd,
concatenatedEnd) {
// `charEnd` is used when finding the character-by-character
// break for ellipsis, concatenatedEnd is used for word-by-word
// break for word wrapping.
var end = concatenatedEnd || charEnd;
var parentNode = textNode.parentNode;
if (parentNode && typeof lengths[end] === 'undefined') {
// Modern browsers
if (parentNode.getSubStringLength) {
// Fails with DOM exception on unit-tests/legend/members
// of unknown reason. Desired width is 0, text content
// is "5" and end is 1.
try {
lengths[end] = startAt +
parentNode.getSubStringLength(0, words ? end + 1 : end);
}
catch (e) {
'';
}
}
}
return lengths[end];
};
svgElement.rotation = 0; // Discard rotation when computing box
actualWidth = getSubStringLength(textNode.textContent.length);
if (startAt + actualWidth > width) {
// Do a binary search for the index where to truncate the text
while (minIndex <= maxIndex) {
currentIndex = Math.ceil((minIndex + maxIndex) / 2);
// When checking words for word-wrap, we need to build the
// string and measure the subStringLength at the concatenated
// word length.
if (words) {
str = getString(words, currentIndex);
}
actualWidth = getSubStringLength(currentIndex, str && str.length - 1);
if (minIndex === maxIndex) {
// Complete
minIndex = maxIndex + 1;
}
else if (actualWidth > width) {
// Too large. Set max index to current.
maxIndex = currentIndex - 1;
}
else {
// Within width. Set min index to current.
minIndex = currentIndex;
}
}
// If max index was 0 it means the shortest possible text was also
// too large. For ellipsis that means only the ellipsis, while for
// word wrap it means the whole first word.
if (maxIndex === 0) {
// Remove ellipsis
textNode.textContent = '';
// If the new text length is one less than the original, we don't
// need the ellipsis
}
else if (!(text && maxIndex === text.length - 1)) {
textNode.textContent = str || getString(text || words, currentIndex);
}
// Add ellipsis on individual lines
if (this.ellipsis && actualWidth > width) {
this.truncate(textNode, textNode.textContent || '', void 0, 0, width, ellipsisWidth, stringWithEllipsis);
}
}
// When doing line wrapping, prepare for the next line by removing the
// items from this line.
if (words) {
words.splice(0, currentIndex);
}
svgElement.actualWidth = actualWidth;
svgElement.rotation = rotation; // Apply rotation again.
};
/*
* Un-escape HTML entities based on the public `renderer.escapes` list
*
* @private
*
* @param {string} inputStr The string to unescape
* @param {Array<string>} [except] Exceptions
*
* @return {string} The processed string
*/
TextBuilder.prototype.unescapeEntities = function (inputStr, except) {
TextBuilder_objectEach(this.renderer.escapes, function (value, key) {
if (!except || except.indexOf(value) === -1) {
inputStr = inputStr.toString().replace(new RegExp(value, 'g'), key);
}
});
return inputStr;
};
return TextBuilder;
}());
/* harmony default export */ var SVG_TextBuilder = (TextBuilder);
;// ./code/es5/es-modules/Core/Renderer/SVG/SVGRenderer.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var SVGRenderer_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var SVGRenderer_defaultOptions = Defaults.defaultOptions;
var SVGRenderer_charts = Core_Globals.charts, SVGRenderer_deg2rad = Core_Globals.deg2rad, SVGRenderer_doc = Core_Globals.doc, SVGRenderer_isFirefox = Core_Globals.isFirefox, isMS = Core_Globals.isMS, isWebKit = Core_Globals.isWebKit, noop = Core_Globals.noop, SVGRenderer_SVG_NS = Core_Globals.SVG_NS, symbolSizes = Core_Globals.symbolSizes, SVGRenderer_win = Core_Globals.win;
var SVGRenderer_addEvent = Core_Utilities.addEvent, SVGRenderer_attr = Core_Utilities.attr, SVGRenderer_createElement = Core_Utilities.createElement, SVGRenderer_crisp = Core_Utilities.crisp, SVGRenderer_css = Core_Utilities.css, SVGRenderer_defined = Core_Utilities.defined, SVGRenderer_destroyObjectProperties = Core_Utilities.destroyObjectProperties, SVGRenderer_extend = Core_Utilities.extend, SVGRenderer_isArray = Core_Utilities.isArray, SVGRenderer_isNumber = Core_Utilities.isNumber, SVGRenderer_isObject = Core_Utilities.isObject, SVGRenderer_isString = Core_Utilities.isString, SVGRenderer_merge = Core_Utilities.merge, SVGRenderer_pick = Core_Utilities.pick, SVGRenderer_pInt = Core_Utilities.pInt, SVGRenderer_replaceNested = Core_Utilities.replaceNested, SVGRenderer_uniqueKey = Core_Utilities.uniqueKey;
/* *
*
* Variables
*
* */
var hasInternalReferenceBug;
/* *
*
* Class
*
* */
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* Allows direct access to the Highcharts rendering layer in order to draw
* primitive shapes like circles, rectangles, paths or text directly on a chart,
* or independent from any chart. The SVGRenderer represents a wrapper object
* for SVG in modern browsers.
*
* An existing chart's renderer can be accessed through {@link Chart.renderer}.
* The renderer can also be used completely decoupled from a chart.
*
* See [How to use the SVG Renderer](
* https://www.highcharts.com/docs/advanced-chart-features/renderer) for a
* comprehensive tutorial.
*
* @sample highcharts/members/renderer-on-chart
* Annotating a chart programmatically.
* @sample highcharts/members/renderer-basic
* Independent SVG drawing.
*
* @example
* // Use directly without a chart object.
* let renderer = new Highcharts.Renderer(parentNode, 600, 400);
*
* @class
* @name Highcharts.SVGRenderer
*
* @param {Highcharts.HTMLDOMElement} container
* Where to put the SVG in the web page.
*
* @param {number} width
* The width of the SVG.
*
* @param {number} height
* The height of the SVG.
*
* @param {Highcharts.CSSObject} [style]
* The box style, if not in styleMode
*
* @param {boolean} [forExport=false]
* Whether the rendered content is intended for export.
*
* @param {boolean} [allowHTML=true]
* Whether the renderer is allowed to include HTML text, which will be
* projected on top of the SVG.
*
* @param {boolean} [styledMode=false]
* Whether the renderer belongs to a chart that is in styled mode.
* If it does, it will avoid setting presentational attributes in
* some cases, but not when set explicitly through `.attr` and `.css`
* etc.
*/
var SVGRenderer = /** @class */ (function () {
/**
* The root `svg` node of the renderer.
*
* @name Highcharts.SVGRenderer#box
* @type {Highcharts.SVGDOMElement}
*/
/**
* The wrapper for the root `svg` node of the renderer.
*
* @name Highcharts.SVGRenderer#boxWrapper
* @type {Highcharts.SVGElement}
*/
/**
* A pointer to the `defs` node of the root SVG.
*
* @name Highcharts.SVGRenderer#defs
* @type {Highcharts.SVGElement}
*/
/**
* Whether the rendered content is intended for export.
*
* @name Highcharts.SVGRenderer#forExport
* @type {boolean | undefined}
*/
/**
* Page url used for internal references.
*
* @private
* @name Highcharts.SVGRenderer#url
* @type {string}
*/
/**
* Initialize the SVGRenderer. Overridable initializer function that takes
* the same parameters as the constructor.
*
* @function Highcharts.SVGRenderer#init
*
* @param {Highcharts.HTMLDOMElement} container
* Where to put the SVG in the web page.
*
* @param {number} width
* The width of the SVG.
*
* @param {number} height
* The height of the SVG.
*
* @param {Highcharts.CSSObject} [style]
* The box style, if not in styleMode
*
* @param {boolean} [forExport=false]
* Whether the rendered content is intended for export.
*
* @param {boolean} [allowHTML=true]
* Whether the renderer is allowed to include HTML text, which will be
* projected on top of the SVG.
*
* @param {boolean} [styledMode=false]
* Whether the renderer belongs to a chart that is in styled mode. If it
* does, it will avoid setting presentational attributes in some cases, but
* not when set explicitly through `.attr` and `.css` etc.
*/
function SVGRenderer(container, width, height, style, forExport, allowHTML, styledMode) {
var renderer = this,
boxWrapper = renderer
.createElement('svg')
.attr({
version: '1.1',
'class': 'highcharts-root'
}),
element = boxWrapper.element;
if (!styledMode) {
boxWrapper.css(this.getStyle(style || {}));
}
container.appendChild(element);
// Always use ltr on the container, otherwise text-anchor will be
// flipped and text appear outside labels, buttons, tooltip etc (#3482)
SVGRenderer_attr(container, 'dir', 'ltr');
// For browsers other than IE, add the namespace attribute (#1978)
if (container.innerHTML.indexOf('xmlns') === -1) {
SVGRenderer_attr(element, 'xmlns', this.SVG_NS);
}
this.box = element;
this.boxWrapper = boxWrapper;
this.alignedObjects = [];
this.url = this.getReferenceURL();
// Add description
var desc = this.createElement('desc').add();
desc.element.appendChild(SVGRenderer_doc.createTextNode('Created with Highcharts 12.1.2'));
this.defs = this.createElement('defs').add();
this.allowHTML = allowHTML;
this.forExport = forExport;
this.styledMode = styledMode;
this.gradients = {}; // Object where gradient SvgElements are stored
this.cache = {}; // Cache for numerical bounding boxes
this.cacheKeys = [];
this.imgCount = 0;
this.rootFontSize = boxWrapper.getStyle('font-size');
renderer.setSize(width, height, false);
// Issue 110 workaround:
// In Firefox, if a div is positioned by percentage, its pixel position
// may land between pixels. The container itself doesn't display this,
// but an SVG element inside this container will be drawn at subpixel
// precision. In order to draw sharp lines, this must be compensated
// for. This doesn't seem to work inside iframes though (like in
// jsFiddle).
var subPixelFix,
rect;
if (SVGRenderer_isFirefox && container.getBoundingClientRect) {
subPixelFix = function () {
SVGRenderer_css(container, { left: 0, top: 0 });
rect = container.getBoundingClientRect();
SVGRenderer_css(container, {
left: (Math.ceil(rect.left) - rect.left) + 'px',
top: (Math.ceil(rect.top) - rect.top) + 'px'
});
};
// Run the fix now
subPixelFix();
// Run it on resize
renderer.unSubPixelFix = SVGRenderer_addEvent(SVGRenderer_win, 'resize', subPixelFix);
}
}
/* *
*
* Functions
*
* */
/**
* General method for adding a definition to the SVG `defs` tag. Can be used
* for gradients, fills, filters etc. Styled mode only. A hook for adding
* general definitions to the SVG's defs tag. Definitions can be referenced
* from the CSS by its `id`. Read more in
* [gradients, shadows and patterns](https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns).
* Styled mode only.
*
* @function Highcharts.SVGRenderer#definition
*
* @param {Highcharts.ASTNode} def
* A serialized form of an SVG definition, including children.
*
* @return {Highcharts.SVGElement}
* The inserted node.
*/
SVGRenderer.prototype.definition = function (def) {
var ast = new HTML_AST([def]);
return ast.addToDOM(this.defs.element);
};
/**
* Get the prefix needed for internal URL references to work in certain
* cases. Some older browser versions had a bug where internal url
* references in SVG attributes, on the form `url(#some-id)`, would fail if
* a base tag was present in the page. There were also issues with
* `history.pushState` related to this prefix.
*
* Related issues: #24, #672, #1070, #5244.
*
* The affected browsers are:
* - Chrome <= 53 (May 2018)
* - Firefox <= 51 (January 2017)
* - Safari/Mac <= 12.1 (2018 or 2019)
* - Safari/iOS <= 13
*
* @todo Remove this hack when time has passed. All the affected browsers
* are evergreens, so it is increasingly unlikely that users are affected by
* the bug.
*
* @return {string}
* The prefix to use. An empty string for modern browsers.
*/
SVGRenderer.prototype.getReferenceURL = function () {
if ((SVGRenderer_isFirefox || isWebKit) &&
SVGRenderer_doc.getElementsByTagName('base').length) {
// Detect if a clip path is taking effect by performing a hit test
// outside the clipped area. If the hit element is the rectangle
// that was supposed to be clipped, the bug is present. This only
// has to be performed once per page load, so we store the result
// locally in the module.
if (!SVGRenderer_defined(hasInternalReferenceBug)) {
var id = SVGRenderer_uniqueKey();
var ast = new HTML_AST([{
tagName: 'svg',
attributes: {
width: 8,
height: 8
},
children: [{
tagName: 'defs',
children: [{
tagName: 'clipPath',
attributes: {
id: id
},
children: [{
tagName: 'rect',
attributes: {
width: 4,
height: 4
}
}]
}]
}, {
tagName: 'rect',
attributes: {
id: 'hitme',
width: 8,
height: 8,
'clip-path': "url(#".concat(id, ")"),
fill: 'rgba(0,0,0,0.001)'
}
}]
}]);
var svg = ast.addToDOM(SVGRenderer_doc.body);
SVGRenderer_css(svg, {
position: 'fixed',
top: 0,
left: 0,
zIndex: 9e5
});
var hitElement = SVGRenderer_doc.elementFromPoint(6, 6);
hasInternalReferenceBug = (hitElement && hitElement.id) === 'hitme';
SVGRenderer_doc.body.removeChild(svg);
}
if (hasInternalReferenceBug) {
// Scan alert #[72]: Loop for nested patterns
return SVGRenderer_replaceNested(SVGRenderer_win.location.href.split('#')[0], // Remove hash
[/<[^>]*>/g, ''], // Wing cut HTML
[/([\('\)])/g, '\\$1'], // Escape parantheses and quotes
[/ /g, '%20'] // Replace spaces (needed for Safari only)
);
}
}
return '';
};
/**
* Get the global style setting for the renderer.
*
* @private
* @function Highcharts.SVGRenderer#getStyle
*
* @param {Highcharts.CSSObject} style
* Style settings.
*
* @return {Highcharts.CSSObject}
* The style settings mixed with defaults.
*/
SVGRenderer.prototype.getStyle = function (style) {
this.style = SVGRenderer_extend({
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", ' +
'Roboto, Helvetica, Arial, "Apple Color Emoji", ' +
'"Segoe UI Emoji", "Segoe UI Symbol", sans-serif',
fontSize: '1rem'
}, style);
return this.style;
};
/**
* Apply the global style on the renderer, mixed with the default styles.
*
* @function Highcharts.SVGRenderer#setStyle
*
* @param {Highcharts.CSSObject} style
* CSS to apply.
*/
SVGRenderer.prototype.setStyle = function (style) {
this.boxWrapper.css(this.getStyle(style));
};
/**
* Detect whether the renderer is hidden. This happens when one of the
* parent elements has `display: none`. Used internally to detect when we
* need to render preliminarily in another div to get the text bounding
* boxes right.
*
* @function Highcharts.SVGRenderer#isHidden
*
* @return {boolean}
* True if it is hidden.
*/
SVGRenderer.prototype.isHidden = function () {
return !this.boxWrapper.getBBox().width;
};
/**
* Destroys the renderer and its allocated members.
*
* @function Highcharts.SVGRenderer#destroy
*
* @return {null}
* Pass through value.
*/
SVGRenderer.prototype.destroy = function () {
var renderer = this,
rendererDefs = renderer.defs;
renderer.box = null;
renderer.boxWrapper = renderer.boxWrapper.destroy();
// Call destroy on all gradient elements
SVGRenderer_destroyObjectProperties(renderer.gradients || {});
renderer.gradients = null;
renderer.defs = rendererDefs.destroy();
// Remove sub pixel fix handler (#982)
if (renderer.unSubPixelFix) {
renderer.unSubPixelFix();
}
renderer.alignedObjects = null;
return null;
};
/**
* Create a wrapper for an SVG element. Serves as a factory for
* {@link SVGElement}, but this function is itself mostly called from
* primitive factories like {@link SVGRenderer#path}, {@link
* SVGRenderer#rect} or {@link SVGRenderer#text}.
*
* @function Highcharts.SVGRenderer#createElement
*
* @param {string} nodeName
* The node name, for example `rect`, `g` etc.
*
* @return {Highcharts.SVGElement}
* The generated SVGElement.
*/
SVGRenderer.prototype.createElement = function (nodeName) {
return new this.Element(this, nodeName);
};
/**
* Get converted radial gradient attributes according to the radial
* reference. Used internally from the {@link SVGElement#colorGradient}
* function.
*
* @private
* @function Highcharts.SVGRenderer#getRadialAttr
*/
SVGRenderer.prototype.getRadialAttr = function (radialReference, gradAttr) {
return {
cx: (radialReference[0] - radialReference[2] / 2) +
(gradAttr.cx || 0) * radialReference[2],
cy: (radialReference[1] - radialReference[2] / 2) +
(gradAttr.cy || 0) * radialReference[2],
r: (gradAttr.r || 0) * radialReference[2]
};
};
/**
* Create a drop shadow definition and return its id
*
* @private
* @function Highcharts.SVGRenderer#shadowDefinition
*
* @param {boolean|Highcharts.ShadowOptionsObject} [shadowOptions] The
* shadow options. If `true`, the default options are applied
*/
SVGRenderer.prototype.shadowDefinition = function (shadowOptions) {
var id = SVGRenderer_spreadArray([
"highcharts-drop-shadow-".concat(this.chartIndex)
],
Object.keys(shadowOptions)
.map(function (key) {
return "" + key + "-".concat(shadowOptions[key]);
}), true).join('-').toLowerCase().replace(/[^a-z\d\-]/g, ''), options = SVGRenderer_merge({
color: '#000000',
offsetX: 1,
offsetY: 1,
opacity: 0.15,
width: 5
}, shadowOptions);
if (!this.defs.element.querySelector("#".concat(id))) {
this.definition({
tagName: 'filter',
attributes: {
id: id,
filterUnits: options.filterUnits
},
children: this.getShadowFilterContent(options)
});
}
return id;
};
/**
* Get shadow filter content.
* NOTE! Overridden in es5 module for IE11 compatibility.
*
* @private
* @function Highcharts.SVGRenderer#getShadowFilterContent
*
* @param {ShadowOptionsObject} options
* The shadow options.
* @return {Array<AST.Node>}
* The shadow filter content.
*/
SVGRenderer.prototype.getShadowFilterContent = function (options) {
return [{
tagName: 'feDropShadow',
attributes: {
dx: options.offsetX,
dy: options.offsetY,
'flood-color': options.color,
// Tuned and modified to keep a preserve compatibility
// with the old settings
'flood-opacity': Math.min(options.opacity * 5, 1),
stdDeviation: options.width / 2
}
}];
};
/**
* Parse a simple HTML string into SVG tspans. Called internally when text
* is set on an SVGElement. The function supports a subset of HTML tags, CSS
* text features like `width`, `text-overflow`, `white-space`, and also
* attributes like `href` and `style`.
*
* @private
* @function Highcharts.SVGRenderer#buildText
*
* @param {Highcharts.SVGElement} wrapper
* The parent SVGElement.
*/
SVGRenderer.prototype.buildText = function (wrapper) {
new SVG_TextBuilder(wrapper).buildSVG();
};
/**
* Returns white for dark colors and black for bright colors, based on W3C's
* definition of [Relative luminance](
* https://www.w3.org/WAI/GL/wiki/Relative_luminance).
*
* @function Highcharts.SVGRenderer#getContrast
*
* @param {Highcharts.ColorString} color
* The color to get the contrast for.
*
* @return {Highcharts.ColorString}
* The contrast color, either `#000000` or `#FFFFFF`.
*/
SVGRenderer.prototype.getContrast = function (color) {
// #6216, #17273
var rgba = Color_Color.parse(color).rgba
.map(function (b8) {
var c = b8 / 255;
return c <= 0.03928 ?
c / 12.92 :
Math.pow((c + 0.055) / 1.055, 2.4);
});
// Relative luminance
var l = 0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2];
// Use white or black based on which provides more contrast
return 1.05 / (l + 0.05) > (l + 0.05) / 0.05 ? '#FFFFFF' : '#000000';
};
/**
* Create a button with preset states. Styles for the button can either be
* set as arguments, or a general theme for all buttons can be set by the
* `global.buttonTheme` option.
*
* @function Highcharts.SVGRenderer#button
*
* @param {string} text
* The text or HTML to draw.
*
* @param {number} x
* The x position of the button's left side.
*
* @param {number} y
* The y position of the button's top side.
*
* @param {Highcharts.EventCallbackFunction<Highcharts.SVGElement>} callback
* The function to execute on button click or touch.
*
* @param {Highcharts.SVGAttributes} [theme]
* SVG attributes for the normal state.
*
* @param {Highcharts.SVGAttributes} [hoverState]
* SVG attributes for the hover state.
*
* @param {Highcharts.SVGAttributes} [selectState]
* SVG attributes for the pressed state.
*
* @param {Highcharts.SVGAttributes} [disabledState]
* SVG attributes for the disabled state.
*
* @param {Highcharts.SymbolKeyValue} [shape=rect]
* The shape type.
*
* @param {boolean} [useHTML=false]
* Whether to use HTML to render the label.
*
* @return {Highcharts.SVGElement}
* The button element.
*/
SVGRenderer.prototype.button = function (text, x, y, callback, theme, hoverState, selectState, disabledState, shape, useHTML) {
if (theme === void 0) { theme = {}; }
var label = this.label(text,
x,
y,
shape,
void 0,
void 0,
useHTML,
void 0, 'button'),
styledMode = this.styledMode,
args = arguments;
var curState = 0;
theme = SVGRenderer_merge(SVGRenderer_defaultOptions.global.buttonTheme, theme);
// @todo Consider moving this to a lower level, like .attr
if (styledMode) {
delete theme.fill;
delete theme.stroke;
delete theme['stroke-width'];
}
var states = theme.states || {},
normalStyle = theme.style || {};
delete theme.states;
delete theme.style;
// Presentational
var stateAttribs = [
HTML_AST.filterUserAttributes(theme)
],
// The string type is a mistake, it is just for compliance with
// SVGAttribute and is not used in button theme.
stateStyles = [normalStyle];
if (!styledMode) {
['hover', 'select', 'disabled'].forEach(function (stateName, i) {
stateAttribs.push(SVGRenderer_merge(stateAttribs[0], HTML_AST.filterUserAttributes(args[i + 5] || states[stateName] || {})));
stateStyles.push(stateAttribs[i + 1].style);
delete stateAttribs[i + 1].style;
});
}
// Add the events. IE9 and IE10 need mouseover and mouseout to function
// (#667).
SVGRenderer_addEvent(label.element, isMS ? 'mouseover' : 'mouseenter', function () {
if (curState !== 3) {
label.setState(1);
}
});
SVGRenderer_addEvent(label.element, isMS ? 'mouseout' : 'mouseleave', function () {
if (curState !== 3) {
label.setState(curState);
}
});
label.setState = function (state) {
if (state === void 0) { state = 0; }
// Hover state is temporary, don't record it
if (state !== 1) {
label.state = curState = state;
}
// Update visuals
label
.removeClass(/highcharts-button-(normal|hover|pressed|disabled)/)
.addClass('highcharts-button-' +
['normal', 'hover', 'pressed', 'disabled'][state]);
if (!styledMode) {
label.attr(stateAttribs[state]);
var css_1 = stateStyles[state];
if (SVGRenderer_isObject(css_1)) {
label.css(css_1);
}
}
};
label.attr(stateAttribs[0]);
// Presentational attributes
if (!styledMode) {
label.css(SVGRenderer_extend({ cursor: 'default' }, normalStyle));
// HTML labels don't need to handle pointer events because click and
// mouseenter/mouseleave is bound to the underlying <g> element.
// Should this be reconsidered, we need more complex logic to share
// events between the <g> and its <div> counterpart, and avoid
// triggering mouseenter/mouseleave when hovering from one to the
// other (#17440).
if (useHTML) {
label.text.css({ pointerEvents: 'none' });
}
}
return label
.on('touchstart', function (e) { return e.stopPropagation(); })
.on('click', function (e) {
if (curState !== 3) {
callback.call(label, e);
}
});
};
/**
* Make a straight line crisper by not spilling out to neighbour pixels.
*
* @function Highcharts.SVGRenderer#crispLine
*
* @param {Highcharts.SVGPathArray} points
* The original points on the format `[['M', 0, 0], ['L', 100, 0]]`.
*
* @param {number} width
* The width of the line.
*
* @return {Highcharts.SVGPathArray}
* The original points array, but modified to render crisply.
*/
SVGRenderer.prototype.crispLine = function (points, width) {
var start = points[0],
end = points[1];
// Normalize to a crisp line
if (SVGRenderer_defined(start[1]) && start[1] === end[1]) {
start[1] = end[1] = SVGRenderer_crisp(start[1], width);
}
if (SVGRenderer_defined(start[2]) && start[2] === end[2]) {
start[2] = end[2] = SVGRenderer_crisp(start[2], width);
}
return points;
};
/**
* Draw a path, wraps the SVG `path` element.
*
* @sample highcharts/members/renderer-path-on-chart/
* Draw a path in a chart
* @sample highcharts/members/renderer-path/
* Draw a path independent from a chart
*
* @example
* let path = renderer.path(['M', 10, 10, 'L', 30, 30, 'z'])
* .attr({ stroke: '#ff00ff' })
* .add();
*
* @function Highcharts.SVGRenderer#path
*
* @param {Highcharts.SVGPathArray} [path]
* An SVG path definition in array form.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*
*/ /**
* Draw a path, wraps the SVG `path` element.
*
* @function Highcharts.SVGRenderer#path
*
* @param {Highcharts.SVGAttributes} [attribs]
* The initial attributes.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/
SVGRenderer.prototype.path = function (path) {
var attribs = (this.styledMode ? {} : {
fill: 'none'
});
if (SVGRenderer_isArray(path)) {
attribs.d = path;
}
else if (SVGRenderer_isObject(path)) { // Attributes
SVGRenderer_extend(attribs, path);
}
return this.createElement('path').attr(attribs);
};
/**
* Draw a circle, wraps the SVG `circle` element.
*
* @sample highcharts/members/renderer-circle/
* Drawing a circle
*
* @function Highcharts.SVGRenderer#circle
*
* @param {number} [x]
* The center x position.
*
* @param {number} [y]
* The center y position.
*
* @param {number} [r]
* The radius.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/ /**
* Draw a circle, wraps the SVG `circle` element.
*
* @function Highcharts.SVGRenderer#circle
*
* @param {Highcharts.SVGAttributes} [attribs]
* The initial attributes.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/
SVGRenderer.prototype.circle = function (x, y, r) {
var attribs = (SVGRenderer_isObject(x) ?
x :
typeof x === 'undefined' ? {} : { x: x, y: y, r: r }), wrapper = this.createElement('circle');
// Setting x or y translates to cx and cy
wrapper.xSetter = wrapper.ySetter = function (value, key, element) {
element.setAttribute('c' + key, value);
};
return wrapper.attr(attribs);
};
/**
* Draw and return an arc.
*
* @sample highcharts/members/renderer-arc/
* Drawing an arc
*
* @function Highcharts.SVGRenderer#arc
*
* @param {number} [x=0]
* Center X position.
*
* @param {number} [y=0]
* Center Y position.
*
* @param {number} [r=0]
* The outer radius' of the arc.
*
* @param {number} [innerR=0]
* Inner radius like used in donut charts.
*
* @param {number} [start=0]
* The starting angle of the arc in radians, where 0 is to the right and
* `-Math.PI/2` is up.
*
* @param {number} [end=0]
* The ending angle of the arc in radians, where 0 is to the right and
* `-Math.PI/2` is up.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/ /**
* Draw and return an arc. Overloaded function that takes arguments object.
*
* @function Highcharts.SVGRenderer#arc
*
* @param {Highcharts.SVGAttributes} attribs
* Initial SVG attributes.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/
SVGRenderer.prototype.arc = function (x, y, r, innerR, start, end) {
var options;
if (SVGRenderer_isObject(x)) {
options = x;
y = options.y;
r = options.r;
innerR = options.innerR;
start = options.start;
end = options.end;
x = options.x;
}
else {
options = { innerR: innerR, start: start, end: end };
}
// Arcs are defined as symbols for the ability to set
// attributes in attr and animate
var arc = this.symbol('arc',
x,
y,
r,
r,
options);
arc.r = r; // #959
return arc;
};
/**
* Draw and return a rectangle.
*
* @function Highcharts.SVGRenderer#rect
*
* @param {number} [x]
* Left position.
*
* @param {number} [y]
* Top position.
*
* @param {number} [width]
* Width of the rectangle.
*
* @param {number} [height]
* Height of the rectangle.
*
* @param {number} [r]
* Border corner radius.
*
* @param {number} [strokeWidth]
* A stroke width can be supplied to allow crisp drawing.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/ /**
* Draw and return a rectangle.
*
* @sample highcharts/members/renderer-rect-on-chart/
* Draw a rectangle in a chart
* @sample highcharts/members/renderer-rect/
* Draw a rectangle independent from a chart
*
* @function Highcharts.SVGRenderer#rect
*
* @param {Highcharts.SVGAttributes} [attributes]
* General SVG attributes for the rectangle.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/
SVGRenderer.prototype.rect = function (x, y, width, height, r, strokeWidth) {
var attribs = (SVGRenderer_isObject(x) ?
x :
typeof x === 'undefined' ?
{} :
{
x: x,
y: y,
r: r,
width: Math.max(width || 0, 0),
height: Math.max(height || 0, 0)
}),
wrapper = this.createElement('rect');
if (!this.styledMode) {
if (typeof strokeWidth !== 'undefined') {
attribs['stroke-width'] = strokeWidth;
SVGRenderer_extend(attribs, wrapper.crisp(attribs));
}
attribs.fill = 'none';
}
wrapper.rSetter = function (value, _key, element) {
wrapper.r = value;
SVGRenderer_attr(element, {
rx: value,
ry: value
});
};
wrapper.rGetter = function () {
return wrapper.r || 0;
};
return wrapper.attr(attribs);
};
/**
* Draw and return a rectangle with advanced corner rounding options.
*
* @function Highcharts.SVGRenderer#roundedRect
*
* @param {Highcharts.SVGAttributes} attribs
* Attributes
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/
SVGRenderer.prototype.roundedRect = function (attribs) {
return this.symbol('roundedRect').attr(attribs);
};
/**
* Resize the {@link SVGRenderer#box} and re-align all aligned child
* elements.
*
* @sample highcharts/members/renderer-g/
* Show and hide grouped objects
*
* @function Highcharts.SVGRenderer#setSize
*
* @param {number} width
* The new pixel width.
*
* @param {number} height
* The new pixel height.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animate=true]
* Whether and how to animate.
*/
SVGRenderer.prototype.setSize = function (width, height, animate) {
var renderer = this;
renderer.width = width;
renderer.height = height;
renderer.boxWrapper.animate({
width: width,
height: height
}, {
step: function () {
this.attr({
viewBox: '0 0 ' + this.attr('width') + ' ' +
this.attr('height')
});
},
duration: SVGRenderer_pick(animate, true) ? void 0 : 0
});
renderer.alignElements();
};
/**
* Create and return an svg group element. Child
* {@link Highcharts.SVGElement} objects are added to the group by using the
* group as the first parameter in {@link Highcharts.SVGElement#add|add()}.
*
* @function Highcharts.SVGRenderer#g
*
* @param {string} [name]
* The group will be given a class name of `highcharts-{name}`. This
* can be used for styling and scripting.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/
SVGRenderer.prototype.g = function (name) {
var elem = this.createElement('g');
return name ?
elem.attr({ 'class': 'highcharts-' + name }) :
elem;
};
/**
* Display an image.
*
* @sample highcharts/members/renderer-image-on-chart/
* Add an image in a chart
* @sample highcharts/members/renderer-image/
* Add an image independent of a chart
*
* @function Highcharts.SVGRenderer#image
*
* @param {string} href
* The image source.
*
* @param {number} [x]
* The X position.
*
* @param {number} [y]
* The Y position.
*
* @param {number} [width]
* The image width. If omitted, it defaults to the image file width.
*
* @param {number} [height]
* The image height. If omitted it defaults to the image file
* height.
*
* @param {Function} [onload]
* Event handler for image load.
*
* @return {Highcharts.SVGElement}
* The generated wrapper element.
*/
SVGRenderer.prototype.image = function (href, x, y, width, height, onload) {
var attribs = { preserveAspectRatio: 'none' };
// Optional properties (#11756)
if (SVGRenderer_isNumber(x)) {
attribs.x = x;
}
if (SVGRenderer_isNumber(y)) {
attribs.y = y;
}
if (SVGRenderer_isNumber(width)) {
attribs.width = width;
}
if (SVGRenderer_isNumber(height)) {
attribs.height = height;
}
var elemWrapper = this.createElement('image').attr(attribs),
onDummyLoad = function (e) {
elemWrapper.attr({ href: href });
onload.call(elemWrapper, e);
};
// Add load event if supplied
if (onload) {
// We have to use a dummy HTML image since IE support for SVG image
// load events is very buggy. First set a transparent src, wait for
// dummy to load, and then add the real src to the SVG image.
elemWrapper.attr({
/* eslint-disable-next-line max-len */
href: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
});
var dummy = new SVGRenderer_win.Image();
SVGRenderer_addEvent(dummy, 'load', onDummyLoad);
dummy.src = href;
if (dummy.complete) {
onDummyLoad({});
}
}
else {
elemWrapper.attr({ href: href });
}
return elemWrapper;
};
/**
* Draw a symbol out of pre-defined shape paths from
* {@link SVGRenderer#symbols}.
* It is used in Highcharts for point makers, which cake a `symbol` option,
* and label and button backgrounds like in the tooltip and stock flags.
*
* @function Highcharts.SVGRenderer#symbol
*
* @param {string} symbol
* The symbol name.
*
* @param {number} [x]
* The X coordinate for the top left position.
*
* @param {number} [y]
* The Y coordinate for the top left position.
*
* @param {number} [width]
* The pixel width.
*
* @param {number} [height]
* The pixel height.
*
* @param {Highcharts.SymbolOptionsObject} [options]
* Additional options, depending on the actual symbol drawn.
*
* @return {Highcharts.SVGElement}
* SVG symbol.
*/
SVGRenderer.prototype.symbol = function (symbol, x, y, width, height, options) {
var ren = this, imageRegex = /^url\((.*?)\)$/, isImage = imageRegex.test(symbol), sym = (!isImage && (this.symbols[symbol] ? symbol : 'circle')),
// Get the symbol definition function
symbolFn = (sym && this.symbols[sym]);
var obj,
path,
imageSrc,
centerImage;
if (symbolFn) {
// Check if there's a path defined for this symbol
if (typeof x === 'number') {
path = symbolFn.call(this.symbols, x || 0, y || 0, width || 0, height || 0, options);
}
obj = this.path(path);
if (!ren.styledMode) {
obj.attr('fill', 'none');
}
// Expando properties for use in animate and attr
SVGRenderer_extend(obj, {
symbolName: (sym || void 0),
x: x,
y: y,
width: width,
height: height
});
if (options) {
SVGRenderer_extend(obj, options);
}
// Image symbols
}
else if (isImage) {
imageSrc = symbol.match(imageRegex)[1];
// Create the image synchronously, add attribs async
var img_1 = obj = this.image(imageSrc);
// The image width is not always the same as the symbol width. The
// image may be centered within the symbol, as is the case when
// image shapes are used as label backgrounds, for example in flags.
img_1.imgwidth = SVGRenderer_pick(options && options.width, symbolSizes[imageSrc] && symbolSizes[imageSrc].width);
img_1.imgheight = SVGRenderer_pick(options && options.height, symbolSizes[imageSrc] && symbolSizes[imageSrc].height);
/**
* Set the size and position
*/
centerImage = function (obj) { return obj.attr({
width: obj.width,
height: obj.height
}); };
/**
* Width and height setters that take both the image's physical size
* and the label size into consideration, and translates the image
* to center within the label.
*/
['width', 'height'].forEach(function (key) {
img_1["" + key + "Setter"] = function (value, key) {
this[key] = value;
var _a = this,
alignByTranslate = _a.alignByTranslate,
element = _a.element,
width = _a.width,
height = _a.height,
imgwidth = _a.imgwidth,
imgheight = _a.imgheight,
imgSize = key === 'width' ? imgwidth : imgheight;
var scale = 1;
// Scale and center the image within its container. The name
// `backgroundSize` is taken from the CSS spec, but the
// value `within` is made up. Other possible values in the
// spec, `cover` and `contain`, can be implemented if
// needed.
if (options &&
options.backgroundSize === 'within' &&
width &&
height &&
imgwidth &&
imgheight) {
scale = Math.min(width / imgwidth, height / imgheight);
// Update both width and height to keep the ratio
// correct (#17315)
SVGRenderer_attr(element, {
width: Math.round(imgwidth * scale),
height: Math.round(imgheight * scale)
});
}
else if (element && imgSize) {
element.setAttribute(key, imgSize);
}
if (!alignByTranslate && imgwidth && imgheight) {
this.translate(((width || 0) - (imgwidth * scale)) / 2, ((height || 0) - (imgheight * scale)) / 2);
}
};
});
if (SVGRenderer_defined(x)) {
img_1.attr({
x: x,
y: y
});
}
img_1.isImg = true;
img_1.symbolUrl = symbol;
if (SVGRenderer_defined(img_1.imgwidth) && SVGRenderer_defined(img_1.imgheight)) {
centerImage(img_1);
}
else {
// Initialize image to be 0 size so export will still function
// if there's no cached sizes.
img_1.attr({ width: 0, height: 0 });
// Create a dummy JavaScript image to get the width and height.
SVGRenderer_createElement('img', {
onload: function () {
var chart = SVGRenderer_charts[ren.chartIndex];
// Special case for SVGs on IE11, the width is not
// accessible until the image is part of the DOM
// (#2854).
if (this.width === 0) {
SVGRenderer_css(this, {
position: 'absolute',
top: '-999em'
});
SVGRenderer_doc.body.appendChild(this);
}
// Center the image
symbolSizes[imageSrc] = {
width: this.width,
height: this.height
};
img_1.imgwidth = this.width;
img_1.imgheight = this.height;
if (img_1.element) {
centerImage(img_1);
}
// Clean up after #2854 workaround.
if (this.parentNode) {
this.parentNode.removeChild(this);
}
// Fire the load event when all external images are
// loaded
ren.imgCount--;
if (!ren.imgCount && chart && !chart.hasLoaded) {
chart.onload();
}
},
src: imageSrc
});
this.imgCount++;
}
}
return obj;
};
/**
* Define a clipping rectangle. The clipping rectangle is later applied
* to {@link SVGElement} objects through the {@link SVGElement#clip}
* function.
*
* This function is deprecated as of v11.2. Instead, use a regular shape
* (`rect`, `path` etc), and the `SVGElement.clipTo` function.
*
* @example
* let circle = renderer.circle(100, 100, 100)
* .attr({ fill: 'red' })
* .add();
* let clipRect = renderer.clipRect(100, 100, 100, 100);
*
* // Leave only the lower right quarter visible
* circle.clip(clipRect);
*
* @deprecated
*
* @function Highcharts.SVGRenderer#clipRect
*
* @param {number} [x]
*
* @param {number} [y]
*
* @param {number} [width]
*
* @param {number} [height]
*
* @return {Highcharts.ClipRectElement}
* A clipping rectangle.
*/
SVGRenderer.prototype.clipRect = function (x, y, width, height) {
return this.rect(x, y, width, height, 0);
};
/**
* Draw text. The text can contain a subset of HTML, like spans and anchors
* and some basic text styling of these. For more advanced features like
* border and background, use {@link Highcharts.SVGRenderer#label} instead.
* To update the text after render, run `text.attr({ text: 'New text' })`.
*
* @sample highcharts/members/renderer-text-on-chart/
* Annotate the chart freely
* @sample highcharts/members/renderer-on-chart/
* Annotate with a border and in response to the data
* @sample highcharts/members/renderer-text/
* Formatted text
*
* @function Highcharts.SVGRenderer#text
*
* @param {string} [str]
* The text of (subset) HTML to draw.
*
* @param {number} [x]
* The x position of the text's lower left corner.
*
* @param {number} [y]
* The y position of the text's lower left corner.
*
* @param {boolean} [useHTML=false]
* Use HTML to render the text.
*
* @return {Highcharts.SVGElement}
* The text object.
*/
SVGRenderer.prototype.text = function (str, x, y, useHTML) {
var renderer = this,
attribs = {};
if (useHTML && (renderer.allowHTML || !renderer.forExport)) {
return renderer.html(str, x, y);
}
attribs.x = Math.round(x || 0); // X always needed for line-wrap logic
if (y) {
attribs.y = Math.round(y);
}
if (SVGRenderer_defined(str)) {
attribs.text = str;
}
var wrapper = renderer.createElement('text').attr(attribs);
if (!useHTML || (renderer.forExport && !renderer.allowHTML)) {
wrapper.xSetter = function (value, key, element) {
var tspans = element.getElementsByTagName('tspan'),
parentVal = element.getAttribute(key);
for (var i = 0, tspan = void 0; i < tspans.length; i++) {
tspan = tspans[i];
// If the x values are equal, the tspan represents a line
// break
if (tspan.getAttribute(key) === parentVal) {
tspan.setAttribute(key, value);
}
}
element.setAttribute(key, value);
};
}
return wrapper;
};
/**
* Utility to return the baseline offset and total line height from the font
* size.
*
* @function Highcharts.SVGRenderer#fontMetrics
*
* @param {Highcharts.SVGElement|Highcharts.SVGDOMElement|number} [element]
* The element to inspect for a current font size. If a number is
* given, it's used as a fall back for direct font size in pixels.
*
* @return {Highcharts.FontMetricsObject}
* The font metrics.
*/
SVGRenderer.prototype.fontMetrics = function (element) {
var f = SVGRenderer_pInt(SVG_SVGElement.prototype.getStyle.call(element, 'font-size') || 0);
// Empirical values found by comparing font size and bounding box
// height. Applies to the default font family.
// https://jsfiddle.net/highcharts/7xvn7/
var h = f < 24 ? f + 3 : Math.round(f * 1.2),
b = Math.round(h * 0.8);
return {
// Line height
h: h,
// Baseline
b: b,
// Font size
f: f
};
};
/**
* Correct X and Y positioning of a label for rotation (#1764).
*
* @private
* @function Highcharts.SVGRenderer#rotCorr
*/
SVGRenderer.prototype.rotCorr = function (baseline, rotation, alterY) {
var y = baseline;
if (rotation && alterY) {
y = Math.max(y * Math.cos(rotation * SVGRenderer_deg2rad), 4);
}
return {
x: (-baseline / 3) * Math.sin(rotation * SVGRenderer_deg2rad),
y: y
};
};
/**
* Compatibility function to convert the legacy one-dimensional path array
* into an array of segments.
*
* It is used in maps to parse the `path` option, and in SVGRenderer.dSetter
* to support legacy paths from demos.
*
* @private
* @function Highcharts.SVGRenderer#pathToSegments
*/
SVGRenderer.prototype.pathToSegments = function (path) {
var ret = [];
var segment = [];
var commandLength = {
A: 8,
C: 7,
H: 2,
L: 3,
M: 3,
Q: 5,
S: 5,
T: 3,
V: 2
};
// Short, non-typesafe parsing of the one-dimensional array. It splits
// the path on any string. This is not type checked against the tuple
// types, but is shorter, and doesn't require specific checks for any
// command type in SVG.
for (var i = 0; i < path.length; i++) {
// Command skipped, repeat previous or insert L/l for M/m
if (SVGRenderer_isString(segment[0]) &&
SVGRenderer_isNumber(path[i]) &&
segment.length === commandLength[(segment[0].toUpperCase())]) {
path.splice(i, 0, segment[0].replace('M', 'L').replace('m', 'l'));
}
// Split on string
if (typeof path[i] === 'string') {
if (segment.length) {
ret.push(segment.slice(0));
}
segment.length = 0;
}
segment.push(path[i]);
}
ret.push(segment.slice(0));
return ret;
/*
// Fully type-safe version where each tuple type is checked. The
// downside is filesize and a lack of flexibility for unsupported
// commands
const ret: SVGPath = [],
commands = {
A: 7,
C: 6,
H: 1,
L: 2,
M: 2,
Q: 4,
S: 4,
T: 2,
V: 1,
Z: 0
};
let i = 0,
lastI = 0,
lastCommand;
while (i < path.length) {
const item = path[i];
let command;
if (typeof item === 'string') {
command = item;
i += 1;
} else {
command = lastCommand || 'M';
}
// Upper case
const commandUC = command.toUpperCase();
if (commandUC in commands) {
// No numeric parameters
if (command === 'Z' || command === 'z') {
ret.push([command]);
// One numeric parameter
} else {
const val0 = path[i];
if (typeof val0 === 'number') {
// Horizontal line to
if (command === 'H' || command === 'h') {
ret.push([command, val0]);
i += 1;
// Vertical line to
} else if (command === 'V' || command === 'v') {
ret.push([command, val0]);
i += 1;
// Two numeric parameters
} else {
const val1 = path[i + 1];
if (typeof val1 === 'number') {
// lineTo
if (command === 'L' || command === 'l') {
ret.push([command, val0, val1]);
i += 2;
// moveTo
} else if (command === 'M' || command === 'm') {
ret.push([command, val0, val1]);
i += 2;
// Smooth quadratic bezier
} else if (command === 'T' || command === 't') {
ret.push([command, val0, val1]);
i += 2;
// Four numeric parameters
} else {
const val2 = path[i + 2],
val3 = path[i + 3];
if (
typeof val2 === 'number' &&
typeof val3 === 'number'
) {
// Quadratic bezier to
if (
command === 'Q' ||
command === 'q'
) {
ret.push([
command,
val0,
val1,
val2,
val3
]);
i += 4;
// Smooth cubic bezier to
} else if (
command === 'S' ||
command === 's'
) {
ret.push([
command,
val0,
val1,
val2,
val3
]);
i += 4;
// Six numeric parameters
} else {
const val4 = path[i + 4],
val5 = path[i + 5];
if (
typeof val4 === 'number' &&
typeof val5 === 'number'
) {
// Curve to
if (
command === 'C' ||
command === 'c'
) {
ret.push([
command,
val0,
val1,
val2,
val3,
val4,
val5
]);
i += 6;
// Seven numeric parameters
} else {
const val6 = path[i + 6];
// Arc to
if (
typeof val6 ===
'number' &&
(
command === 'A' ||
command === 'a'
)
) {
ret.push([
command,
val0,
val1,
val2,
val3,
val4,
val5,
val6
]);
i += 7;
}
}
}
}
}
}
}
}
}
}
}
// An unmarked command following a moveTo is a lineTo
lastCommand = command === 'M' ? 'L' : command;
if (i === lastI) {
break;
}
lastI = i;
}
return ret;
*/
};
/**
* Draw a label, which is an extended text element with support for border
* and background. Highcharts creates a `g` element with a text and a `path`
* or `rect` inside, to make it behave somewhat like a HTML div. Border and
* background are set through `stroke`, `stroke-width` and `fill` attributes
* using the {@link Highcharts.SVGElement#attr|attr} method. To update the
* text after render, run `label.attr({ text: 'New text' })`.
*
* @sample highcharts/members/renderer-label-on-chart/
* A label on the chart
*
* @function Highcharts.SVGRenderer#label
*
* @param {string} str
* The initial text string or (subset) HTML to render.
*
* @param {number} x
* The x position of the label's left side.
*
* @param {number} [y]
* The y position of the label's top side or baseline, depending on
* the `baseline` parameter.
*
* @param {string} [shape='rect']
* The shape of the label's border/background, if any. Defaults to
* `rect`. Other possible values are `callout` or other shapes
* defined in {@link Highcharts.SVGRenderer#symbols}.
*
* @param {number} [anchorX]
* In case the `shape` has a pointer, like a flag, this is the
* coordinates it should be pinned to.
*
* @param {number} [anchorY]
* In case the `shape` has a pointer, like a flag, this is the
* coordinates it should be pinned to.
*
* @param {boolean} [useHTML=false]
* Whether to use HTML to render the label.
*
* @param {boolean} [baseline=false]
* Whether to position the label relative to the text baseline,
* like {@link Highcharts.SVGRenderer#text|renderer.text}, or to the
* upper border of the rectangle.
*
* @param {string} [className]
* Class name for the group.
*
* @return {Highcharts.SVGElement}
* The generated label.
*/
SVGRenderer.prototype.label = function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className) {
return new SVG_SVGLabel(this, str, x, y, shape, anchorX, anchorY, useHTML, baseline, className);
};
/**
* Re-align all aligned elements.
*
* @private
* @function Highcharts.SVGRenderer#alignElements
*/
SVGRenderer.prototype.alignElements = function () {
this.alignedObjects.forEach(function (el) { return el.align(); });
};
return SVGRenderer;
}());
SVGRenderer_extend(SVGRenderer.prototype, {
/**
* A pointer to the renderer's associated Element class.
*
* @name Highcharts.SVGRenderer#Element
* @type {Highcharts.SVGElement}
*/
Element: SVG_SVGElement,
SVG_NS: SVGRenderer_SVG_NS,
/**
* A collection of characters mapped to HTML entities. When `useHTML` on an
* element is true, these entities will be rendered correctly by HTML. In
* the SVG pseudo-HTML, they need to be unescaped back to simple characters,
* so for example `<` will render as `<`.
*
* @example
* // Add support for unescaping quotes
* Highcharts.SVGRenderer.prototype.escapes['"'] = '"';
*
* @name Highcharts.SVGRenderer#escapes
* @type {Highcharts.Dictionary<string>}
*/
escapes: {
'&': '&',
'<': '<',
'>': '>',
"'": ''', // eslint-disable-line quotes
'"': '"'
},
/**
* An extendable collection of functions for defining symbol paths.
*
* @name Highcharts.SVGRenderer#symbols
* @type {Highcharts.SymbolDictionary}
*/
symbols: SVG_Symbols,
/**
* Dummy function for plugins, called every time the renderer is updated.
* Prior to Highcharts 5, this was used for the canvg renderer.
*
* @deprecated
* @function Highcharts.SVGRenderer#draw
*/
draw: noop
});
/* *
*
* Registry
*
* */
Renderer_RendererRegistry.registerRendererType('svg', SVGRenderer, true);
/* *
*
* Export Default
*
* */
/* harmony default export */ var SVG_SVGRenderer = (SVGRenderer);
/* *
*
* API Declarations
*
* */
/**
* A clipping rectangle that can be applied to one or more {@link SVGElement}
* instances. It is instantiated with the {@link SVGRenderer#clipRect} function
* and applied with the {@link SVGElement#clip} function.
*
* @example
* let circle = renderer.circle(100, 100, 100)
* .attr({ fill: 'red' })
* .add();
* let clipRect = renderer.clipRect(100, 100, 100, 100);
*
* // Leave only the lower right quarter visible
* circle.clip(clipRect);
*
* @typedef {Highcharts.SVGElement} Highcharts.ClipRectElement
*/
/**
* The font metrics.
*
* @interface Highcharts.FontMetricsObject
*/ /**
* The baseline relative to the top of the box.
*
* @name Highcharts.FontMetricsObject#b
* @type {number}
*/ /**
* The font size.
*
* @name Highcharts.FontMetricsObject#f
* @type {number}
*/ /**
* The line height.
*
* @name Highcharts.FontMetricsObject#h
* @type {number}
*/
/**
* An object containing `x` and `y` properties for the position of an element.
*
* @interface Highcharts.PositionObject
*/ /**
* X position of the element.
* @name Highcharts.PositionObject#x
* @type {number}
*/ /**
* Y position of the element.
* @name Highcharts.PositionObject#y
* @type {number}
*/
/**
* A rectangle.
*
* @interface Highcharts.RectangleObject
*/ /**
* Height of the rectangle.
* @name Highcharts.RectangleObject#height
* @type {number}
*/ /**
* Width of the rectangle.
* @name Highcharts.RectangleObject#width
* @type {number}
*/ /**
* Horizontal position of the rectangle.
* @name Highcharts.RectangleObject#x
* @type {number}
*/ /**
* Vertical position of the rectangle.
* @name Highcharts.RectangleObject#y
* @type {number}
*/
/**
* The shadow options.
*
* @interface Highcharts.ShadowOptionsObject
*/ /**
* The shadow color.
* @name Highcharts.ShadowOptionsObject#color
* @type {Highcharts.ColorString|undefined}
* @default ${palette.neutralColor100}
*/ /**
* The horizontal offset from the element.
*
* @name Highcharts.ShadowOptionsObject#offsetX
* @type {number|undefined}
* @default 1
*/ /**
* The vertical offset from the element.
* @name Highcharts.ShadowOptionsObject#offsetY
* @type {number|undefined}
* @default 1
*/ /**
* The shadow opacity.
*
* @name Highcharts.ShadowOptionsObject#opacity
* @type {number|undefined}
* @default 0.15
*/ /**
* The shadow width or distance from the element.
* @name Highcharts.ShadowOptionsObject#width
* @type {number|undefined}
* @default 3
*/
/**
* @interface Highcharts.SizeObject
*/ /**
* @name Highcharts.SizeObject#height
* @type {number}
*/ /**
* @name Highcharts.SizeObject#width
* @type {number}
*/
/**
* Array of path commands, that will go into the `d` attribute of an SVG
* element.
*
* @typedef {Array<(Array<Highcharts.SVGPathCommand>|Array<Highcharts.SVGPathCommand,number>|Array<Highcharts.SVGPathCommand,number,number>|Array<Highcharts.SVGPathCommand,number,number,number,number>|Array<Highcharts.SVGPathCommand,number,number,number,number,number,number>|Array<Highcharts.SVGPathCommand,number,number,number,number,number,number,number>)>} Highcharts.SVGPathArray
*/
/**
* Possible path commands in an SVG path array. Valid values are `A`, `C`, `H`,
* `L`, `M`, `Q`, `S`, `T`, `V`, `Z`.
*
* @typedef {string} Highcharts.SVGPathCommand
* @validvalue ["a","c","h","l","m","q","s","t","v","z","A","C","H","L","M","Q","S","T","V","Z"]
*/
/**
* An extendable collection of functions for defining symbol paths. Symbols are
* used internally for point markers, button and label borders and backgrounds,
* or custom shapes. Extendable by adding to {@link SVGRenderer#symbols}.
*
* @interface Highcharts.SymbolDictionary
*/ /**
* @name Highcharts.SymbolDictionary#[key:string]
* @type {Function|undefined}
*/ /**
* @name Highcharts.SymbolDictionary#arc
* @type {Function|undefined}
*/ /**
* @name Highcharts.SymbolDictionary#callout
* @type {Function|undefined}
*/ /**
* @name Highcharts.SymbolDictionary#circle
* @type {Function|undefined}
*/ /**
* @name Highcharts.SymbolDictionary#diamond
* @type {Function|undefined}
*/ /**
* @name Highcharts.SymbolDictionary#square
* @type {Function|undefined}
*/ /**
* @name Highcharts.SymbolDictionary#triangle
* @type {Function|undefined}
*/
/**
* Can be one of `arc`, `callout`, `circle`, `diamond`, `square`, `triangle`,
* and `triangle-down`. Symbols are used internally for point markers, button
* and label borders and backgrounds, or custom shapes. Extendable by adding to
* {@link SVGRenderer#symbols}.
*
* @typedef {"arc"|"callout"|"circle"|"diamond"|"square"|"triangle"|"triangle-down"} Highcharts.SymbolKeyValue
*/
/**
* Additional options, depending on the actual symbol drawn.
*
* @interface Highcharts.SymbolOptionsObject
*/ /**
* The anchor X position for the `callout` symbol. This is where the chevron
* points to.
*
* @name Highcharts.SymbolOptionsObject#anchorX
* @type {number|undefined}
*/ /**
* The anchor Y position for the `callout` symbol. This is where the chevron
* points to.
*
* @name Highcharts.SymbolOptionsObject#anchorY
* @type {number|undefined}
*/ /**
* The end angle of an `arc` symbol.
*
* @name Highcharts.SymbolOptionsObject#end
* @type {number|undefined}
*/ /**
* Whether to draw `arc` symbol open or closed.
*
* @name Highcharts.SymbolOptionsObject#open
* @type {boolean|undefined}
*/ /**
* The radius of an `arc` symbol, or the border radius for the `callout` symbol.
*
* @name Highcharts.SymbolOptionsObject#r
* @type {number|undefined}
*/ /**
* The start angle of an `arc` symbol.
*
* @name Highcharts.SymbolOptionsObject#start
* @type {number|undefined}
*/
(''); // Keeps doclets above in transpiled file
;// ./code/es5/es-modules/Core/Renderer/HTML/HTMLElement.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var HTMLElement_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var composed = Core_Globals.composed;
var HTMLElement_attr = Core_Utilities.attr, HTMLElement_css = Core_Utilities.css, HTMLElement_createElement = Core_Utilities.createElement, HTMLElement_defined = Core_Utilities.defined, HTMLElement_extend = Core_Utilities.extend, HTMLElement_getAlignFactor = Core_Utilities.getAlignFactor, HTMLElement_isNumber = Core_Utilities.isNumber, HTMLElement_pInt = Core_Utilities.pInt, HTMLElement_pushUnique = Core_Utilities.pushUnique;
/**
* The opacity and visibility properties are set as attributes on the main
* element and SVG groups, and as identical CSS properties on the HTML element
* and the ancestry divs. (#3542)
*
* @private
*/
function commonSetter(value, key, elem) {
var _a;
var style = ((_a = this.div) === null || _a === void 0 ? void 0 : _a.style) || elem.style;
SVG_SVGElement.prototype["" + key + "Setter"].call(this, value, key, elem);
if (style) {
style[key] = value;
}
}
/**
* Decorate each SVG group in the ancestry line. Each SVG `g` element that
* contains children with useHTML, will receive a `div` element counterpart to
* contain the HTML span. These div elements are translated and styled like
* original `g` counterparts.
*
* @private
*/
var decorateSVGGroup = function (g, container) {
var _a;
if (!g.div) {
var className = HTMLElement_attr(g.element, 'class'),
cssProto_1 = g.css;
// Create the parallel HTML group
var div_1 = HTMLElement_createElement('div', className ? { className: className } : void 0, __assign(__assign({
// Add HTML specific styles
position: 'absolute', left: "" + (g.translateX || 0) + "px", top: "" + (g.translateY || 0) + "px" }, g.styles), {
// Add g attributes that correspond to CSS
display: g.display, opacity: g.opacity, visibility: g.visibility }),
// The top group is appended to container
((_a = g.parentGroup) === null || _a === void 0 ? void 0 : _a.div) || container);
g.classSetter = function (value, key, element) {
element.setAttribute('class', value);
div_1.className = value;
};
/**
* Common translate setter for X and Y on the HTML group.
*
* Reverted the fix for #6957 due to positioning problems and offline
* export (#7254, #7280, #7529)
* @private
*/
g.translateXSetter = g.translateYSetter = function (value, key) {
g[key] = value;
div_1.style[key === 'translateX' ? 'left' : 'top'] = "" + value + "px";
g.doTransform = true;
};
g.opacitySetter = g.visibilitySetter = commonSetter;
// Extend the parent group's css function by updating the parallel div
// counterpart with the same style.
g.css = function (styles) {
// Call the base css method. The `parentGroup` can be either an
// SVGElement or an SVGLabel, in which the css method is extended
// (#19200).
cssProto_1.call(g, styles);
// #6794
if (styles.cursor) {
div_1.style.cursor = styles.cursor;
}
// #18821
if (styles.pointerEvents) {
div_1.style.pointerEvents = styles.pointerEvents;
}
return g;
};
// Event handling
g.on = function () {
SVG_SVGElement.prototype.on.apply({
element: div_1,
onEvents: g.onEvents
}, arguments);
return g;
};
g.div = div_1;
}
return g.div;
};
/* *
*
* Class
*
* */
var HTMLElement = /** @class */ (function (_super) {
HTMLElement_extends(HTMLElement, _super);
/* *
*
* Functions
*
* */
function HTMLElement(renderer, nodeName) {
var _this = _super.call(this,
renderer,
nodeName) || this;
_this.css(__assign({ position: 'absolute' }, (renderer.styledMode ? {} : {
fontFamily: renderer.style.fontFamily,
fontSize: renderer.style.fontSize
})));
return _this;
}
/* *
*
* Static Functions
*
* */
/**
* Compose
* @private
*/
HTMLElement.compose = function (SVGRendererClass) {
if (HTMLElement_pushUnique(composed, this.compose)) {
/**
* Create a HTML text node. This is used by the SVG renderer `text`
* and `label` functions through the `useHTML` parameter.
*
* @private
*/
SVGRendererClass.prototype.html = function (str, x, y) {
return new HTMLElement(this, 'span')
// Set the default attributes
.attr({
text: str,
x: Math.round(x),
y: Math.round(y)
});
};
}
};
/**
* Get the correction in X and Y positioning as the element is rotated.
* @private
*/
HTMLElement.prototype.getSpanCorrection = function (width, baseline, alignCorrection) {
this.xCorr = -width * alignCorrection;
this.yCorr = -baseline;
};
/**
* Apply CSS to HTML elements. This is used in text within SVG rendering.
* @private
*/
HTMLElement.prototype.css = function (styles) {
var element = this.element,
// When setting or unsetting the width style, we need to update
// transform (#8809)
isSettingWidth = (element.tagName === 'SPAN' &&
styles &&
'width' in styles),
textWidth = isSettingWidth && styles.width;
var doTransform;
if (isSettingWidth) {
delete styles.width;
this.textWidth = HTMLElement_pInt(textWidth) || void 0;
doTransform = true;
}
// Some properties require other properties to be set
if ((styles === null || styles === void 0 ? void 0 : styles.textOverflow) === 'ellipsis') {
styles.overflow = 'hidden';
}
if (styles === null || styles === void 0 ? void 0 : styles.lineClamp) {
styles.display = '-webkit-box';
styles.WebkitLineClamp = styles.lineClamp;
styles.WebkitBoxOrient = 'vertical';
styles.overflow = 'hidden';
}
// SVG natively supports setting font size as numbers. With HTML, the
// font size should behave in the same way (#21624).
if (HTMLElement_isNumber(Number(styles === null || styles === void 0 ? void 0 : styles.fontSize))) {
styles.fontSize = styles.fontSize + 'px';
}
HTMLElement_extend(this.styles, styles);
HTMLElement_css(element, styles);
// Now that all styles are applied, to the transform
if (doTransform) {
this.updateTransform();
}
return this;
};
/**
* The useHTML method for calculating the bounding box based on offsets.
* Called internally from the `SVGElement.getBBox` function and subsequently
* rotated.
*
* @private
*/
HTMLElement.prototype.htmlGetBBox = function () {
var element = this.element;
return {
x: element.offsetLeft,
y: element.offsetTop,
width: element.offsetWidth,
height: element.offsetHeight
};
};
/**
* Batch update styles and attributes related to transform
*
* @private
*/
HTMLElement.prototype.updateTransform = function () {
var _this = this;
var _a;
// Aligning non added elements is expensive
if (!this.added) {
this.alignOnAdd = true;
return;
}
var _b = this, element = _b.element, renderer = _b.renderer, rotation = _b.rotation, rotationOriginX = _b.rotationOriginX, rotationOriginY = _b.rotationOriginY, scaleX = _b.scaleX, scaleY = _b.scaleY, styles = _b.styles, _c = _b.textAlign, textAlign = _c === void 0 ? 'left' : _c, textWidth = _b.textWidth, _d = _b.translateX, translateX = _d === void 0 ? 0 : _d, _e = _b.translateY, translateY = _e === void 0 ? 0 : _e, _f = _b.x, x = _f === void 0 ? 0 : _f, _g = _b.y, y = _g === void 0 ? 0 : _g, _h = styles.display, display = _h === void 0 ? 'block' : _h, whiteSpace = styles.whiteSpace;
// Get the pixel length of the text
var getTextPxLength = function () {
if (_this.textPxLength) {
return _this.textPxLength;
}
// Reset multiline/ellipsis in order to read width (#4928,
// #5417)
HTMLElement_css(element, {
width: '',
whiteSpace: whiteSpace || 'nowrap'
});
return element.offsetWidth;
};
// Apply translate
HTMLElement_css(element, {
marginLeft: "" + translateX + "px",
marginTop: "" + translateY + "px"
});
if (element.tagName === 'SPAN') {
var currentTextTransform = [
rotation,
textAlign,
element.innerHTML,
textWidth,
this.textAlign
].join(','), parentPadding = (((_a = this.parentGroup) === null || _a === void 0 ? void 0 : _a.padding) * -1) || 0;
var baseline = void 0;
// Update textWidth. Use the memoized textPxLength if possible, to
// avoid the getTextPxLength function using elem.offsetWidth.
// Calling offsetWidth affects rendering time as it forces layout
// (#7656).
if (textWidth !== this.oldTextWidth) { // #983, #1254
var textPxLength = getTextPxLength(),
textWidthNum = textWidth || 0;
if (((textWidthNum > this.oldTextWidth) ||
textPxLength > textWidthNum) && (
// Only set the width if the text is able to word-wrap,
// or text-overflow is ellipsis (#9537)
/[ \-]/.test(element.textContent || element.innerText) ||
element.style.textOverflow === 'ellipsis')) {
HTMLElement_css(element, {
width: ((textPxLength > textWidthNum) ||
rotation ||
scaleX) ?
textWidth + 'px' :
'auto', // #16261
display: display,
whiteSpace: whiteSpace || 'normal' // #3331
});
this.oldTextWidth = textWidth;
}
}
// Do the calculations and DOM access only if properties changed
if (currentTextTransform !== this.cTT) {
baseline = renderer.fontMetrics(element).b;
// Renderer specific handling of span rotation, but only if we
// have something to update.
if (HTMLElement_defined(rotation) &&
((rotation !== (this.oldRotation || 0)) ||
(textAlign !== this.oldAlign))) {
this.setSpanRotation(rotation, parentPadding, parentPadding);
}
this.getSpanCorrection(
// Avoid elem.offsetWidth if we can, it affects rendering
// time heavily (#7656)
((!HTMLElement_defined(rotation) &&
!this.textWidth &&
this.textPxLength) || // #7920
element.offsetWidth), baseline, HTMLElement_getAlignFactor(textAlign));
}
// Apply position with correction and rotation origin
var _j = this,
_k = _j.xCorr,
xCorr = _k === void 0 ? 0 : _k,
_l = _j.yCorr,
yCorr = _l === void 0 ? 0 : _l,
rotOriginX = (rotationOriginX !== null && rotationOriginX !== void 0 ? rotationOriginX : x) - xCorr - x - parentPadding,
rotOriginY = (rotationOriginY !== null && rotationOriginY !== void 0 ? rotationOriginY : y) - yCorr - y - parentPadding,
styles_1 = {
left: "" + (x + xCorr) + "px",
top: "" + (y + yCorr) + "px",
textAlign: textAlign,
transformOrigin: "" + rotOriginX + "px " + rotOriginY + "px"
};
if (scaleX || scaleY) {
styles_1.transform = "scale(".concat(scaleX !== null && scaleX !== void 0 ? scaleX : 1, ",").concat(scaleY !== null && scaleY !== void 0 ? scaleY : 1, ")");
}
HTMLElement_css(element, styles_1);
// Record current text transform
this.cTT = currentTextTransform;
this.oldRotation = rotation;
this.oldAlign = textAlign;
}
};
/**
* Set the rotation of an individual HTML span.
* @private
*/
HTMLElement.prototype.setSpanRotation = function (rotation, originX, originY) {
// CSS transform and transform-origin both supported without prefix
// since Firefox 16 (2012), IE 10 (2012), Chrome 36 (2014), Safari 9
// (2015).;
HTMLElement_css(this.element, {
transform: "rotate(".concat(rotation, "deg)"),
transformOrigin: "" + originX + "% " + originY + "px"
});
};
/**
* Add the element to a group wrapper. For HTML elements, a parallel div
* will be created for each ancenstor SVG `g` element.
*
* @private
*/
HTMLElement.prototype.add = function (parentGroup) {
var container = this.renderer.box
.parentNode,
parents = [];
var div;
this.parentGroup = parentGroup;
// Create a parallel divs to hold the HTML elements
if (parentGroup) {
div = parentGroup.div;
if (!div) {
// Read the parent chain into an array and read from top
// down
var svgGroup = parentGroup;
while (svgGroup) {
parents.push(svgGroup);
// Move up to the next parent group
svgGroup = svgGroup.parentGroup;
}
// Decorate each of the ancestor group elements with a parallel
// div that reflects translation and styling
for (var _i = 0, _a = parents.reverse(); _i < _a.length; _i++) {
var parentGroup_1 = _a[_i];
div = decorateSVGGroup(parentGroup_1, container);
}
}
}
(div || container).appendChild(this.element);
this.added = true;
if (this.alignOnAdd) {
this.updateTransform();
}
return this;
};
/**
* Text setter
* @private
*/
HTMLElement.prototype.textSetter = function (value) {
if (value !== this.textStr) {
delete this.bBox;
delete this.oldTextWidth;
HTML_AST.setElementHTML(this.element, value !== null && value !== void 0 ? value : '');
this.textStr = value;
this.doTransform = true;
}
};
/**
* Align setter
*
* @private
*/
HTMLElement.prototype.alignSetter = function (value) {
this.alignValue = this.textAlign = value;
this.doTransform = true;
};
/**
* Various setters which rely on update transform
* @private
*/
HTMLElement.prototype.xSetter = function (value, key) {
this[key] = value;
this.doTransform = true;
};
return HTMLElement;
}(SVG_SVGElement));
// Some shared setters
var proto = HTMLElement.prototype;
proto.visibilitySetter = proto.opacitySetter = commonSetter;
proto.ySetter =
proto.rotationSetter =
proto.rotationOriginXSetter =
proto.rotationOriginYSetter = proto.xSetter;
/* *
*
* Default Export
*
* */
/* harmony default export */ var HTML_HTMLElement = (HTMLElement);
;// ./code/es5/es-modules/Core/Axis/AxisDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Namespace
*
* */
var AxisDefaults;
(function (AxisDefaults) {
/* *
*
* Constants
*
* */
/**
* The X axis or category axis. Normally this is the horizontal axis,
* though if the chart is inverted this is the vertical axis. In case of
* multiple axes, the xAxis node is an array of configuration objects.
*
* See the [Axis class](/class-reference/Highcharts.Axis) for programmatic
* access to the axis.
*
* @productdesc {highmaps}
* In Highmaps, the axis is hidden, but it is used behind the scenes to
* control features like zooming and panning. Zooming is in effect the same
* as setting the extremes of one of the exes.
*
* @type {*|Array<*>}
* @optionparent xAxis
*/
AxisDefaults.xAxis = {
/**
* When using multiple axis, the ticks of two or more opposite axes
* will automatically be aligned by adding ticks to the axis or axes
* with the least ticks, as if `tickAmount` were specified.
*
* This can be prevented by setting `alignTicks` to false. If the grid
* lines look messy, it's a good idea to hide them for the secondary
* axis by setting `gridLineWidth` to 0.
*
* If `startOnTick` or `endOnTick` in an Axis options are set to false,
* then the `alignTicks ` will be disabled for the Axis.
*
* Disabled for logarithmic axes.
*
* @product highcharts highstock gantt
*/
alignTicks: true,
/**
* Whether to allow decimals in this axis' ticks. When counting
* integers, like persons or hits on a web page, decimals should
* be avoided in the labels. By default, decimals are allowed on small
* scale axes.
*
* @see [minTickInterval](#xAxis.minTickInterval)
*
* @sample {highcharts|highstock} highcharts/yaxis/allowdecimals-true/
* True by default
* @sample {highcharts|highstock} highcharts/yaxis/allowdecimals-false/
* False
*
* @type {boolean|undefined}
* @default undefined
* @since 2.0
*/
allowDecimals: void 0,
/**
* When using an alternate grid color, a band is painted across the
* plot area between every other grid line.
*
* @sample {highcharts} highcharts/yaxis/alternategridcolor/
* Alternate grid color on the Y axis
* @sample {highstock} stock/xaxis/alternategridcolor/
* Alternate grid color on the Y axis
*
* @type {Highcharts.ColorType}
* @apioption xAxis.alternateGridColor
*/
/**
* An array defining breaks in the axis, the sections defined will be
* left out and all the points shifted closer to each other.
*
* @productdesc {highcharts}
* Requires that the broken-axis.js module is loaded.
*
* @sample {highcharts} highcharts/axisbreak/break-simple/
* Simple break
* @sample {highcharts|highstock} highcharts/axisbreak/break-visualized/
* Advanced with callback
* @sample {highstock} stock/demo/intraday-breaks/
* Break on nights and weekends
*
* @type {Array<*>}
* @since 4.1.0
* @product highcharts highstock gantt
* @apioption xAxis.breaks
*/
/**
* A number indicating how much space should be left between the start
* and the end of the break. The break size is given in axis units,
* so for instance on a `datetime` axis, a break size of 3600000 would
* indicate the equivalent of an hour.
*
* @type {number}
* @default 0
* @since 4.1.0
* @product highcharts highstock gantt
* @apioption xAxis.breaks.breakSize
*/
/**
* The axis value where the break starts. On datetime axes, this may be
* a date string.
*
* @type {number|string}
* @since 4.1.0
* @product highcharts highstock gantt
* @apioption xAxis.breaks.from
*/
/**
* Defines an interval after which the break appears again. By default
* the breaks do not repeat.
*
* @type {number}
* @default 0
* @since 4.1.0
* @product highcharts highstock gantt
* @apioption xAxis.breaks.repeat
*/
/**
* The axis value where the break ends. On datetime axes, this may be
* a date string.
*
* @type {number|string}
* @since 4.1.0
* @product highcharts highstock gantt
* @apioption xAxis.breaks.to
*/
/**
* If categories are present for the xAxis, names are used instead of
* numbers for that axis.
*
* Since Highcharts 3.0, categories can also
* be extracted by giving each point a [name](#series.data) and setting
* axis [type](#xAxis.type) to `category`. However, if you have multiple
* series, best practice remains defining the `categories` array.
*
* Example: `categories: ['Apples', 'Bananas', 'Oranges']`
*
* @sample {highcharts} highcharts/demo/line-labels/
* With
* @sample {highcharts} highcharts/xaxis/categories/
* Without
*
* @type {Array<string>}
* @product highcharts gantt
* @apioption xAxis.categories
*/
/**
* The highest allowed value for automatically computed axis extremes.
*
* @see [floor](#xAxis.floor)
*
* @sample {highcharts|highstock} highcharts/yaxis/floor-ceiling/
* Floor and ceiling
*
* @type {number}
* @since 4.0
* @product highcharts highstock gantt
* @apioption xAxis.ceiling
*/
/**
* A class name that opens for styling the axis by CSS, especially in
* Highcharts styled mode. The class name is applied to group elements
* for the grid, axis elements and labels.
*
* @sample {highcharts|highstock|highmaps} highcharts/css/axis/
* Multiple axes with separate styling
*
* @type {string}
* @since 5.0.0
* @apioption xAxis.className
*/
/**
* Configure a crosshair that follows either the mouse pointer or the
* hovered point.
*
* In styled mode, the crosshairs are styled in the
* `.highcharts-crosshair`, `.highcharts-crosshair-thin` or
* `.highcharts-xaxis-category` classes.
*
* @productdesc {highstock}
* In Highcharts stock, by default, the crosshair is enabled on the
* X axis and disabled on the Y axis.
*
* @sample {highcharts} highcharts/xaxis/crosshair-both/
* Crosshair on both axes
* @sample {highstock} stock/xaxis/crosshairs-xy/
* Crosshair on both axes, with y axis label
* @sample {highmaps} highcharts/xaxis/crosshair-both/
* Crosshair on both axes
*
* @declare Highcharts.AxisCrosshairOptions
* @type {boolean|*}
* @default false
* @since 4.1
* @apioption xAxis.crosshair
*/
/**
* The value on a perpendicular axis where this axis should cross. This
* is typically used on mathematical plots where the axes cross at 0.
* When `crossing` is set, space will not be reserved at the sides of
* the chart for axis labels and title, so those may be clipped. In this
* case it is better to place the axes without the `crossing` option.
*
* @type {number}
* @sample highcharts/xaxis/crossing
* Function plot with axes crossing at 0
* @since 11.0.1
* @apioption xAxis.crossing
*/
/**
* A class name for the crosshair, especially as a hook for styling.
*
* @type {string}
* @since 5.0.0
* @apioption xAxis.crosshair.className
*/
/**
* The color of the crosshair. Defaults to `#cccccc` for numeric and
* datetime axes, and `rgba(204,214,235,0.25)` for category axes, where
* the crosshair by default highlights the whole category.
*
* @sample {highcharts|highstock|highmaps} highcharts/xaxis/crosshair-customized/
* Customized crosshairs
*
* @type {Highcharts.ColorType}
* @default #cccccc
* @since 4.1
* @apioption xAxis.crosshair.color
*/
/**
* The dash style for the crosshair. See
* [plotOptions.series.dashStyle](#plotOptions.series.dashStyle)
* for possible values.
*
* @sample {highcharts|highmaps} highcharts/xaxis/crosshair-dotted/
* Dotted crosshair
* @sample {highstock} stock/xaxis/crosshair-dashed/
* Dashed X axis crosshair
*
* @type {Highcharts.DashStyleValue}
* @default Solid
* @since 4.1
* @apioption xAxis.crosshair.dashStyle
*/
/**
* A label on the axis next to the crosshair.
*
* In styled mode, the label is styled with the
* `.highcharts-crosshair-label` class.
*
* @sample {highstock} stock/xaxis/crosshair-label/
* Crosshair labels
* @sample {highstock} highcharts/css/crosshair-label/
* Style mode
*
* @declare Highcharts.AxisCrosshairLabelOptions
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label
*/
/**
* Alignment of the label compared to the axis. Defaults to `"left"` for
* right-side axes, `"right"` for left-side axes and `"center"` for
* horizontal axes.
*
* @type {Highcharts.AlignValue}
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.align
*/
/**
* The background color for the label. Defaults to the related series
* color, or `#666666` if that is not available.
*
* @type {Highcharts.ColorType}
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.backgroundColor
*/
/**
* The border color for the crosshair label
*
* @type {Highcharts.ColorType}
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.borderColor
*/
/**
* The border corner radius of the crosshair label.
*
* @type {number}
* @default 3
* @since 2.1.10
* @product highstock
* @apioption xAxis.crosshair.label.borderRadius
*/
/**
* The border width for the crosshair label.
*
* @type {number}
* @default 0
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.borderWidth
*/
/**
* Flag to enable crosshair's label.
*
* @sample {highstock} stock/xaxis/crosshairs-xy/
* Enabled label for yAxis' crosshair
*
* @type {boolean}
* @default false
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.enabled
*/
/**
* A format string for the crosshair label. Defaults to `{value}` for
* numeric axes and `{value:%b %d, %Y}` for datetime axes.
*
* @type {string}
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.format
*/
/**
* Formatter function for the label text.
*
* @type {Highcharts.XAxisCrosshairLabelFormatterCallbackFunction}
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.formatter
*/
/**
* Padding inside the crosshair label.
*
* @type {number}
* @default 8
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.padding
*/
/**
* The shape to use for the label box.
*
* @type {string}
* @default callout
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.shape
*/
/**
* Text styles for the crosshair label.
*
* @type {Highcharts.CSSObject}
* @default {"color": "white", "fontWeight": "normal", "fontSize": "11px", "textAlign": "center"}
* @since 2.1
* @product highstock
* @apioption xAxis.crosshair.label.style
*/
/**
* Whether the crosshair should snap to the point or follow the pointer
* independent of points.
*
* @sample {highcharts|highstock} highcharts/xaxis/crosshair-snap-false/
* True by default
* @sample {highmaps} maps/demo/latlon-advanced/
* Snap is false
*
* @type {boolean}
* @default true
* @since 4.1
* @apioption xAxis.crosshair.snap
*/
/**
* The pixel width of the crosshair. Defaults to 1 for numeric or
* datetime axes, and for one category width for category axes.
*
* @sample {highcharts} highcharts/xaxis/crosshair-customized/
* Customized crosshairs
* @sample {highstock} highcharts/xaxis/crosshair-customized/
* Customized crosshairs
* @sample {highmaps} highcharts/xaxis/crosshair-customized/
* Customized crosshairs
*
* @type {number}
* @default 1
* @since 4.1
* @apioption xAxis.crosshair.width
*/
/**
* The Z index of the crosshair. Higher Z indices allow drawing the
* crosshair on top of the series or behind the grid lines.
*
* @type {number}
* @default 2
* @since 4.1
* @apioption xAxis.crosshair.zIndex
*/
/**
* Whether to pan axis. If `chart.panning` is enabled, the option
* allows to disable panning on an individual axis.
*/
panningEnabled: true,
/**
* The Z index for the axis group.
*
* @see [axis.gridZIndex](#xAxis.gridZIndex)
* @see [axis.labels.zIndex](#xAxis.labels.zIndex)
*/
zIndex: 2,
/**
* Whether to zoom axis. If `chart.zoomType` is set, the option allows
* to disable zooming on an individual axis.
*
* @sample {highcharts} highcharts/xaxis/zoomenabled/
* Zoom enabled is false
*/
zoomEnabled: true,
/**
* For a datetime axis, the scale will automatically adjust to the
* appropriate unit. This member gives the default string
* representations used for each unit. For intermediate values,
* different units may be used, for example the `day` unit can be used
* on midnight and `hour` unit be used for intermediate values on the
* same axis.
*
* For an overview of the string or object configuration, see
* [dateFormat](/class-reference/Highcharts.Time#dateFormat).
*
* Defaults to:
* ```js
* {
* millisecond: '%[HMSL]',
* second: '%[HMS]',
* minute: '%[HM]',
* hour: '%[HM]',
* day: '%[eb]',
* week: '%[eb]',
* month: '%[bY]',
* year: '%Y'
* }
* ```
*
* @sample {highcharts} highcharts/xaxis/datetimelabelformats-object/
* Object day format on X axis
* @sample {highcharts} highcharts/xaxis/datetimelabelformats/
* String day format on X axis
* @sample {highstock} stock/xaxis/datetimelabelformats/
* More information in x axis labels
*
* @declare Highcharts.AxisDateTimeLabelFormatsOptions
* @product highcharts highstock gantt
*/
dateTimeLabelFormats: {
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
millisecond: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.millisecond.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.millisecond.main
*/
main: '%[HMSL]',
range: false
},
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
second: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.second.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.second.main
*/
main: '%[HMS]',
range: false
},
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
minute: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.minute.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.minute.main
*/
main: '%[HM]',
range: false
},
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
hour: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.hour.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.hour.main
*/
main: '%[HM]',
range: false
},
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
day: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.day.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.day.main
*/
main: '%[eb]'
},
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
week: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.week.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.week.main
*/
main: '%[eb]'
},
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
month: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.month.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.month.main
*/
main: '%[bY]'
},
/**
* @declare Highcharts.AxisDateTimeLabelFormatsOptionsObject
* @type {string|*}
*/
year: {
/**
* @type {Array<string|Highcharts.DateTimeFormatOptions>}
* @default undefined
* @apioption xAxis.dateTimeLabelFormats.year.list
*/
/**
* @type {string|Highcharts.DateTimeFormatOptions}
* @apioption xAxis.dateTimeLabelFormats.year.main
*/
main: '%Y'
}
},
/**
* Whether to force the axis to end on a tick. Use this option with
* the `maxPadding` option to control the axis end.
*
* @productdesc {highstock}
* In Highcharts Stock, `endOnTick` is always `false` when the navigator
* is enabled, to prevent jumpy scrolling. With disabled navigator
* enabling `endOnTick` may lead to extending the xAxis to show the last
* tick, therefore range selector buttons may not have an active state
* if the axis gets extended.
*
* @sample {highcharts} highcharts/yaxis/endontick/
* True by default
* @sample {highcharts} highcharts/yaxis/endontick-false/
* False
* @sample {highstock} stock/demo/basic-line/
* True by default
* @sample {highstock} stock/xaxis/endontick/
* False
*
* @since 1.2.0
*/
endOnTick: false,
/**
* Event handlers for the axis.
*
* @type {*}
* @apioption xAxis.events
*/
/**
* An event fired after the breaks have rendered.
*
* @see [breaks](#xAxis.breaks)
*
* @sample {highcharts} highcharts/axisbreak/break-event/
* AfterBreak Event
*
* @type {Highcharts.AxisEventCallbackFunction}
* @since 4.1.0
* @product highcharts gantt
* @apioption xAxis.events.afterBreaks
*/
/**
* As opposed to the `setExtremes` event, this event fires after the
* final min and max values are computed and corrected for `minRange`.
*
* Fires when the minimum and maximum is set for the axis, either by
* calling the `.setExtremes()` method or by selecting an area in the
* chart. One parameter, `event`, is passed to the function, containing
* common event information.
*
* The new user set minimum and maximum values can be found by
* `event.min` and `event.max`. These reflect the axis minimum and
* maximum in axis values. The actual data extremes are found in
* `event.dataMin` and `event.dataMax`.
*
* @type {Highcharts.AxisSetExtremesEventCallbackFunction}
* @since 2.3
* @context Highcharts.Axis
* @apioption xAxis.events.afterSetExtremes
*/
/**
* An event fired when a break from this axis occurs on a point.
*
* @see [breaks](#xAxis.breaks)
*
* @sample {highcharts} highcharts/axisbreak/break-visualized/
* Visualization of a Break
*
* @type {Highcharts.AxisPointBreakEventCallbackFunction}
* @since 4.1.0
* @product highcharts gantt
* @context Highcharts.Axis
* @apioption xAxis.events.pointBreak
*/
/**
* An event fired when a point falls inside a break from this axis.
*
* @type {Highcharts.AxisPointBreakEventCallbackFunction}
* @product highcharts highstock gantt
* @context Highcharts.Axis
* @apioption xAxis.events.pointInBreak
*/
/**
* An event fired when a point is outside a break after zoom.
*
* @type {Highcharts.AxisPointBreakEventCallbackFunction}
* @product highcharts highstock gantt
* @context Highcharts.Axis
* @apioption xAxis.events.pointBreakOut
*/
/**
* Fires when the minimum and maximum is set for the axis, either by
* calling the `.setExtremes()` method or by selecting an area in the
* chart. One parameter, `event`, is passed to the function,
* containing common event information.
*
* The new user set minimum and maximum values can be found by
* `event.min` and `event.max`. These reflect the axis minimum and
* maximum in data values. When an axis is zoomed all the way out from
* the "Reset zoom" button, `event.min` and `event.max` are null, and
* the new extremes are set based on `this.dataMin` and `this.dataMax`.
*
* @sample {highstock} stock/xaxis/events-setextremes/
* Log new extremes on x axis
*
* @type {Highcharts.AxisSetExtremesEventCallbackFunction}
* @since 1.2.0
* @context Highcharts.Axis
* @apioption xAxis.events.setExtremes
*/
/**
* The lowest allowed value for automatically computed axis extremes.
*
* @see [ceiling](#yAxis.ceiling)
*
* @sample {highcharts} highcharts/yaxis/floor-ceiling/
* Floor and ceiling
* @sample {highstock} stock/demo/lazy-loading/
* Prevent negative stock price on Y axis
*
* @type {number}
* @since 4.0
* @product highcharts highstock gantt
* @apioption xAxis.floor
*/
/**
* The dash or dot style of the grid lines. For possible values, see
* [this demonstration](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
*
* @sample {highcharts} highcharts/yaxis/gridlinedashstyle/
* Long dashes
* @sample {highstock} stock/xaxis/gridlinedashstyle/
* Long dashes
*
* @type {Highcharts.DashStyleValue}
* @since 1.2
*/
gridLineDashStyle: 'Solid',
/**
* The Z index of the grid lines.
*
* @sample {highcharts|highstock} highcharts/xaxis/gridzindex/
* A Z index of 4 renders the grid above the graph
*
* @product highcharts highstock gantt
*
* @see [axis.zIndex](#xAxis.zIndex)
* @see [axis.labels.zIndex](#xAxis.labels.zIndex)
*/
gridZIndex: 1,
/**
* An id for the axis. This can be used after render time to get
* a pointer to the axis object through `chart.get()`.
*
* @sample {highcharts} highcharts/xaxis/id/
* Get the object
* @sample {highstock} stock/xaxis/id/
* Get the object
*
* @type {string}
* @since 1.2.0
* @apioption xAxis.id
*/
/**
* The axis labels show the number or category for each tick.
*
* Since v8.0.0: Labels are animated in categorized x-axis with
* updating data if `tickInterval` and `step` is set to 1.
*
* @productdesc {highmaps}
* X and Y axis labels are by default disabled in Highmaps, but the
* functionality is inherited from Highcharts and used on `colorAxis`,
* and can be enabled on X and Y axes too.
*/
labels: {
/**
* What part of the string the given position is anchored to.
* If `left`, the left side of the string is at the axis position.
* Can be one of `"left"`, `"center"` or `"right"`. Defaults to
* an intelligent guess based on which side of the chart the axis
* is on and the rotation of the label.
*
* @see [reserveSpace](#xAxis.labels.reserveSpace)
*
* @sample {highcharts} highcharts/xaxis/labels-align-left/
* Left
* @sample {highcharts} highcharts/xaxis/labels-align-right/
* Right
* @sample {highcharts} highcharts/xaxis/labels-reservespace-true/
* Left-aligned labels on a vertical category axis
*
* @type {Highcharts.AlignValue}
* @apioption xAxis.labels.align
*/
/**
* Whether to allow the axis labels to overlap. When false,
* overlapping labels are hidden.
*
* @sample {highcharts} highcharts/xaxis/labels-allowoverlap-true/
* X axis labels overlap enabled
*
* @type {boolean}
* @default false
* @apioption xAxis.labels.allowOverlap
*/
/**
* For horizontal axes, the allowed degrees of label rotation
* to prevent overlapping labels. If there is enough space,
* labels are not rotated. As the chart gets narrower, it
* will start rotating the labels -45 degrees, then remove
* every second label and try again with rotations 0 and -45 etc.
* Set it to `undefined` to disable rotation, which will
* cause the labels to word-wrap if possible. Defaults to `[-45]``
* on bottom and top axes, `undefined` on left and right axes.
*
* @sample {highcharts|highstock} highcharts/xaxis/labels-autorotation-default/
* Default auto rotation of 0 or -45
* @sample {highcharts|highstock} highcharts/xaxis/labels-autorotation-0-90/
* Custom graded auto rotation
*
* @type {Array<number>}
* @default undefined
* @since 4.1.0
* @product highcharts highstock gantt
* @apioption xAxis.labels.autoRotation
*/
/**
* When each category width is more than this many pixels, we don't
* apply auto rotation. Instead, we lay out the axis label with word
* wrap. A lower limit makes sense when the label contains multiple
* short words that don't extend the available horizontal space for
* each label.
*
* @sample {highcharts} highcharts/xaxis/labels-autorotationlimit/
* Lower limit
*
* @since 4.1.5
* @product highcharts gantt
*/
autoRotationLimit: 80,
/**
* The label's pixel distance from the perimeter of the plot area.
* On cartesian charts, this is overridden if the `labels.y` setting
* is set.
*
* @sample {highcharts} highcharts/yaxis/labels-distance/
* Polar chart, labels centered under the arc
*
* @type {number}
* @product highcharts gantt
*/
distance: 15,
/**
* Enable or disable the axis labels.
*
* @sample {highcharts} highcharts/xaxis/labels-enabled/
* X axis labels disabled
* @sample {highstock} stock/xaxis/labels-enabled/
* X axis labels disabled
*
*/
enabled: true,
/**
* A format string for the axis label. The context is available as
* format string variables. For example, you can use `{text}` to
* insert the default formatted text. The recommended way of adding
* units for the label is using `text`, for example `{text} km`.
*
* To add custom numeric or datetime formatting, use `{value}` with
* formatting, for example `{value:.1f}` or `{value:%Y-%m-%d}`.
*
* See
* [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
* for more examples of formatting.
*
* The default value is not specified due to the dynamic
* nature of the default implementation.
*
* @sample {highcharts|highstock} highcharts/yaxis/labels-format/
* Add units to Y axis label
* @sample {highcharts} highcharts/xaxis/labels-format-linked/
* Linked category names
* @sample {highcharts} highcharts/xaxis/labels-format-custom/
* Custom number format
*
* @type {string}
* @since 3.0
* @apioption xAxis.labels.format
*/
/**
* Callback JavaScript function to format the label. The value
* is given by `this.value`. Additional properties for `this` are
* `axis`, `chart`, `isFirst`, `isLast` and `text` which holds the
* value of the default formatter.
*
* Defaults to a built in function returning a formatted string
* depending on whether the axis is `category`, `datetime`,
* `numeric` or other.
*
* @sample {highcharts} highcharts/xaxis/labels-formatter-linked/
* Linked category names
* @sample {highcharts} highcharts/xaxis/labels-formatter-extended/
* Modified numeric labels
* @sample {highstock} stock/xaxis/labels-formatter/
* Added units on Y axis
*
* @type {Highcharts.AxisLabelsFormatterCallbackFunction}
* @apioption xAxis.labels.formatter
*/
/**
* The number of pixels to indent the labels per level in a treegrid
* axis.
*
* @sample gantt/treegrid-axis/demo
* Indentation 10px by default.
* @sample gantt/treegrid-axis/indentation-0px
* Indentation set to 0px.
*
* @product gantt
*/
indentation: 10,
/**
* Horizontal axis only. When `staggerLines` is not set,
* `maxStaggerLines` defines how many lines the axis is allowed to
* add to automatically avoid overlapping X labels. Set to `1` to
* disable overlap detection.
*
* @deprecated
* @type {number}
* @default 5
* @since 1.3.3
* @apioption xAxis.labels.maxStaggerLines
*/
/**
* How to handle overflowing labels on horizontal axis. If set to
* `"allow"`, it will not be aligned at all. By default it
* `"justify"` labels inside the chart area. If there is room to
* move it, it will be aligned to the edge, else it will be removed.
*
* @since 2.2.5
* @validvalue ["allow", "justify"]
*/
overflow: 'justify',
/**
* The pixel padding for axis labels, to ensure white space between
* them. Defaults to 4 for horizontal axes, 1 for vertical.
*
* @type {number}
* @default undefined
* @product highcharts gantt
* @apioption xAxis.labels.padding
*/
/**
* Whether to reserve space for the labels. By default, space is
* reserved for the labels in these cases:
*
* * On all horizontal axes.
* * On vertical axes if `label.align` is `right` on a left-side
* axis or `left` on a right-side axis.
* * On vertical axes if `label.align` is `center`.
*
* This can be turned off when for example the labels are rendered
* inside the plot area instead of outside.
*
* @see [labels.align](#xAxis.labels.align)
*
* @sample {highcharts} highcharts/xaxis/labels-reservespace/
* No reserved space, labels inside plot
* @sample {highcharts} highcharts/xaxis/labels-reservespace-true/
* Left-aligned labels on a vertical category axis
*
* @type {boolean}
* @since 4.1.10
* @product highcharts highstock gantt
* @apioption xAxis.labels.reserveSpace
*/
reserveSpace: void 0,
/**
* Rotation of the labels in degrees. When `undefined`, the
* `autoRotation` option takes precedence.
*
* @sample {highcharts} highcharts/xaxis/labels-rotation/
* X axis labels rotated 90°
*
* @type {number}
* @default 0
* @apioption xAxis.labels.rotation
*/
rotation: void 0,
/**
* Horizontal axes only. The number of lines to spread the labels
* over to make room or tighter labels. 0 disables staggering.
*
* @sample {highcharts} highcharts/xaxis/labels-staggerlines/
* Show labels over two lines
* @sample {highstock} stock/xaxis/labels-staggerlines/
* Show labels over two lines
*
* @since 2.1
*/
staggerLines: 0,
/**
* To show only every _n_'th label on the axis, set the step to _n_.
* Setting the step to 2 shows every other label.
*
* By default, when 0, the step is calculated automatically to avoid
* overlap. To prevent this, set it to 1\. This usually only
* happens on a category axis, and is often a sign that you have
* chosen the wrong axis type.
*
* Read more at
* [Axis docs](https://www.highcharts.com/docs/chart-concepts/axes)
* => What axis should I use?
*
* @sample {highcharts} highcharts/xaxis/labels-step/
* Showing only every other axis label on a categorized
* x-axis
* @sample {highcharts} highcharts/xaxis/labels-step-auto/
* Auto steps on a category axis
*
* @since 2.1
*/
step: 0,
/**
* Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the labels.
*/
useHTML: false,
/**
* The x position offset of all labels relative to the tick
* positions on the axis. Overrides the `labels.distance` option.
*
* @type {number}
* @apioption xAxis.labels.x
*/
/**
* The y position offset of all labels relative to the tick
* positions on the axis. Overrides the `labels.distance` option.
*
* @sample {highcharts} highcharts/xaxis/labels-x/
* X axis labels placed on grid lines
*
* @type {number}
* @apioption xAxis.labels.y
*/
/**
* The Z index for the axis labels.
*
* @see [axis.zIndex](#xAxis.zIndex)
* @see [axis.gridZIndex](#xAxis.gridZIndex)
*/
zIndex: 7,
/**
* CSS styles for the label. Use `lineClamp` to control wrapping of
* category labels. Use `textOverflow: 'none'` to prevent ellipsis
* (dots).
*
* In styled mode, the labels are styled with the
* `.highcharts-axis-labels` class.
*
* @sample {highcharts} highcharts/xaxis/labels-style/
* Red X axis labels
*
* @type {Highcharts.CSSObject}
*/
style: {
/** @internal */
color: "#333333" /* Palette.neutralColor80 */,
/** @internal */
cursor: 'default',
/**
* @type {number|string}
*/
fontSize: '0.8em',
/** @internal */
textOverflow: 'ellipsis'
}
},
/**
* The left position as the horizontal axis. If it's a number, it is
* interpreted as pixel position relative to the chart.
*
* Since Highcharts v5.0.13: If it's a percentage string, it is
* interpreted as percentages of the plot width, offset from plot area
* left.
*
* @sample {highcharts} highcharts/xaxis/axis-position-properties
* Different axis position properties
*
* @type {number|string}
* @product highcharts highstock
* @apioption xAxis.left
*/
/**
* The top position as the vertical axis. If it's a number, it is
* interpreted as pixel position relative to the chart.
*
* Since Highcharts 2: If it's a percentage string, it is interpreted
* as percentages of the plot height, offset from plot area top.
*
* @sample {highcharts} highcharts/xaxis/axis-position-properties
* Different axis position properties
*
* @type {number|string}
* @product highcharts highstock
* @apioption xAxis.top
*/
/**
* Index of another axis that this axis is linked to. When an axis is
* linked to a master axis, it will take the same extremes as
* the master, but as assigned by min or max or by setExtremes.
* It can be used to show additional info, or to ease reading the
* chart by duplicating the scales.
*
* @sample {highcharts} highcharts/xaxis/linkedto/
* Different string formats of the same date
* @sample {highcharts} highcharts/yaxis/linkedto/
* Y values on both sides
*
* @type {number}
* @since 2.0.2
* @product highcharts highstock gantt
* @apioption xAxis.linkedTo
*/
/**
* The maximum value of the axis. If `undefined`, the max value is
* automatically calculated.
*
* If a datetime string is passed, it is parsed into epoch time
* according to the time zone given in [time.timezone](#time.timezone).
*
* If the [endOnTick](#yAxis.endOnTick) option is true, the `max` value
* might be rounded up.
*
* If a [tickAmount](#yAxis.tickAmount) is set, the axis may be extended
* beyond the set max in order to reach the given number of ticks. The
* same may happen in a chart with multiple axes, determined by [chart.
* alignTicks](#chart), where a `tickAmount` is applied internally.
*
* @sample {highcharts} highcharts/yaxis/max-200/
* Y axis max of 200
* @sample {highcharts} highcharts/yaxis/max-logarithmic/
* Y axis max on logarithmic axis
* @sample {highstock} stock/xaxis/min-max/
* Fixed min and max on X axis
*
* @type {number|string|null}
* @apioption xAxis.max
*/
/**
* Padding of the max value relative to the length of the axis. A
* padding of 0.05 will make a 100px axis 5px longer. This is useful
* when you don't want the highest data value to appear on the edge
* of the plot area. When the axis' `max` option is set or a max extreme
* is set using `axis.setExtremes()`, the maxPadding will be ignored.
*
* @productdesc {highstock}
* For an [ordinal](#xAxis.ordinal) axis, `minPadding` and `maxPadding`
* are ignored. Use [overscroll](#xAxis.overscroll) instead.
*
* @sample {highcharts} highcharts/yaxis/maxpadding/
* Max padding of 0.25 on y axis
* @sample {highstock} stock/xaxis/minpadding-maxpadding/
* Greater min- and maxPadding
* @sample {highmaps} maps/chart/plotbackgroundcolor-gradient/
* Add some padding
*
* @default {highcharts} 0.01
* @default {highstock|highmaps} 0
* @since 1.2.0
*/
maxPadding: 0.01,
/**
* Deprecated. Use `minRange` instead.
*
* @deprecated
* @type {number}
* @product highcharts highstock
* @apioption xAxis.maxZoom
*/
/**
* The minimum value of the axis. If `undefined`, the min value is
* automatically calculated.
*
* If a datetime string is passed, it is parsed into epoch time
* according to the time zone given in [time.timezone](#time.timezone).
*
* If the [startOnTick](#yAxis.startOnTick) option is true (default),
* the `min` value might be rounded down.
*
* The automatically calculated minimum value is also affected by
* [floor](#yAxis.floor), [softMin](#yAxis.softMin),
* [minPadding](#yAxis.minPadding), [minRange](#yAxis.minRange)
* as well as [series.threshold](#plotOptions.series.threshold)
* and [series.softThreshold](#plotOptions.series.softThreshold).
*
* @sample {highcharts} highcharts/yaxis/min-startontick-false/
* -50 with startOnTick to false
* @sample {highcharts} highcharts/yaxis/min-startontick-true/
* -50 with startOnTick true by default
* @sample {highstock} stock/xaxis/min-max/
* Set min and max on X axis
*
* @type {number|string|null}
* @apioption xAxis.min
*/
/**
* The dash or dot style of the minor grid lines. For possible values,
* see [this demonstration](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
*
* @sample {highcharts} highcharts/yaxis/minorgridlinedashstyle/
* Long dashes on minor grid lines
* @sample {highstock} stock/xaxis/minorgridlinedashstyle/
* Long dashes on minor grid lines
*
* @type {Highcharts.DashStyleValue}
* @since 1.2
*/
minorGridLineDashStyle: 'Solid',
/**
* Specific tick interval in axis units for the minor ticks. On a linear
* axis, if `"auto"`, the minor tick interval is calculated as a fifth
* of the tickInterval. If `undefined`, minor ticks are not shown.
*
* On logarithmic axes, the unit is the power of the value. For example,
* setting the minorTickInterval to 1 puts one tick on each of 0.1, 1,
* 10, 100 etc. Setting the minorTickInterval to 0.1 produces 9 ticks
* between 1 and 10, 10 and 100 etc.
*
* If user settings dictate minor ticks to become too dense, they don't
* make sense, and will be ignored to prevent performance problems.
*
* @sample {highcharts} highcharts/yaxis/minortickinterval-null/
* Undefined by default
* @sample {highcharts} highcharts/yaxis/minortickinterval-5/ 5 units
* @sample {highcharts} highcharts/yaxis/minortickinterval-log-auto/
* "auto"
* @sample {highcharts} highcharts/yaxis/minortickinterval-log/ 0.1
* @sample {highstock} stock/demo/basic-line/ Null by default
* @sample {highstock} stock/xaxis/minortickinterval-auto/ "auto"
*
* @type {number|'auto'}
* @apioption xAxis.minorTickInterval
*/
/**
* The pixel length of the minor tick marks.
*
* @sample {highcharts} highcharts/yaxis/minorticklength/
* 10px on Y axis
* @sample {highstock} stock/xaxis/minorticks/
* 10px on Y axis
*/
minorTickLength: 2,
/**
* The position of the minor tick marks relative to the axis line.
* Can be one of `inside` and `outside`.
*
* @sample {highcharts} highcharts/yaxis/minortickposition-outside/
* Outside by default
* @sample {highcharts} highcharts/yaxis/minortickposition-inside/
* Inside
* @sample {highstock} stock/xaxis/minorticks/
* Inside
*
* @validvalue ["inside", "outside"]
*/
minorTickPosition: 'outside',
/**
* Enable or disable minor ticks. The interval between the minor ticks
* can be controlled either by the
* [minorTicksPerMajor](#xAxis.minorTicksPerMajor) setting, or as an
* absolute [minorTickInterval](#xAxis.minorTickInterval) value.
*
* On a logarithmic axis, minor ticks are laid out based on a best
* guess, attempting to enter an approximate number of minor ticks
* between each major tick based on
* [minorTicksPerMajor](#xAxis.minorTicksPerMajor).
*
* Prior to v6.0.0, ticks were enabled in auto layout by setting
* `minorTickInterval` to `"auto"`.
*
* @productdesc {highcharts} On axes using
* [categories](#xAxis.categories), minor ticks are not supported.
*
* @sample {highcharts} highcharts/yaxis/minorticks-true/ Enabled on
* linear Y axis
*
* @type {boolean}
* @default false
* @since 6.0.0
* @apioption xAxis.minorTicks
*/
/**
* The number of minor ticks per major tick. Works for `linear`,
* `logarithmic` and `datetime` axes.
*
* @sample {highcharts} highcharts/yaxis/minortickspermajor/
* 2 minor ticks per major tick on Y axis
*
* @since 11.0.0
*
* @type {number}
*/
minorTicksPerMajor: 5,
/**
* The pixel width of the minor tick mark.
*
* @sample {highcharts} highcharts/yaxis/minortickwidth/
* 3px width
* @sample {highstock} stock/xaxis/minorticks/
* 1px width
*
* @type {number}
* @default 0
* @apioption xAxis.minorTickWidth
*/
/**
* Padding of the min value relative to the length of the axis. A
* padding of 0.05 will make a 100px axis 5px longer. This is useful
* when you don't want the lowest data value to appear on the edge
* of the plot area. When the axis' `min` option is set or a min extreme
* is set using `axis.setExtremes()`, the minPadding will be ignored.
*
* @productdesc {highstock}
* For an [ordinal](#xAxis.ordinal) axis, `minPadding` and `maxPadding`
* are ignored. Use [overscroll](#xAxis.overscroll) instead.
*
* @sample {highcharts} highcharts/yaxis/minpadding/
* Min padding of 0.2
* @sample {highstock} stock/xaxis/minpadding-maxpadding/
* Greater min- and maxPadding
* @sample {highmaps} maps/chart/plotbackgroundcolor-gradient/
* Add some padding
*
* @default {highcharts} 0.01
* @default {highstock|highmaps} 0
* @since 1.2.0
* @product highcharts highstock gantt
*/
minPadding: 0.01,
/**
* The minimum range to display on this axis. The entire axis will not
* be allowed to span over a smaller interval than this. For example,
* for a datetime axis the main unit is milliseconds. If minRange is
* set to 3600000, you can't zoom in more than to one hour.
*
* The default minRange for the x axis is five times the smallest
* interval between any of the data points.
*
* On a logarithmic axis, the unit for the minimum range is the power.
* So a minRange of 1 means that the axis can be zoomed to 10-100,
* 100-1000, 1000-10000 etc.
*
* **Note**: The `minPadding`, `maxPadding`, `startOnTick` and
* `endOnTick` settings also affect how the extremes of the axis
* are computed.
*
* @sample {highcharts} highcharts/xaxis/minrange/
* Minimum range of 5
* @sample {highstock} stock/xaxis/minrange/
* Max zoom of 6 months overrides user selections
*
* @type {number}
* @apioption xAxis.minRange
*/
/**
* The minimum tick interval allowed in axis values. For example on
* zooming in on an axis with daily data, this can be used to prevent
* the axis from showing hours. Defaults to the closest distance between
* two points on the axis.
*
* @type {number}
* @since 2.3.0
* @apioption xAxis.minTickInterval
*/
/**
* The distance in pixels from the plot area to the axis line.
* A positive offset moves the axis with it's line, labels and ticks
* away from the plot area. This is typically used when two or more
* axes are displayed on the same side of the plot. With multiple
* axes the offset is dynamically adjusted to avoid collision, this
* can be overridden by setting offset explicitly.
*
* @sample {highcharts} highcharts/yaxis/offset/
* Y axis offset of 70
* @sample {highcharts} highcharts/yaxis/offset-centered/
* Axes positioned in the center of the plot
* @sample {highstock} stock/xaxis/offset/
* Y axis offset by 70 px
*
* @type {number}
*/
offset: void 0,
/**
* Whether to display the axis on the opposite side of the normal. The
* normal is on the left side for vertical axes and bottom for
* horizontal, so the opposite sides will be right and top respectively.
* This is typically used with dual or multiple axes.
*
* @sample {highcharts} highcharts/yaxis/opposite/
* Secondary Y axis opposite
* @sample {highstock} stock/xaxis/opposite/
* Y axis on left side
*
* @default {highcharts|highstock|highmaps} false
* @default {gantt} true
* @type Boolean
* @apioption xAxis.opposite
*/
/**
* In an ordinal axis, the points are equally spaced in the chart
* regardless of the actual time or x distance between them. This means
* that missing data periods (e.g. nights or weekends for a stock chart)
* will not take up space in the chart.
* Having `ordinal: false` will show any gaps created by the `gapSize`
* setting proportionate to their duration.
*
* In stock charts the X axis is ordinal by default, unless
* the boost module is used and at least one of the series' data length
* exceeds the [boostThreshold](#series.line.boostThreshold).
*
* For an ordinal axis, `minPadding` and `maxPadding` are ignored. Use
* [overscroll](#xAxis.overscroll) instead.
*
* @sample {highstock} stock/xaxis/ordinal-true/
* True by default
* @sample {highstock} stock/xaxis/ordinal-false/
* False
*
* @see [overscroll](#xAxis.overscroll)
*
* @type {boolean}
* @default true
* @since 1.1
* @product highstock
* @apioption xAxis.ordinal
*/
/**
* Additional range on the right side of the xAxis. Works similar to
* `xAxis.maxPadding`, but the value is set in terms of axis values,
* percentage or pixels.
*
* If it's a number, it is interpreted as axis values, which in a
* datetime axis equals milliseconds.
*
* If it's a percentage string, is interpreted as percentages of axis
* length. An overscroll of 50% will make a 100px axis 50px longer.
*
* If it's a pixel string, it is interpreted as a fixed pixel value, but
* limited to 90% of the axis length.
*
* @sample {highstock} stock/xaxis/overscroll/ One minute overscroll
* with live data
* @sample {highstock} stock/xaxis/overscroll-percent/ Overscroll set in
* percentage
* @sample {highstock} stock/xaxis/overscroll-pixel/ Overscroll set in
* pixels
*
* @type {number | string}
* @default 0
* @since 6.0.0
* @product highstock
* @apioption xAxis.overscroll
*/
/**
* Refers to the index in the [panes](#panes) array. Used for circular
* gauges and polar charts. When the option is not set then first pane
* will be used.
*
* @sample highcharts/demo/gauge-vu-meter
* Two gauges with different center
*
* @type {number}
* @product highcharts
* @apioption xAxis.pane
*/
/**
* The zoomed range to display when only defining one or none of `min`
* or `max`. For example, to show the latest month, a range of one month
* can be set.
*
* @sample {highstock} stock/xaxis/range/
* Setting a zoomed range when the rangeSelector is disabled
*
* @type {number}
* @product highstock
* @apioption xAxis.range
*/
/**
* Whether to reverse the axis so that the highest number is closest
* to the origin. If the chart is inverted, the x axis is reversed by
* default.
*
* @sample {highcharts} highcharts/yaxis/reversed/
* Reversed Y axis
* @sample {highstock} stock/xaxis/reversed/
* Reversed Y axis
*
* @type {boolean}
* @default undefined
* @apioption xAxis.reversed
*/
reversed: void 0,
/**
* This option determines how stacks should be ordered within a group.
* For example reversed xAxis also reverses stacks, so first series
* comes last in a group. To keep order like for non-reversed xAxis
* enable this option.
*
* @sample {highcharts} highcharts/xaxis/reversedstacks/
* Reversed stacks comparison
* @sample {highstock} highcharts/xaxis/reversedstacks/
* Reversed stacks comparison
*
* @since 6.1.1
* @product highcharts highstock
*/
reversedStacks: false,
/**
* An optional scrollbar to display on the X axis in response to
* limiting the minimum and maximum of the axis values.
*
* In styled mode, all the presentational options for the scrollbar are
* replaced by the classes `.highcharts-scrollbar-thumb`,
* `.highcharts-scrollbar-arrow`, `.highcharts-scrollbar-button`,
* `.highcharts-scrollbar-rifles` and `.highcharts-scrollbar-track`.
*
* @sample {highstock} stock/yaxis/heatmap-scrollbars/
* Heatmap with both scrollbars
*
* @extends scrollbar
* @since 4.2.6
* @product highstock
* @apioption xAxis.scrollbar
*/
/**
* Whether to show the axis line and title when the axis has no data.
*
* @sample {highcharts} highcharts/yaxis/showempty/
* When clicking the legend to hide series, one axis preserves
* line and title, the other doesn't
* @sample {highstock} highcharts/yaxis/showempty/
* When clicking the legend to hide series, one axis preserves
* line and title, the other doesn't
*
* @since 1.1
*/
showEmpty: true,
/**
* Whether to show the first tick label.
*
* @sample {highcharts} highcharts/xaxis/showfirstlabel-false/
* Set to false on X axis
* @sample {highstock} stock/xaxis/showfirstlabel/
* Labels below plot lines on Y axis
*/
showFirstLabel: true,
/**
* Whether to show the last tick label. Defaults to `true` on cartesian
* charts, and `false` on polar charts.
*
* @sample {highcharts} highcharts/xaxis/showlastlabel-true/
* Set to true on X axis
* @sample {highstock} stock/xaxis/showfirstlabel/
* Labels below plot lines on Y axis
*
* @type {boolean}
* @default undefined
* @product highcharts highstock gantt
*/
showLastLabel: true,
/**
* A soft maximum for the axis. If the series data maximum is less than
* this, the axis will stay at this maximum, but if the series data
* maximum is higher, the axis will flex to show all data.
*
* @sample highcharts/yaxis/softmin-softmax/
* Soft min and max
*
* @type {number}
* @since 5.0.1
* @product highcharts highstock gantt
* @apioption xAxis.softMax
*/
/**
* A soft minimum for the axis. If the series data minimum is greater
* than this, the axis will stay at this minimum, but if the series
* data minimum is lower, the axis will flex to show all data.
*
* @sample highcharts/yaxis/softmin-softmax/
* Soft min and max
*
* @type {number}
* @since 5.0.1
* @product highcharts highstock gantt
* @apioption xAxis.softMin
*/
/**
* For datetime axes, this decides where to put the tick between weeks.
* 0 = Sunday, 1 = Monday.
*
* @sample {highcharts} highcharts/xaxis/startofweek-monday/
* Monday by default
* @sample {highcharts} highcharts/xaxis/startofweek-sunday/
* Sunday
* @sample {highstock} stock/xaxis/startofweek-1
* Monday by default
* @sample {highstock} stock/xaxis/startofweek-0
* Sunday
*
* @product highcharts highstock gantt
*/
startOfWeek: 1,
/**
* Whether to force the axis to start on a tick. Use this option with
* the `minPadding` option to control the axis start.
*
* @productdesc {highstock}
* In Highcharts Stock, `startOnTick` is always `false` when
* the navigator is enabled, to prevent jumpy scrolling.
*
* @sample {highcharts} highcharts/xaxis/startontick-false/
* False by default
* @sample {highcharts} highcharts/xaxis/startontick-true/
* True
*
* @since 1.2.0
*/
startOnTick: false,
/**
* The amount of ticks to draw on the axis. This opens up for aligning
* the ticks of multiple charts or panes within a chart. This option
* overrides the `tickPixelInterval` option.
*
* This option only has an effect on linear axes. Datetime, logarithmic
* or category axes are not affected.
*
* @sample {highcharts} highcharts/yaxis/tickamount/
* 8 ticks on Y axis
* @sample {highstock} highcharts/yaxis/tickamount/
* 8 ticks on Y axis
*
* @type {number}
* @since 4.1.0
* @product highcharts highstock gantt
* @apioption xAxis.tickAmount
*/
/**
* The interval of the tick marks in axis units. When `undefined`, the
* tick interval is computed to approximately follow the
* [tickPixelInterval](#xAxis.tickPixelInterval) on linear and datetime
* axes. On categorized axes, a `undefined` tickInterval will default to
* 1, one category. Note that datetime axes are based on milliseconds,
* so for example an interval of one day is expressed as
* `24 * 3600 * 1000`.
*
* On logarithmic axes, the tickInterval is based on powers, so a
* tickInterval of 1 means one tick on each of 0.1, 1, 10, 100 etc. A
* tickInterval of 2 means a tick of 0.1, 10, 1000 etc. A tickInterval
* of 0.2 puts a tick on 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20,
* 40 etc.
*
*
* If the tickInterval is too dense for labels to be drawn, Highcharts
* may remove ticks.
*
* If the chart has multiple axes, the [alignTicks](#chart.alignTicks)
* option may interfere with the `tickInterval` setting.
*
* @see [tickPixelInterval](#xAxis.tickPixelInterval)
* @see [tickPositions](#xAxis.tickPositions)
* @see [tickPositioner](#xAxis.tickPositioner)
*
* @sample {highcharts} highcharts/xaxis/tickinterval-5/
* Tick interval of 5 on a linear axis
* @sample {highstock} stock/xaxis/tickinterval/
* Tick interval of 0.01 on Y axis
*
* @type {number}
* @apioption xAxis.tickInterval
*/
/**
* The pixel length of the main tick marks.
*
* @sample {highcharts} highcharts/xaxis/ticklength/
* 20 px tick length on the X axis
* @sample {highstock} stock/xaxis/ticks/
* Formatted ticks on X axis
*/
tickLength: 10,
/**
* If tickInterval is `null` this option sets the approximate pixel
* interval of the tick marks. Not applicable to categorized axis.
*
* The tick interval is also influenced by the [minTickInterval](
* #xAxis.minTickInterval) option, that, by default prevents ticks from
* being denser than the data points.
*
* @see [tickInterval](#xAxis.tickInterval)
* @see [tickPositioner](#xAxis.tickPositioner)
* @see [tickPositions](#xAxis.tickPositions)
*
* @sample {highcharts} highcharts/xaxis/tickpixelinterval-50/
* 50 px on X axis
* @sample {highstock} stock/xaxis/tickpixelinterval/
* 200 px on X axis
*/
tickPixelInterval: 100,
/**
* For categorized axes only. If `on` the tick mark is placed in the
* center of the category, if `between` the tick mark is placed between
* categories. The default is `between` if the `tickInterval` is 1, else
* `on`. In order to render tick marks on a category axis it is necessary
* to provide a [tickWidth](#xAxis.tickWidth).
*
* @sample {highcharts} highcharts/xaxis/tickmarkplacement-between/
* "between" by default
* @sample {highcharts} highcharts/xaxis/tickmarkplacement-on/
* "on"
*
* @product highcharts gantt
* @validvalue ["on", "between"]
*/
tickmarkPlacement: 'between',
/**
* The position of the major tick marks relative to the axis line.
* Can be one of `inside` and `outside`.
*
* @sample {highcharts} highcharts/xaxis/tickposition-outside/
* "outside" by default
* @sample {highcharts} highcharts/xaxis/tickposition-inside/
* "inside"
* @sample {highstock} stock/xaxis/ticks/
* Formatted ticks on X axis
*
* @validvalue ["inside", "outside"]
*/
tickPosition: 'outside',
/**
* A callback function returning array defining where the ticks are
* laid out on the axis. This overrides the default behaviour of
* [tickPixelInterval](#xAxis.tickPixelInterval) and [tickInterval](
* #xAxis.tickInterval). The automatic tick positions are accessible
* through `this.tickPositions` and can be modified by the callback.
*
* @see [tickPositions](#xAxis.tickPositions)
*
* @sample {highcharts} highcharts/xaxis/tickpositions-tickpositioner/
* Demo of tickPositions and tickPositioner
* @sample {highstock} highcharts/xaxis/tickpositions-tickpositioner/
* Demo of tickPositions and tickPositioner
*
* @type {Highcharts.AxisTickPositionerCallbackFunction}
* @apioption xAxis.tickPositioner
*/
/**
* An array defining where the ticks are laid out on the axis. This
* overrides the default behaviour of [tickPixelInterval](
* #xAxis.tickPixelInterval) and [tickInterval](#xAxis.tickInterval).
*
* @see [tickPositioner](#xAxis.tickPositioner)
*
* @sample {highcharts} highcharts/xaxis/tickpositions-tickpositioner/
* Demo of tickPositions and tickPositioner
* @sample {highstock} highcharts/xaxis/tickpositions-tickpositioner/
* Demo of tickPositions and tickPositioner
*
* @type {Array<number>}
* @apioption xAxis.tickPositions
*/
/**
* The pixel width of the major tick marks. Defaults to 0 on category
* axes, otherwise 1.
*
* In styled mode, the stroke width is given in the `.highcharts-tick`
* class, but in order for the element to be generated on category axes,
* the option must be explicitly set to 1.
*
* @sample {highcharts} highcharts/xaxis/tickwidth/
* 10 px width
* @sample {highcharts} highcharts/css/axis-grid/
* Styled mode
* @sample {highstock} stock/xaxis/ticks/
* Formatted ticks on X axis
* @sample {highstock} highcharts/css/axis-grid/
* Styled mode
*
* @type {undefined|number}
* @default {highstock} 1
* @default {highmaps} 0
* @apioption xAxis.tickWidth
*/
/**
* The axis title, showing next to the axis line.
*
* @productdesc {highmaps}
* In Highmaps, the axis is hidden by default, but adding an axis title
* is still possible. X axis and Y axis titles will appear at the bottom
* and left by default.
*/
title: {
/**
* Alignment of the title relative to the axis values. Possible
* values are "low", "middle" or "high".
*
* @sample {highcharts} highcharts/xaxis/title-align-low/
* "low"
* @sample {highcharts} highcharts/xaxis/title-align-center/
* "middle" by default
* @sample {highcharts} highcharts/xaxis/title-align-high/
* "high"
* @sample {highcharts} highcharts/yaxis/title-offset/
* Place the Y axis title on top of the axis
* @sample {highstock} stock/xaxis/title-align/
* Aligned to "high" value
*
* @type {Highcharts.AxisTitleAlignValue}
*/
align: 'middle',
/**
* Deprecated. Set the `text` to `undefined` to disable the title.
*
* @deprecated
* @type {boolean}
* @product highcharts
* @apioption xAxis.title.enabled
*/
/**
* The pixel distance between the axis labels or line and the title.
* Defaults to 0 for horizontal axes, 10 for vertical
*
* @sample {highcharts} highcharts/xaxis/title-margin/
* Y axis title margin of 60
*
* @type {number}
* @apioption xAxis.title.margin
*/
/**
* The distance of the axis title from the axis line. By default,
* this distance is computed from the offset width of the labels,
* the labels' distance from the axis and the title's margin.
* However when the offset option is set, it overrides all this.
*
* @sample {highcharts} highcharts/yaxis/title-offset/
* Place the axis title on top of the axis
* @sample {highstock} highcharts/yaxis/title-offset/
* Place the axis title on top of the Y axis
*
* @type {number}
* @since 2.2.0
* @apioption xAxis.title.offset
*/
/**
* Whether to reserve space for the title when laying out the axis.
*
* @type {boolean}
* @default true
* @since 5.0.11
* @product highcharts highstock gantt
* @apioption xAxis.title.reserveSpace
*/
/**
* The rotation of the text in degrees. 0 is horizontal, 270 is
* vertical reading from bottom to top. Defaults to 0 for horizontal
* axes, 270 for left-side axes and 90 for right-side axes.
*
* @sample {highcharts} highcharts/yaxis/title-offset/
* Horizontal
*
* @type {number}
* @default undefined
* @apioption xAxis.title.rotation
*/
/**
* The actual text of the axis title. It can contain basic HTML tags
* like `b`, `i` and `span` with style.
*
* @sample {highcharts} highcharts/xaxis/title-text/
* Custom HTML
* @sample {highstock} stock/xaxis/title-text/
* Titles for both axes
*
* @type {string|null}
* @apioption xAxis.title.text
*/
/**
* Alignment of the text, can be `"left"`, `"right"` or `"center"`.
* Default alignment depends on the
* [title.align](xAxis.title.align):
*
* Horizontal axes:
* - for `align` = `"low"`, `textAlign` is set to `left`
* - for `align` = `"middle"`, `textAlign` is set to `center`
* - for `align` = `"high"`, `textAlign` is set to `right`
*
* Vertical axes:
* - for `align` = `"low"` and `opposite` = `true`, `textAlign` is
* set to `right`
* - for `align` = `"low"` and `opposite` = `false`, `textAlign` is
* set to `left`
* - for `align` = `"middle"`, `textAlign` is set to `center`
* - for `align` = `"high"` and `opposite` = `true` `textAlign` is
* set to `left`
* - for `align` = `"high"` and `opposite` = `false` `textAlign` is
* set to `right`
*
* @type {Highcharts.AlignValue}
* @apioption xAxis.title.textAlign
*/
/**
* Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the axis title.
*
* @product highcharts highstock gantt
*/
useHTML: false,
/**
* Horizontal pixel offset of the title position.
*
* @since 4.1.6
* @product highcharts highstock gantt
*/
x: 0,
/**
* Vertical pixel offset of the title position.
*
* @product highcharts highstock gantt
*/
y: 0,
/**
* CSS styles for the title. If the title text is longer than the
* axis length, it will wrap to multiple lines by default. This can
* be customized by setting the `lineClamp` property, by setting a
* specific `width` or by setting `whiteSpace: 'nowrap'`.
*
* In styled mode, the stroke width is given in the
* `.highcharts-axis-title` class.
*
* @sample {highcharts} highcharts/xaxis/title-style/
* Red
* @sample {highcharts} highcharts/css/axis/
* Styled mode
*
* @type {Highcharts.CSSObject}
*/
style: {
/** @internal */
color: "#666666" /* Palette.neutralColor60 */,
/**
* @type {number|string}
*/
fontSize: '0.8em'
}
},
/**
* The type of axis. Can be one of `linear`, `logarithmic`, `datetime`
* or `category`. In a datetime axis, the numbers are given in
* milliseconds, and tick marks are placed on appropriate values like
* full hours or days. In a category axis, the
* [point names](#series.line.data.name) of the chart's series are used
* for categories, if not a [categories](#xAxis.categories) array is
* defined.
*
* @sample {highcharts} highcharts/xaxis/type-linear/
* Linear
* @sample {highcharts} highcharts/yaxis/type-log/
* Logarithmic
* @sample {highcharts} highcharts/yaxis/type-log-minorgrid/
* Logarithmic with minor grid lines
* @sample {highcharts} highcharts/xaxis/type-log-both/
* Logarithmic on two axes
* @sample {highcharts} highcharts/yaxis/type-log-negative/
* Logarithmic with extension to emulate negative values
*
* @type {Highcharts.AxisTypeValue}
* @default linear
* @product highcharts gantt
* @apioption xAxis.type
*/
/**
* If there are multiple axes on the same side of the chart, the pixel
* margin between the axes. Defaults to 0 on vertical axes, 15 on
* horizontal axes.
*
* @type {number}
* @since 7.0.3
* @apioption xAxis.margin
*/
/**
* Applies only when the axis `type` is `category`. When `uniqueNames`
* is true, points are placed on the X axis according to their names.
* If the same point name is repeated in the same or another series,
* the point is placed on the same X position as other points of the
* same name. When `uniqueNames` is false, the points are laid out in
* increasing X positions regardless of their names, and the X axis
* category will take the name of the last point in each position.
*
* @sample {highcharts} highcharts/xaxis/uniquenames-true/
* True by default
* @sample {highcharts} highcharts/xaxis/uniquenames-false/
* False
*
* @since 4.2.7
* @product highcharts gantt
* @type {boolean}
* @default true
* @apioption xAxis.uniqueNames
*/
/**
* Datetime axis only. An array determining what time intervals the
* ticks are allowed to fall on. Each array item is an array where the
* first value is the time unit and the second value another array of
* allowed multiples.
*
* Defaults to:
* ```js
* units: [[
* 'millisecond', // unit name
* [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
* ], [
* 'second',
* [1, 2, 5, 10, 15, 30]
* ], [
* 'minute',
* [1, 2, 5, 10, 15, 30]
* ], [
* 'hour',
* [1, 2, 3, 4, 6, 8, 12]
* ], [
* 'day',
* [1, 2]
* ], [
* 'week',
* [1, 2]
* ], [
* 'month',
* [1, 2, 3, 4, 6]
* ], [
* 'year',
* null
* ]]
* ```
*
* @sample {highcharts} highcharts/xaxis/units/
* Axis units demonstrated
*
* @type {Array<Array<string,(Array<number>|null)>>}
* @product highcharts highstock gantt
* @apioption xAxis.units
*/
/**
* Whether axis, including axis title, line, ticks and labels, should
* be visible.
*
* @since 4.1.9
* @product highcharts highstock gantt
*/
visible: true,
/**
* Color of the minor, secondary grid lines.
*
* In styled mode, the stroke width is given in the
* `.highcharts-minor-grid-line` class.
*
* @sample {highcharts} highcharts/yaxis/minorgridlinecolor/
* Bright grey lines from Y axis
* @sample {highcharts|highstock} highcharts/css/axis-grid/
* Styled mode
* @sample {highstock} stock/xaxis/minorgridlinecolor/
* Bright grey lines from Y axis
*
* @type {Highcharts.ColorType}
* @default #f2f2f2
*/
minorGridLineColor: "#f2f2f2" /* Palette.neutralColor5 */,
/**
* Width of the minor, secondary grid lines.
*
* In styled mode, the stroke width is given in the
* `.highcharts-grid-line` class.
*
* @sample {highcharts} highcharts/yaxis/minorgridlinewidth/
* 2px lines from Y axis
* @sample {highcharts|highstock} highcharts/css/axis-grid/
* Styled mode
* @sample {highstock} stock/xaxis/minorgridlinewidth/
* 2px lines from Y axis
*/
minorGridLineWidth: 1,
/**
* Color for the minor tick marks.
*
* @sample {highcharts} highcharts/yaxis/minortickcolor/
* Black tick marks on Y axis
* @sample {highstock} stock/xaxis/minorticks/
* Black tick marks on Y axis
*
* @type {Highcharts.ColorType}
* @default #999999
*/
minorTickColor: "#999999" /* Palette.neutralColor40 */,
/**
* The color of the line marking the axis itself.
*
* In styled mode, the line stroke is given in the
* `.highcharts-axis-line` or `.highcharts-xaxis-line` class.
*
* @sample {highcharts} highcharts/yaxis/linecolor/
* A red line on Y axis
* @sample {highcharts|highstock} highcharts/css/axis/
* Axes in styled mode
* @sample {highstock} stock/xaxis/linecolor/
* A red line on X axis
*
* @type {Highcharts.ColorType}
*/
lineColor: "#333333" /* Palette.neutralColor80 */,
/**
* The width of the line marking the axis itself.
*
* In styled mode, the stroke width is given in the
* `.highcharts-axis-line` or `.highcharts-xaxis-line` class.
*
* @sample {highcharts} highcharts/yaxis/linecolor/
* A 1px line on Y axis
* @sample {highcharts|highstock} highcharts/css/axis/
* Axes in styled mode
* @sample {highstock} stock/xaxis/linewidth/
* A 2px line on X axis
*
* @default {highcharts|highstock} 1
* @default {highmaps} 0
*/
lineWidth: 1,
/**
* Color of the grid lines extending the ticks across the plot area.
*
* In styled mode, the stroke is given in the `.highcharts-grid-line`
* class.
*
* @productdesc {highmaps}
* In Highmaps, the grid lines are hidden by default.
*
* @sample {highcharts} highcharts/yaxis/gridlinecolor/
* Green lines
* @sample {highcharts|highstock} highcharts/css/axis-grid/
* Styled mode
* @sample {highstock} stock/xaxis/gridlinecolor/
* Green lines
*
* @type {Highcharts.ColorType}
* @default #e6e6e6
*/
gridLineColor: "#e6e6e6" /* Palette.neutralColor10 */,
/**
* The width of the grid lines extending the ticks across the plot area.
* Defaults to 1 on the Y axis and 0 on the X axis, except for 3d
* charts.
*
* In styled mode, the stroke width is given in the
* `.highcharts-grid-line` class.
*
* @sample {highcharts} highcharts/yaxis/gridlinewidth/
* 2px lines
* @sample {highcharts|highstock} highcharts/css/axis-grid/
* Styled mode
* @sample {highstock} stock/xaxis/gridlinewidth/
* 2px lines
*
* @type {number}
* @apioption xAxis.gridLineWidth
*/
gridLineWidth: void 0,
/**
* The height as the vertical axis. If it's a number, it is
* interpreted as pixels.
*
* Since Highcharts 2: If it's a percentage string, it is interpreted
* as percentages of the total plot height.
*
* @sample {highcharts} highcharts/xaxis/axis-position-properties
* Different axis position properties
*
* @type {number|string}
* @product highcharts highstock
* @apioption xAxis.height
*/
/**
* The width as the horizontal axis. If it's a number, it is interpreted
* as pixels.
*
* Since Highcharts v5.0.13: If it's a percentage string, it is
* interpreted as percentages of the total plot width.
*
* @sample {highcharts} highcharts/xaxis/axis-position-properties
* Different axis position properties
*
* @type {number|string}
* @product highcharts highstock
* @apioption xAxis.width
*/
/**
* Color for the main tick marks.
*
* In styled mode, the stroke is given in the `.highcharts-tick`
* class.
*
* @sample {highcharts} highcharts/xaxis/tickcolor/
* Red ticks on X axis
* @sample {highcharts|highstock} highcharts/css/axis-grid/
* Styled mode
* @sample {highstock} stock/xaxis/ticks/
* Formatted ticks on X axis
*
* @type {Highcharts.ColorType}
*/
tickColor: "#333333" /* Palette.neutralColor80 */
// `tickWidth: 1`
};
/**
* The Z axis or depth axis for 3D plots.
*
* See the [Axis class](/class-reference/Highcharts.Axis) for programmatic
* access to the axis.
*
* @sample {highcharts} highcharts/3d/scatter-zaxis-categories/
* Z-Axis with Categories
* @sample {highcharts} highcharts/3d/scatter-zaxis-grid/
* Z-Axis with styling
*
* @type {*|Array<*>}
* @extends xAxis
* @since 5.0.0
* @product highcharts
* @excluding breaks, crosshair, height, left, lineColor, lineWidth,
* nameToX, showEmpty, top, width
* @apioption zAxis
*/
/**
* The Y axis or value axis. Normally this is the vertical axis,
* though if the chart is inverted this is the horizontal axis.
* In case of multiple axes, the yAxis node is an array of
* configuration objects.
*
* See [the Axis object](/class-reference/Highcharts.Axis) for programmatic
* access to the axis.
*
* @type {*|Array<*>}
* @extends xAxis
* @excluding currentDateIndicator,ordinal,overscroll
* @optionparent yAxis
*/
AxisDefaults.yAxis = {
/**
* The type of axis. Can be one of `linear`, `logarithmic`, `datetime`,
* `category` or `treegrid`. Defaults to `treegrid` for Gantt charts,
* `linear` for other chart types.
*
* In a datetime axis, the numbers are given in milliseconds, and tick
* marks are placed on appropriate values, like full hours or days. In a
* category or treegrid axis, the [point names](#series.line.data.name)
* of the chart's series are used for categories, if a
* [categories](#xAxis.categories) array is not defined.
*
* @sample {highcharts} highcharts/yaxis/type-log-minorgrid/
* Logarithmic with minor grid lines
* @sample {highcharts} highcharts/yaxis/type-log-negative/
* Logarithmic with extension to emulate negative values
* @sample {gantt} gantt/treegrid-axis/demo
* Treegrid axis
*
* @type {Highcharts.AxisTypeValue}
* @default {highcharts} linear
* @default {gantt} treegrid
* @product highcharts gantt
* @apioption yAxis.type
*/
/**
* The height of the Y axis. If it's a number, it is interpreted as
* pixels.
*
* Since Highcharts 2: If it's a percentage string, it is interpreted as
* percentages of the total plot height.
*
* @see [yAxis.top](#yAxis.top)
*
* @sample {highstock} stock/demo/candlestick-and-volume/
* Percentage height panes
*
* @type {number|string}
* @product highcharts highstock
* @apioption yAxis.height
*/
/**
* Solid gauge only. Unless [stops](#yAxis.stops) are set, the color
* to represent the maximum value of the Y axis.
*
* @sample {highcharts} highcharts/yaxis/mincolor-maxcolor/
* Min and max colors
*
* @type {Highcharts.ColorType}
* @default #003399
* @since 4.0
* @product highcharts
* @apioption yAxis.maxColor
*/
/**
* Solid gauge only. Unless [stops](#yAxis.stops) are set, the color
* to represent the minimum value of the Y axis.
*
* @sample {highcharts} highcharts/yaxis/mincolor-maxcolor/
* Min and max color
*
* @type {Highcharts.ColorType}
* @default #e6ebf5
* @since 4.0
* @product highcharts
* @apioption yAxis.minColor
*/
/**
* Whether to reverse the axis so that the highest number is closest
* to the origin.
*
* @sample {highcharts} highcharts/yaxis/reversed/
* Reversed Y axis
* @sample {highstock} stock/xaxis/reversed/
* Reversed Y axis
*
* @type {boolean}
* @default {highcharts} false
* @default {highstock} false
* @default {highmaps} true
* @default {gantt} true
* @apioption yAxis.reversed
*/
/**
* If `true`, the first series in a stack will be drawn on top in a
* positive, non-reversed Y axis. If `false`, the first series is in
* the base of the stack.
*
* @sample {highcharts} highcharts/yaxis/reversedstacks-false/
* Non-reversed stacks
* @sample {highstock} highcharts/yaxis/reversedstacks-false/
* Non-reversed stacks
*
* @type {boolean}
* @default true
* @since 3.0.10
* @product highcharts highstock
* @apioption yAxis.reversedStacks
*/
reversedStacks: true,
/**
* Solid gauge series only. Color stops for the solid gauge. Use this
* in cases where a linear gradient between a `minColor` and `maxColor`
* is not sufficient. The stops is an array of tuples, where the first
* item is a float between 0 and 1 assigning the relative position in
* the gradient, and the second item is the color.
*
* For solid gauges, the Y axis also inherits the concept of
* [data classes](https://api.highcharts.com/highmaps#colorAxis.dataClasses)
* from the Highmaps color axis.
*
* @sample {highcharts} highcharts/demo/gauge-solid/
* Gauge with stops
*
* @see [minColor](#yAxis.minColor)
* @see [maxColor](#yAxis.maxColor)
*
* @type {Array<Array<number,Highcharts.ColorType>>}
* @since 4.0
* @product highcharts
* @apioption yAxis.stops
*/
/**
* The pixel width of the major tick marks.
*
* @sample {highcharts} highcharts/xaxis/tickwidth/ 10 px width
* @sample {highstock} stock/xaxis/ticks/ Formatted ticks on X axis
*
* @type {number}
* @default 0
* @product highcharts highstock gantt
* @apioption yAxis.tickWidth
*/
/**
* Whether to force the axis to end on a tick. Use this option with
* the `maxPadding` option to control the axis end.
*
* This option is always disabled, when panning type is
* either `y` or `xy`.
*
* @see [type](#chart.panning.type)
*
*
* @sample {highcharts} highcharts/yaxis/endontick/
* True by default
* @sample {highcharts} highcharts/yaxis/endontick-false/
* False
* @sample {highstock} stock/demo/basic-line/
* True by default
* @sample {highstock} stock/xaxis/endontick/
* False for Y axis
*
* @since 1.2.0
*/
endOnTick: true,
/**
* Padding of the max value relative to the length of the axis. A
* padding of 0.05 will make a 100px axis 5px longer. This is useful
* when you don't want the highest data value to appear on the edge
* of the plot area. When the axis' `max` option is set or a max extreme
* is set using `axis.setExtremes()`, the maxPadding will be ignored.
*
* Also the `softThreshold` option takes precedence over `maxPadding`,
* so if the data is tangent to the threshold, `maxPadding` may not
* apply unless `softThreshold` is set to false.
*
* @sample {highcharts} highcharts/yaxis/maxpadding-02/
* Max padding of 0.2
* @sample {highstock} stock/xaxis/minpadding-maxpadding/
* Greater min- and maxPadding
*
* @since 1.2.0
* @product highcharts highstock gantt
*/
maxPadding: 0.05,
/**
* Padding of the min value relative to the length of the axis. A
* padding of 0.05 will make a 100px axis 5px longer. This is useful
* when you don't want the lowest data value to appear on the edge
* of the plot area. When the axis' `min` option is set or a max extreme
* is set using `axis.setExtremes()`, the maxPadding will be ignored.
*
* Also the `softThreshold` option takes precedence over `minPadding`,
* so if the data is tangent to the threshold, `minPadding` may not
* apply unless `softThreshold` is set to false.
*
* @sample {highcharts} highcharts/yaxis/minpadding/
* Min padding of 0.2
* @sample {highstock} stock/xaxis/minpadding-maxpadding/
* Greater min- and maxPadding
*
* @since 1.2.0
* @product highcharts highstock gantt
*/
minPadding: 0.05,
/**
* @productdesc {highstock}
* In Highcharts Stock 1.x, the Y axis was placed
* on the left side by default.
*
* @sample {highcharts} highcharts/yaxis/opposite/
* Secondary Y axis opposite
* @sample {highstock} stock/xaxis/opposite/
* Y axis on left side
*
* @type {boolean}
* @default {highstock} true
* @default {highcharts} false
* @product highstock highcharts gantt
* @apioption yAxis.opposite
*/
/**
* @see [tickInterval](#xAxis.tickInterval)
* @see [tickPositioner](#xAxis.tickPositioner)
* @see [tickPositions](#xAxis.tickPositions)
*/
tickPixelInterval: 72,
/**
* Whether to show the last tick label.
*
* @productdesc {highcharts|gantt}
* Defaults to `true` on cartesian charts, and `false` on polar charts.
*
* @productdesc {highstock}
* Defaults to `true` for categorized yAxis and `false` for other types
* of yAxis.
*
* @default undefined
*/
showLastLabel: true,
/**
* @extends xAxis.labels
*/
labels: {
/**
* The label's pixel distance from the perimeter of the plot area.
* On cartesian charts, this is overridden if the `labels.y` setting
* is set.
*
* On polar charts, if it's a percentage string, it is interpreted
* the same as [series.radius](#plotOptions.gauge.radius), so the
* label can be aligned under the gauge's shape.
*
* @sample {highcharts} highcharts/yaxis/labels-distance/
* Polar chart, labels centered under the arc
*
* @type {number|string}
* @product highcharts
* @apioption yAxis.labels.distance
*/
/**
* The y position offset of all labels relative to the tick
* positions on the axis. For polar and radial axis consider the use
* of the [distance](#yAxis.labels.distance) option.
*
* @sample {highcharts} highcharts/xaxis/labels-x/
* Y axis labels placed on grid lines
*
* @type {number}
* @default {highcharts} 3
* @default {highstock} -2
* @default {highmaps} 3
* @apioption yAxis.labels.y
*/
/**
* What part of the string the given position is anchored to. Can
* be one of `"left"`, `"center"` or `"right"`. The exact position
* also depends on the `labels.x` setting.
*
* Angular gauges and solid gauges defaults to `"center"`.
* Solid gauges with two labels have additional option `"auto"`
* for automatic horizontal and vertical alignment.
*
* @sample {highcharts} highcharts/yaxis/labels-align-left/
* Left
* @sample {highcharts} highcharts/series-solidgauge/labels-auto-aligned/
* Solid gauge labels auto aligned
*
* @type {Highcharts.AlignValue}
* @default {highstock} right
* @apioption yAxis.labels.align
*/
/**
* The x position offset of all labels relative to the tick
* positions on the axis. Defaults to -15 for left axis, 15 for
* right axis.
*
* @sample {highcharts} highcharts/xaxis/labels-x/
* Y axis labels placed on grid lines
*
* @type {number}
*/
x: void 0
},
/**
* @sample {highcharts} highcharts/yaxis/max-200/
* Y axis max of 200
* @sample {highcharts} highcharts/yaxis/max-logarithmic/
* Y axis max on logarithmic axis
* @sample {highstock} stock/yaxis/min-max/
* Fixed min and max on Y axis
*
* @apioption yAxis.max
*/
/**
* @sample {highcharts} highcharts/yaxis/min-startontick-false/
* -50 with startOnTick to false
* @sample {highcharts} highcharts/yaxis/min-startontick-true/
* -50 with startOnTick true by default
* @sample {highstock} stock/yaxis/min-max/
* Fixed min and max on Y axis
*
* @apioption yAxis.min
*/
/**
* An optional scrollbar to display on the Y axis in response to
* limiting the minimum an maximum of the axis values.
*
* In styled mode, all the presentational options for the scrollbar
* are replaced by the classes `.highcharts-scrollbar-thumb`,
* `.highcharts-scrollbar-arrow`, `.highcharts-scrollbar-button`,
* `.highcharts-scrollbar-rifles` and `.highcharts-scrollbar-track`.
*
* @sample {highstock} stock/yaxis/scrollbar/
* Scrollbar on the Y axis
*
* @extends scrollbar
* @since 4.2.6
* @product highstock
* @excluding height
* @apioption yAxis.scrollbar
*/
/**
* Enable the scrollbar on the Y axis.
*
* @sample {highstock} stock/yaxis/scrollbar/
* Enabled on Y axis
*
* @type {boolean}
* @default false
* @since 4.2.6
* @product highstock
* @apioption yAxis.scrollbar.enabled
*/
/**
* Pixel margin between the scrollbar and the axis elements.
*
* @type {number}
* @default 10
* @since 4.2.6
* @product highstock
* @apioption yAxis.scrollbar.margin
*/
/* eslint-disable highcharts/doclet-apioption-last */
/**
* Defines the position of the scrollbar. By default, it is positioned
* on the opposite of the main axis (right side of the chart).
* However, in the case of RTL languages could be set to `false`
* which positions the scrollbar on the left.
*
* Works only for vertical axes.
* This means yAxis in a non-inverted chart and xAxis in the inverted.
*
* @sample stock/yaxis/scrollbar-opposite/
* A scrollbar not on the opposite side
*
* @type {boolean}
* @default true
* @since 9.3.0
*
* @apioption yAxis.scrollbar.opposite
* @apioption xAxis.scrollbar.opposite
*
*/
/* eslint-enable highcharts/doclet-apioption-last */
/**
* Whether to show the scrollbar when it is fully zoomed out at max
* range. Setting it to `false` on the Y axis makes the scrollbar stay
* hidden until the user zooms in, like common in browsers.
*
* @type {boolean}
* @default true
* @since 4.2.6
* @product highstock
* @apioption yAxis.scrollbar.showFull
*/
/**
* The width of a vertical scrollbar or height of a horizontal
* scrollbar. Defaults to 20 on touch devices.
*
* @type {number}
* @default 14
* @since 4.2.6
* @product highstock
* @apioption yAxis.scrollbar.size
*/
/**
* Z index of the scrollbar elements.
*
* @type {number}
* @default 3
* @since 4.2.6
* @product highstock
* @apioption yAxis.scrollbar.zIndex
*/
/**
* A soft maximum for the axis. If the series data maximum is less
* than this, the axis will stay at this maximum, but if the series
* data maximum is higher, the axis will flex to show all data.
*
* **Note**: The [series.softThreshold](
* #plotOptions.series.softThreshold) option takes precedence over this
* option.
*
* @sample highcharts/yaxis/softmin-softmax/
* Soft min and max
*
* @type {number}
* @since 5.0.1
* @product highcharts highstock gantt
* @apioption yAxis.softMax
*/
/**
* A soft minimum for the axis. If the series data minimum is greater
* than this, the axis will stay at this minimum, but if the series
* data minimum is lower, the axis will flex to show all data.
*
* **Note**: The [series.softThreshold](
* #plotOptions.series.softThreshold) option takes precedence over this
* option.
*
* @sample highcharts/yaxis/softmin-softmax/
* Soft min and max
*
* @type {number}
* @since 5.0.1
* @product highcharts highstock gantt
* @apioption yAxis.softMin
*/
/**
* Defines the horizontal alignment of the stack total label. Can be one
* of `"left"`, `"center"` or `"right"`. The default value is calculated
* at runtime and depends on orientation and whether the stack is
* positive or negative.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-align-left/
* Aligned to the left
* @sample {highcharts} highcharts/yaxis/stacklabels-align-center/
* Aligned in center
* @sample {highcharts} highcharts/yaxis/stacklabels-align-right/
* Aligned to the right
*
* @type {Highcharts.AlignValue}
* @since 2.1.5
* @product highcharts
* @apioption yAxis.stackLabels.align
*/
/**
* A format string for the data label. Available variables are the same
* as for `formatter`.
*
* @type {string}
* @default {total}
* @since 3.0.2
* @product highcharts highstock
* @apioption yAxis.stackLabels.format
*/
/**
* Rotation of the labels in degrees.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-rotation/
* Labels rotated 45°
*
* @type {number}
* @default 0
* @since 2.1.5
* @product highcharts
* @apioption yAxis.stackLabels.rotation
*/
/**
* The text alignment for the label. While `align` determines where the
* texts anchor point is placed with regards to the stack, `textAlign`
* determines how the text is aligned against its anchor point. Possible
* values are `"left"`, `"center"` and `"right"`. The default value is
* calculated at runtime and depends on orientation and whether the
* stack is positive or negative.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-textalign-left/
* Label in center position but text-aligned left
*
* @type {Highcharts.AlignValue}
* @since 2.1.5
* @product highcharts
* @apioption yAxis.stackLabels.textAlign
*/
/**
* Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the labels.
*
* @type {boolean}
* @default false
* @since 3.0
* @product highcharts highstock
* @apioption yAxis.stackLabels.useHTML
*/
/**
* Defines the vertical alignment of the stack total label. Can be one
* of `"top"`, `"middle"` or `"bottom"`. The default value is calculated
* at runtime and depends on orientation and whether the stack is
* positive or negative.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-verticalalign-top/
* Vertically aligned top
* @sample {highcharts} highcharts/yaxis/stacklabels-verticalalign-middle/
* Vertically aligned middle
* @sample {highcharts} highcharts/yaxis/stacklabels-verticalalign-bottom/
* Vertically aligned bottom
*
* @type {Highcharts.VerticalAlignValue}
* @since 2.1.5
* @product highcharts
* @apioption yAxis.stackLabels.verticalAlign
*/
/**
* The x position offset of the label relative to the left of the
* stacked bar. The default value is calculated at runtime and depends
* on orientation and whether the stack is positive or negative.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-x/
* Stack total labels with x offset
*
* @type {number}
* @since 2.1.5
* @product highcharts
* @apioption yAxis.stackLabels.x
*/
/**
* The y position offset of the label relative to the tick position
* on the axis. The default value is calculated at runtime and depends
* on orientation and whether the stack is positive or negative.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-y/
* Stack total labels with y offset
*
* @type {number}
* @since 2.1.5
* @product highcharts
* @apioption yAxis.stackLabels.y
*/
/**
* Whether to force the axis to start on a tick. Use this option with
* the `maxPadding` option to control the axis start.
*
* This option is always disabled, when panning type is
* either `y` or `xy`.
*
* @see [type](#chart.panning.type)
*
* @sample {highcharts} highcharts/xaxis/startontick-false/
* False by default
* @sample {highcharts} highcharts/xaxis/startontick-true/
* True
* @sample {highstock} stock/xaxis/endontick/
* False for Y axis
*
* @since 1.2.0
* @product highcharts highstock gantt
*/
startOnTick: true,
title: {
/**
* The pixel distance between the axis labels and the title.
* Positive values are outside the axis line, negative are inside.
*
* @sample {highcharts} highcharts/xaxis/title-margin/
* Y axis title margin of 60
*
* @type {number}
* @default 40
* @apioption yAxis.title.margin
*/
/**
* The actual text of the axis title. Horizontal texts can contain
* HTML, but rotated texts are painted using vector techniques and
* must be clean text. The Y axis title is disabled by setting the
* `text` option to `undefined`.
*
* @sample {highcharts} highcharts/xaxis/title-text/
* Custom HTML
*
* @type {string|null}
* @default {highcharts} Values
* @default {highstock} undefined
* @product highcharts highstock gantt
*/
text: 'Values'
},
/**
* The top position of the Y axis. If it's a number, it is interpreted
* as pixel position relative to the chart.
*
* Since Highcharts 2: If it's a percentage string, it is interpreted as
* percentages of the plot height, offset from plot area top.
*
* @see [yAxis.height](#yAxis.height)
*
* @sample {highstock} stock/demo/candlestick-and-volume/
* Percentage height panes
*
* @type {number|string}
* @product highcharts highstock
* @apioption yAxis.top
*/
/**
* The stack labels show the total value for each bar in a stacked
* column or bar chart. The label will be placed on top of positive
* columns and below negative columns. In case of an inverted column
* chart or a bar chart the label is placed to the right of positive
* bars and to the left of negative bars.
*
* @product highcharts
*/
stackLabels: {
/**
* Enable or disable the initial animation when a series is
* displayed for the `stackLabels`. The animation can also be set as
* a configuration object. Please note that this option only
* applies to the initial animation.
* For other animations, see [chart.animation](#chart.animation)
* and the animation parameter under the API methods.
* The following properties are supported:
*
* - `defer`: The animation delay time in milliseconds.
*
* @sample {highcharts} highcharts/plotoptions/animation-defer/
* Animation defer settings
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
* @since 8.2.0
* @apioption yAxis.stackLabels.animation
*/
animation: {},
/**
* The animation delay time in milliseconds.
* Set to `0` renders stackLabel immediately.
* As `undefined` inherits defer time from the [series.animation.defer](#plotOptions.series.animation.defer).
*
* @type {number}
* @since 8.2.0
* @apioption yAxis.stackLabels.animation.defer
*/
/**
* Allow the stack labels to overlap.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-allowoverlap-false/
* Default false
*
* @since 5.0.13
* @product highcharts
*/
allowOverlap: false,
/**
* The background color or gradient for the stack label.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-box/
* Stack labels box options
* @type {Highcharts.ColorType}
* @since 8.1.0
* @apioption yAxis.stackLabels.backgroundColor
*/
/**
* The border color for the stack label. Defaults to `undefined`.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-box/
* Stack labels box options
* @type {Highcharts.ColorType}
* @since 8.1.0
* @apioption yAxis.stackLabels.borderColor
*/
/**
* The border radius in pixels for the stack label.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-box/
* Stack labels box options
* @type {number}
* @default 0
* @since 8.1.0
* @apioption yAxis.stackLabels.borderRadius
*/
/**
* The border width in pixels for the stack label.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-box/
* Stack labels box options
* @type {number}
* @default 0
* @since 8.1.0
* @apioption yAxis.stackLabels.borderWidth
*/
/**
* Enable or disable the stack total labels.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-enabled/
* Enabled stack total labels
* @sample {highcharts} highcharts/yaxis/stacklabels-enabled-waterfall/
* Enabled stack labels in waterfall chart
*
* @since 2.1.5
* @product highcharts
*/
enabled: false,
/**
* Whether to hide stack labels that are outside the plot area.
* By default, the stack label is moved
* inside the plot area according to the
* [overflow](/highcharts/#yAxis/stackLabels/overflow)
* option.
*
* @type {boolean}
* @since 7.1.3
*/
crop: true,
/**
* How to handle stack total labels that flow outside the plot area.
* The default is set to `"justify"`,
* which aligns them inside the plot area.
* For columns and bars, this means it will be moved inside the bar.
* To display stack labels outside the plot area,
* set `crop` to `false` and `overflow` to `"allow"`.
*
* @sample highcharts/yaxis/stacklabels-overflow/
* Stack labels flows outside the plot area.
*
* @type {Highcharts.DataLabelsOverflowValue}
* @since 7.1.3
*/
overflow: 'justify',
/* eslint-disable valid-jsdoc */
/**
* Callback JavaScript function to format the label. The value is
* given by `this.total`.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-formatter/
* Added units to stack total value
*
* @type {Highcharts.FormatterCallbackFunction<Highcharts.StackItemObject>}
* @since 2.1.5
* @product highcharts
*/
formatter: function () {
var numberFormatter = this.axis.chart.numberFormatter;
/* eslint-enable valid-jsdoc */
return numberFormatter(this.total || 0, -1);
},
/**
* CSS styles for the label.
*
* In styled mode, the styles are set in the
* `.highcharts-stack-label` class.
*
* @sample {highcharts} highcharts/yaxis/stacklabels-style/
* Red stack total labels
*
* @type {Highcharts.CSSObject}
* @since 2.1.5
* @product highcharts
*/
style: {
/** @internal */
color: "#000000" /* Palette.neutralColor100 */,
/**
* @type {number|string}
*/
fontSize: '0.7em',
/** @internal */
fontWeight: 'bold',
/** @internal */
textOutline: '1px contrast'
}
},
gridLineWidth: 1,
lineWidth: 0
};
})(AxisDefaults || (AxisDefaults = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Axis_AxisDefaults = (AxisDefaults);
;// ./code/es5/es-modules/Core/Foundation.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Foundation_addEvent = Core_Utilities.addEvent, Foundation_isFunction = Core_Utilities.isFunction, Foundation_objectEach = Core_Utilities.objectEach, Foundation_removeEvent = Core_Utilities.removeEvent;
/* *
*
* Class Namespace
*
* */
var Foundation;
(function (Foundation) {
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Register event options. If an event handler is set on the options, it
* should be subject to Chart.update, Axis.update and Series.update. This is
* contrary to general handlers that are set directly using addEvent either
* on the class or on the instance. #6538, #6943, #10861.
* @private
*/
function registerEventOptions(component, options) {
// A lookup over those events that are added by _options_ (not
// programmatically). These are updated through .update()
component.eventOptions = component.eventOptions || {};
// Register event listeners
Foundation_objectEach(options.events, function (event, eventType) {
// If event does not exist, or is changed by the .update()
// function
if (component.eventOptions[eventType] !== event) {
// Remove existing if set by option
if (component.eventOptions[eventType]) {
Foundation_removeEvent(component, eventType, component.eventOptions[eventType]);
delete component.eventOptions[eventType];
}
if (Foundation_isFunction(event)) {
component.eventOptions[eventType] = event;
Foundation_addEvent(component, eventType, event, {
order: 0 // #14080 fire those events as firsts
});
}
}
});
}
Foundation.registerEventOptions = registerEventOptions;
})(Foundation || (Foundation = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Core_Foundation = (Foundation);
;// ./code/es5/es-modules/Core/Axis/Tick.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Tick_deg2rad = Core_Globals.deg2rad;
var Tick_clamp = Core_Utilities.clamp, Tick_correctFloat = Core_Utilities.correctFloat, Tick_defined = Core_Utilities.defined, Tick_destroyObjectProperties = Core_Utilities.destroyObjectProperties, Tick_extend = Core_Utilities.extend, Tick_fireEvent = Core_Utilities.fireEvent, Tick_getAlignFactor = Core_Utilities.getAlignFactor, Tick_isNumber = Core_Utilities.isNumber, Tick_merge = Core_Utilities.merge, Tick_objectEach = Core_Utilities.objectEach, Tick_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* The Tick class.
*
* @class
* @name Highcharts.Tick
*
* @param {Highcharts.Axis} axis
* The axis of the tick.
*
* @param {number} pos
* The position of the tick on the axis in terms of axis values.
*
* @param {string} [type]
* The type of tick, either 'minor' or an empty string
*
* @param {boolean} [noLabel=false]
* Whether to disable the label or not. Defaults to false.
*
* @param {Object} [parameters]
* Optional parameters for the tick.
*/
var Tick = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function Tick(axis, pos, type, noLabel, parameters) {
this.isNew = true;
this.isNewLabel = true;
/**
* The related axis of the tick.
* @name Highcharts.Tick#axis
* @type {Highcharts.Axis}
*/
this.axis = axis;
/**
* The logical position of the tick on the axis in terms of axis values.
* @name Highcharts.Tick#pos
* @type {number}
*/
this.pos = pos;
/**
* The tick type, which can be `"minor"`, or an empty string.
* @name Highcharts.Tick#type
* @type {string}
*/
this.type = type || '';
this.parameters = parameters || {};
/**
* The mark offset of the tick on the axis. Usually `undefined`, numeric
* for grid axes.
* @name Highcharts.Tick#tickmarkOffset
* @type {number|undefined}
*/
this.tickmarkOffset = this.parameters.tickmarkOffset;
this.options = this.parameters.options;
Tick_fireEvent(this, 'init');
if (!type && !noLabel) {
this.addLabel();
}
}
/* *
*
* Functions
*
* */
/**
* Write the tick label.
*
* @private
* @function Highcharts.Tick#addLabel
*/
Tick.prototype.addLabel = function () {
var tick = this,
axis = tick.axis,
options = axis.options,
chart = axis.chart,
categories = axis.categories,
log = axis.logarithmic,
names = axis.names,
pos = tick.pos,
labelOptions = Tick_pick(tick.options && tick.options.labels,
options.labels),
tickPositions = axis.tickPositions,
isFirst = pos === tickPositions[0],
isLast = pos === tickPositions[tickPositions.length - 1],
animateLabels = (!labelOptions.step || labelOptions.step === 1) &&
axis.tickInterval === 1,
tickPositionInfo = tickPositions.info;
var label = tick.label,
dateTimeLabelFormat,
dateTimeLabelFormats,
i;
// The context value
var value = this.parameters.category || (categories ?
Tick_pick(categories[pos],
names[pos],
pos) :
pos);
if (log && Tick_isNumber(value)) {
value = Tick_correctFloat(log.lin2log(value));
}
// Set the datetime label format. If a higher rank is set for this
// position, use that. If not, use the general format.
if (axis.dateTime) {
if (tickPositionInfo) {
dateTimeLabelFormats = chart.time.resolveDTLFormat(options.dateTimeLabelFormats[(!options.grid &&
tickPositionInfo.higherRanks[pos]) ||
tickPositionInfo.unitName]);
dateTimeLabelFormat = dateTimeLabelFormats.main;
}
else if (Tick_isNumber(value)) { // #1441
dateTimeLabelFormat = axis.dateTime.getXDateFormat(value, options.dateTimeLabelFormats ||
{});
}
}
// Set properties for access in render method
/**
* True if the tick is the first one on the axis.
* @name Highcharts.Tick#isFirst
* @readonly
* @type {boolean|undefined}
*/
tick.isFirst = isFirst;
/**
* True if the tick is the last one on the axis.
* @name Highcharts.Tick#isLast
* @readonly
* @type {boolean|undefined}
*/
tick.isLast = isLast;
// Get the string
var ctx = {
axis: axis,
chart: chart,
dateTimeLabelFormat: dateTimeLabelFormat,
isFirst: isFirst,
isLast: isLast,
pos: pos,
tick: tick,
tickPositionInfo: tickPositionInfo,
value: value
};
// Fire an event that allows modifying the context for use in
// `labels.format` and `labels.formatter`.
Tick_fireEvent(this, 'labelFormat', ctx);
// Label formatting. When `labels.format` is given, we first run the
// defaultFormatter and append the result to the context as `text`.
// Handy for adding prefix or suffix while keeping default number
// formatting.
var labelFormatter = function (ctx) {
if (labelOptions.formatter) {
return labelOptions.formatter.call(ctx,
ctx);
}
if (labelOptions.format) {
ctx.text = axis.defaultLabelFormatter.call(ctx);
return Core_Templating.format(labelOptions.format, ctx, chart);
}
return axis.defaultLabelFormatter.call(ctx);
};
var str = labelFormatter.call(ctx,
ctx);
// Set up conditional formatting based on the format list if existing.
var list = dateTimeLabelFormats && dateTimeLabelFormats.list;
if (list) {
tick.shortenLabel = function () {
for (i = 0; i < list.length; i++) {
Tick_extend(ctx, { dateTimeLabelFormat: list[i] });
label.attr({
text: labelFormatter.call(ctx, ctx)
});
if (label.getBBox().width <
axis.getSlotWidth(tick) - 2 *
(labelOptions.padding || 0)) {
return;
}
}
label.attr({
text: ''
});
};
}
else {
// #15692
tick.shortenLabel = void 0;
}
// Call only after first render
if (animateLabels && axis._addedPlotLB) {
tick.moveLabel(str, labelOptions);
}
// First call
if (!Tick_defined(label) && !tick.movedLabel) {
/**
* The rendered text label of the tick.
* @name Highcharts.Tick#label
* @type {Highcharts.SVGElement|undefined}
*/
tick.label = label = tick.createLabel(str, labelOptions);
// Base value to detect change for new calls to getBBox
tick.rotation = 0;
// Update
}
else if (label && label.textStr !== str && !animateLabels) {
// When resetting text, also reset the width if dynamically set
// (#8809)
if (label.textWidth &&
!labelOptions.style.width &&
!label.styles.width) {
label.css({ width: null });
}
label.attr({ text: str });
label.textPxLength = label.getBBox().width;
}
};
/**
* Render and return the label of the tick.
*
* @private
* @function Highcharts.Tick#createLabel
*/
Tick.prototype.createLabel = function (str, labelOptions, xy) {
var axis = this.axis,
_a = axis.chart,
renderer = _a.renderer,
styledMode = _a.styledMode,
label = Tick_defined(str) && labelOptions.enabled ?
renderer
.text(str,
xy === null || xy === void 0 ? void 0 : xy.x,
xy === null || xy === void 0 ? void 0 : xy.y,
labelOptions.useHTML)
.add(axis.labelGroup) :
void 0;
// Un-rotated length
if (label) {
var whiteSpace = labelOptions.style.whiteSpace || 'normal';
// Without position absolute, IE export sometimes is wrong
if (!styledMode) {
label.css(Tick_merge(labelOptions.style, { whiteSpace: 'nowrap' }));
}
label.textPxLength = label.getBBox().width;
if (!styledMode) {
label.css({ whiteSpace: whiteSpace });
}
}
return label;
};
/**
* Destructor for the tick prototype
*
* @private
* @function Highcharts.Tick#destroy
*/
Tick.prototype.destroy = function () {
Tick_destroyObjectProperties(this, this.axis);
};
/**
* Gets the x and y positions for ticks in terms of pixels.
*
* @private
* @function Highcharts.Tick#getPosition
*
* @param {boolean} horiz
* Whether the tick is on an horizontal axis or not.
*
* @param {number} tickPos
* Position of the tick.
*
* @param {number} tickmarkOffset
* Tickmark offset for all ticks.
*
* @param {boolean} [old]
* Whether the axis has changed or not.
*
* @return {Highcharts.PositionObject}
* The tick position.
*
* @emits Highcharts.Tick#event:afterGetPosition
*/
Tick.prototype.getPosition = function (horiz, tickPos, tickmarkOffset, old) {
var axis = this.axis,
chart = axis.chart,
cHeight = (old && chart.oldChartHeight) || chart.chartHeight,
pos = {
x: horiz ?
Tick_correctFloat(axis.translate(tickPos + tickmarkOffset,
void 0,
void 0,
old) +
axis.transB) :
(axis.left +
axis.offset +
(axis.opposite ?
(((old && chart.oldChartWidth) ||
chart.chartWidth) -
axis.right -
axis.left) :
0)),
y: horiz ?
(cHeight -
axis.bottom +
axis.offset -
(axis.opposite ? axis.height : 0)) :
Tick_correctFloat(cHeight -
axis.translate(tickPos + tickmarkOffset,
void 0,
void 0,
old) -
axis.transB)
};
// Chrome workaround for #10516
pos.y = Tick_clamp(pos.y, -1e9, 1e9);
Tick_fireEvent(this, 'afterGetPosition', { pos: pos });
return pos;
};
/**
* Get the x, y position of the tick label
* @private
*/
Tick.prototype.getLabelPosition = function (x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
var axis = this.axis,
transA = axis.transA,
reversed = ( // #7911
axis.isLinked && axis.linkedParent ?
axis.linkedParent.reversed :
axis.reversed),
staggerLines = axis.staggerLines,
rotCorr = axis.tickRotCorr || { x: 0,
y: 0 },
// Adjust for label alignment if we use reserveSpace: true (#5286)
labelOffsetCorrection = (!horiz && !axis.reserveSpaceDefault ?
-axis.labelOffset * (axis.labelAlign === 'center' ? 0.5 : 1) :
0),
distance = labelOptions.distance,
pos = {};
var yOffset,
line;
if (axis.side === 0) {
yOffset = label.rotation ? -distance : -label.getBBox().height;
}
else if (axis.side === 2) {
yOffset = rotCorr.y + distance;
}
else {
// #3140, #3140
yOffset = Math.cos(label.rotation * Tick_deg2rad) *
(rotCorr.y - label.getBBox(false, 0).height / 2);
}
if (Tick_defined(labelOptions.y)) {
yOffset = axis.side === 0 && axis.horiz ?
labelOptions.y + yOffset :
labelOptions.y;
}
x = x +
Tick_pick(labelOptions.x, [0, 1, 0, -1][axis.side] * distance) +
labelOffsetCorrection +
rotCorr.x -
(tickmarkOffset && horiz ?
tickmarkOffset * transA * (reversed ? -1 : 1) :
0);
y = y + yOffset - (tickmarkOffset && !horiz ?
tickmarkOffset * transA * (reversed ? 1 : -1) : 0);
// Correct for staggered labels
if (staggerLines) {
line = (index / (step || 1) % staggerLines);
if (axis.opposite) {
line = staggerLines - line - 1;
}
y += line * (axis.labelOffset / staggerLines);
}
pos.x = x;
pos.y = Math.round(y);
Tick_fireEvent(this, 'afterGetLabelPosition', { pos: pos, tickmarkOffset: tickmarkOffset, index: index });
return pos;
};
/**
* Get the offset height or width of the label
*
* @private
* @function Highcharts.Tick#getLabelSize
*/
Tick.prototype.getLabelSize = function () {
return this.label ?
this.label.getBBox()[this.axis.horiz ? 'height' : 'width'] :
0;
};
/**
* Extendible method to return the path of the marker
* @private
*/
Tick.prototype.getMarkPath = function (x, y, tickLength, tickWidth, horiz, renderer) {
if (horiz === void 0) { horiz = false; }
return renderer.crispLine([[
'M',
x,
y
], [
'L',
x + (horiz ? 0 : -tickLength),
y + (horiz ? tickLength : 0)
]], tickWidth);
};
/**
* Handle the label overflow by adjusting the labels to the left and right
* edge, or hide them if they collide into the neighbour label.
*
* @private
* @function Highcharts.Tick#handleOverflow
*/
Tick.prototype.handleOverflow = function (xy) {
var tick = this,
axis = this.axis,
labelOptions = axis.options.labels,
pxPos = xy.x,
chartWidth = axis.chart.chartWidth,
spacing = axis.chart.spacing,
leftBound = Tick_pick(axis.labelLeft,
Math.min(axis.pos,
spacing[3])),
rightBound = Tick_pick(axis.labelRight,
Math.max(!axis.isRadial ? axis.pos + axis.len : 0,
chartWidth - spacing[1])),
label = this.label,
rotation = this.rotation,
factor = Tick_getAlignFactor(axis.labelAlign || label.attr('align')),
labelWidth = label.getBBox().width,
slotWidth = axis.getSlotWidth(tick),
xCorrection = factor,
css = {};
var modifiedSlotWidth = slotWidth,
goRight = 1,
leftPos,
rightPos,
textWidth;
// Check if the label overshoots the chart spacing box. If it does, move
// it. If it now overshoots the slotWidth, add ellipsis.
if (!rotation && labelOptions.overflow === 'justify') {
leftPos = pxPos - factor * labelWidth;
rightPos = pxPos + (1 - factor) * labelWidth;
if (leftPos < leftBound) {
modifiedSlotWidth =
xy.x + modifiedSlotWidth * (1 - factor) - leftBound;
}
else if (rightPos > rightBound) {
modifiedSlotWidth =
rightBound - xy.x + modifiedSlotWidth * factor;
goRight = -1;
}
modifiedSlotWidth = Math.min(slotWidth, modifiedSlotWidth); // #4177
if (modifiedSlotWidth < slotWidth && axis.labelAlign === 'center') {
xy.x += (goRight *
(slotWidth -
modifiedSlotWidth -
xCorrection * (slotWidth - Math.min(labelWidth, modifiedSlotWidth))));
}
// If the label width exceeds the available space, set a text width
// to be picked up below. Also, if a width has been set before, we
// need to set a new one because the reported labelWidth will be
// limited by the box (#3938).
if (labelWidth > modifiedSlotWidth ||
(axis.autoRotation && (label.styles || {}).width)) {
textWidth = modifiedSlotWidth;
}
// Add ellipsis to prevent rotated labels to be clipped against the edge
// of the chart
}
else if (rotation < 0 &&
pxPos - factor * labelWidth < leftBound) {
textWidth = Math.round(pxPos / Math.cos(rotation * Tick_deg2rad) - leftBound);
}
else if (rotation > 0 &&
pxPos + factor * labelWidth > rightBound) {
textWidth = Math.round((chartWidth - pxPos) /
Math.cos(rotation * Tick_deg2rad));
}
if (textWidth && label) {
if (tick.shortenLabel) {
tick.shortenLabel();
}
else {
label.css(Tick_extend(css, {
width: Math.floor(textWidth) + 'px',
lineClamp: axis.isRadial ? 0 : 1
}));
}
}
};
/**
* Try to replace the label if the same one already exists.
*
* @private
* @function Highcharts.Tick#moveLabel
*/
Tick.prototype.moveLabel = function (str, labelOptions) {
var tick = this,
label = tick.label,
axis = tick.axis;
var moved = false,
labelPos;
if (label && label.textStr === str) {
tick.movedLabel = label;
moved = true;
delete tick.label;
}
else { // Find a label with the same string
Tick_objectEach(axis.ticks, function (currentTick) {
if (!moved &&
!currentTick.isNew &&
currentTick !== tick &&
currentTick.label &&
currentTick.label.textStr === str) {
tick.movedLabel = currentTick.label;
moved = true;
currentTick.labelPos = tick.movedLabel.xy;
delete currentTick.label;
}
});
}
// Create new label if the actual one is moved
if (!moved && (tick.labelPos || label)) {
labelPos = tick.labelPos || label.xy;
tick.movedLabel = tick.createLabel(str, labelOptions, labelPos);
if (tick.movedLabel) {
tick.movedLabel.attr({ opacity: 0 });
}
}
};
/**
* Put everything in place
*
* @private
* @param {number} index
*
* @param {boolean} [old]
* Use old coordinates to prepare an animation into new position
*
* @param {number} [opacity]
*/
Tick.prototype.render = function (index, old, opacity) {
var tick = this,
axis = tick.axis,
horiz = axis.horiz,
pos = tick.pos,
tickmarkOffset = Tick_pick(tick.tickmarkOffset,
axis.tickmarkOffset),
xy = tick.getPosition(horiz,
pos,
tickmarkOffset,
old),
x = xy.x,
y = xy.y,
axisStart = axis.pos,
axisEnd = axisStart + axis.len,
pxPos = horiz ? x : y;
// Anything that is not between `axis.pos` and `axis.pos + axis.length`
// should not be visible (#20166). The `correctFloat` is for reversed
// axes in Safari.
if (!axis.chart.polar &&
tick.isNew &&
(Tick_correctFloat(pxPos) < axisStart || pxPos > axisEnd)) {
opacity = 0;
}
var labelOpacity = Tick_pick(opacity,
tick.label && tick.label.newOpacity, // #15528
1);
opacity = Tick_pick(opacity, 1);
this.isActive = true;
// Create the grid line
this.renderGridLine(old, opacity);
// Create the tick mark
this.renderMark(xy, opacity);
// The label is created on init - now move it into place
this.renderLabel(xy, old, labelOpacity, index);
tick.isNew = false;
Tick_fireEvent(this, 'afterRender');
};
/**
* Renders the gridLine.
*
* @private
* @function Highcharts.Tick#renderGridLine
* @param {boolean} old Whether or not the tick is old
* @param {number} opacity The opacity of the grid line
*/
Tick.prototype.renderGridLine = function (old, opacity) {
var tick = this,
axis = tick.axis,
options = axis.options,
attribs = {},
pos = tick.pos,
type = tick.type,
tickmarkOffset = Tick_pick(tick.tickmarkOffset,
axis.tickmarkOffset),
renderer = axis.chart.renderer;
var gridLine = tick.gridLine,
gridLinePath,
gridLineWidth = options.gridLineWidth,
gridLineColor = options.gridLineColor,
dashStyle = options.gridLineDashStyle;
if (tick.type === 'minor') {
gridLineWidth = options.minorGridLineWidth;
gridLineColor = options.minorGridLineColor;
dashStyle = options.minorGridLineDashStyle;
}
if (!gridLine) {
if (!axis.chart.styledMode) {
attribs.stroke = gridLineColor;
attribs['stroke-width'] = gridLineWidth || 0;
attribs.dashstyle = dashStyle;
}
if (!type) {
attribs.zIndex = 1;
}
if (old) {
opacity = 0;
}
/**
* The rendered grid line of the tick.
* @name Highcharts.Tick#gridLine
* @type {Highcharts.SVGElement|undefined}
*/
tick.gridLine = gridLine = renderer.path()
.attr(attribs)
.addClass('highcharts-' + (type ? type + '-' : '') + 'grid-line')
.add(axis.gridGroup);
}
if (gridLine) {
gridLinePath = axis.getPlotLinePath({
value: pos + tickmarkOffset,
lineWidth: gridLine.strokeWidth(),
force: 'pass',
old: old,
acrossPanes: false // #18025
});
// If the parameter 'old' is set, the current call will be followed
// by another call, therefore do not do any animations this time
if (gridLinePath) {
gridLine[old || tick.isNew ? 'attr' : 'animate']({
d: gridLinePath,
opacity: opacity
});
}
}
};
/**
* Renders the tick mark.
*
* @private
* @function Highcharts.Tick#renderMark
* @param {Highcharts.PositionObject} xy The position vector of the mark
* @param {number} opacity The opacity of the mark
*/
Tick.prototype.renderMark = function (xy, opacity) {
var tick = this, axis = tick.axis, options = axis.options, renderer = axis.chart.renderer, type = tick.type, tickSize = axis.tickSize(type ? type + 'Tick' : 'tick'), x = xy.x, y = xy.y, tickWidth = Tick_pick(options[type !== 'minor' ? 'tickWidth' : 'minorTickWidth'], !type && axis.isXAxis ? 1 : 0), // X axis defaults to 1
tickColor = options[type !== 'minor' ? 'tickColor' : 'minorTickColor'];
var mark = tick.mark;
var isNewMark = !mark;
if (tickSize) {
// Negate the length
if (axis.opposite) {
tickSize[0] = -tickSize[0];
}
// First time, create it
if (!mark) {
/**
* The rendered mark of the tick.
* @name Highcharts.Tick#mark
* @type {Highcharts.SVGElement|undefined}
*/
tick.mark = mark = renderer.path()
.addClass('highcharts-' + (type ? type + '-' : '') + 'tick')
.add(axis.axisGroup);
if (!axis.chart.styledMode) {
mark.attr({
stroke: tickColor,
'stroke-width': tickWidth
});
}
}
mark[isNewMark ? 'attr' : 'animate']({
d: tick.getMarkPath(x, y, tickSize[0], mark.strokeWidth(), axis.horiz, renderer),
opacity: opacity
});
}
};
/**
* Renders the tick label.
* Note: The label should already be created in init(), so it should only
* have to be moved into place.
*
* @private
* @function Highcharts.Tick#renderLabel
* @param {Highcharts.PositionObject} xy The position vector of the label
* @param {boolean} old Whether or not the tick is old
* @param {number} opacity The opacity of the label
* @param {number} index The index of the tick
*/
Tick.prototype.renderLabel = function (xy, old, opacity, index) {
var tick = this,
axis = tick.axis,
horiz = axis.horiz,
options = axis.options,
label = tick.label,
labelOptions = options.labels,
step = labelOptions.step,
tickmarkOffset = Tick_pick(tick.tickmarkOffset,
axis.tickmarkOffset),
x = xy.x,
y = xy.y;
var show = true;
if (label && Tick_isNumber(x)) {
label.xy = xy = tick.getLabelPosition(x, y, label, horiz, labelOptions, tickmarkOffset, index, step);
// Apply show first and show last. If the tick is both first and
// last, it is a single centered tick, in which case we show the
// label anyway (#2100).
if ((tick.isFirst &&
!tick.isLast &&
!options.showFirstLabel) ||
(tick.isLast &&
!tick.isFirst &&
!options.showLastLabel)) {
show = false;
// Handle label overflow and show or hide accordingly
}
else if (horiz &&
!labelOptions.step &&
!labelOptions.rotation &&
!old &&
opacity !== 0) {
tick.handleOverflow(xy);
}
// Apply step
if (step && index % step) {
// Show those indices dividable by step
show = false;
}
// Set the new position, and show or hide
if (show && Tick_isNumber(xy.y)) {
xy.opacity = opacity;
label[tick.isNewLabel ? 'attr' : 'animate'](xy).show(true);
tick.isNewLabel = false;
}
else {
label.hide(); // #1338, #15863
tick.isNewLabel = true;
}
}
};
/**
* Replace labels with the moved ones to perform animation. Additionally
* destroy unused labels.
*
* @private
* @function Highcharts.Tick#replaceMovedLabel
*/
Tick.prototype.replaceMovedLabel = function () {
var tick = this,
label = tick.label,
axis = tick.axis;
// Animate and destroy
if (label && !tick.isNew) {
label.animate({ opacity: 0 }, void 0, label.destroy);
delete tick.label;
}
axis.isDirty = true;
tick.label = tick.movedLabel;
delete tick.movedLabel;
};
return Tick;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Axis_Tick = (Tick);
/* *
*
* API Declarations
*
* */
/**
* Optional parameters for the tick.
* @private
* @interface Highcharts.TickParametersObject
*/ /**
* Set category for the tick.
* @name Highcharts.TickParametersObject#category
* @type {string|undefined}
*/ /**
* @name Highcharts.TickParametersObject#options
* @type {Highcharts.Dictionary<any>|undefined}
*/ /**
* Set tickmarkOffset for the tick.
* @name Highcharts.TickParametersObject#tickmarkOffset
* @type {number|undefined}
*/
/**
* Additional time tick information.
*
* @interface Highcharts.TimeTicksInfoObject
* @extends Highcharts.TimeNormalizedObject
*/ /**
* @name Highcharts.TimeTicksInfoObject#higherRanks
* @type {Array<string>}
*/ /**
* @name Highcharts.TimeTicksInfoObject#totalRange
* @type {number}
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Axis/Axis.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Axis_animObject = AnimationUtilities.animObject;
var xAxis = Axis_AxisDefaults.xAxis, yAxis = Axis_AxisDefaults.yAxis;
var Axis_defaultOptions = Defaults.defaultOptions;
var registerEventOptions = Core_Foundation.registerEventOptions;
var Axis_deg2rad = Core_Globals.deg2rad;
var Axis_arrayMax = Core_Utilities.arrayMax, Axis_arrayMin = Core_Utilities.arrayMin, Axis_clamp = Core_Utilities.clamp, Axis_correctFloat = Core_Utilities.correctFloat, Axis_defined = Core_Utilities.defined, Axis_destroyObjectProperties = Core_Utilities.destroyObjectProperties, Axis_erase = Core_Utilities.erase, Axis_error = Core_Utilities.error, Axis_extend = Core_Utilities.extend, Axis_fireEvent = Core_Utilities.fireEvent, Axis_getClosestDistance = Core_Utilities.getClosestDistance, Axis_insertItem = Core_Utilities.insertItem, Axis_isArray = Core_Utilities.isArray, Axis_isNumber = Core_Utilities.isNumber, Axis_isString = Core_Utilities.isString, Axis_merge = Core_Utilities.merge, Axis_normalizeTickInterval = Core_Utilities.normalizeTickInterval, Axis_objectEach = Core_Utilities.objectEach, Axis_pick = Core_Utilities.pick, Axis_relativeLength = Core_Utilities.relativeLength, Axis_removeEvent = Core_Utilities.removeEvent, Axis_splat = Core_Utilities.splat, Axis_syncTimeout = Core_Utilities.syncTimeout;
var getNormalizedTickInterval = function (axis, tickInterval) { return Axis_normalizeTickInterval(tickInterval, void 0, void 0, Axis_pick(axis.options.allowDecimals,
// If the tick interval is greater than 0.5, avoid decimals, as
// linear axes are often used to render discrete values (#3363). If
// a tick amount is set, allow decimals by default, as it increases
// the chances for a good fit.
tickInterval < 0.5 || axis.tickAmount !== void 0), !!axis.tickAmount); };
Axis_extend(Axis_defaultOptions, { xAxis: xAxis, yAxis: Axis_merge(xAxis, yAxis) });
/* *
*
* Class
*
* */
/**
* Create a new axis object. Called internally when instantiating a new chart or
* adding axes by {@link Highcharts.Chart#addAxis}.
*
* A chart can have from 0 axes (pie chart) to multiples. In a normal, single
* series cartesian chart, there is one X axis and one Y axis.
*
* The X axis or axes are referenced by {@link Highcharts.Chart.xAxis}, which is
* an array of Axis objects. If there is only one axis, it can be referenced
* through `chart.xAxis[0]`, and multiple axes have increasing indices. The same
* pattern goes for Y axes.
*
* If you need to get the axes from a series object, use the `series.xAxis` and
* `series.yAxis` properties. These are not arrays, as one series can only be
* associated to one X and one Y axis.
*
* A third way to reference the axis programmatically is by `id`. Add an `id` in
* the axis configuration options, and get the axis by
* {@link Highcharts.Chart#get}.
*
* Configuration options for the axes are given in options.xAxis and
* options.yAxis.
*
* @class
* @name Highcharts.Axis
*
* @param {Highcharts.Chart} chart
* The Chart instance to apply the axis on.
*
* @param {Highcharts.AxisOptions} userOptions
* Axis options
*/
var Axis = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function Axis(chart, userOptions, coll) {
this.init(chart, userOptions, coll);
}
/* *
*
* Functions
*
* */
/**
* Overrideable function to initialize the axis.
*
* @see {@link Axis}
*
* @function Highcharts.Axis#init
*
* @param {Highcharts.Chart} chart
* The Chart instance to apply the axis on.
*
* @param {AxisOptions} userOptions
* Axis options.
*
* @emits Highcharts.Axis#event:afterInit
* @emits Highcharts.Axis#event:init
*/
Axis.prototype.init = function (chart, userOptions, coll) {
var _a,
_b,
_c,
_d;
if (coll === void 0) { coll = this.coll; }
var isXAxis = coll === 'xAxis',
axis = this,
horiz = axis.isZAxis || (chart.inverted ? !isXAxis : isXAxis);
/**
* The Chart that the axis belongs to.
*
* @name Highcharts.Axis#chart
* @type {Highcharts.Chart}
*/
axis.chart = chart;
/**
* Whether the axis is horizontal.
*
* @name Highcharts.Axis#horiz
* @type {boolean|undefined}
*/
axis.horiz = horiz;
/**
* Whether the axis is the x-axis.
*
* @name Highcharts.Axis#isXAxis
* @type {boolean|undefined}
*/
axis.isXAxis = isXAxis;
/**
* The collection where the axis belongs, for example `xAxis`, `yAxis`
* or `colorAxis`. Corresponds to properties on Chart, for example
* {@link Chart.xAxis}.
*
* @name Highcharts.Axis#coll
* @type {string}
*/
axis.coll = coll;
Axis_fireEvent(this, 'init', { userOptions: userOptions });
// Needed in setOptions
axis.opposite = Axis_pick(userOptions.opposite, axis.opposite);
/**
* The side on which the axis is rendered. 0 is top, 1 is right, 2
* is bottom and 3 is left.
*
* @name Highcharts.Axis#side
* @type {number}
*/
axis.side = Axis_pick(userOptions.side, axis.side, (horiz ?
(axis.opposite ? 0 : 2) : // Top : bottom
(axis.opposite ? 1 : 3)) // Right : left
);
/**
* Current options for the axis after merge of defaults and user's
* options.
*
* @name Highcharts.Axis#options
* @type {Highcharts.AxisOptions}
*/
axis.setOptions(userOptions);
var options = axis.options,
labelsOptions = options.labels;
// Set the type and fire an event
(_a = axis.type) !== null && _a !== void 0 ? _a : (axis.type = options.type || 'linear');
(_b = axis.uniqueNames) !== null && _b !== void 0 ? _b : (axis.uniqueNames = (_c = options.uniqueNames) !== null && _c !== void 0 ? _c : true);
Axis_fireEvent(axis, 'afterSetType');
/**
* User's options for this axis without defaults.
*
* @name Highcharts.Axis#userOptions
* @type {Highcharts.AxisOptions}
*/
axis.userOptions = userOptions;
axis.minPixelPadding = 0;
/**
* Whether the axis is reversed. Based on the `axis.reversed`,
* option, but inverted charts have reversed xAxis by default.
*
* @name Highcharts.Axis#reversed
* @type {boolean}
*/
axis.reversed = Axis_pick(options.reversed, axis.reversed);
axis.visible = options.visible;
axis.zoomEnabled = options.zoomEnabled;
// Initial categories
axis.hasNames = this.type === 'category' || options.categories === true;
/**
* If categories are present for the axis, names are used instead of
* numbers for that axis.
*
* Since Highcharts 3.0, categories can also be extracted by giving each
* point a name and setting axis type to `category`. However, if you
* have multiple series, best practice remains defining the `categories`
* array.
*
* @see [xAxis.categories](/highcharts/xAxis.categories)
*
* @name Highcharts.Axis#categories
* @type {Array<string>}
* @readonly
*/
axis.categories = (Axis_isArray(options.categories) && options.categories) ||
(axis.hasNames ? [] : void 0);
if (!axis.names) { // Preserve on update (#3830)
axis.names = [];
axis.names.keys = {};
}
// Placeholder for plotlines and plotbands groups
axis.plotLinesAndBandsGroups = {};
// Shorthand types
axis.positiveValuesOnly = !!axis.logarithmic;
// Flag, if axis is linked to another axis
axis.isLinked = Axis_defined(options.linkedTo);
/**
* List of major ticks mapped by position on axis.
*
* @see {@link Highcharts.Tick}
*
* @name Highcharts.Axis#ticks
* @type {Highcharts.Dictionary<Highcharts.Tick>}
*/
axis.ticks = {};
axis.labelEdge = [];
/**
* List of minor ticks mapped by position on the axis.
*
* @see {@link Highcharts.Tick}
*
* @name Highcharts.Axis#minorTicks
* @type {Highcharts.Dictionary<Highcharts.Tick>}
*/
axis.minorTicks = {};
// List of plotLines/Bands
axis.plotLinesAndBands = [];
// Alternate bands
axis.alternateBands = {};
/**
* The length of the axis in terms of pixels.
*
* @name Highcharts.Axis#len
* @type {number}
*/
(_d = axis.len) !== null && _d !== void 0 ? _d : (axis.len = 0);
axis.minRange = axis.userMinRange = options.minRange || options.maxZoom;
axis.range = options.range;
axis.offset = options.offset || 0;
/**
* The maximum value of the axis. In a logarithmic axis, this is the
* logarithm of the real value, and the real value can be obtained from
* {@link Axis#getExtremes}.
*
* @name Highcharts.Axis#max
* @type {number|undefined}
*/
axis.max = void 0;
/**
* The minimum value of the axis. In a logarithmic axis, this is the
* logarithm of the real value, and the real value can be obtained from
* {@link Axis#getExtremes}.
*
* @name Highcharts.Axis#min
* @type {number|undefined}
*/
axis.min = void 0;
/**
* The processed crosshair options.
*
* @name Highcharts.Axis#crosshair
* @type {boolean|Highcharts.AxisCrosshairOptions}
*/
var crosshair = Axis_pick(options.crosshair,
Axis_splat(chart.options.tooltip.crosshairs)[isXAxis ? 0 : 1]);
axis.crosshair = crosshair === true ? {} : crosshair;
// Register. Don't add it again on Axis.update().
if (chart.axes.indexOf(axis) === -1) { //
if (isXAxis) { // #2713
chart.axes.splice(chart.xAxis.length, 0, axis);
}
else {
chart.axes.push(axis);
}
Axis_insertItem(this, chart[this.coll]);
}
chart.orderItems(axis.coll);
/**
* All series associated to the axis.
*
* @name Highcharts.Axis#series
* @type {Array<Highcharts.Series>}
*/
axis.series = axis.series || []; // Populated by Series
// Reversed axis
if (chart.inverted &&
!axis.isZAxis &&
isXAxis &&
!Axis_defined(axis.reversed)) {
axis.reversed = true;
}
axis.labelRotation = Axis_isNumber(labelsOptions.rotation) ?
labelsOptions.rotation :
void 0;
// Register event listeners
registerEventOptions(axis, options);
Axis_fireEvent(this, 'afterInit');
};
/**
* Merge and set options.
*
* @private
* @function Highcharts.Axis#setOptions
*
* @param {Highcharts.AxisOptions} userOptions
* Axis options.
*
* @emits Highcharts.Axis#event:afterSetOptions
*/
Axis.prototype.setOptions = function (userOptions) {
var sideSpecific = this.horiz ?
// Top and bottom axis defaults
{
labels: {
autoRotation: [-45],
padding: 3
},
margin: 15
} :
// Left and right axis, title rotated 90 or 270 degrees
// respectively
{
labels: {
padding: 1
},
title: {
rotation: 90 * this.side
}
};
this.options = Axis_merge(sideSpecific, Axis_defaultOptions[this.coll], userOptions);
Axis_fireEvent(this, 'afterSetOptions', { userOptions: userOptions });
};
/**
* The default label formatter. The context is a special config object for
* the label. In apps, use the
* [labels.formatter](https://api.highcharts.com/highcharts/xAxis.labels.formatter)
* instead, except when a modification is needed.
*
* @function Highcharts.Axis#defaultLabelFormatter
*
* @param {Highcharts.AxisLabelsFormatterContextObject} this
* Formatter context of axis label.
*
* @param {Highcharts.AxisLabelsFormatterContextObject} [ctx]
* Formatter context of axis label.
*
* @return {string}
* The formatted label content.
*/
Axis.prototype.defaultLabelFormatter = function () {
var axis = this.axis,
chart = this.chart,
numberFormatter = chart.numberFormatter,
value = Axis_isNumber(this.value) ? this.value : NaN,
time = axis.chart.time,
categories = axis.categories,
dateTimeLabelFormat = this.dateTimeLabelFormat,
lang = Axis_defaultOptions.lang,
numericSymbols = lang.numericSymbols,
numSymMagnitude = lang.numericSymbolMagnitude || 1000,
// Make sure the same symbol is added for all labels on a linear
// axis
numericSymbolDetector = axis.logarithmic ?
Math.abs(value) :
axis.tickInterval;
var i = numericSymbols && numericSymbols.length,
multi,
ret;
if (categories) {
ret = "".concat(this.value);
}
else if (dateTimeLabelFormat) { // Datetime axis
ret = time.dateFormat(dateTimeLabelFormat, value, true);
}
else if (i &&
numericSymbols &&
numericSymbolDetector >= 1000) {
// Decide whether we should add a numeric symbol like k (thousands)
// or M (millions). If we are to enable this in tooltip or other
// places as well, we can move this logic to the numberFormatter and
// enable it by a parameter.
while (i-- && typeof ret === 'undefined') {
multi = Math.pow(numSymMagnitude, i + 1);
if (
// Only accept a numeric symbol when the distance is more
// than a full unit. So for example if the symbol is k, we
// don't accept numbers like 0.5k.
numericSymbolDetector >= multi &&
// Accept one decimal before the symbol. Accepts 0.5k but
// not 0.25k. How does this work with the previous?
(value * 10) % multi === 0 &&
numericSymbols[i] !== null &&
value !== 0) { // #5480
ret = numberFormatter(value / multi, -1) + numericSymbols[i];
}
}
}
if (typeof ret === 'undefined') {
if (Math.abs(value) >= 10000) { // Add thousands separators
ret = numberFormatter(value, -1);
}
else { // Small numbers
ret = numberFormatter(value, -1, void 0, ''); // #2466
}
}
return ret;
};
/**
* Get the minimum and maximum for the series of each axis. The function
* analyzes the axis series and updates `this.dataMin` and `this.dataMax`.
*
* @private
* @function Highcharts.Axis#getSeriesExtremes
*
* @emits Highcharts.Axis#event:afterGetSeriesExtremes
* @emits Highcharts.Axis#event:getSeriesExtremes
*/
Axis.prototype.getSeriesExtremes = function () {
var axis = this;
var xExtremes;
Axis_fireEvent(this, 'getSeriesExtremes', null, function () {
axis.hasVisibleSeries = false;
// Reset properties in case we're redrawing (#3353)
axis.dataMin = axis.dataMax = axis.threshold = void 0;
axis.softThreshold = !axis.isXAxis;
// Loop through this axis' series
axis.series.forEach(function (series) {
if (series.reserveSpace()) {
var seriesOptions = series.options;
var xData = void 0,
threshold = seriesOptions.threshold,
seriesDataMin = void 0,
seriesDataMax = void 0;
axis.hasVisibleSeries = true;
// Validate threshold in logarithmic axes
if (axis.positiveValuesOnly && (threshold || 0) <= 0) {
threshold = void 0;
}
// Get dataMin and dataMax for X axes
if (axis.isXAxis) {
xData = series.getColumn('x');
if (xData.length) {
xData = axis.logarithmic ?
xData.filter(function (x) { return x > 0; }) :
xData;
xExtremes = series.getXExtremes(xData);
// If xData contains values which is not numbers,
// then filter them out. To prevent performance hit,
// we only do this after we have already found
// seriesDataMin because in most cases all data is
// valid. #5234.
seriesDataMin = xExtremes.min;
seriesDataMax = xExtremes.max;
if (!Axis_isNumber(seriesDataMin) &&
// #5010:
!(seriesDataMin instanceof Date)) {
xData = xData.filter(Axis_isNumber);
xExtremes = series.getXExtremes(xData);
// Do it again with valid data
seriesDataMin = xExtremes.min;
seriesDataMax = xExtremes.max;
}
if (xData.length) {
axis.dataMin = Math.min(Axis_pick(axis.dataMin, seriesDataMin), seriesDataMin);
axis.dataMax = Math.max(Axis_pick(axis.dataMax, seriesDataMax), seriesDataMax);
}
}
// Get dataMin and dataMax for Y axes, as well as handle
// stacking and processed data
}
else {
// Get this particular series extremes
var dataExtremes = series.applyExtremes();
// Get the dataMin and dataMax so far. If percentage is
// used, the min and max are always 0 and 100. If
// seriesDataMin and seriesDataMax is null, then series
// doesn't have active y data, we continue with nulls
if (Axis_isNumber(dataExtremes.dataMin)) {
seriesDataMin = dataExtremes.dataMin;
axis.dataMin = Math.min(Axis_pick(axis.dataMin, seriesDataMin), seriesDataMin);
}
if (Axis_isNumber(dataExtremes.dataMax)) {
seriesDataMax = dataExtremes.dataMax;
axis.dataMax = Math.max(Axis_pick(axis.dataMax, seriesDataMax), seriesDataMax);
}
// Adjust to threshold
if (Axis_defined(threshold)) {
axis.threshold = threshold;
}
// If any series has a hard threshold, it takes
// precedence
if (!seriesOptions.softThreshold ||
axis.positiveValuesOnly) {
axis.softThreshold = false;
}
}
}
});
});
Axis_fireEvent(this, 'afterGetSeriesExtremes');
};
/**
* Translate from axis value to pixel position on the chart, or back. Use
* the `toPixels` and `toValue` functions in applications.
*
* @private
* @function Highcharts.Axis#translate
*/
Axis.prototype.translate = function (val, backwards, cvsCoord, old, handleLog, pointPlacement) {
var _a;
var axis = (this.linkedParent || this), // #1417
localMin = (old && axis.old ? axis.old.min : axis.min);
if (!Axis_isNumber(localMin)) {
return NaN;
}
var minPixelPadding = axis.minPixelPadding,
doPostTranslate = (axis.isOrdinal ||
((_a = axis.brokenAxis) === null || _a === void 0 ? void 0 : _a.hasBreaks) ||
(axis.logarithmic && handleLog)) && axis.lin2val;
var sign = 1,
cvsOffset = 0,
localA = old && axis.old ? axis.old.transA : axis.transA,
returnValue = 0;
if (!localA) {
localA = axis.transA;
}
// In vertical axes, the canvas coordinates start from 0 at the top like
// in SVG.
if (cvsCoord) {
sign *= -1; // Canvas coordinates inverts the value
cvsOffset = axis.len;
}
// Handle reversed axis
if (axis.reversed) {
sign *= -1;
cvsOffset -= sign * (axis.sector || axis.len);
}
// From pixels to value
if (backwards) { // Reverse translation
val = val * sign + cvsOffset;
val -= minPixelPadding;
// From chart pixel to value:
returnValue = val / localA + localMin;
if (doPostTranslate) { // Log, ordinal and broken axis
returnValue = axis.lin2val(returnValue);
}
// From value to pixels
}
else {
if (doPostTranslate) { // Log, ordinal and broken axis
val = axis.val2lin(val);
}
var value = sign * (val - localMin) * localA;
returnValue = value +
cvsOffset +
(sign * minPixelPadding) +
(Axis_isNumber(pointPlacement) ? localA * pointPlacement : 0);
if (!axis.isRadial) {
returnValue = Axis_correctFloat(returnValue);
}
}
return returnValue;
};
/**
* Translate a value in terms of axis units into pixels within the chart.
*
* @function Highcharts.Axis#toPixels
*
* @param {number|string} value
* A value in terms of axis units. For datetime axes, a timestamp or
* date/time string is accepted.
*
* @param {boolean} [paneCoordinates=false]
* Whether to return the pixel coordinate relative to the chart or just the
* axis/pane itself.
*
* @return {number}
* Pixel position of the value on the chart or axis.
*/
Axis.prototype.toPixels = function (value, paneCoordinates) {
var _a,
_b;
return this.translate((_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.time.parse(value)) !== null && _b !== void 0 ? _b : NaN, false, !this.horiz, void 0, true) + (paneCoordinates ? 0 : this.pos);
};
/**
* Translate a pixel position along the axis to a value in terms of axis
* units.
*
* @function Highcharts.Axis#toValue
*
* @param {number} pixel
* The pixel value coordinate.
*
* @param {boolean} [paneCoordinates=false]
* Whether the input pixel is relative to the chart or just the axis/pane
* itself.
*
* @return {number}
* The axis value.
*/
Axis.prototype.toValue = function (pixel, paneCoordinates) {
return this.translate(pixel - (paneCoordinates ? 0 : this.pos), true, !this.horiz, void 0, true);
};
/**
* Create the path for a plot line that goes from the given value on
* this axis, across the plot to the opposite side. Also used internally for
* grid lines and crosshairs.
*
* @function Highcharts.Axis#getPlotLinePath
*
* @param {Highcharts.AxisPlotLinePathOptionsObject} options
* Options for the path.
*
* @return {Highcharts.SVGPathArray|null}
* The SVG path definition for the plot line.
*/
Axis.prototype.getPlotLinePath = function (options) {
var axis = this,
chart = axis.chart,
axisLeft = axis.left,
axisTop = axis.top,
old = options.old,
value = options.value,
lineWidth = options.lineWidth,
cHeight = (old && chart.oldChartHeight) || chart.chartHeight,
cWidth = (old && chart.oldChartWidth) || chart.chartWidth,
transB = axis.transB;
var translatedValue = options.translatedValue,
force = options.force,
x1,
y1,
x2,
y2,
skip;
// eslint-disable-next-line valid-jsdoc
/**
* Check if x is between a and b. If not, either move to a/b
* or skip, depending on the force parameter.
* @private
*/
function between(x, a, b) {
if (force !== 'pass' && (x < a || x > b)) {
if (force) {
x = Axis_clamp(x, a, b);
}
else {
skip = true;
}
}
return x;
}
var evt = {
value: value,
lineWidth: lineWidth,
old: old,
force: force,
acrossPanes: options.acrossPanes,
translatedValue: translatedValue
};
Axis_fireEvent(this, 'getPlotLinePath', evt, function (e) {
translatedValue = Axis_pick(translatedValue, axis.translate(value, void 0, void 0, old));
// Keep the translated value within sane bounds, and avoid Infinity
// to fail the isNumber test (#7709).
translatedValue = Axis_clamp(translatedValue, -1e9, 1e9);
x1 = x2 = translatedValue + transB;
y1 = y2 = cHeight - translatedValue - transB;
if (!Axis_isNumber(translatedValue)) { // No min or max
skip = true;
force = false; // #7175, don't force it when path is invalid
}
else if (axis.horiz) {
y1 = axisTop;
y2 = cHeight - axis.bottom + (axis.options.isInternal ?
0 :
(chart.scrollablePixelsY || 0)); // #20354, scrollablePixelsY shouldn't be used for navigator
x1 = x2 = between(x1, axisLeft, axisLeft + axis.width);
}
else {
x1 = axisLeft;
x2 = cWidth - axis.right + (chart.scrollablePixelsX || 0);
y1 = y2 = between(y1, axisTop, axisTop + axis.height);
}
e.path = skip && !force ?
void 0 :
chart.renderer.crispLine([['M', x1, y1], ['L', x2, y2]], lineWidth || 1);
});
return evt.path;
};
/**
* Internal function to get the tick positions of a linear axis to round
* values like whole tens or every five.
*
* @function Highcharts.Axis#getLinearTickPositions
*
* @param {number} tickInterval
* The normalized tick interval.
*
* @param {number} min
* Axis minimum.
*
* @param {number} max
* Axis maximum.
*
* @return {Array<number>}
* An array of axis values where ticks should be placed.
*/
Axis.prototype.getLinearTickPositions = function (tickInterval, min, max) {
var roundedMin = Axis_correctFloat(Math.floor(min / tickInterval) * tickInterval), roundedMax = Axis_correctFloat(Math.ceil(max / tickInterval) * tickInterval), tickPositions = [];
var pos,
lastPos,
precision;
// When the precision is higher than what we filter out in
// correctFloat, skip it (#6183).
if (Axis_correctFloat(roundedMin + tickInterval) === roundedMin) {
precision = 20;
}
// For single points, add a tick regardless of the relative position
// (#2662, #6274)
if (this.single) {
return [min];
}
// Populate the intermediate values
pos = roundedMin;
while (pos <= roundedMax) {
// Place the tick on the rounded value
tickPositions.push(pos);
// Always add the raw tickInterval, not the corrected one.
pos = Axis_correctFloat(pos + tickInterval, precision);
// If the interval is not big enough in the current min - max range
// to actually increase the loop variable, we need to break out to
// prevent endless loop. Issue #619
if (pos === lastPos) {
break;
}
// Record the last value
lastPos = pos;
}
return tickPositions;
};
/**
* Resolve the new minorTicks/minorTickInterval options into the legacy
* loosely typed minorTickInterval option.
*
* @function Highcharts.Axis#getMinorTickInterval
*
* @return {number|"auto"|null}
* Legacy option
*/
Axis.prototype.getMinorTickInterval = function () {
var _a = this.options,
minorTicks = _a.minorTicks,
minorTickInterval = _a.minorTickInterval;
if (minorTicks === true) {
return Axis_pick(minorTickInterval, 'auto');
}
if (minorTicks === false) {
return;
}
return minorTickInterval;
};
/**
* Internal function to return the minor tick positions. For logarithmic
* axes, the same logic as for major ticks is reused.
*
* @function Highcharts.Axis#getMinorTickPositions
*
* @return {Array<number>}
* An array of axis values where ticks should be placed.
*/
Axis.prototype.getMinorTickPositions = function () {
var _a;
var axis = this,
options = axis.options,
tickPositions = axis.tickPositions,
minorTickInterval = axis.minorTickInterval,
pointRangePadding = axis.pointRangePadding || 0,
min = (axis.min || 0) - pointRangePadding, // #1498
max = (axis.max || 0) + pointRangePadding, // #1498
range = ((_a = axis.brokenAxis) === null || _a === void 0 ? void 0 : _a.hasBreaks) ?
axis.brokenAxis.unitLength : max - min;
var minorTickPositions = [],
pos;
// If minor ticks get too dense, they are hard to read, and may cause
// long running script. So we don't draw them.
if (range && range / minorTickInterval < axis.len / 3) { // #3875
var logarithmic_1 = axis.logarithmic;
if (logarithmic_1) {
// For each interval in the major ticks, compute the minor ticks
// separately.
this.paddedTicks.forEach(function (_pos, i, paddedTicks) {
if (i) {
minorTickPositions.push.apply(minorTickPositions, logarithmic_1.getLogTickPositions(minorTickInterval, paddedTicks[i - 1], paddedTicks[i], true));
}
});
}
else if (axis.dateTime &&
this.getMinorTickInterval() === 'auto') { // #1314
minorTickPositions = minorTickPositions.concat(axis.getTimeTicks(axis.dateTime.normalizeTimeTickInterval(minorTickInterval), min, max, options.startOfWeek));
}
else {
for (pos = min + (tickPositions[0] - min) % minorTickInterval; pos <= max; pos += minorTickInterval) {
// Very, very, tight grid lines (#5771)
if (pos === minorTickPositions[0]) {
break;
}
minorTickPositions.push(pos);
}
}
}
if (minorTickPositions.length !== 0) {
axis.trimTicks(minorTickPositions); // #3652 #3743 #1498 #6330
}
return minorTickPositions;
};
/**
* Adjust the min and max for the minimum range. Keep in mind that the
* series data is not yet processed, so we don't have information on data
* cropping and grouping, or updated `axis.pointRange` or
* `series.pointRange`. The data can't be processed until we have finally
* established min and max.
*
* @private
* @function Highcharts.Axis#adjustForMinRange
*/
Axis.prototype.adjustForMinRange = function () {
var _a,
_b,
_c;
var axis = this,
options = axis.options,
logarithmic = axis.logarithmic,
time = axis.chart.time;
var max = axis.max,
min = axis.min,
minRange = axis.minRange,
zoomOffset,
spaceAvailable,
closestDataRange,
minArgs,
maxArgs;
// Set the automatic minimum range based on the closest point distance
if (axis.isXAxis &&
typeof minRange === 'undefined' &&
!logarithmic) {
if (Axis_defined(options.min) ||
Axis_defined(options.max) ||
Axis_defined(options.floor) ||
Axis_defined(options.ceiling)) {
// Setting it to null, as opposed to undefined, signals we don't
// run this block again as per the condition above.
minRange = null;
}
else {
// Find the closest distance between raw data points, as opposed
// to closestPointRange that applies to processed points
// (cropped and grouped)
closestDataRange = Axis_getClosestDistance(axis.series.map(function (s) {
var xData = s.getColumn('x');
// If xIncrement, we only need to measure the two first
// points to get the distance. Saves processing time.
return s.xIncrement ? xData.slice(0, 2) : xData;
})) || 0;
minRange = Math.min(closestDataRange * 5, axis.dataMax - axis.dataMin);
}
}
// If minRange is exceeded, adjust
if (Axis_isNumber(max) &&
Axis_isNumber(min) &&
Axis_isNumber(minRange) &&
max - min < minRange) {
spaceAvailable =
axis.dataMax - axis.dataMin >=
minRange;
zoomOffset = (minRange - max + min) / 2;
// If min and max options have been set, don't go beyond it
minArgs = [
min - zoomOffset,
(_a = time.parse(options.min)) !== null && _a !== void 0 ? _a : (min - zoomOffset)
];
// If space is available, stay within the data range
if (spaceAvailable) {
minArgs[2] = logarithmic ?
logarithmic.log2lin(axis.dataMin) :
axis.dataMin;
}
min = Axis_arrayMax(minArgs);
maxArgs = [
min + minRange,
(_b = time.parse(options.max)) !== null && _b !== void 0 ? _b : (min + minRange)
];
// If space is available, stay within the data range
if (spaceAvailable) {
maxArgs[2] = logarithmic ?
logarithmic.log2lin(axis.dataMax) :
axis.dataMax;
}
max = Axis_arrayMin(maxArgs);
// Now if the max is adjusted, adjust the min back
if (max - min < minRange) {
minArgs[0] = max - minRange;
minArgs[1] = (_c = time.parse(options.min)) !== null && _c !== void 0 ? _c : (max - minRange);
min = Axis_arrayMax(minArgs);
}
}
// Record modified extremes
axis.minRange = minRange;
axis.min = min;
axis.max = max;
};
/**
* Find the closestPointRange across all series, including the single data
* series.
*
* @private
* @function Highcharts.Axis#getClosest
*/
Axis.prototype.getClosest = function () {
var closestSingleDistance,
closestDistance;
if (this.categories) {
closestDistance = 1;
}
else {
var singleXs_1 = [];
this.series.forEach(function (series) {
var seriesClosest = series.closestPointRange,
xData = series.getColumn('x');
if (xData.length === 1) {
singleXs_1.push(xData[0]);
}
else if (series.sorted &&
Axis_defined(seriesClosest) &&
series.reserveSpace()) {
closestDistance = Axis_defined(closestDistance) ?
Math.min(closestDistance, seriesClosest) :
seriesClosest;
}
});
if (singleXs_1.length) {
singleXs_1.sort(function (a, b) { return a - b; });
closestSingleDistance = Axis_getClosestDistance([singleXs_1]);
}
}
if (closestSingleDistance && closestDistance) {
return Math.min(closestSingleDistance, closestDistance);
}
return closestSingleDistance || closestDistance;
};
/**
* When a point name is given and no x, search for the name in the existing
* categories, or if categories aren't provided, search names or create a
* new category (#2522).
*
* @private
* @function Highcharts.Axis#nameToX
*
* @param {Highcharts.Point} point
* The point to inspect.
*
* @return {number}
* The X value that the point is given.
*/
Axis.prototype.nameToX = function (point) {
var explicitCategories = Axis_isArray(this.options.categories),
names = explicitCategories ? this.categories : this.names;
var nameX = point.options.x,
x;
point.series.requireSorting = false;
if (!Axis_defined(nameX)) {
nameX = this.uniqueNames && names ?
(explicitCategories ?
names.indexOf(point.name) :
Axis_pick(names.keys[point.name], -1)) :
point.series.autoIncrement();
}
if (nameX === -1) { // Not found in current categories
if (!explicitCategories && names) {
x = names.length;
}
}
else if (Axis_isNumber(nameX)) {
x = nameX;
}
// Write the last point's name to the names array
if (typeof x !== 'undefined') {
this.names[x] = point.name;
// Backwards mapping is much faster than array searching (#7725)
this.names.keys[point.name] = x;
}
else if (point.x) {
x = point.x; // #17438
}
return x;
};
/**
* When changes have been done to series data, update the axis.names.
*
* @private
* @function Highcharts.Axis#updateNames
*/
Axis.prototype.updateNames = function () {
var axis = this,
names = this.names,
i = names.length;
if (i > 0) {
Object.keys(names.keys).forEach(function (key) {
delete (names.keys)[key];
});
names.length = 0;
this.minRange = this.userMinRange; // Reset
(this.series || []).forEach(function (series) {
// Reset incrementer (#5928)
series.xIncrement = null;
// When adding a series, points are not yet generated
if (!series.points || series.isDirtyData) {
// When we're updating the series with data that is longer
// than it was, and cropThreshold is passed, we need to make
// sure that the axis.max is increased _before_ running the
// premature processData. Otherwise this early iteration of
// processData will crop the points to axis.max, and the
// names array will be too short (#5857).
axis.max = Math.max(axis.max || 0, series.dataTable.rowCount - 1);
series.processData();
series.generatePoints();
}
var xData = series.getColumn('x').slice();
series.data.forEach(function (point, i) {
var x = xData[i];
if ((point === null || point === void 0 ? void 0 : point.options) &&
typeof point.name !== 'undefined' // #9562
) {
x = axis.nameToX(point);
if (typeof x !== 'undefined' && x !== point.x) {
xData[i] = point.x = x;
}
}
});
series.dataTable.setColumn('x', xData);
});
}
};
/**
* Update translation information.
*
* @private
* @function Highcharts.Axis#setAxisTranslation
*
* @emits Highcharts.Axis#event:afterSetAxisTranslation
*/
Axis.prototype.setAxisTranslation = function () {
var axis = this,
range = axis.max - axis.min,
linkedParent = axis.linkedParent,
hasCategories = !!axis.categories,
isXAxis = axis.isXAxis;
var pointRange = axis.axisPointRange || 0,
closestPointRange,
minPointOffset = 0,
pointRangePadding = 0,
ordinalCorrection,
transA = axis.transA;
// Adjust translation for padding. Y axis with categories need to go
// through the same (#1784).
if (isXAxis || hasCategories || pointRange) {
// Get the closest points
closestPointRange = axis.getClosest();
if (linkedParent) {
minPointOffset = linkedParent.minPointOffset;
pointRangePadding = linkedParent.pointRangePadding;
}
else {
axis.series.forEach(function (series) {
var seriesPointRange = hasCategories ?
1 :
(isXAxis ?
Axis_pick(series.options.pointRange,
closestPointRange, 0) :
(axis.axisPointRange || 0)), // #2806
pointPlacement = series.options.pointPlacement;
pointRange = Math.max(pointRange, seriesPointRange);
if (!axis.single || hasCategories) {
// TODO: series should internally set x- and y-
// pointPlacement to simplify this logic.
var isPointPlacementAxis = series.is('xrange') ?
!isXAxis :
isXAxis;
// The `minPointOffset` is the value padding to the left
// of the axis in order to make room for points with a
// pointRange, typically columns, or line/scatter points
// on a category axis. When the `pointPlacement` option
// is 'between' or 'on', this padding does not apply.
minPointOffset = Math.max(minPointOffset, isPointPlacementAxis && Axis_isString(pointPlacement) ?
0 :
seriesPointRange / 2);
// Determine the total padding needed to the length of
// the axis to make room for the pointRange. If the
// series' pointPlacement is 'on', no padding is added.
pointRangePadding = Math.max(pointRangePadding, isPointPlacementAxis && pointPlacement === 'on' ?
0 :
seriesPointRange);
}
});
}
// Record minPointOffset and pointRangePadding
ordinalCorrection = (axis.ordinal && axis.ordinal.slope && closestPointRange) ?
axis.ordinal.slope / closestPointRange :
1; // #988, #1853
axis.minPointOffset = minPointOffset =
minPointOffset * ordinalCorrection;
axis.pointRangePadding =
pointRangePadding = pointRangePadding * ordinalCorrection;
// The `pointRange` is the width reserved for each point, like in a
// column chart
axis.pointRange = Math.min(pointRange, axis.single && hasCategories ? 1 : range);
// The `closestPointRange` is the closest distance between points.
// In columns it is mostly equal to pointRange, but in lines
// pointRange is 0 while closestPointRange is some other value
if (isXAxis && closestPointRange) {
axis.closestPointRange = closestPointRange;
}
}
// Secondary values
axis.translationSlope = axis.transA = transA =
axis.staticScale ||
axis.len / ((range + pointRangePadding) || 1);
// Translation addend
axis.transB = axis.horiz ? axis.left : axis.bottom;
axis.minPixelPadding = transA * minPointOffset;
Axis_fireEvent(this, 'afterSetAxisTranslation');
};
/**
* @private
* @function Highcharts.Axis#minFromRange
*/
Axis.prototype.minFromRange = function () {
var _a = this,
max = _a.max,
min = _a.min;
return Axis_isNumber(max) && Axis_isNumber(min) && max - min || void 0;
};
/**
* Set the tick positions to round values and optionally extend the extremes
* to the nearest tick.
*
* @private
* @function Highcharts.Axis#setTickInterval
*
* @param {boolean} secondPass
* TO-DO: parameter description
*
* @emits Highcharts.Axis#event:foundExtremes
*/
Axis.prototype.setTickInterval = function (secondPass) {
var _a,
_b,
_c,
_d;
var axis = this,
categories = axis.categories,
chart = axis.chart,
dataMax = axis.dataMax,
dataMin = axis.dataMin,
dateTime = axis.dateTime,
isXAxis = axis.isXAxis,
logarithmic = axis.logarithmic,
options = axis.options,
softThreshold = axis.softThreshold,
time = chart.time,
threshold = Axis_isNumber(axis.threshold) ? axis.threshold : void 0,
minRange = axis.minRange || 0,
ceiling = options.ceiling,
floor = options.floor,
linkedTo = options.linkedTo,
softMax = options.softMax,
softMin = options.softMin,
linkedParent = Axis_isNumber(linkedTo) && ((_a = chart[axis.coll]) === null || _a === void 0 ? void 0 : _a[linkedTo]),
tickPixelIntervalOption = options.tickPixelInterval;
var maxPadding = options.maxPadding,
minPadding = options.minPadding,
range = 0,
linkedParentExtremes,
// Only non-negative tickInterval is valid, #12961
tickIntervalOption = Axis_isNumber(options.tickInterval) && options.tickInterval >= 0 ?
options.tickInterval : void 0,
thresholdMin,
thresholdMax,
hardMin,
hardMax;
if (!dateTime && !categories && !linkedParent) {
this.getTickAmount();
}
// Min or max set either by zooming/setExtremes or initial options
hardMin = Axis_pick(axis.userMin, time.parse(options.min));
hardMax = Axis_pick(axis.userMax, time.parse(options.max));
// Linked axis gets the extremes from the parent axis
if (linkedParent) {
axis.linkedParent = linkedParent;
linkedParentExtremes = linkedParent.getExtremes();
axis.min = Axis_pick(linkedParentExtremes.min, linkedParentExtremes.dataMin);
axis.max = Axis_pick(linkedParentExtremes.max, linkedParentExtremes.dataMax);
if (this.type !== linkedParent.type) {
// Can't link axes of different type
Axis_error(11, true, chart);
}
// Initial min and max from the extreme data values
}
else {
// Adjust to hard threshold
if (softThreshold &&
Axis_defined(threshold) &&
Axis_isNumber(dataMax) &&
Axis_isNumber(dataMin)) {
if (dataMin >= threshold) {
thresholdMin = threshold;
minPadding = 0;
}
else if (dataMax <= threshold) {
thresholdMax = threshold;
maxPadding = 0;
}
}
axis.min = Axis_pick(hardMin, thresholdMin, dataMin);
axis.max = Axis_pick(hardMax, thresholdMax, dataMax);
}
if (Axis_isNumber(axis.max) && Axis_isNumber(axis.min)) {
if (logarithmic) {
if (axis.positiveValuesOnly &&
!secondPass &&
Math.min(axis.min, Axis_pick(dataMin, axis.min)) <= 0) { // #978
// Can't plot negative values on log axis
Axis_error(10, true, chart);
}
// The correctFloat cures #934, float errors on full tens. But
// it was too aggressive for #4360 because of conversion back to
// lin, therefore use precision 15.
axis.min = Axis_correctFloat(logarithmic.log2lin(axis.min), 16);
axis.max = Axis_correctFloat(logarithmic.log2lin(axis.max), 16);
}
// Handle zoomed range
if (axis.range && Axis_isNumber(dataMin)) {
// #618, #6773:
axis.userMin = axis.min = hardMin = Math.max(dataMin, axis.minFromRange() || 0);
axis.userMax = hardMax = axis.max;
axis.range = void 0; // Don't use it when running setExtremes
}
}
// Hook for Highcharts Stock Scroller and bubble axis padding
Axis_fireEvent(axis, 'foundExtremes');
// Adjust min and max for the minimum range
axis.adjustForMinRange();
if (Axis_isNumber(axis.min) && Axis_isNumber(axis.max)) {
// Handle options for floor, ceiling, softMin and softMax (#6359)
if (!Axis_isNumber(axis.userMin) &&
Axis_isNumber(softMin) &&
softMin < axis.min) {
axis.min = hardMin = softMin; // #6894
}
if (!Axis_isNumber(axis.userMax) &&
Axis_isNumber(softMax) &&
softMax > axis.max) {
axis.max = hardMax = softMax; // #6894
}
// Pad the values to get clear of the chart's edges. To avoid
// tickInterval taking the padding into account, we do this after
// computing tick interval (#1337).
if (!categories &&
!axis.axisPointRange &&
!((_b = axis.stacking) === null || _b === void 0 ? void 0 : _b.usePercentage) &&
!linkedParent) {
range = axis.max - axis.min;
if (range) {
if (!Axis_defined(hardMin) && minPadding) {
axis.min -= range * minPadding;
}
if (!Axis_defined(hardMax) && maxPadding) {
axis.max += range * maxPadding;
}
}
}
if (!Axis_isNumber(axis.userMin) && Axis_isNumber(floor)) {
axis.min = Math.max(axis.min, floor);
}
if (!Axis_isNumber(axis.userMax) && Axis_isNumber(ceiling)) {
axis.max = Math.min(axis.max, ceiling);
}
// When the threshold is soft, adjust the extreme value only if the
// data extreme and the padded extreme land on either side of the
// threshold. For example, a series of [0, 1, 2, 3] would make the
// yAxis add a tick for -1 because of the default `minPadding` and
// `startOnTick` options. This is prevented by the `softThreshold`
// option.
if (softThreshold &&
Axis_isNumber(dataMin) &&
Axis_isNumber(dataMax)) {
var numThreshold = threshold || 0;
if (!Axis_defined(hardMin) &&
axis.min < numThreshold &&
dataMin >= numThreshold) {
axis.min = options.minRange ?
Math.min(numThreshold, axis.max - minRange) :
numThreshold;
}
else if (!Axis_defined(hardMax) &&
axis.max > numThreshold &&
dataMax <= numThreshold) {
axis.max = options.minRange ?
Math.max(numThreshold, axis.min + minRange) :
numThreshold;
}
}
// If min is bigger than highest, or if max less than lowest value,
// the chart should not render points. (#14417)
if (!chart.polar && axis.min > axis.max) {
if (Axis_defined(options.min)) {
axis.max = axis.min;
}
else if (Axis_defined(options.max)) {
axis.min = axis.max;
}
}
range = axis.max - axis.min;
}
// Get tickInterval
if (axis.min === axis.max ||
!Axis_isNumber(axis.min) ||
!Axis_isNumber(axis.max)) {
axis.tickInterval = 1;
}
else if (linkedParent &&
!tickIntervalOption &&
tickPixelIntervalOption === linkedParent.options.tickPixelInterval) {
axis.tickInterval = tickIntervalOption = linkedParent.tickInterval;
}
else {
axis.tickInterval = Axis_pick(tickIntervalOption, this.tickAmount ?
range / Math.max(this.tickAmount - 1, 1) :
void 0,
// For categorized axis, 1 is default, for linear axis use
// tickPix
categories ?
1 :
// Don't let it be more than the data range
range * tickPixelIntervalOption /
Math.max(axis.len, tickPixelIntervalOption));
}
// Now we're finished detecting min and max, crop and group series data.
// This is in turn needed in order to find tick positions in ordinal
// axes.
if (isXAxis && !secondPass) {
var hasExtremesChanged_1 = axis.min !== ((_c = axis.old) === null || _c === void 0 ? void 0 : _c.min) ||
axis.max !== ((_d = axis.old) === null || _d === void 0 ? void 0 : _d.max);
// First process all series assigned to that axis.
axis.series.forEach(function (series) {
var _a;
// Allows filtering out points outside the plot area.
series.forceCrop = (_a = series.forceCropping) === null || _a === void 0 ? void 0 : _a.call(series);
series.processData(hasExtremesChanged_1);
});
// Then apply grouping if needed. The hasExtremesChanged helps to
// decide if the data grouping should be skipped in the further
// calculations #16319.
Axis_fireEvent(this, 'postProcessData', { hasExtremesChanged: hasExtremesChanged_1 });
}
// Set the translation factor used in translate function
axis.setAxisTranslation();
// Hook for ordinal axes and radial axes
Axis_fireEvent(this, 'initialAxisTranslation');
// In column-like charts, don't cramp in more ticks than there are
// points (#1943, #4184)
if (axis.pointRange && !tickIntervalOption) {
axis.tickInterval = Math.max(axis.pointRange, axis.tickInterval);
}
// Before normalizing the tick interval, handle minimum tick interval.
// This applies only if tickInterval is not defined.
var minTickInterval = Axis_pick(options.minTickInterval,
// In datetime axes, don't go below the data interval, except when
// there are scatter-like series involved (#13369).
dateTime &&
!axis.series.some(function (s) { return !s.sorted; }) ?
axis.closestPointRange : 0);
if (!tickIntervalOption && axis.tickInterval < minTickInterval) {
axis.tickInterval = minTickInterval;
}
// For linear axes, normalize the interval
if (!dateTime && !logarithmic && !tickIntervalOption) {
axis.tickInterval = getNormalizedTickInterval(axis, axis.tickInterval);
}
// Prevent ticks from getting so close that we can't draw the labels
if (!this.tickAmount) {
axis.tickInterval = axis.unsquish();
}
this.setTickPositions();
};
/**
* Now we have computed the normalized tickInterval, get the tick positions.
*
* @private
* @function Highcharts.Axis#setTickPositions
*
* @emits Highcharts.Axis#event:afterSetTickPositions
*/
Axis.prototype.setTickPositions = function () {
var _a,
_b;
var axis = this,
options = this.options,
tickPositionsOption = options.tickPositions,
tickPositioner = options.tickPositioner,
minorTickIntervalOption = this.getMinorTickInterval(),
allowEndOnTick = !this.isPanning,
startOnTick = allowEndOnTick && options.startOnTick,
endOnTick = allowEndOnTick && options.endOnTick;
var tickPositions = [],
tickPositionerResult;
// Set the tickmarkOffset
this.tickmarkOffset = (this.categories &&
options.tickmarkPlacement === 'between' &&
this.tickInterval === 1) ? 0.5 : 0; // #3202
// When there is only one point, or all points have the same value on
// this axis, then min and max are equal and tickPositions.length is 0
// or 1. In this case, add some padding in order to center the point,
// but leave it with one tick. #1337.
this.single =
this.min === this.max &&
Axis_defined(this.min) &&
!this.tickAmount &&
(
// Data is on integer (#6563)
this.min % 1 === 0 ||
// Between integers and decimals are not allowed (#6274)
options.allowDecimals !== false);
/**
* Contains the current positions that are laid out on the axis. The
* positions are numbers in terms of axis values. In a category axis
* they are integers, in a datetime axis they are also integers, but
* designating milliseconds.
*
* This property is read only - for modifying the tick positions, use
* the `tickPositioner` callback or [axis.tickPositions(
* https://api.highcharts.com/highcharts/xAxis.tickPositions) option
* instead.
*
* @name Highcharts.Axis#tickPositions
* @type {Highcharts.AxisTickPositionsArray|undefined}
*/
if (tickPositionsOption) {
// Find the tick positions. Work on a copy (#1565)
tickPositions = tickPositionsOption.slice();
}
else if (Axis_isNumber(this.min) && Axis_isNumber(this.max)) {
// Too many ticks (#6405). Create a friendly warning and provide two
// ticks so at least we can show the data series.
if (!((_a = axis.ordinal) === null || _a === void 0 ? void 0 : _a.positions) &&
((this.max - this.min) /
this.tickInterval >
Math.max(2 * this.len, 200))) {
tickPositions = [this.min, this.max];
Axis_error(19, false, this.chart);
}
else if (axis.dateTime) {
tickPositions = axis.getTimeTicks(axis.dateTime.normalizeTimeTickInterval(this.tickInterval, options.units), this.min, this.max, options.startOfWeek, (_b = axis.ordinal) === null || _b === void 0 ? void 0 : _b.positions, this.closestPointRange, true);
}
else if (axis.logarithmic) {
tickPositions = axis.logarithmic.getLogTickPositions(this.tickInterval, this.min, this.max);
}
else {
var startingTickInterval = this.tickInterval;
var adjustedTickInterval = startingTickInterval;
while (adjustedTickInterval <= startingTickInterval * 2) {
tickPositions = this.getLinearTickPositions(this.tickInterval, this.min, this.max);
// If there are more tick positions than the set tickAmount,
// increase the tickInterval and continue until it fits.
// (#17100)
if (this.tickAmount &&
tickPositions.length > this.tickAmount) {
this.tickInterval = getNormalizedTickInterval(this, adjustedTickInterval *= 1.1);
}
else {
break;
}
}
}
// Too dense ticks, keep only the first and last (#4477)
if (tickPositions.length > this.len) {
tickPositions = [
tickPositions[0],
tickPositions[tickPositions.length - 1]
];
// Reduce doubled value (#7339)
if (tickPositions[0] === tickPositions[1]) {
tickPositions.length = 1;
}
}
// Run the tick positioner callback, that allows modifying auto tick
// positions.
if (tickPositioner) {
// Make it available to the positioner
this.tickPositions = tickPositions;
tickPositionerResult = tickPositioner.apply(axis, [this.min, this.max]);
if (tickPositionerResult) {
tickPositions = tickPositionerResult;
}
}
}
this.tickPositions = tickPositions;
// Get minorTickInterval
this.minorTickInterval =
minorTickIntervalOption === 'auto' && this.tickInterval ?
this.tickInterval / options.minorTicksPerMajor :
minorTickIntervalOption;
// Reset min/max or remove extremes based on start/end on tick
this.paddedTicks = tickPositions.slice(0); // Used for logarithmic minor
this.trimTicks(tickPositions, startOnTick, endOnTick);
if (!this.isLinked && Axis_isNumber(this.min) && Axis_isNumber(this.max)) {
// Substract half a unit (#2619, #2846, #2515, #3390), but not in
// case of multiple ticks (#6897)
if (this.single &&
tickPositions.length < 2 &&
!this.categories &&
!this.series.some(function (s) {
return (s.is('heatmap') && s.options.pointPlacement === 'between');
})) {
this.min -= 0.5;
this.max += 0.5;
}
if (!tickPositionsOption && !tickPositionerResult) {
this.adjustTickAmount();
}
}
Axis_fireEvent(this, 'afterSetTickPositions');
};
/**
* Handle startOnTick and endOnTick by either adapting to padding min/max or
* rounded min/max. Also handle single data points.
*
* @private
* @function Highcharts.Axis#trimTicks
*
* @param {Array<number>} tickPositions
* TO-DO: parameter description
*
* @param {boolean} [startOnTick]
* TO-DO: parameter description
*
* @param {boolean} [endOnTick]
* TO-DO: parameter description
*/
Axis.prototype.trimTicks = function (tickPositions, startOnTick, endOnTick) {
var roundedMin = tickPositions[0],
roundedMax = tickPositions[tickPositions.length - 1],
minPointOffset = (!this.isOrdinal && this.minPointOffset) || 0; // (#12716)
Axis_fireEvent(this, 'trimTicks');
if (!this.isLinked) {
if (startOnTick && roundedMin !== -Infinity) { // #6502
this.min = roundedMin;
}
else {
while (this.min - minPointOffset > tickPositions[0]) {
tickPositions.shift();
}
}
if (endOnTick) {
this.max = roundedMax;
}
else {
while (this.max + minPointOffset <
tickPositions[tickPositions.length - 1]) {
tickPositions.pop();
}
}
// If no tick are left, set one tick in the middle (#3195)
if (tickPositions.length === 0 &&
Axis_defined(roundedMin) &&
!this.options.tickPositions) {
tickPositions.push((roundedMax + roundedMin) / 2);
}
}
};
/**
* Check if there are multiple axes in the same pane.
*
* @private
* @function Highcharts.Axis#alignToOthers
*
* @return {boolean|undefined}
* True if there are other axes.
*/
Axis.prototype.alignToOthers = function () {
var axis = this,
chart = axis.chart,
alignedAxes = [this],
options = axis.options,
chartOptions = chart.options.chart,
alignThresholds = (this.coll === 'yAxis' &&
chartOptions.alignThresholds),
thresholdAlignments = [];
var hasOther;
axis.thresholdAlignment = void 0;
if ((
// Only if alignTicks or alignThresholds is true
(chartOptions.alignTicks !== false && options.alignTicks) ||
alignThresholds) &&
// Disabled when startOnTick or endOnTick are false (#7604)
options.startOnTick !== false &&
options.endOnTick !== false &&
// Don't try to align ticks on a log axis, they are not evenly
// spaced (#6021)
!axis.logarithmic) {
// Get a key identifying which pane the axis belongs to
var getKey_1 = function (axis) {
var horiz = axis.horiz,
options = axis.options;
return [
horiz ? options.left : options.top,
options.width,
options.height,
options.pane
].join(',');
};
var thisKey_1 = getKey_1(this);
chart[this.coll].forEach(function (otherAxis) {
var series = otherAxis.series;
if (
// #4442
series.length &&
series.some(function (s) { return s.visible; }) &&
otherAxis !== axis &&
getKey_1(otherAxis) === thisKey_1) {
hasOther = true; // #4201
alignedAxes.push(otherAxis);
}
});
}
if (hasOther && alignThresholds) {
// Handle alignThresholds. The `thresholdAlignments` array keeps
// records of where each axis in the group wants its threshold, from
// 0 which is on `axis.min`, to 1 which is on `axis.max`.
alignedAxes.forEach(function (otherAxis) {
var threshAlign = otherAxis.getThresholdAlignment(axis);
if (Axis_isNumber(threshAlign)) {
thresholdAlignments.push(threshAlign);
}
});
// For each of the axes in the group, record the average
// `thresholdAlignment`.
var thresholdAlignment_1 = thresholdAlignments.length > 1 ?
thresholdAlignments.reduce(function (sum,
n) { return (sum += n); }, 0) / thresholdAlignments.length :
void 0;
alignedAxes.forEach(function (axis) {
axis.thresholdAlignment = thresholdAlignment_1;
});
}
return hasOther;
};
/**
* Where the axis wants its threshold, from 0 which is on `axis.min`, to 1 which
* is on `axis.max`.
*
* @private
* @function Highcharts.Axis#getThresholdAlignment
*/
Axis.prototype.getThresholdAlignment = function (callerAxis) {
if (!Axis_isNumber(this.dataMin) ||
(this !== callerAxis &&
this.series.some(function (s) { return (s.isDirty || s.isDirtyData); }))) {
this.getSeriesExtremes();
}
if (Axis_isNumber(this.threshold)) {
var thresholdAlignment = Axis_clamp(((this.threshold - (this.dataMin || 0)) /
((this.dataMax || 0) - (this.dataMin || 0))), 0, 1);
if (this.options.reversed) {
thresholdAlignment = 1 - thresholdAlignment;
}
return thresholdAlignment;
}
};
/**
* Find the max ticks of either the x and y axis collection, and record it
* in `this.tickAmount`.
*
* @private
* @function Highcharts.Axis#getTickAmount
*/
Axis.prototype.getTickAmount = function () {
var axis = this,
options = this.options,
tickPixelInterval = options.tickPixelInterval;
var tickAmount = options.tickAmount;
if (!Axis_defined(options.tickInterval) &&
!tickAmount &&
this.len < tickPixelInterval &&
!this.isRadial &&
!axis.logarithmic &&
options.startOnTick &&
options.endOnTick) {
tickAmount = 2;
}
if (!tickAmount && this.alignToOthers()) {
// Add 1 because 4 tick intervals require 5 ticks (including first
// and last)
tickAmount = Math.ceil(this.len / tickPixelInterval) + 1;
}
// For tick amounts of 2 and 3, compute five ticks and remove the
// intermediate ones. This prevents the axis from adding ticks that are
// too far away from the data extremes.
if (tickAmount < 4) {
this.finalTickAmt = tickAmount;
tickAmount = 5;
}
this.tickAmount = tickAmount;
};
/**
* When using multiple axes, adjust the number of ticks to match the highest
* number of ticks in that group.
*
* @private
* @function Highcharts.Axis#adjustTickAmount
*/
Axis.prototype.adjustTickAmount = function () {
var axis = this,
finalTickAmt = axis.finalTickAmt,
max = axis.max,
min = axis.min,
options = axis.options,
tickPositions = axis.tickPositions,
tickAmount = axis.tickAmount,
thresholdAlignment = axis.thresholdAlignment,
currentTickAmount = tickPositions === null || tickPositions === void 0 ? void 0 : tickPositions.length,
threshold = Axis_pick(axis.threshold,
axis.softThreshold ? 0 : null);
var len,
i,
tickInterval = axis.tickInterval,
thresholdTickIndex;
var
// Extend the tickPositions by appending a position
append = function () { return tickPositions.push(Axis_correctFloat(tickPositions[tickPositions.length - 1] +
tickInterval)); },
// Extend the tickPositions by prepending a position
prepend = function () { return tickPositions.unshift(Axis_correctFloat(tickPositions[0] - tickInterval)); };
// If `thresholdAlignment` is a number, it means the `alignThresholds`
// option is true. The `thresholdAlignment` is a scalar value between 0
// and 1 for where the threshold should be relative to `axis.min` and
// `axis.max`. Now that we know the tick amount, convert this to the
// tick index. Unless `thresholdAlignment` is exactly 0 or 1, avoid the
// first or last tick because that would lead to series being clipped.
if (Axis_isNumber(thresholdAlignment)) {
thresholdTickIndex = thresholdAlignment < 0.5 ?
Math.ceil(thresholdAlignment * (tickAmount - 1)) :
Math.floor(thresholdAlignment * (tickAmount - 1));
if (options.reversed) {
thresholdTickIndex = tickAmount - 1 - thresholdTickIndex;
}
}
if (axis.hasData() && Axis_isNumber(min) && Axis_isNumber(max)) { // #14769
// Adjust extremes and translation to the modified tick positions
var adjustExtremes = function () {
axis.transA *= (currentTickAmount - 1) / (tickAmount - 1);
// Do not crop when ticks are not extremes (#9841)
axis.min = options.startOnTick ?
tickPositions[0] :
Math.min(min, tickPositions[0]);
axis.max = options.endOnTick ?
tickPositions[tickPositions.length - 1] :
Math.max(max, tickPositions[tickPositions.length - 1]);
};
// When the axis is subject to the alignThresholds option. Use
// axis.threshold because the local threshold includes the
// `softThreshold`.
if (Axis_isNumber(thresholdTickIndex) && Axis_isNumber(axis.threshold)) {
// Throw away the previously computed tickPositions and start
// from scratch with only the threshold itself, then add ticks
// below the threshold first, then fill up above the threshold.
// If we are not able to fill up to axis.max, double the
// tickInterval and run again.
while (tickPositions[thresholdTickIndex] !== threshold ||
tickPositions.length !== tickAmount ||
tickPositions[0] > min ||
tickPositions[tickPositions.length - 1] < max) {
tickPositions.length = 0;
tickPositions.push(axis.threshold);
while (tickPositions.length < tickAmount) {
if (
// Start by prepending positions until the threshold
// is at the required index...
tickPositions[thresholdTickIndex] === void 0 ||
tickPositions[thresholdTickIndex] > axis.threshold) {
prepend();
}
else {
// ... then append positions until we have the
// required length
append();
}
}
// Safety vent
if (tickInterval > axis.tickInterval * 8) {
break;
}
tickInterval *= 2;
}
adjustExtremes();
}
else if (currentTickAmount < tickAmount) {
while (tickPositions.length < tickAmount) {
// Extend evenly for both sides unless we're on the
// threshold (#3965)
if (tickPositions.length % 2 || min === threshold) {
append();
}
else {
prepend();
}
}
adjustExtremes();
}
// The finalTickAmt property is set in getTickAmount
if (Axis_defined(finalTickAmt)) {
i = len = tickPositions.length;
while (i--) {
if (
// Remove every other tick
(finalTickAmt === 3 && i % 2 === 1) ||
// Remove all but first and last
(finalTickAmt <= 2 && i > 0 && i < len - 1)) {
tickPositions.splice(i, 1);
}
}
axis.finalTickAmt = void 0;
}
}
};
/**
* Set the scale based on data min and max, user set min and max or options.
*
* @private
* @function Highcharts.Axis#setScale
*
* @emits Highcharts.Axis#event:afterSetScale
*/
Axis.prototype.setScale = function () {
var _a,
_b;
var axis = this,
coll = axis.coll,
stacking = axis.stacking;
var isDirtyData = false,
isXAxisDirty = false;
axis.series.forEach(function (series) {
isDirtyData = isDirtyData || series.isDirtyData || series.isDirty;
// When x axis is dirty, we need new data extremes for y as
// well:
isXAxisDirty = (isXAxisDirty ||
(series.xAxis && series.xAxis.isDirty) ||
false);
});
// Set the new axisLength
axis.setAxisSize();
var isDirtyAxisLength = axis.len !== (axis.old && axis.old.len);
// Do we really need to go through all this?
if (isDirtyAxisLength ||
isDirtyData ||
isXAxisDirty ||
axis.isLinked ||
axis.forceRedraw ||
axis.userMin !== (axis.old && axis.old.userMin) ||
axis.userMax !== (axis.old && axis.old.userMax) ||
axis.alignToOthers()) {
if (stacking && coll === 'yAxis') {
stacking.buildStacks();
}
axis.forceRedraw = false;
// #18066 delete minRange property to ensure that it will be
// calculated again after dirty data in series
if (!axis.userMinRange) {
axis.minRange = void 0;
}
// Get data extremes if needed
axis.getSeriesExtremes();
// Get fixed positions based on tickInterval
axis.setTickInterval();
if (stacking && coll === 'xAxis') {
stacking.buildStacks();
}
// Mark as dirty if it is not already set to dirty and extremes have
// changed. #595.
if (!axis.isDirty) {
axis.isDirty =
isDirtyAxisLength ||
axis.min !== ((_a = axis.old) === null || _a === void 0 ? void 0 : _a.min) ||
axis.max !== ((_b = axis.old) === null || _b === void 0 ? void 0 : _b.max);
}
}
else if (stacking) {
stacking.cleanStacks();
}
// Recalculate all extremes object when the data has changed. It is
// required when vertical panning is enabled.
if (isDirtyData) {
delete axis.allExtremes;
}
Axis_fireEvent(this, 'afterSetScale');
};
/**
* Set the minimum and maximum of the axes after render time. If the
* `startOnTick` and `endOnTick` options are true, the minimum and maximum
* values are rounded off to the nearest tick. To prevent this, these
* options can be set to false before calling setExtremes. Also, setExtremes
* will not allow a range lower than the `minRange` option, which by default
* is the range of five points.
*
* @sample highcharts/members/axis-setextremes/
* Set extremes from a button
* @sample highcharts/members/axis-setextremes-datetime/
* Set extremes on a datetime axis
* @sample highcharts/members/axis-setextremes-off-ticks/
* Set extremes off ticks
* @sample stock/members/axis-setextremes/
* Set extremes in Highcharts Stock
*
* @function Highcharts.Axis#setExtremes
*
* @param {number|string} [newMin]
* The new minimum value. For datetime axes, date strings are accepted.
*
* @param {number|string} [newMax]
* The new maximum value. For datetime axes, date strings are accepted.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart or wait for an explicit call to
* {@link Highcharts.Chart#redraw}
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation=true]
* Enable or modify animations.
*
* @param {*} [eventArguments]
* Arguments to be accessed in event handler.
*
* @emits Highcharts.Axis#event:setExtremes
*/
Axis.prototype.setExtremes = function (min, max, redraw, animation, eventArguments) {
var _this = this;
if (redraw === void 0) { redraw = true; }
var chart = this.chart;
this.series.forEach(function (serie) {
delete serie.kdTree;
});
min = chart.time.parse(min);
max = chart.time.parse(max);
// Extend the arguments with min and max
eventArguments = Axis_extend(eventArguments, { min: min, max: max });
// Fire the event
Axis_fireEvent(this, 'setExtremes', eventArguments, function (e) {
_this.userMin = e.min;
_this.userMax = e.max;
_this.eventArgs = e;
if (redraw) {
chart.redraw(animation);
}
});
};
/**
* Update the axis metrics.
*
* @private
* @function Highcharts.Axis#setAxisSize
*/
Axis.prototype.setAxisSize = function () {
var chart = this.chart,
options = this.options,
// [top, right, bottom, left]
offsets = options.offsets || [0, 0, 0, 0],
horiz = this.horiz,
// Check for percentage based input values. Rounding fixes problems
// with column overflow and plot line filtering (#4898, #4899)
width = this.width = Math.round(Axis_relativeLength(Axis_pick(options.width,
chart.plotWidth - offsets[3] + offsets[1]),
chart.plotWidth)),
height = this.height = Math.round(Axis_relativeLength(Axis_pick(options.height,
chart.plotHeight - offsets[0] + offsets[2]),
chart.plotHeight)),
top = this.top = Math.round(Axis_relativeLength(Axis_pick(options.top,
chart.plotTop + offsets[0]),
chart.plotHeight,
chart.plotTop)),
left = this.left = Math.round(Axis_relativeLength(Axis_pick(options.left,
chart.plotLeft + offsets[3]),
chart.plotWidth,
chart.plotLeft));
// Expose basic values to use in Series object and navigator
this.bottom = chart.chartHeight - height - top;
this.right = chart.chartWidth - width - left;
// Direction agnostic properties
this.len = Math.max(horiz ? width : height, 0); // Math.max fixes #905
/**
* The position of the axis in terms of pixels, compared to the chart
* edge. In a horizontal axis it is the same as `chart.plotLeft` unless
* the axis is explicitly positioned, and in a default vertical axis it
* is the same as `chart.plotTop`.
*
* @name Highcharts.Axis#pos
* @type {number}
*/
this.pos = horiz ? left : top; // Distance from SVG origin
};
/**
* Get the current extremes for the axis.
*
* @sample highcharts/members/axis-getextremes/
* Report extremes by click on a button
*
* @function Highcharts.Axis#getExtremes
*
* @return {Highcharts.ExtremesObject}
* An object containing extremes information.
*/
Axis.prototype.getExtremes = function () {
var axis = this,
log = axis.logarithmic;
return {
min: log ?
Axis_correctFloat(log.lin2log(axis.min)) :
axis.min,
max: log ?
Axis_correctFloat(log.lin2log(axis.max)) :
axis.max,
dataMin: axis.dataMin,
dataMax: axis.dataMax,
userMin: axis.userMin,
userMax: axis.userMax
};
};
/**
* Get the zero plane either based on zero or on the min or max value.
* Used in bar and area plots.
*
* @function Highcharts.Axis#getThreshold
*
* @param {number} threshold
* The threshold in axis values.
*
* @return {number}
* The translated threshold position in terms of pixels, and corrected to
* stay within the axis bounds.
*/
Axis.prototype.getThreshold = function (threshold) {
var axis = this,
log = axis.logarithmic,
realMin = log ? log.lin2log(axis.min) : axis.min,
realMax = log ? log.lin2log(axis.max) : axis.max;
if (threshold === null || threshold === -Infinity) {
threshold = realMin;
}
else if (threshold === Infinity) {
threshold = realMax;
}
else if (realMin > threshold) {
threshold = realMin;
}
else if (realMax < threshold) {
threshold = realMax;
}
return axis.translate(threshold, 0, 1, 0, 1);
};
/**
* Compute auto alignment for the axis label based on which side the axis is
* on and the given rotation for the label.
*
* @private
* @function Highcharts.Axis#autoLabelAlign
*
* @param {number} rotation
* The rotation in degrees as set by either the `rotation` or `autoRotation`
* options.
*
* @return {Highcharts.AlignValue}
* Can be `"center"`, `"left"` or `"right"`.
*/
Axis.prototype.autoLabelAlign = function (rotation) {
var angle = (Axis_pick(rotation, 0) - (this.side * 90) + 720) % 360,
evt = { align: 'center' };
Axis_fireEvent(this, 'autoLabelAlign', evt, function (e) {
if (angle > 15 && angle < 165) {
e.align = 'right';
}
else if (angle > 195 && angle < 345) {
e.align = 'left';
}
});
return evt.align;
};
/**
* Get the tick length and width for the axis based on axis options.
*
* @private
* @function Highcharts.Axis#tickSize
*
* @param {string} [prefix]
* 'tick' or 'minorTick'
*
* @return {Array<number,number>|undefined}
* An array of tickLength and tickWidth
*/
Axis.prototype.tickSize = function (prefix) {
var options = this.options,
tickWidth = Axis_pick(options[prefix === 'tick' ? 'tickWidth' : 'minorTickWidth'],
// Default to 1 on linear and datetime X axes
prefix === 'tick' && this.isXAxis && !this.categories ? 1 : 0);
var tickLength = options[prefix === 'tick' ? 'tickLength' : 'minorTickLength'],
tickSize;
if (tickWidth && tickLength) {
// Negate the length
if (options[prefix + 'Position'] === 'inside') {
tickLength = -tickLength;
}
tickSize = [tickLength, tickWidth];
}
var e = { tickSize: tickSize };
Axis_fireEvent(this, 'afterTickSize', e);
return e.tickSize;
};
/**
* Return the size of the labels.
*
* @private
* @function Highcharts.Axis#labelMetrics
*/
Axis.prototype.labelMetrics = function () {
var renderer = this.chart.renderer,
ticks = this.ticks,
tick = ticks[Object.keys(ticks)[0]] || {};
return this.chart.renderer.fontMetrics(tick.label ||
tick.movedLabel ||
renderer.box);
};
/**
* Prevent the ticks from getting so close we can't draw the labels. On a
* horizontal axis, this is handled by rotating the labels, removing ticks
* and adding ellipsis. On a vertical axis remove ticks and add ellipsis.
*
* @private
* @function Highcharts.Axis#unsquish
*/
Axis.prototype.unsquish = function () {
var labelOptions = this.options.labels,
padding = labelOptions.padding || 0,
horiz = this.horiz,
tickInterval = this.tickInterval,
slotSize = this.len / (((this.categories ? 1 : 0) +
this.max -
this.min) /
tickInterval),
rotationOption = labelOptions.rotation,
// We don't know the actual rendered line height at this point, but
// it defaults to 0.8em
lineHeight = Axis_correctFloat(this.labelMetrics().h * 0.8),
range = Math.max(this.max - this.min, 0),
// Return the multiple of tickInterval that is needed to avoid
// collision
getStep = function (spaceNeeded) {
var step = (spaceNeeded + 2 * padding) / (slotSize || 1);
step = step > 1 ? Math.ceil(step) : 1;
// Guard for very small or negative angles (#9835)
if (step * tickInterval > range &&
spaceNeeded !== Infinity &&
slotSize !== Infinity &&
range) {
step = Math.ceil(range / tickInterval);
}
return Axis_correctFloat(step * tickInterval);
};
var newTickInterval = tickInterval,
rotation,
bestScore = Number.MAX_VALUE,
autoRotation;
if (horiz) {
if (!labelOptions.staggerLines) {
if (Axis_isNumber(rotationOption)) {
autoRotation = [rotationOption];
}
else if (slotSize < labelOptions.autoRotationLimit) {
autoRotation = labelOptions.autoRotation;
}
}
if (autoRotation) {
var step = void 0,
score = void 0;
// Loop over the given autoRotation options, and determine which
// gives the best score. The best score is that with the lowest
// number of steps and a rotation closest to horizontal.
for (var _i = 0, autoRotation_1 = autoRotation; _i < autoRotation_1.length; _i++) {
var rot = autoRotation_1[_i];
if (rot === rotationOption ||
(rot && rot >= -90 && rot <= 90)) { // #3891
step = getStep(Math.abs(lineHeight / Math.sin(Axis_deg2rad * rot)));
score = step + Math.abs(rot / 360);
if (score < bestScore) {
bestScore = score;
rotation = rot;
newTickInterval = step;
}
}
}
}
}
else { // #4411
newTickInterval = getStep(lineHeight * 0.75);
}
this.autoRotation = autoRotation;
this.labelRotation = Axis_pick(rotation, Axis_isNumber(rotationOption) ? rotationOption : 0);
return labelOptions.step ? tickInterval : newTickInterval;
};
/**
* Get the general slot width for labels/categories on this axis. This may
* change between the pre-render (from Axis.getOffset) and the final tick
* rendering and placement.
*
* @private
* @function Highcharts.Axis#getSlotWidth
*
* @param {Highcharts.Tick} [tick] Optionally, calculate the slot width
* basing on tick label. It is used in highcharts-3d module, where the slots
* has different widths depending on perspective angles.
*
* @return {number}
* The pixel width allocated to each axis label.
*/
Axis.prototype.getSlotWidth = function (tick) {
// #5086, #1580, #1931
var chart = this.chart,
horiz = this.horiz,
labelOptions = this.options.labels,
slotCount = Math.max(this.tickPositions.length - (this.categories ? 0 : 1), 1),
marginLeft = chart.margin[3];
// Used by grid axis
if (tick && Axis_isNumber(tick.slotWidth)) { // #13221, can be 0
return tick.slotWidth;
}
if (horiz && labelOptions.step < 2 && !this.isRadial) {
if (labelOptions.rotation) { // #4415
return 0;
}
return ((this.staggerLines || 1) * this.len) / slotCount;
}
if (!horiz) {
// #7028
var cssWidth = labelOptions.style.width;
if (cssWidth !== void 0) {
return parseInt(String(cssWidth), 10);
}
if (marginLeft) {
return marginLeft - chart.spacing[3];
}
}
// Last resort, a fraction of the available size
return chart.chartWidth * 0.33;
};
/**
* Render the axis labels and determine whether ellipsis or rotation need to
* be applied.
*
* @private
* @function Highcharts.Axis#renderUnsquish
*/
Axis.prototype.renderUnsquish = function () {
var chart = this.chart,
renderer = chart.renderer,
tickPositions = this.tickPositions,
ticks = this.ticks,
labelOptions = this.options.labels,
labelStyleOptions = labelOptions.style,
horiz = this.horiz,
slotWidth = this.getSlotWidth(),
innerWidth = Math.max(1,
Math.round(slotWidth - (horiz ?
2 * (labelOptions.padding || 0) :
labelOptions.distance || 0 // #21172
))),
attr = {},
labelMetrics = this.labelMetrics(),
lineClampOption = labelStyleOptions.lineClamp;
var commonWidth,
lineClamp = lineClampOption !== null && lineClampOption !== void 0 ? lineClampOption : (Math.floor(this.len / (tickPositions.length * labelMetrics.h)) || 1),
maxLabelLength = 0;
// Set rotation option unless it is "auto", like in gauges
if (!Axis_isString(labelOptions.rotation)) {
// #4443
attr.rotation = labelOptions.rotation || 0;
}
// Get the longest label length
tickPositions.forEach(function (tickPosition) {
var _a;
var tick = ticks[tickPosition];
// Replace label - sorting animation
if (tick.movedLabel) {
tick.replaceMovedLabel();
}
var textPxLength = ((_a = tick.label) === null || _a === void 0 ? void 0 : _a.textPxLength) || 0;
if (textPxLength > maxLabelLength) {
maxLabelLength = textPxLength;
}
});
this.maxLabelLength = maxLabelLength;
// Handle auto rotation on horizontal axis
if (this.autoRotation) {
// Apply rotation only if the label is too wide for the slot, and
// the label is wider than its height.
if (maxLabelLength > innerWidth &&
maxLabelLength > labelMetrics.h) {
attr.rotation = this.labelRotation;
}
else {
this.labelRotation = 0;
}
// Handle word-wrap or ellipsis on vertical axis
}
else if (slotWidth) {
// For word-wrap or ellipsis
commonWidth = innerWidth;
}
// Add ellipsis if the label length is significantly longer than ideal
if (attr.rotation) {
commonWidth = (maxLabelLength > chart.chartHeight * 0.5 ?
chart.chartHeight * 0.33 :
maxLabelLength);
if (!lineClampOption) {
lineClamp = 1;
}
}
// Set the explicit or automatic label alignment
this.labelAlign = labelOptions.align ||
this.autoLabelAlign(this.labelRotation);
if (this.labelAlign) {
attr.align = this.labelAlign;
}
// Apply general and specific CSS
tickPositions.forEach(function (pos) {
var tick = ticks[pos],
label = tick && tick.label,
widthOption = labelStyleOptions.width,
css = {};
if (label) {
// This needs to go before the CSS in old IE (#4502)
label.attr(attr);
if (tick.shortenLabel) {
tick.shortenLabel();
}
else if (commonWidth &&
!widthOption &&
// Setting width in this case messes with the bounding box
// (#7975)
labelStyleOptions.whiteSpace !== 'nowrap' &&
(
// Speed optimizing, #7656
commonWidth < (label.textPxLength || 0) ||
// Resetting CSS, #4928
label.element.tagName === 'SPAN')) {
label.css(Axis_extend(css, {
width: "" + commonWidth + "px",
lineClamp: lineClamp
}));
// Reset previously shortened label (#8210)
}
else if (label.styles.width && !css.width && !widthOption) {
label.css({ width: 'auto' });
}
tick.rotation = attr.rotation;
}
}, this);
// Note: Why is this not part of getLabelPosition?
this.tickRotCorr = renderer.rotCorr(labelMetrics.b, this.labelRotation || 0, this.side !== 0);
};
/**
* Return true if the axis has associated data.
*
* @function Highcharts.Axis#hasData
*
* @return {boolean}
* True if the axis has associated visible series and those series have
* either valid data points or explicit `min` and `max` settings.
*/
Axis.prototype.hasData = function () {
return this.series.some(function (s) {
return s.hasData();
}) ||
(this.options.showEmpty &&
Axis_defined(this.min) &&
Axis_defined(this.max));
};
/**
* Adds the title defined in axis.options.title.
*
* @function Highcharts.Axis#addTitle
*
* @param {boolean} [display]
* Whether or not to display the title.
*/
Axis.prototype.addTitle = function (display) {
var axis = this,
renderer = axis.chart.renderer,
horiz = axis.horiz,
opposite = axis.opposite,
options = axis.options,
axisTitleOptions = options.title,
styledMode = axis.chart.styledMode;
var textAlign;
if (!axis.axisTitle) {
textAlign = axisTitleOptions.textAlign;
if (!textAlign) {
textAlign = (horiz ? {
low: 'left',
middle: 'center',
high: 'right'
} : {
low: opposite ? 'right' : 'left',
middle: 'center',
high: opposite ? 'left' : 'right'
})[axisTitleOptions.align];
}
axis.axisTitle = renderer
.text(axisTitleOptions.text || '', 0, 0, axisTitleOptions.useHTML)
.attr({
zIndex: 7,
rotation: axisTitleOptions.rotation || 0,
align: textAlign
})
.addClass('highcharts-axis-title');
// #7814, don't mutate style option
if (!styledMode) {
axis.axisTitle.css(Axis_merge(axisTitleOptions.style));
}
axis.axisTitle.add(axis.axisGroup);
axis.axisTitle.isNew = true;
}
// Max width defaults to the length of the axis
if (!styledMode &&
!axisTitleOptions.style.width &&
!axis.isRadial) {
axis.axisTitle.css({
width: axis.len + 'px'
});
}
// Hide or show the title depending on whether showEmpty is set
axis.axisTitle[display ? 'show' : 'hide'](display);
};
/**
* Generates a tick for initial positioning.
*
* @private
* @function Highcharts.Axis#generateTick
*
* @param {number} pos
* The tick position in axis values.
*
* @param {number} [i]
* The index of the tick in {@link Axis.tickPositions}.
*/
Axis.prototype.generateTick = function (pos) {
var axis = this,
ticks = axis.ticks;
if (!ticks[pos]) {
ticks[pos] = new Axis_Tick(axis, pos);
}
else {
ticks[pos].addLabel(); // Update labels depending on tick interval
}
};
/**
* Create the axisGroup and gridGroup elements on first iteration.
*
* @private
* @function Highcharts.Axis#getOffset
*
* @emits Highcharts.Axis#event:afterGetOffset
*/
Axis.prototype.createGroups = function () {
var _this = this;
var _a = this,
axisParent = _a.axisParent, // Used in color axis
chart = _a.chart,
coll = _a.coll,
options = _a.options,
renderer = chart.renderer;
var createGroup = function (name, suffix, zIndex) { return renderer.g(name)
.attr({ zIndex: zIndex })
.addClass("highcharts-".concat(coll.toLowerCase()).concat(suffix, " ") +
(_this.isRadial ? "highcharts-radial-axis".concat(suffix, " ") : '') +
(options.className || ''))
.add(axisParent); };
if (!this.axisGroup) {
this.gridGroup = createGroup('grid', '-grid', options.gridZIndex);
this.axisGroup = createGroup('axis', '', options.zIndex);
this.labelGroup = createGroup('axis-labels', '-labels', options.labels.zIndex);
}
};
/**
* Render the tick labels to a preliminary position to get their sizes
*
* @private
* @function Highcharts.Axis#getOffset
*
* @emits Highcharts.Axis#event:afterGetOffset
*/
Axis.prototype.getOffset = function () {
var axis = this,
chart = axis.chart,
horiz = axis.horiz,
options = axis.options,
side = axis.side,
ticks = axis.ticks,
tickPositions = axis.tickPositions,
coll = axis.coll,
invertedSide = (chart.inverted && !axis.isZAxis ?
[1, 0, 3, 2][side] :
side),
hasData = axis.hasData(),
axisTitleOptions = options.title,
labelOptions = options.labels,
hasCrossing = Axis_isNumber(options.crossing),
axisOffset = chart.axisOffset,
clipOffset = chart.clipOffset,
directionFactor = [-1, 1, 1, -1][side];
var showAxis,
titleOffset = 0,
titleOffsetOption,
titleMargin = 0,
labelOffset = 0, // Reset
labelOffsetPadded,
lineHeightCorrection;
// For reuse in Axis.render
axis.showAxis = showAxis = hasData || options.showEmpty;
// Set/reset staggerLines
axis.staggerLines = (axis.horiz && labelOptions.staggerLines) || void 0;
axis.createGroups();
if (hasData || axis.isLinked) {
// Generate ticks
tickPositions.forEach(function (pos) {
axis.generateTick(pos);
});
axis.renderUnsquish();
// Left side must be align: right and right side must
// have align: left for labels
axis.reserveSpaceDefault = (side === 0 ||
side === 2 ||
{ 1: 'left', 3: 'right' }[side] === axis.labelAlign);
if (Axis_pick(labelOptions.reserveSpace, hasCrossing ? false : null, axis.labelAlign === 'center' ? true : null, axis.reserveSpaceDefault)) {
tickPositions.forEach(function (pos) {
// Get the highest offset
labelOffset = Math.max(ticks[pos].getLabelSize(), labelOffset);
});
}
if (axis.staggerLines) {
labelOffset *= axis.staggerLines;
}
axis.labelOffset = labelOffset * (axis.opposite ? -1 : 1);
}
else { // Doesn't have data
Axis_objectEach(ticks, function (tick, n) {
tick.destroy();
delete ticks[n];
});
}
if ((axisTitleOptions === null || axisTitleOptions === void 0 ? void 0 : axisTitleOptions.text) &&
axisTitleOptions.enabled !== false) {
axis.addTitle(showAxis);
if (showAxis &&
!hasCrossing &&
axisTitleOptions.reserveSpace !== false) {
axis.titleOffset = titleOffset =
axis.axisTitle.getBBox()[horiz ? 'height' : 'width'];
titleOffsetOption = axisTitleOptions.offset;
titleMargin = Axis_defined(titleOffsetOption) ?
0 :
Axis_pick(axisTitleOptions.margin, horiz ? 5 : 10);
}
}
// Render the axis line
axis.renderLine();
// Handle automatic or user set offset
axis.offset = directionFactor * Axis_pick(options.offset, axisOffset[side] ? axisOffset[side] + (options.margin || 0) : 0);
axis.tickRotCorr = axis.tickRotCorr || { x: 0, y: 0 }; // Polar
if (side === 0) {
lineHeightCorrection = -axis.labelMetrics().h;
}
else if (side === 2) {
lineHeightCorrection = axis.tickRotCorr.y;
}
else {
lineHeightCorrection = 0;
}
// Find the padded label offset
labelOffsetPadded = Math.abs(labelOffset) + titleMargin;
if (labelOffset) {
labelOffsetPadded -= lineHeightCorrection;
labelOffsetPadded += directionFactor * (horiz ?
Axis_pick(labelOptions.y, axis.tickRotCorr.y +
directionFactor * labelOptions.distance) :
Axis_pick(labelOptions.x, directionFactor * labelOptions.distance));
}
axis.axisTitleMargin = Axis_pick(titleOffsetOption, labelOffsetPadded);
if (axis.getMaxLabelDimensions) {
axis.maxLabelDimensions = axis.getMaxLabelDimensions(ticks, tickPositions);
}
// Due to GridAxis.tickSize, tickSize should be calculated after ticks
// has rendered.
if (coll !== 'colorAxis' && clipOffset) {
var tickSize = this.tickSize('tick');
axisOffset[side] = Math.max(axisOffset[side], (axis.axisTitleMargin || 0) + titleOffset +
directionFactor * axis.offset, labelOffsetPadded, // #3027
tickPositions && tickPositions.length && tickSize ?
tickSize[0] + directionFactor * axis.offset :
0 // #4866
);
// Decide the clipping needed to keep the graph inside
// the plot area and axis lines
var clip = !axis.axisLine || options.offset ?
0 :
// #4308, #4371
axis.axisLine.strokeWidth() / 2;
clipOffset[invertedSide] = Math.max(clipOffset[invertedSide], clip);
}
Axis_fireEvent(this, 'afterGetOffset');
};
/**
* Internal function to get the path for the axis line. Extended for polar
* charts.
*
* @function Highcharts.Axis#getLinePath
*
* @param {number} lineWidth
* The line width in pixels.
*
* @return {Highcharts.SVGPathArray}
* The SVG path definition in array form.
*/
Axis.prototype.getLinePath = function (lineWidth) {
var chart = this.chart,
opposite = this.opposite,
offset = this.offset,
horiz = this.horiz,
lineLeft = this.left + (opposite ? this.width : 0) + offset,
lineTop = chart.chartHeight - this.bottom -
(opposite ? this.height : 0) + offset;
if (opposite) {
lineWidth *= -1; // Crispify the other way - #1480, #1687
}
return chart.renderer
.crispLine([
[
'M',
horiz ?
this.left :
lineLeft,
horiz ?
lineTop :
this.top
],
[
'L',
horiz ?
chart.chartWidth - this.right :
lineLeft,
horiz ?
lineTop :
chart.chartHeight - this.bottom
]
], lineWidth);
};
/**
* Render the axis line. Called internally when rendering and redrawing the
* axis.
*
* @function Highcharts.Axis#renderLine
*/
Axis.prototype.renderLine = function () {
if (!this.axisLine) {
this.axisLine = this.chart.renderer.path()
.addClass('highcharts-axis-line')
.add(this.axisGroup);
if (!this.chart.styledMode) {
this.axisLine.attr({
stroke: this.options.lineColor,
'stroke-width': this.options.lineWidth,
zIndex: 7
});
}
}
};
/**
* Position the axis title.
*
* @private
* @function Highcharts.Axis#getTitlePosition
*
* @return {Highcharts.PositionObject}
* X and Y positions for the title.
*/
Axis.prototype.getTitlePosition = function (axisTitle) {
// Compute anchor points for each of the title align options
var horiz = this.horiz,
axisLeft = this.left,
axisTop = this.top,
axisLength = this.len,
axisTitleOptions = this.options.title,
margin = horiz ? axisLeft : axisTop,
opposite = this.opposite,
offset = this.offset,
xOption = axisTitleOptions.x,
yOption = axisTitleOptions.y,
fontMetrics = this.chart.renderer.fontMetrics(axisTitle),
// The part of a multiline text that is below the baseline of the
// first line. Subtract 1 to preserve pixel-perfectness from the
// old behaviour (v5.0.12), where only one line was allowed.
textHeightOvershoot = axisTitle ? Math.max(axisTitle.getBBox(false, 0).height - fontMetrics.h - 1, 0) : 0,
// The position in the length direction of the axis
alongAxis = ({
low: margin + (horiz ? 0 : axisLength),
middle: margin + axisLength / 2,
high: margin + (horiz ? axisLength : 0)
})[axisTitleOptions.align],
// The position in the perpendicular direction of the axis
offAxis = (horiz ? axisTop + this.height : axisLeft) +
(horiz ? 1 : -1) * // Horizontal axis reverses the margin
(opposite ? -1 : 1) * // So does opposite axes
(this.axisTitleMargin || 0) +
[
-textHeightOvershoot, // Top
textHeightOvershoot, // Right
fontMetrics.f, // Bottom
-textHeightOvershoot // Left
][this.side],
titlePosition = {
x: horiz ?
alongAxis + xOption :
offAxis + (opposite ? this.width : 0) + offset + xOption,
y: horiz ?
offAxis + yOption - (opposite ? this.height : 0) + offset :
alongAxis + yOption
};
Axis_fireEvent(this, 'afterGetTitlePosition', { titlePosition: titlePosition });
return titlePosition;
};
/**
* Render a minor tick into the given position. If a minor tick already
* exists in this position, move it.
*
* @function Highcharts.Axis#renderMinorTick
*
* @param {number} pos
* The position in axis values.
*
* @param {boolean} slideIn
* Whether the tick should animate in from last computed position
*/
Axis.prototype.renderMinorTick = function (pos, slideIn) {
var axis = this;
var minorTicks = axis.minorTicks;
if (!minorTicks[pos]) {
minorTicks[pos] = new Axis_Tick(axis, pos, 'minor');
}
// Render new ticks in old position
if (slideIn && minorTicks[pos].isNew) {
minorTicks[pos].render(null, true);
}
minorTicks[pos].render(null, false, 1);
};
/**
* Render a major tick into the given position. If a tick already exists
* in this position, move it.
*
* @function Highcharts.Axis#renderTick
*
* @param {number} pos
* The position in axis values.
*
* @param {number} i
* The tick index.
*
* @param {boolean} slideIn
* Whether the tick should animate in from last computed position
*/
Axis.prototype.renderTick = function (pos, i, slideIn) {
var axis = this,
isLinked = axis.isLinked,
ticks = axis.ticks;
// Linked axes need an extra check to find out if
if (!isLinked ||
(pos >= axis.min && pos <= axis.max) ||
(axis.grid && axis.grid.isColumn)) {
if (!ticks[pos]) {
ticks[pos] = new Axis_Tick(axis, pos);
}
// NOTE this seems like overkill. Could be handled in tick.render by
// setting old position in attr, then set new position in animate.
// render new ticks in old position
if (slideIn && ticks[pos].isNew) {
// Start with negative opacity so that it is visible from
// halfway into the animation
ticks[pos].render(i, true, -1);
}
ticks[pos].render(i);
}
};
/**
* Render the axis.
*
* @private
* @function Highcharts.Axis#render
*
* @emits Highcharts.Axis#event:afterRender
*/
Axis.prototype.render = function () {
var axis = this,
chart = axis.chart,
log = axis.logarithmic,
renderer = chart.renderer,
options = axis.options,
isLinked = axis.isLinked,
tickPositions = axis.tickPositions,
axisTitle = axis.axisTitle,
ticks = axis.ticks,
minorTicks = axis.minorTicks,
alternateBands = axis.alternateBands,
stackLabelOptions = options.stackLabels,
alternateGridColor = options.alternateGridColor,
crossing = options.crossing,
tickmarkOffset = axis.tickmarkOffset,
axisLine = axis.axisLine,
showAxis = axis.showAxis,
animation = Axis_animObject(renderer.globalAnimation);
var from,
to;
// Reset
axis.labelEdge.length = 0;
axis.overlap = false;
// Mark all elements inActive before we go over and mark the active ones
[ticks, minorTicks, alternateBands].forEach(function (coll) {
Axis_objectEach(coll, function (tick) {
tick.isActive = false;
});
});
// Crossing
if (Axis_isNumber(crossing)) {
var otherAxis = this.isXAxis ? chart.yAxis[0] : chart.xAxis[0],
directionFactor = [1, -1, -1, 1][this.side];
if (otherAxis) {
var px = otherAxis.toPixels(crossing,
true);
if (axis.horiz) {
px = otherAxis.len - px;
}
axis.offset = directionFactor * px;
}
}
// If the series has data draw the ticks. Else only the line and title
if (axis.hasData() || isLinked) {
var slideInTicks_1 = axis.chart.hasRendered &&
axis.old && Axis_isNumber(axis.old.min);
// Minor ticks
if (axis.minorTickInterval && !axis.categories) {
axis.getMinorTickPositions().forEach(function (pos) {
axis.renderMinorTick(pos, slideInTicks_1);
});
}
// Major ticks. Pull out the first item and render it last so that
// we can get the position of the neighbour label. #808.
if (tickPositions.length) { // #1300
tickPositions.forEach(function (pos, i) {
axis.renderTick(pos, i, slideInTicks_1);
});
// In a categorized axis, the tick marks are displayed
// between labels. So we need to add a tick mark and
// grid line at the left edge of the X axis.
if (tickmarkOffset && (axis.min === 0 || axis.single)) {
if (!ticks[-1]) {
ticks[-1] = new Axis_Tick(axis, -1, null, true);
}
ticks[-1].render(-1);
}
}
// Alternate grid color
if (alternateGridColor) {
tickPositions.forEach(function (pos, i) {
to = typeof tickPositions[i + 1] !== 'undefined' ?
tickPositions[i + 1] + tickmarkOffset :
axis.max - tickmarkOffset;
if (i % 2 === 0 &&
pos < axis.max &&
to <= axis.max + (chart.polar ?
-tickmarkOffset :
tickmarkOffset)) { // #2248, #4660
if (!alternateBands[pos]) {
// Should be imported from PlotLineOrBand.js, but
// the dependency cycle with axis is a problem
alternateBands[pos] = new Core_Globals.PlotLineOrBand(axis, {});
}
from = pos + tickmarkOffset; // #949
alternateBands[pos].options = {
from: log ? log.lin2log(from) : from,
to: log ? log.lin2log(to) : to,
color: alternateGridColor,
className: 'highcharts-alternate-grid'
};
alternateBands[pos].render();
alternateBands[pos].isActive = true;
}
});
}
// Custom plot lines and bands
if (!axis._addedPlotLB) { // Only first time
axis._addedPlotLB = true;
(options.plotLines || [])
.concat(options.plotBands || [])
.forEach(function (plotLineOptions) {
axis
.addPlotBandOrLine(plotLineOptions);
});
}
} // End if hasData
// Remove inactive ticks
[ticks, minorTicks, alternateBands].forEach(function (coll) {
var forDestruction = [],
delay = animation.duration,
destroyInactiveItems = function () {
var i = forDestruction.length;
while (i--) {
// When resizing rapidly, the same items
// may be destroyed in different timeouts,
// or the may be reactivated
if (coll[forDestruction[i]] &&
!coll[forDestruction[i]].isActive) {
coll[forDestruction[i]].destroy();
delete coll[forDestruction[i]];
}
}
};
Axis_objectEach(coll, function (tick, pos) {
if (!tick.isActive) {
// Render to zero opacity
tick.render(pos, false, 0);
tick.isActive = false;
forDestruction.push(pos);
}
});
// When the objects are finished fading out, destroy them
Axis_syncTimeout(destroyInactiveItems, coll === alternateBands ||
!chart.hasRendered ||
!delay ?
0 :
delay);
});
// Set the axis line path
if (axisLine) {
axisLine[axisLine.isPlaced ? 'animate' : 'attr']({
d: this.getLinePath(axisLine.strokeWidth())
});
axisLine.isPlaced = true;
// Show or hide the line depending on options.showEmpty
axisLine[showAxis ? 'show' : 'hide'](showAxis);
}
if (axisTitle && showAxis) {
axisTitle[axisTitle.isNew ? 'attr' : 'animate'](axis.getTitlePosition(axisTitle));
axisTitle.isNew = false;
}
// Stacked totals:
if (stackLabelOptions && stackLabelOptions.enabled && axis.stacking) {
axis.stacking.renderStackTotals();
}
// End stacked totals
// Record old scaling for updating/animation. Pinch base must be
// preserved until the pinch ends.
axis.old = {
len: axis.len,
max: axis.max,
min: axis.min,
transA: axis.transA,
userMax: axis.userMax,
userMin: axis.userMin
};
axis.isDirty = false;
Axis_fireEvent(this, 'afterRender');
};
/**
* Redraw the axis to reflect changes in the data or axis extremes. Called
* internally from Highcharts.Chart#redraw.
*
* @private
* @function Highcharts.Axis#redraw
*/
Axis.prototype.redraw = function () {
if (this.visible) {
// Render the axis
this.render();
// Move plot lines and bands
this.plotLinesAndBands.forEach(function (plotLine) {
plotLine.render();
});
}
// Mark associated series as dirty and ready for redraw
this.series.forEach(function (series) {
series.isDirty = true;
});
};
/**
* Returns an array of axis properties, that should be untouched during
* reinitialization.
*
* @private
* @function Highcharts.Axis#getKeepProps
*/
Axis.prototype.getKeepProps = function () {
return (this.keepProps || Axis.keepProps);
};
/**
* Destroys an Axis instance. See {@link Axis#remove} for the API endpoint
* to fully remove the axis.
*
* @private
* @function Highcharts.Axis#destroy
*
* @param {boolean} [keepEvents]
* Whether to preserve events, used internally in Axis.update.
*/
Axis.prototype.destroy = function (keepEvents) {
var axis = this,
plotLinesAndBands = axis.plotLinesAndBands,
eventOptions = this.eventOptions;
Axis_fireEvent(this, 'destroy', { keepEvents: keepEvents });
// Remove the events
if (!keepEvents) {
Axis_removeEvent(axis);
}
// Destroy collections
[axis.ticks, axis.minorTicks, axis.alternateBands].forEach(function (coll) {
Axis_destroyObjectProperties(coll);
});
if (plotLinesAndBands) {
var i = plotLinesAndBands.length;
while (i--) { // #1975
plotLinesAndBands[i].destroy();
}
}
// Destroy elements
[
'axisLine', 'axisTitle', 'axisGroup',
'gridGroup', 'labelGroup', 'cross', 'scrollbar'
].forEach(function (prop) {
if (axis[prop]) {
axis[prop] = axis[prop].destroy();
}
});
// Destroy each generated group for plotlines and plotbands
for (var plotGroup in axis.plotLinesAndBandsGroups) { // eslint-disable-line guard-for-in
axis.plotLinesAndBandsGroups[plotGroup] =
axis.plotLinesAndBandsGroups[plotGroup].destroy();
}
// Delete all properties and fall back to the prototype.
Axis_objectEach(axis, function (val, key) {
if (axis.getKeepProps().indexOf(key) === -1) {
delete axis[key];
}
});
this.eventOptions = eventOptions;
};
/**
* Internal function to draw a crosshair.
*
* @function Highcharts.Axis#drawCrosshair
*
* @param {Highcharts.PointerEventObject} [e]
* The event arguments from the modified pointer event, extended with
* `chartX` and `chartY`
*
* @param {Highcharts.Point} [point]
* The Point object if the crosshair snaps to points.
*
* @emits Highcharts.Axis#event:afterDrawCrosshair
* @emits Highcharts.Axis#event:drawCrosshair
*/
Axis.prototype.drawCrosshair = function (e, point) {
var options = this.crosshair,
snap = Axis_pick(options && options.snap,
true),
chart = this.chart;
var path,
pos,
categorized,
graphic = this.cross,
crossOptions;
Axis_fireEvent(this, 'drawCrosshair', { e: e, point: point });
// Use last available event when updating non-snapped crosshairs without
// mouse interaction (#5287)
if (!e) {
e = this.cross && this.cross.e;
}
if (
// Disabled in options
!options ||
// Snap
((Axis_defined(point) || !snap) === false)) {
this.hideCrosshair();
}
else {
// Get the path
if (!snap) {
pos = e &&
(this.horiz ?
e.chartX - this.pos :
this.len - e.chartY + this.pos);
}
else if (Axis_defined(point)) {
// #3834
pos = Axis_pick(this.coll !== 'colorAxis' ?
point.crosshairPos : // 3D axis extension
null, this.isXAxis ?
point.plotX :
this.len - point.plotY);
}
if (Axis_defined(pos)) {
crossOptions = {
// Value, only used on radial
value: point && (this.isXAxis ?
point.x :
Axis_pick(point.stackY, point.y)),
translatedValue: pos
};
if (chart.polar) {
// Additional information required for crosshairs in
// polar chart
Axis_extend(crossOptions, {
isCrosshair: true,
chartX: e && e.chartX,
chartY: e && e.chartY,
point: point
});
}
path = this.getPlotLinePath(crossOptions) ||
null; // #3189
}
if (!Axis_defined(path)) {
this.hideCrosshair();
return;
}
categorized = this.categories && !this.isRadial;
// Draw the cross
if (!graphic) {
this.cross = graphic = chart.renderer
.path()
.addClass('highcharts-crosshair highcharts-crosshair-' +
(categorized ? 'category ' : 'thin ') +
(options.className || ''))
.attr({
zIndex: Axis_pick(options.zIndex, 2)
})
.add();
// Presentational attributes
if (!chart.styledMode) {
graphic.attr({
stroke: options.color ||
(categorized ?
Color_Color
.parse("#ccd3ff" /* Palette.highlightColor20 */)
.setOpacity(0.25)
.get() :
"#cccccc" /* Palette.neutralColor20 */),
'stroke-width': Axis_pick(options.width, 1)
}).css({
'pointer-events': 'none'
});
if (options.dashStyle) {
graphic.attr({
dashstyle: options.dashStyle
});
}
}
}
graphic.show().attr({
d: path
});
if (categorized && !options.width) {
graphic.attr({
'stroke-width': this.transA
});
}
this.cross.e = e;
}
Axis_fireEvent(this, 'afterDrawCrosshair', { e: e, point: point });
};
/**
* Hide the crosshair if visible.
*
* @function Highcharts.Axis#hideCrosshair
*/
Axis.prototype.hideCrosshair = function () {
if (this.cross) {
this.cross.hide();
}
Axis_fireEvent(this, 'afterHideCrosshair');
};
/**
* Update an axis object with a new set of options. The options are merged
* with the existing options, so only new or altered options need to be
* specified.
*
* @sample highcharts/members/axis-update/
* Axis update demo
*
* @function Highcharts.Axis#update
*
* @param {Highcharts.AxisOptions} options
* The new options that will be merged in with existing options on the axis.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the axis is altered. If doing more
* operations on the chart, it is a good idea to set redraw to false and
* call {@link Chart#redraw} after.
*/
Axis.prototype.update = function (options, redraw) {
var chart = this.chart;
options = Axis_merge(this.userOptions, options);
this.destroy(true);
this.init(chart, options);
chart.isDirtyBox = true;
if (Axis_pick(redraw, true)) {
chart.redraw();
}
};
/**
* Remove the axis from the chart.
*
* @sample highcharts/members/chart-addaxis/
* Add and remove axes
*
* @function Highcharts.Axis#remove
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart following the remove.
*/
Axis.prototype.remove = function (redraw) {
var chart = this.chart,
coll = this.coll,
axisSeries = this.series;
var i = axisSeries.length;
// Remove associated series (#2687)
while (i--) {
if (axisSeries[i]) {
axisSeries[i].remove(false);
}
}
// Remove the axis
Axis_erase(chart.axes, this);
Axis_erase(chart[coll] || [], this);
chart.orderItems(coll);
this.destroy();
chart.isDirtyBox = true;
if (Axis_pick(redraw, true)) {
chart.redraw();
}
};
/**
* Update the axis title by options after render time.
*
* @sample highcharts/members/axis-settitle/
* Set a new Y axis title
*
* @function Highcharts.Axis#setTitle
*
* @param {Highcharts.AxisTitleOptions} titleOptions
* The additional title options.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after setting the title.
*/
Axis.prototype.setTitle = function (titleOptions, redraw) {
this.update({ title: titleOptions }, redraw);
};
/**
* Set new axis categories and optionally redraw.
*
* @sample highcharts/members/axis-setcategories/
* Set categories by click on a button
*
* @function Highcharts.Axis#setCategories
*
* @param {Array<string>} categories
* The new categories.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart.
*/
Axis.prototype.setCategories = function (categories, redraw) {
this.update({ categories: categories }, redraw);
};
/* *
*
* Static Properties
*
* */
// Properties to survive after destroy, needed for Axis.update (#4317,
// #5773, #5881).
Axis.keepProps = [
'coll',
'extKey',
'hcEvents',
'len',
'names',
'series',
'userMax',
'userMin'
];
return Axis;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Axis_Axis = (Axis);
/* *
*
* API Declarations
*
* */
/**
* Options for the path on the Axis to be calculated.
* @interface Highcharts.AxisPlotLinePathOptionsObject
*/ /**
* Axis value.
* @name Highcharts.AxisPlotLinePathOptionsObject#value
* @type {number|undefined}
*/ /**
* Line width used for calculation crisp line coordinates. Defaults to 1.
* @name Highcharts.AxisPlotLinePathOptionsObject#lineWidth
* @type {number|undefined}
*/ /**
* If `false`, the function will return null when it falls outside the axis
* bounds. If `true`, the function will return a path aligned to the plot area
* sides if it falls outside. If `pass`, it will return a path outside.
* @name Highcharts.AxisPlotLinePathOptionsObject#force
* @type {string|boolean|undefined}
*/ /**
* Used in Highcharts Stock. When `true`, plot paths
* (crosshair, plotLines, gridLines)
* will be rendered on all axes when defined on the first axis.
* @name Highcharts.AxisPlotLinePathOptionsObject#acrossPanes
* @type {boolean|undefined}
*/ /**
* Use old coordinates (for resizing and rescaling).
* If not set, defaults to `false`.
* @name Highcharts.AxisPlotLinePathOptionsObject#old
* @type {boolean|undefined}
*/ /**
* If given, return the plot line path of a pixel position on the axis.
* @name Highcharts.AxisPlotLinePathOptionsObject#translatedValue
* @type {number|undefined}
*/ /**
* Used in Polar axes. Reverse the positions for concatenation of polygonal
* plot bands
* @name Highcharts.AxisPlotLinePathOptionsObject#reverse
* @type {boolean|undefined}
*/
/**
* Options for crosshairs on axes.
*
* @product highstock
*
* @typedef {Highcharts.XAxisCrosshairOptions|Highcharts.YAxisCrosshairOptions} Highcharts.AxisCrosshairOptions
*/
/**
* @typedef {"navigator"|"pan"|"rangeSelectorButton"|"rangeSelectorInput"|"scrollbar"|"traverseUpButton"|"zoom"} Highcharts.AxisExtremesTriggerValue
*/
/**
* @callback Highcharts.AxisEventCallbackFunction
*
* @param {Highcharts.Axis} this
*/
/**
* @callback Highcharts.AxisLabelsFormatterCallbackFunction
*
* @param {Highcharts.AxisLabelsFormatterContextObject} this
*
* @param {Highcharts.AxisLabelsFormatterContextObject} ctx
*
* @return {string}
*/
/**
* @interface Highcharts.AxisLabelsFormatterContextObject
*/ /**
* The axis item of the label
* @name Highcharts.AxisLabelsFormatterContextObject#axis
* @type {Highcharts.Axis}
*/ /**
* The chart instance.
* @name Highcharts.AxisLabelsFormatterContextObject#chart
* @type {Highcharts.Chart}
*/ /**
* Default formatting of date/time labels.
* @name Highcharts.AxisLabelsFormatterContextObject#dateTimeLabelFormat
* @type {string|undefined}
*/ /**
* Whether the label belongs to the first tick on the axis.
* @name Highcharts.AxisLabelsFormatterContextObject#isFirst
* @type {boolean}
*/ /**
* Whether the label belongs to the last tick on the axis.
* @name Highcharts.AxisLabelsFormatterContextObject#isLast
* @type {boolean}
*/ /**
* The position on the axis in terms of axis values. For category axes, a
* zero-based index. For datetime axes, the JavaScript time in milliseconds
* since 1970.
* @name Highcharts.AxisLabelsFormatterContextObject#pos
* @type {number}
*/ /**
* The preformatted text as the result of the default formatting. For example
* dates will be formatted as strings, and numbers with language-specific comma
* separators, thousands separators and numeric symbols like `k` or `M`.
* @name Highcharts.AxisLabelsFormatterContextObject#text
* @type {string|undefined}
*/ /**
* The Tick instance.
* @name Highcharts.AxisLabelsFormatterContextObject#tick
* @type {Highcharts.Tick}
*/ /**
* This can be either a numeric value or a category string.
* @name Highcharts.AxisLabelsFormatterContextObject#value
* @type {number|string}
*/
/**
* Options for axes.
*
* @typedef {Highcharts.XAxisOptions|Highcharts.YAxisOptions|Highcharts.ZAxisOptions} Highcharts.AxisOptions
*/
/**
* @callback Highcharts.AxisPointBreakEventCallbackFunction
*
* @param {Highcharts.Axis} this
*
* @param {Highcharts.AxisPointBreakEventObject} evt
*/
/**
* @interface Highcharts.AxisPointBreakEventObject
*/ /**
* @name Highcharts.AxisPointBreakEventObject#brk
* @type {Highcharts.Dictionary<number>}
*/ /**
* @name Highcharts.AxisPointBreakEventObject#point
* @type {Highcharts.Point}
*/ /**
* @name Highcharts.AxisPointBreakEventObject#preventDefault
* @type {Function}
*/ /**
* @name Highcharts.AxisPointBreakEventObject#target
* @type {Highcharts.SVGElement}
*/ /**
* @name Highcharts.AxisPointBreakEventObject#type
* @type {"pointBreak"|"pointInBreak"}
*/
/**
* @callback Highcharts.AxisSetExtremesEventCallbackFunction
*
* @param {Highcharts.Axis} this
*
* @param {Highcharts.AxisSetExtremesEventObject} evt
*/
/**
* @interface Highcharts.AxisSetExtremesEventObject
* @extends Highcharts.ExtremesObject
*/ /**
* @name Highcharts.AxisSetExtremesEventObject#preventDefault
* @type {Function}
*/ /**
* @name Highcharts.AxisSetExtremesEventObject#target
* @type {Highcharts.SVGElement}
*/ /**
* @name Highcharts.AxisSetExtremesEventObject#trigger
* @type {Highcharts.AxisExtremesTriggerValue|string}
*/ /**
* @name Highcharts.AxisSetExtremesEventObject#type
* @type {"setExtremes"}
*/
/**
* @callback Highcharts.AxisTickPositionerCallbackFunction
*
* @param {Highcharts.Axis} this
*
* @return {Highcharts.AxisTickPositionsArray}
*/
/**
* @interface Highcharts.AxisTickPositionsArray
* @augments Array<number>
*/
/**
* @typedef {"high"|"low"|"middle"} Highcharts.AxisTitleAlignValue
*/
/**
* @typedef {Highcharts.XAxisTitleOptions|Highcharts.YAxisTitleOptions|Highcharts.ZAxisTitleOptions} Highcharts.AxisTitleOptions
*/
/**
* @typedef {"linear"|"logarithmic"|"datetime"|"category"|"treegrid"} Highcharts.AxisTypeValue
*/
/**
* The returned object literal from the {@link Highcharts.Axis#getExtremes}
* function.
*
* @interface Highcharts.ExtremesObject
*/ /**
* The maximum value of the axis' associated series.
* @name Highcharts.ExtremesObject#dataMax
* @type {number}
*/ /**
* The minimum value of the axis' associated series.
* @name Highcharts.ExtremesObject#dataMin
* @type {number}
*/ /**
* The maximum axis value, either automatic or set manually. If the `max` option
* is not set, `maxPadding` is 0 and `endOnTick` is false, this value will be
* the same as `dataMax`.
* @name Highcharts.ExtremesObject#max
* @type {number}
*/ /**
* The minimum axis value, either automatic or set manually. If the `min` option
* is not set, `minPadding` is 0 and `startOnTick` is false, this value will be
* the same as `dataMin`.
* @name Highcharts.ExtremesObject#min
* @type {number}
*/ /**
* The user defined maximum, either from the `max` option or from a zoom or
* `setExtremes` action.
* @name Highcharts.ExtremesObject#userMax
* @type {number|undefined}
*/ /**
* The user defined minimum, either from the `min` option or from a zoom or
* `setExtremes` action.
* @name Highcharts.ExtremesObject#userMin
* @type {number|undefined}
*/
/**
* Formatter function for the text of a crosshair label.
*
* @callback Highcharts.XAxisCrosshairLabelFormatterCallbackFunction
*
* @param {Highcharts.Axis} this
* Axis context
*
* @param {number} value
* Y value of the data point
*
* @return {string}
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Axis/DateTimeAxis.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var DateTimeAxis_addEvent = Core_Utilities.addEvent, DateTimeAxis_getMagnitude = Core_Utilities.getMagnitude, DateTimeAxis_normalizeTickInterval = Core_Utilities.normalizeTickInterval, DateTimeAxis_timeUnits = Core_Utilities.timeUnits;
/* *
*
* Composition
*
* */
/* eslint-disable valid-jsdoc */
var DateTimeAxis;
(function (DateTimeAxis) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* Extends axis class with date and time support.
* @private
*/
function compose(AxisClass) {
if (!AxisClass.keepProps.includes('dateTime')) {
AxisClass.keepProps.push('dateTime');
var axisProto = AxisClass.prototype;
axisProto.getTimeTicks = getTimeTicks;
DateTimeAxis_addEvent(AxisClass, 'afterSetType', onAfterSetType);
}
return AxisClass;
}
DateTimeAxis.compose = compose;
/**
* Set the tick positions to a time unit that makes sense, for example
* on the first of each month or on every Monday. Return an array with
* the time positions. Used in datetime axes as well as for grouping
* data on a datetime axis.
*
* @private
* @function Highcharts.Axis#getTimeTicks
* @param {Highcharts.TimeNormalizeObject} normalizedInterval
* The interval in axis values (ms) and the count.
* @param {number} min
* The minimum in axis values.
* @param {number} max
* The maximum in axis values.
*/
function getTimeTicks() {
return this.chart.time.getTimeTicks.apply(this.chart.time, arguments);
}
/**
* @private
*/
function onAfterSetType() {
if (this.type !== 'datetime') {
this.dateTime = void 0;
return;
}
if (!this.dateTime) {
this.dateTime = new Additions(this);
}
}
/* *
*
* Classes
*
* */
var Additions = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function Additions(axis) {
this.axis = axis;
}
/* *
*
* Functions
*
* */
/**
* Get a normalized tick interval for dates. Returns a configuration
* object with unit range (interval), count and name. Used to prepare
* data for `getTimeTicks`. Previously this logic was part of
* getTimeTicks, but as `getTimeTicks` now runs of segments in stock
* charts, the normalizing logic was extracted in order to prevent it
* for running over again for each segment having the same interval.
* #662, #697.
* @private
*/
Additions.prototype.normalizeTimeTickInterval = function (tickInterval, unitsOption) {
var units = (unitsOption || [[
// Unit name
'millisecond',
// Allowed multiples
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500]
],
[
'second',
[1, 2, 5, 10, 15, 30]
],
[
'minute',
[1, 2, 5, 10, 15, 30]
],
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
],
[
'day',
[1, 2]
],
[
'week',
[1, 2]
],
[
'month',
[1, 2, 3, 4, 6]
],
[
'year',
null
]]);
var unit = units[units.length - 1], // Default unit is years
interval = DateTimeAxis_timeUnits[unit[0]],
multiples = unit[1],
i;
// Loop through the units to find the one that best fits the
// tickInterval
for (i = 0; i < units.length; i++) {
unit = units[i];
interval = DateTimeAxis_timeUnits[unit[0]];
multiples = unit[1];
if (units[i + 1]) {
// `lessThan` is in the middle between the highest multiple
// and the next unit.
var lessThan = (interval *
multiples[multiples.length - 1] +
DateTimeAxis_timeUnits[units[i + 1][0]]) / 2;
// Break and keep the current unit
if (tickInterval <= lessThan) {
break;
}
}
}
// Prevent 2.5 years intervals, though 25, 250 etc. are allowed
if (interval === DateTimeAxis_timeUnits.year && tickInterval < 5 * interval) {
multiples = [1, 2, 5];
}
// Get the count
var count = DateTimeAxis_normalizeTickInterval(tickInterval / interval, multiples, unit[0] === 'year' ? // #1913, #2360
Math.max(DateTimeAxis_getMagnitude(tickInterval / interval), 1) :
1);
return {
unitRange: interval,
count: count,
unitName: unit[0]
};
};
/**
* Get the best date format for a specific X value based on the closest
* point range on the axis.
*
* @private
*/
Additions.prototype.getXDateFormat = function (x, dateTimeLabelFormats) {
var axis = this.axis,
time = axis.chart.time;
return axis.closestPointRange ?
time.getDateFormat(axis.closestPointRange, x, axis.options.startOfWeek, dateTimeLabelFormats) ||
// #2546, 2581
time.resolveDTLFormat(dateTimeLabelFormats.year).main :
time.resolveDTLFormat(dateTimeLabelFormats.day).main;
};
return Additions;
}());
DateTimeAxis.Additions = Additions;
})(DateTimeAxis || (DateTimeAxis = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Axis_DateTimeAxis = (DateTimeAxis);
;// ./code/es5/es-modules/Core/Axis/LogarithmicAxis.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var LogarithmicAxis_addEvent = Core_Utilities.addEvent, LogarithmicAxis_normalizeTickInterval = Core_Utilities.normalizeTickInterval, LogarithmicAxis_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/**
* @private
*/
var LogarithmicAxis;
(function (LogarithmicAxis) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* Provides logarithmic support for axes.
* @private
*/
function compose(AxisClass) {
if (!AxisClass.keepProps.includes('logarithmic')) {
AxisClass.keepProps.push('logarithmic');
LogarithmicAxis_addEvent(AxisClass, 'afterSetType', onAfterSetType);
LogarithmicAxis_addEvent(AxisClass, 'afterInit', onAfterInit);
}
return AxisClass;
}
LogarithmicAxis.compose = compose;
/**
* @private
*/
function onAfterSetType() {
var _a;
if (this.type !== 'logarithmic') {
this.logarithmic = void 0;
}
else {
(_a = this.logarithmic) !== null && _a !== void 0 ? _a : (this.logarithmic = new Additions(this));
}
}
/**
* @private
*/
function onAfterInit() {
var axis = this;
var log = axis.logarithmic;
// Extend logarithmic axis
if (log) {
axis.lin2val = function (num) {
return log.lin2log(num);
};
axis.val2lin = function (num) {
return log.log2lin(num);
};
}
}
/* *
*
* Class
*
* */
/**
* Provides logarithmic support for axes.
* @private
* @class
*/
var Additions = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function Additions(axis) {
this.axis = axis;
}
/* *
*
* Functions
*
* */
/**
* Set the tick positions of a logarithmic axis.
*/
Additions.prototype.getLogTickPositions = function (interval, min, max, minor) {
var log = this;
var axis = log.axis;
var axisLength = axis.len;
var options = axis.options;
// Since we use this method for both major and minor ticks,
// use a local variable and return the result
var positions = [];
// Reset
if (!minor) {
log.minorAutoInterval = void 0;
}
// First case: All ticks fall on whole logarithms: 1, 10, 100 etc.
if (interval >= 0.5) {
interval = Math.round(interval);
positions = axis.getLinearTickPositions(interval, min, max);
// Second case: We need intermediary ticks. For example
// 1, 2, 4, 6, 8, 10, 20, 40 etc.
}
else if (interval >= 0.08) {
var roundedMin = Math.floor(min);
var intermediate = void 0,
i = void 0,
j = void 0,
len = void 0,
pos = void 0,
lastPos = void 0,
break2 = void 0;
if (interval > 0.3) {
intermediate = [1, 2, 4];
// 0.2 equals five minor ticks per 1, 10, 100 etc
}
else if (interval > 0.15) {
intermediate = [1, 2, 4, 6, 8];
}
else { // 0.1 equals ten minor ticks per 1, 10, 100 etc
intermediate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
}
for (i = roundedMin; i < max + 1 && !break2; i++) {
len = intermediate.length;
for (j = 0; j < len && !break2; j++) {
pos = log.log2lin(log.lin2log(i) * intermediate[j]);
// #1670, lastPos is #3113
if (pos > min &&
(!minor || lastPos <= max) &&
typeof lastPos !== 'undefined') {
positions.push(lastPos);
}
if (lastPos > max) {
break2 = true;
}
lastPos = pos;
}
}
// Third case: We are so deep in between whole logarithmic values,
// that we might as well handle the tick positions like a linear
// axis. For example 1.01, 1.02, 1.03, 1.04.
}
else {
var realMin = log.lin2log(min),
realMax = log.lin2log(max),
tickIntervalOption = minor ?
axis.getMinorTickInterval() :
options.tickInterval,
filteredTickIntervalOption = tickIntervalOption === 'auto' ?
null :
tickIntervalOption,
tickPixelIntervalOption = options.tickPixelInterval / (minor ? 5 : 1),
totalPixelLength = minor ?
axisLength / axis.tickPositions.length :
axisLength;
interval = LogarithmicAxis_pick(filteredTickIntervalOption, log.minorAutoInterval, (realMax - realMin) *
tickPixelIntervalOption / (totalPixelLength || 1));
interval = LogarithmicAxis_normalizeTickInterval(interval);
positions = axis.getLinearTickPositions(interval, realMin, realMax).map(log.log2lin);
if (!minor) {
log.minorAutoInterval = interval / 5;
}
}
// Set the axis-level tickInterval variable
if (!minor) {
axis.tickInterval = interval;
}
return positions;
};
Additions.prototype.lin2log = function (num) {
return Math.pow(10, num);
};
Additions.prototype.log2lin = function (num) {
return Math.log(num) / Math.LN10;
};
return Additions;
}());
LogarithmicAxis.Additions = Additions;
})(LogarithmicAxis || (LogarithmicAxis = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Axis_LogarithmicAxis = (LogarithmicAxis);
;// ./code/es5/es-modules/Core/Axis/PlotLineOrBand/PlotLineOrBandAxis.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var PlotLineOrBandAxis_erase = Core_Utilities.erase, PlotLineOrBandAxis_extend = Core_Utilities.extend, PlotLineOrBandAxis_isNumber = Core_Utilities.isNumber;
/* *
*
* Composition
*
* */
var PlotLineOrBandAxis;
(function (PlotLineOrBandAxis) {
/* *
*
* Declarations
*
* */
/* *
*
* Variables
*
* */
var PlotLineOrBandClass;
/* *
*
* Functions
*
* */
/**
* Add a plot band after render time.
*
* @sample highcharts/members/axis-addplotband/
* Toggle the plot band from a button
*
* @function Highcharts.Axis#addPlotBand
*
* @param {Highcharts.AxisPlotBandsOptions} options
* A configuration object for the plot band, as defined in
* [xAxis.plotBands](https://api.highcharts.com/highcharts/xAxis.plotBands).
*
* @return {Highcharts.PlotLineOrBand|undefined}
* The added plot band, or `undefined` if the options are not valid.
*/
function addPlotBand(options) {
return this.addPlotBandOrLine(options, 'plotBands');
}
/**
* Add a plot band or plot line after render time. Called from
* addPlotBand and addPlotLine internally.
*
* @private
* @function Highcharts.Axis#addPlotBandOrLine
* @param {Highcharts.AxisPlotBandsOptions|Highcharts.AxisPlotLinesOptions} options
* The plotBand or plotLine configuration object.
*/
function addPlotBandOrLine(options, coll) {
var _this = this;
var userOptions = this.userOptions;
var obj = new PlotLineOrBandClass(this,
options);
if (this.visible) {
obj = obj.render();
}
if (obj) { // #2189
if (!this._addedPlotLB) {
this._addedPlotLB = true;
(userOptions.plotLines || [])
.concat(userOptions.plotBands || [])
.forEach(function (plotLineOptions) {
_this.addPlotBandOrLine(plotLineOptions);
});
}
// Add it to the user options for exporting and Axis.update
if (coll) {
// Workaround Microsoft/TypeScript issue #32693
var updatedOptions = (userOptions[coll] || []);
updatedOptions.push(options);
userOptions[coll] = updatedOptions;
}
this.plotLinesAndBands.push(obj);
}
return obj;
}
/**
* Add a plot line after render time.
*
* @sample highcharts/members/axis-addplotline/
* Toggle the plot line from a button
*
* @function Highcharts.Axis#addPlotLine
*
* @param {Highcharts.AxisPlotLinesOptions} options
* A configuration object for the plot line, as defined in
* [xAxis.plotLines](https://api.highcharts.com/highcharts/xAxis.plotLines).
*
* @return {Highcharts.PlotLineOrBand|undefined}
* The added plot line, or `undefined` if the options are not valid.
*/
function addPlotLine(options) {
return this.addPlotBandOrLine(options, 'plotLines');
}
/**
* @private
*/
function compose(PlotLineOrBandType, AxisClass) {
var axisProto = AxisClass.prototype;
if (!axisProto.addPlotBand) {
PlotLineOrBandClass = PlotLineOrBandType;
PlotLineOrBandAxis_extend(axisProto, {
addPlotBand: addPlotBand,
addPlotLine: addPlotLine,
addPlotBandOrLine: addPlotBandOrLine,
getPlotBandPath: getPlotBandPath,
removePlotBand: removePlotBand,
removePlotLine: removePlotLine,
removePlotBandOrLine: removePlotBandOrLine
});
}
return AxisClass;
}
PlotLineOrBandAxis.compose = compose;
/**
* Internal function to create the SVG path definition for a plot band.
*
* @function Highcharts.Axis#getPlotBandPath
*
* @param {number} from
* The axis value to start from.
*
* @param {number} to
* The axis value to end on.
*
* @param {Highcharts.AxisPlotBandsOptions|Highcharts.AxisPlotLinesOptions} options
* The plotBand or plotLine configuration object.
*
* @return {Highcharts.SVGPathArray}
* The SVG path definition in array form.
*/
function getPlotBandPath(from, to, options) {
options = options || this.options;
var toPath = this.getPlotLinePath({
value: to,
force: true,
acrossPanes: options.acrossPanes
}),
result = [],
horiz = this.horiz,
outside = !PlotLineOrBandAxis_isNumber(this.min) ||
!PlotLineOrBandAxis_isNumber(this.max) ||
(from < this.min && to < this.min) ||
(from > this.max && to > this.max),
path = this.getPlotLinePath({
value: from,
force: true,
acrossPanes: options.acrossPanes
});
var i,
// #4964 check if chart is inverted or plotband is on yAxis
plus = 1,
isFlat;
if (path && toPath) {
// Flat paths don't need labels (#3836)
if (outside) {
isFlat = path.toString() === toPath.toString();
plus = 0;
}
// Go over each subpath - for panes in Highcharts Stock
for (i = 0; i < path.length; i += 2) {
var pathStart = path[i],
pathEnd = path[i + 1],
toPathStart = toPath[i],
toPathEnd = toPath[i + 1];
// Type checking all affected path segments. Consider
// something smarter.
if ((pathStart[0] === 'M' || pathStart[0] === 'L') &&
(pathEnd[0] === 'M' || pathEnd[0] === 'L') &&
(toPathStart[0] === 'M' || toPathStart[0] === 'L') &&
(toPathEnd[0] === 'M' || toPathEnd[0] === 'L')) {
// Add 1 pixel when coordinates are the same
if (horiz && toPathStart[1] === pathStart[1]) {
toPathStart[1] += plus;
toPathEnd[1] += plus;
}
else if (!horiz && toPathStart[2] === pathStart[2]) {
toPathStart[2] += plus;
toPathEnd[2] += plus;
}
result.push(['M', pathStart[1], pathStart[2]], ['L', pathEnd[1], pathEnd[2]], ['L', toPathEnd[1], toPathEnd[2]], ['L', toPathStart[1], toPathStart[2]], ['Z']);
}
result.isFlat = isFlat;
}
}
return result;
}
/**
* Remove a plot band by its id.
*
* @sample highcharts/members/axis-removeplotband/
* Remove plot band by id
* @sample highcharts/members/axis-addplotband/
* Toggle the plot band from a button
*
* @function Highcharts.Axis#removePlotBand
*
* @param {string} id
* The plot band's `id` as given in the original configuration
* object or in the `addPlotBand` option.
*/
function removePlotBand(id) {
this.removePlotBandOrLine(id);
}
/**
* Remove a plot band or plot line from the chart by id. Called
* internally from `removePlotBand` and `removePlotLine`.
* @private
* @function Highcharts.Axis#removePlotBandOrLine
*/
function removePlotBandOrLine(id) {
var plotLinesAndBands = this.plotLinesAndBands,
options = this.options,
userOptions = this.userOptions;
if (plotLinesAndBands) { // #15639
var i_1 = plotLinesAndBands.length;
while (i_1--) {
if (plotLinesAndBands[i_1].id === id) {
plotLinesAndBands[i_1].destroy();
}
}
([
options.plotLines || [],
userOptions.plotLines || [],
options.plotBands || [],
userOptions.plotBands || []
]).forEach(function (arr) {
i_1 = arr.length;
while (i_1--) {
if ((arr[i_1] || {}).id === id) {
PlotLineOrBandAxis_erase(arr, arr[i_1]);
}
}
});
}
}
/**
* Remove a plot line by its id.
*
* @sample highcharts/xaxis/plotlines-id/
* Remove plot line by id
* @sample highcharts/members/axis-addplotline/
* Toggle the plot line from a button
*
* @function Highcharts.Axis#removePlotLine
*
* @param {string} id
* The plot line's `id` as given in the original configuration
* object or in the `addPlotLine` option.
*/
function removePlotLine(id) {
this.removePlotBandOrLine(id);
}
})(PlotLineOrBandAxis || (PlotLineOrBandAxis = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var PlotLineOrBand_PlotLineOrBandAxis = (PlotLineOrBandAxis);
;// ./code/es5/es-modules/Core/Axis/PlotLineOrBand/PlotLineOrBand.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var PlotLineOrBand_assign = (undefined && undefined.__assign) || function () {
PlotLineOrBand_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return PlotLineOrBand_assign.apply(this, arguments);
};
var PlotLineOrBand_addEvent = Core_Utilities.addEvent, PlotLineOrBand_arrayMax = Core_Utilities.arrayMax, PlotLineOrBand_arrayMin = Core_Utilities.arrayMin, PlotLineOrBand_defined = Core_Utilities.defined, PlotLineOrBand_destroyObjectProperties = Core_Utilities.destroyObjectProperties, PlotLineOrBand_erase = Core_Utilities.erase, PlotLineOrBand_fireEvent = Core_Utilities.fireEvent, PlotLineOrBand_merge = Core_Utilities.merge, PlotLineOrBand_objectEach = Core_Utilities.objectEach, PlotLineOrBand_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/**
* The object wrapper for plot lines and plot bands
*
* @class
* @name Highcharts.PlotLineOrBand
*
* @param {Highcharts.Axis} axis
* Related axis.
*
* @param {Highcharts.AxisPlotLinesOptions|Highcharts.AxisPlotBandsOptions} [options]
* Options to use.
*/
var PlotLineOrBand = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function PlotLineOrBand(axis, options) {
/**
* Related axis.
*
* @name Highcharts.PlotLineOrBand#axis
* @type {Highcharts.Axis}
*/
this.axis = axis;
/**
* Options of the plot line or band.
*
* @name Highcharts.PlotLineOrBand#options
* @type {AxisPlotBandsOptions|AxisPlotLinesOptions}
*/
this.options = options;
this.id = options.id;
}
/* *
*
* Static Functions
*
* */
PlotLineOrBand.compose = function (ChartClass, AxisClass) {
PlotLineOrBand_addEvent(ChartClass, 'afterInit', function () {
var _this = this;
this.labelCollectors.push(function () {
var _a;
var labels = [];
for (var _i = 0, _b = _this.axes; _i < _b.length; _i++) {
var axis = _b[_i];
for (var _c = 0, _d = axis.plotLinesAndBands; _c < _d.length; _c++) {
var _e = _d[_c],
label = _e.label,
options = _e.options;
if (label && !((_a = options === null || options === void 0 ? void 0 : options.label) === null || _a === void 0 ? void 0 : _a.allowOverlap)) {
labels.push(label);
}
}
}
return labels;
});
});
return PlotLineOrBand_PlotLineOrBandAxis.compose(PlotLineOrBand, AxisClass);
};
/* *
*
* Functions
*
* */
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* Render the plot line or plot band. If it is already existing,
* move it.
* @private
* @function Highcharts.PlotLineOrBand#render
*/
PlotLineOrBand.prototype.render = function () {
var _this = this;
var _a,
_b,
_c;
PlotLineOrBand_fireEvent(this, 'render');
var _d = this,
axis = _d.axis,
options = _d.options,
horiz = axis.horiz,
logarithmic = axis.logarithmic,
color = options.color,
events = options.events,
_e = options.zIndex,
zIndex = _e === void 0 ? 0 : _e,
_f = axis.chart,
renderer = _f.renderer,
time = _f.time,
groupAttribs = {},
// These properties only exist on either band or line
to = time.parse(options.to),
from = time.parse(options.from),
value = time.parse(options.value),
borderWidth = options.borderWidth;
var optionsLabel = options.label,
_g = this,
label = _g.label,
svgElem = _g.svgElem,
path = [],
group;
var isBand = PlotLineOrBand_defined(from) && PlotLineOrBand_defined(to),
isLine = PlotLineOrBand_defined(value),
isNew = !svgElem,
attribs = {
'class': 'highcharts-plot-' + (isBand ? 'band ' : 'line ') +
(options.className || '')
};
var groupName = isBand ? 'bands' : 'lines';
// Set the presentational attributes
if (!axis.chart.styledMode) {
if (isLine) {
attribs.stroke = color || "#999999" /* Palette.neutralColor40 */;
attribs['stroke-width'] = PlotLineOrBand_pick(options.width, 1);
if (options.dashStyle) {
attribs.dashstyle = options.dashStyle;
}
}
else if (isBand) { // Plot band
attribs.fill = color || "#e6e9ff" /* Palette.highlightColor10 */;
if (borderWidth) {
attribs.stroke = options.borderColor;
attribs['stroke-width'] = borderWidth;
}
}
}
// Grouping and zIndex
groupAttribs.zIndex = zIndex;
groupName += '-' + zIndex;
group = axis.plotLinesAndBandsGroups[groupName];
if (!group) {
axis.plotLinesAndBandsGroups[groupName] = group =
renderer.g('plot-' + groupName)
.attr(groupAttribs).add();
}
// Create the path
if (!svgElem) {
/**
* SVG element of the plot line or band.
*
* @name Highcharts.PlotLineOrBand#svgElem
* @type {Highcharts.SVGElement}
*/
this.svgElem = svgElem = renderer
.path()
.attr(attribs)
.add(group);
}
// Set the path or return
if (PlotLineOrBand_defined(value)) { // Plot line
path = axis.getPlotLinePath({
value: (_a = logarithmic === null || logarithmic === void 0 ? void 0 : logarithmic.log2lin(value)) !== null && _a !== void 0 ? _a : value,
lineWidth: svgElem.strokeWidth(),
acrossPanes: options.acrossPanes
});
}
else if (PlotLineOrBand_defined(from) && PlotLineOrBand_defined(to)) { // Plot band
path = axis.getPlotBandPath((_b = logarithmic === null || logarithmic === void 0 ? void 0 : logarithmic.log2lin(from)) !== null && _b !== void 0 ? _b : from, (_c = logarithmic === null || logarithmic === void 0 ? void 0 : logarithmic.log2lin(to)) !== null && _c !== void 0 ? _c : to, options);
}
else {
return;
}
// Common for lines and bands. Add events only if they were not added
// before.
if (!this.eventsAdded && events) {
PlotLineOrBand_objectEach(events, function (event, eventType) {
svgElem === null || svgElem === void 0 ? void 0 : svgElem.on(eventType, function (e) {
events[eventType].apply(_this, [e]);
});
});
this.eventsAdded = true;
}
if ((isNew || !svgElem.d) && (path === null || path === void 0 ? void 0 : path.length)) {
svgElem.attr({ d: path });
}
else if (svgElem) {
if (path) {
svgElem.show();
svgElem.animate({ d: path });
}
else if (svgElem.d) {
svgElem.hide();
if (label) {
this.label = label = label.destroy();
}
}
}
// The plot band/line label
if (optionsLabel &&
(PlotLineOrBand_defined(optionsLabel.text) || PlotLineOrBand_defined(optionsLabel.formatter)) &&
(path === null || path === void 0 ? void 0 : path.length) &&
axis.width > 0 &&
axis.height > 0 &&
!path.isFlat) {
// Apply defaults
optionsLabel = PlotLineOrBand_merge(PlotLineOrBand_assign({ align: horiz && isBand ? 'center' : void 0, x: horiz ? !isBand && 4 : 10, verticalAlign: !horiz && isBand ? 'middle' : void 0, y: horiz ? isBand ? 16 : 10 : isBand ? 6 : -4, rotation: horiz && !isBand ? 90 : 0 }, (isBand ? { inside: true } : {})), optionsLabel);
this.renderLabel(optionsLabel, path, isBand, zIndex);
// Move out of sight
}
else if (label) {
label.hide();
}
// Chainable
return this;
};
/**
* Render and align label for plot line or band.
* @private
* @function Highcharts.PlotLineOrBand#renderLabel
*/
PlotLineOrBand.prototype.renderLabel = function (optionsLabel, path, isBand, zIndex) {
var _a;
var plotLine = this,
axis = plotLine.axis,
renderer = axis.chart.renderer,
inside = optionsLabel.inside;
var label = plotLine.label;
// Add the SVG element
if (!label) {
/**
* SVG element of the label.
*
* @name Highcharts.PlotLineOrBand#label
* @type {Highcharts.SVGElement}
*/
plotLine.label = label = renderer
.text(this.getLabelText(optionsLabel), 0, 0, optionsLabel.useHTML)
.attr({
align: optionsLabel.textAlign || optionsLabel.align,
rotation: optionsLabel.rotation,
'class': 'highcharts-plot-' + (isBand ? 'band' : 'line') +
'-label ' + (optionsLabel.className || ''),
zIndex: zIndex
});
if (!axis.chart.styledMode) {
label.css(PlotLineOrBand_merge({
fontSize: '0.8em',
textOverflow: (isBand && !inside) ? '' : 'ellipsis'
}, optionsLabel.style));
}
label.add();
}
// Get the bounding box and align the label
// #3000 changed to better handle choice between plotband or plotline
var xBounds = path.xBounds ||
[path[0][1],
path[1][1], (isBand ? path[2][1] : path[0][1])],
yBounds = path.yBounds ||
[path[0][2],
path[1][2], (isBand ? path[2][2] : path[0][2])],
x = PlotLineOrBand_arrayMin(xBounds),
y = PlotLineOrBand_arrayMin(yBounds),
bBoxWidth = PlotLineOrBand_arrayMax(xBounds) - x;
label.align(optionsLabel, false, {
x: x,
y: y,
width: bBoxWidth,
height: PlotLineOrBand_arrayMax(yBounds) - y
});
if (!label.alignValue ||
label.alignValue === 'left' ||
PlotLineOrBand_defined(inside)) {
label.css({
width: (((_a = optionsLabel.style) === null || _a === void 0 ? void 0 : _a.width) || ((!isBand ||
!inside) ? (label.rotation === 90 ?
axis.height - (label.alignAttr.y -
axis.top) : (optionsLabel.clip ?
axis.width :
axis.chart.chartWidth) - (label.alignAttr.x - axis.left)) :
bBoxWidth)) + 'px'
});
}
label.show(true);
};
/**
* Get label's text content.
* @private
* @function Highcharts.PlotLineOrBand#getLabelText
*/
PlotLineOrBand.prototype.getLabelText = function (optionsLabel) {
return PlotLineOrBand_defined(optionsLabel.formatter) ?
optionsLabel.formatter
.call(this) :
optionsLabel.text;
};
/**
* Remove the plot line or band.
*
* @function Highcharts.PlotLineOrBand#destroy
*/
PlotLineOrBand.prototype.destroy = function () {
// Remove it from the lookup
PlotLineOrBand_erase(this.axis.plotLinesAndBands, this);
delete this.axis;
PlotLineOrBand_destroyObjectProperties(this);
};
return PlotLineOrBand;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var PlotLineOrBand_PlotLineOrBand = (PlotLineOrBand);
/* *
*
* API Options
*
* */
/**
* Options for plot bands on axes.
*
* @typedef {Highcharts.XAxisPlotBandsOptions|Highcharts.YAxisPlotBandsOptions|Highcharts.ZAxisPlotBandsOptions} Highcharts.AxisPlotBandsOptions
*/
/**
* Options for plot band labels on axes.
*
* @typedef {Highcharts.XAxisPlotBandsLabelOptions|Highcharts.YAxisPlotBandsLabelOptions|Highcharts.ZAxisPlotBandsLabelOptions} Highcharts.AxisPlotBandsLabelOptions
*/
/**
* Options for plot lines on axes.
*
* @typedef {Highcharts.XAxisPlotLinesOptions|Highcharts.YAxisPlotLinesOptions|Highcharts.ZAxisPlotLinesOptions} Highcharts.AxisPlotLinesOptions
*/
/**
* Options for plot line labels on axes.
*
* @typedef {Highcharts.XAxisPlotLinesLabelOptions|Highcharts.YAxisPlotLinesLabelOptions|Highcharts.ZAxisPlotLinesLabelOptions} Highcharts.AxisPlotLinesLabelOptions
*/
('');
/* *
*
* API Options
*
* */
/**
* An array of colored bands stretching across the plot area marking an
* interval on the axis.
*
* In styled mode, the plot bands are styled by the `.highcharts-plot-band`
* class in addition to the `className` option.
*
* @productdesc {highcharts}
* In a gauge, a plot band on the Y axis (value axis) will stretch along the
* perimeter of the gauge.
*
* @type {Array<*>}
* @product highcharts highstock gantt
* @apioption xAxis.plotBands
*/
/**
* Flag to decide if plotBand should be rendered across all panes.
*
* @since 7.1.2
* @product highstock
* @type {boolean}
* @default true
* @apioption xAxis.plotBands.acrossPanes
*/
/**
* Border color for the plot band. Also requires `borderWidth` to be set.
*
* @type {Highcharts.ColorString}
* @apioption xAxis.plotBands.borderColor
*/
/**
* Border radius for the plot band. Applies only to gauges. Can be a pixel
* value or a percentage, for example `50%`.
*
* @type {number|string}
* @since 11.4.2
* @sample {highcharts} highcharts/xaxis/plotbands-gauge-borderradius
* Angular gauge with rounded plot bands
* @apioption xAxis.plotBands.borderRadius
*/
/**
* Border width for the plot band. Also requires `borderColor` to be set.
*
* @type {number}
* @default 0
* @apioption xAxis.plotBands.borderWidth
*/
/**
* A custom class name, in addition to the default `highcharts-plot-band`,
* to apply to each individual band.
*
* @type {string}
* @since 5.0.0
* @apioption xAxis.plotBands.className
*/
/**
* The color of the plot band.
*
* @sample {highcharts} highcharts/xaxis/plotbands-color/
* Color band
* @sample {highstock} stock/xaxis/plotbands/
* Plot band on Y axis
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default ${palette.highlightColor10}
* @apioption xAxis.plotBands.color
*/
/**
* An object defining mouse events for the plot band. Supported properties
* are `click`, `mouseover`, `mouseout`, `mousemove`.
*
* @sample {highcharts} highcharts/xaxis/plotbands-events/
* Mouse events demonstrated
*
* @since 1.2
* @apioption xAxis.plotBands.events
*/
/**
* Click event on a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotBands.events.click
*/
/**
* Mouse move event on a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotBands.events.mousemove
*/
/**
* Mouse out event on the corner of a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotBands.events.mouseout
*/
/**
* Mouse over event on a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotBands.events.mouseover
*/
/**
* The start position of the plot band in axis units.
*
* On datetime axes, the value can be given as a timestamp or a date string.
*
* @sample {highcharts} highcharts/xaxis/plotbands-color/
* Datetime axis
* @sample {highcharts} highcharts/xaxis/plotbands-from/
* Categorized axis
* @sample {highstock} stock/xaxis/plotbands/
* Plot band on Y axis
*
* @type {number|string}
* @apioption xAxis.plotBands.from
*/
/**
* An id used for identifying the plot band in Axis.removePlotBand.
*
* @sample {highcharts} highcharts/xaxis/plotbands-id/
* Remove plot band by id
* @sample {highstock} highcharts/xaxis/plotbands-id/
* Remove plot band by id
*
* @type {string}
* @apioption xAxis.plotBands.id
*/
/**
* The end position of the plot band in axis units.
*
* On datetime axes, the value can be given as a timestamp or a date string.
*
* @sample {highcharts} highcharts/xaxis/plotbands-color/
* Datetime axis
* @sample {highcharts} highcharts/xaxis/plotbands-from/
* Categorized axis
* @sample {highstock} stock/xaxis/plotbands/
* Plot band on Y axis
*
* @type {number|string}
* @apioption xAxis.plotBands.to
*/
/**
* The z index of the plot band within the chart, relative to other
* elements. Using the same z index as another element may give
* unpredictable results, as the last rendered element will be on top.
* Values from 0 to 20 make sense.
*
* @sample {highcharts} highcharts/xaxis/plotbands-color/
* Behind plot lines by default
* @sample {highcharts} highcharts/xaxis/plotbands-zindex/
* Above plot lines
* @sample {highcharts} highcharts/xaxis/plotbands-zindex-above-series/
* Above plot lines and series
*
* @type {number}
* @since 1.2
* @apioption xAxis.plotBands.zIndex
*/
/**
* Text labels for the plot bands
*
* @product highcharts highstock gantt
* @apioption xAxis.plotBands.label
*/
/**
* Horizontal alignment of the label. Can be one of "left", "center" or
* "right".
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-align/
* Aligned to the right
* @sample {highstock} stock/xaxis/plotbands-label/
* Plot band with labels
*
* @type {Highcharts.AlignValue}
* @default center
* @since 2.1
* @apioption xAxis.plotBands.label.align
*/
/**
* Whether or not the label can be hidden if it overlaps with another label.
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-allowoverlap/
* A Plotband label overlapping another
*
* @type {boolean}
* @default undefined
* @since 11.4.8
* @apioption xAxis.plotBands.label.allowOverlap
*/
/**
* Wether or not the text of the label can exceed the width of the label.
*
* @type {boolean}
* @product highcharts highstock gantt
* @sample {highcharts} highcharts/xaxis/plotbands-label-textwidth/
* Displaying text with text-wrapping/ellipsis, or the full text.
*
* @default true
* @since 11.4.6
* @apioption xAxis.plotBands.label.inside
*/
/**
* Rotation of the text label in degrees .
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-rotation/
* Vertical text
*
* @type {number}
* @default 0
* @since 2.1
* @apioption xAxis.plotBands.label.rotation
*/
/**
* CSS styles for the text label.
*
* In styled mode, the labels are styled by the
* `.highcharts-plot-band-label` class.
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-style/
* Blue and bold label
*
* @type {Highcharts.CSSObject}
* @since 2.1
* @apioption xAxis.plotBands.label.style
*/
/**
* The string text itself. A subset of HTML is supported.
*
* @type {string}
* @since 2.1
* @apioption xAxis.plotBands.label.text
*/
/**
* The text alignment for the label. While `align` determines where the
* texts anchor point is placed within the plot band, `textAlign` determines
* how the text is aligned against its anchor point. Possible values are
* "left", "center" and "right". Defaults to the same as the `align` option.
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-rotation/
* Vertical text in center position but text-aligned left
*
* @type {Highcharts.AlignValue}
* @since 2.1
* @apioption xAxis.plotBands.label.textAlign
*/
/**
* Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the labels.
*
* @type {boolean}
* @default false
* @since 3.0.3
* @apioption xAxis.plotBands.label.useHTML
*/
/**
* Vertical alignment of the label relative to the plot band. Can be one of
* "top", "middle" or "bottom".
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-verticalalign/
* Vertically centered label
* @sample {highstock} stock/xaxis/plotbands-label/
* Plot band with labels
*
* @type {Highcharts.VerticalAlignValue}
* @default top
* @since 2.1
* @apioption xAxis.plotBands.label.verticalAlign
*/
/**
* Horizontal position relative the alignment. Default varies by
* orientation.
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-align/
* Aligned 10px from the right edge
* @sample {highstock} stock/xaxis/plotbands-label/
* Plot band with labels
*
* @type {number}
* @since 2.1
* @apioption xAxis.plotBands.label.x
*/
/**
* Vertical position of the text baseline relative to the alignment. Default
* varies by orientation.
*
* @sample {highcharts} highcharts/xaxis/plotbands-label-y/
* Label on x axis
* @sample {highstock} stock/xaxis/plotbands-label/
* Plot band with labels
*
* @type {number}
* @since 2.1
* @apioption xAxis.plotBands.label.y
*/
/**
* An array of lines stretching across the plot area, marking a specific
* value on one of the axes.
*
* In styled mode, the plot lines are styled by the
* `.highcharts-plot-line` class in addition to the `className` option.
*
* @type {Array<*>}
* @product highcharts highstock gantt
* @sample {highcharts} highcharts/xaxis/plotlines-color/
* Basic plot line
* @sample {highcharts} highcharts/series-solidgauge/labels-auto-aligned/
* Solid gauge plot line
* @apioption xAxis.plotLines
*/
/**
* Flag to decide if plotLine should be rendered across all panes.
*
* @sample {highstock} stock/xaxis/plotlines-acrosspanes/
* Plot lines on different panes
*
* @since 7.1.2
* @product highstock
* @type {boolean}
* @default true
* @apioption xAxis.plotLines.acrossPanes
*/
/**
* A custom class name, in addition to the default `highcharts-plot-line`,
* to apply to each individual line.
*
* @type {string}
* @since 5.0.0
* @apioption xAxis.plotLines.className
*/
/**
* The color of the line.
*
* @sample {highcharts} highcharts/xaxis/plotlines-color/
* A red line from X axis
* @sample {highstock} stock/xaxis/plotlines/
* Plot line on Y axis
*
* @type {Highcharts.ColorString}
* @default ${palette.neutralColor40}
* @apioption xAxis.plotLines.color
*/
/**
* The dashing or dot style for the plot line. For possible values see
* [this overview](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
*
* @sample {highcharts} highcharts/xaxis/plotlines-dashstyle/
* Dash and dot pattern
* @sample {highstock} stock/xaxis/plotlines/
* Plot line on Y axis
*
* @type {Highcharts.DashStyleValue}
* @default Solid
* @since 1.2
* @apioption xAxis.plotLines.dashStyle
*/
/**
* An object defining mouse events for the plot line. Supported
* properties are `click`, `mouseover`, `mouseout`, `mousemove`.
*
* @sample {highcharts} highcharts/xaxis/plotlines-events/
* Mouse events demonstrated
*
* @since 1.2
* @apioption xAxis.plotLines.events
*/
/**
* Click event on a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotLines.events.click
*/
/**
* Mouse move event on a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotLines.events.mousemove
*/
/**
* Mouse out event on the corner of a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotLines.events.mouseout
*/
/**
* Mouse over event on a plot band.
*
* @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotLines.events.mouseover
*/
/**
* An id used for identifying the plot line in Axis.removePlotLine.
*
* @sample {highcharts} highcharts/xaxis/plotlines-id/
* Remove plot line by id
*
* @type {string}
* @apioption xAxis.plotLines.id
*/
/**
* The position of the line in axis units.
*
* On datetime axes, the value can be given as a timestamp or a date string.
*
* @sample {highcharts} highcharts/xaxis/plotlines-color/
* Between two categories on X axis
* @sample {highstock} stock/xaxis/plotlines/
* Plot line on Y axis
*
* @type {number|string}
* @apioption xAxis.plotLines.value
*/
/**
* The width or thickness of the plot line.
*
* @sample {highcharts} highcharts/xaxis/plotlines-color/
* 2px wide line from X axis
* @sample {highstock} stock/xaxis/plotlines/
* Plot line on Y axis
*
* @type {number}
* @default 2
* @apioption xAxis.plotLines.width
*/
/**
* The z index of the plot line within the chart.
*
* @sample {highcharts} highcharts/xaxis/plotlines-zindex-behind/
* Behind plot lines by default
* @sample {highcharts} highcharts/xaxis/plotlines-zindex-above/
* Above plot lines
* @sample {highcharts} highcharts/xaxis/plotlines-zindex-above-all/
* Above plot lines and series
*
* @type {number}
* @since 1.2
* @apioption xAxis.plotLines.zIndex
*/
/**
* Text labels for the plot bands
*
* @apioption xAxis.plotLines.label
*/
/**
* Horizontal alignment of the label. Can be one of "left", "center" or
* "right".
*
* @sample {highcharts} highcharts/xaxis/plotlines-label-align-right/
* Aligned to the right
* @sample {highstock} stock/xaxis/plotlines/
* Plot line on Y axis
*
* @type {Highcharts.AlignValue}
* @default left
* @since 2.1
* @apioption xAxis.plotLines.label.align
*/
/**
* Whether to hide labels that are outside the plot area.
*
* @type {boolean}
* @default false
* @since 10.3.3
* @apioption xAxis.plotLines.labels.clip
*/
/**
* Callback JavaScript function to format the label. Useful properties like
* the value of plot line or the range of plot band (`from` & `to`
* properties) can be found in `this.options` object.
*
* @sample {highcharts} highcharts/xaxis/plotlines-plotbands-label-formatter
* Label formatters for plot line and plot band.
* @type {Highcharts.FormatterCallbackFunction<Highcharts.PlotLineOrBand>}
* @apioption xAxis.plotLines.label.formatter
*/
/**
* Rotation of the text label in degrees. Defaults to 0 for horizontal plot
* lines and 90 for vertical lines.
*
* @sample {highcharts} highcharts/xaxis/plotlines-label-verticalalign-middle/
* Slanted text
*
* @type {number}
* @since 2.1
* @apioption xAxis.plotLines.label.rotation
*/
/**
* CSS styles for the text label.
*
* In styled mode, the labels are styled by the
* `.highcharts-plot-line-label` class.
*
* @sample {highcharts} highcharts/xaxis/plotlines-label-style/
* Blue and bold label
*
* @type {Highcharts.CSSObject}
* @since 2.1
* @apioption xAxis.plotLines.label.style
*/
/**
* The text itself. A subset of HTML is supported.
*
* @type {string}
* @since 2.1
* @apioption xAxis.plotLines.label.text
*/
/**
* The text alignment for the label. While `align` determines where the
* texts anchor point is placed within the plot band, `textAlign` determines
* how the text is aligned against its anchor point. Possible values are
* "left", "center" and "right". Defaults to the same as the `align` option.
*
* @sample {highcharts} highcharts/xaxis/plotlines-label-textalign/
* Text label in bottom position
*
* @type {Highcharts.AlignValue}
* @since 2.1
* @apioption xAxis.plotLines.label.textAlign
*/
/**
* Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the labels.
*
* @type {boolean}
* @default false
* @since 3.0.3
* @apioption xAxis.plotLines.label.useHTML
*/
/**
* Vertical alignment of the label relative to the plot line. Can be
* one of "top", "middle" or "bottom".
*
* @sample {highcharts} highcharts/xaxis/plotlines-label-verticalalign-middle/
* Vertically centered label
*
* @type {Highcharts.VerticalAlignValue}
* @default {highcharts} top
* @default {highstock} top
* @since 2.1
* @apioption xAxis.plotLines.label.verticalAlign
*/
/**
* Horizontal position relative the alignment. Default varies by
* orientation.
*
* @sample {highcharts} highcharts/xaxis/plotlines-label-align-right/
* Aligned 10px from the right edge
* @sample {highstock} stock/xaxis/plotlines/
* Plot line on Y axis
*
* @type {number}
* @since 2.1
* @apioption xAxis.plotLines.label.x
*/
/**
* Vertical position of the text baseline relative to the alignment. Default
* varies by orientation.
*
* @sample {highcharts} highcharts/xaxis/plotlines-label-y/
* Label below the plot line
* @sample {highstock} stock/xaxis/plotlines/
* Plot line on Y axis
*
* @type {number}
* @since 2.1
* @apioption xAxis.plotLines.label.y
*/
/**
* @type {Array<*>}
* @extends xAxis.plotBands
* @apioption yAxis.plotBands
*/
/**
* In a gauge chart, this option determines the inner radius of the
* plot band that stretches along the perimeter. It can be given as
* a percentage string, like `"100%"`, or as a pixel number, like `100`.
* By default, the inner radius is controlled by the [thickness](
* #yAxis.plotBands.thickness) option.
*
* @sample {highcharts} highcharts/xaxis/plotbands-gauge
* Gauge plot band
*
* @type {number|string}
* @since 2.3
* @product highcharts
* @apioption yAxis.plotBands.innerRadius
*/
/**
* In a gauge chart, this option determines the outer radius of the
* plot band that stretches along the perimeter. It can be given as
* a percentage string, like `"100%"`, or as a pixel number, like `100`.
*
* @sample {highcharts} highcharts/xaxis/plotbands-gauge
* Gauge plot band
*
* @type {number|string}
* @default 100%
* @since 2.3
* @product highcharts
* @apioption yAxis.plotBands.outerRadius
*/
/**
* In a gauge chart, this option sets the width of the plot band
* stretching along the perimeter. It can be given as a percentage
* string, like `"10%"`, or as a pixel number, like `10`. The default
* value 10 is the same as the default [tickLength](#yAxis.tickLength),
* thus making the plot band act as a background for the tick markers.
*
* @sample {highcharts} highcharts/xaxis/plotbands-gauge
* Gauge plot band
*
* @type {number|string}
* @default 10
* @since 2.3
* @product highcharts
* @apioption yAxis.plotBands.thickness
*/
/**
* @type {Array<*>}
* @extends xAxis.plotLines
* @apioption yAxis.plotLines
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Tooltip.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Tooltip_animObject = AnimationUtilities.animObject;
var Tooltip_format = Core_Templating.format;
var Tooltip_composed = Core_Globals.composed, dateFormats = Core_Globals.dateFormats, Tooltip_doc = Core_Globals.doc, isSafari = Core_Globals.isSafari;
var distribute = Renderer_RendererUtilities.distribute;
var Tooltip_addEvent = Core_Utilities.addEvent, Tooltip_clamp = Core_Utilities.clamp, Tooltip_css = Core_Utilities.css, Tooltip_discardElement = Core_Utilities.discardElement, Tooltip_extend = Core_Utilities.extend, Tooltip_fireEvent = Core_Utilities.fireEvent, Tooltip_isArray = Core_Utilities.isArray, Tooltip_isNumber = Core_Utilities.isNumber, Tooltip_isObject = Core_Utilities.isObject, Tooltip_isString = Core_Utilities.isString, Tooltip_merge = Core_Utilities.merge, Tooltip_pick = Core_Utilities.pick, Tooltip_pushUnique = Core_Utilities.pushUnique, Tooltip_splat = Core_Utilities.splat, Tooltip_syncTimeout = Core_Utilities.syncTimeout;
/* *
*
* Class
*
* */
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* Tooltip of a chart.
*
* @class
* @name Highcharts.Tooltip
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {Highcharts.TooltipOptions} options
* Tooltip options.
*
* @param {Highcharts.Pointer} pointer
* The pointer instance.
*/
var Tooltip = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function Tooltip(chart, options, pointer) {
/* *
*
* Properties
*
* */
this.allowShared = true;
this.crosshairs = [];
this.distance = 0;
this.isHidden = true;
this.isSticky = false;
this.options = {};
this.outside = false;
this.chart = chart;
this.init(chart, options);
this.pointer = pointer;
}
/* *
*
* Functions
*
* */
/**
* Build the body (lines) of the tooltip by iterating over the items and
* returning one entry for each item, abstracting this functionality allows
* to easily overwrite and extend it.
*
* @private
* @function Highcharts.Tooltip#bodyFormatter
*/
Tooltip.prototype.bodyFormatter = function (points) {
return points.map(function (point) {
var tooltipOptions = point.series.tooltipOptions,
formatPrefix = point.formatPrefix || 'point';
return (tooltipOptions[formatPrefix + 'Formatter'] ||
point.tooltipFormatter).call(point, tooltipOptions[formatPrefix + 'Format'] || '');
});
};
/**
* Destroy the single tooltips in a split tooltip.
* If the tooltip is active then it is not destroyed, unless forced to.
*
* @private
* @function Highcharts.Tooltip#cleanSplit
*
* @param {boolean} [force]
* Force destroy all tooltips.
*/
Tooltip.prototype.cleanSplit = function (force) {
this.chart.series.forEach(function (series) {
var tt = series && series.tt;
if (tt) {
if (!tt.isActive || force) {
series.tt = tt.destroy();
}
else {
tt.isActive = false;
}
}
});
};
/**
* In case no user defined formatter is given, this will be used. Note that
* the context here is an object holding point, series, x, y etc.
*
* @function Highcharts.Tooltip#defaultFormatter
*
* @param {Highcharts.Tooltip} tooltip
*
* @return {string|Array<string>}
* Returns a string (single tooltip and shared)
* or an array of strings (split tooltip)
*/
Tooltip.prototype.defaultFormatter = function (tooltip) {
var hoverPoints = this.points || Tooltip_splat(this);
var s;
// Build the header
s = [tooltip.headerFooterFormatter(hoverPoints[0])];
// Build the values
s = s.concat(tooltip.bodyFormatter(hoverPoints));
// Footer
s.push(tooltip.headerFooterFormatter(hoverPoints[0], true));
return s;
};
/**
* Removes and destroys the tooltip and its elements.
*
* @function Highcharts.Tooltip#destroy
*/
Tooltip.prototype.destroy = function () {
// Destroy and clear local variables
if (this.label) {
this.label = this.label.destroy();
}
if (this.split) {
this.cleanSplit(true);
if (this.tt) {
this.tt = this.tt.destroy();
}
}
if (this.renderer) {
this.renderer = this.renderer.destroy();
Tooltip_discardElement(this.container);
}
Core_Utilities.clearTimeout(this.hideTimer);
};
/**
* Extendable method to get the anchor position of the tooltip
* from a point or set of points
*
* @private
* @function Highcharts.Tooltip#getAnchor
*/
Tooltip.prototype.getAnchor = function (points, mouseEvent) {
var _a = this,
chart = _a.chart,
pointer = _a.pointer,
inverted = chart.inverted,
plotTop = chart.plotTop,
plotLeft = chart.plotLeft;
var ret;
points = Tooltip_splat(points);
// If reversedStacks are false the tooltip position should be taken from
// the last point (#17948)
if (points[0].series &&
points[0].series.yAxis &&
!points[0].series.yAxis.options.reversedStacks) {
points = points.slice().reverse();
}
// When tooltip follows mouse, relate the position to the mouse
if (this.followPointer && mouseEvent) {
if (typeof mouseEvent.chartX === 'undefined') {
mouseEvent = pointer.normalize(mouseEvent);
}
ret = [
mouseEvent.chartX - plotLeft,
mouseEvent.chartY - plotTop
];
// Some series types use a specificly calculated tooltip position for
// each point
}
else if (points[0].tooltipPos) {
ret = points[0].tooltipPos;
// Calculate the average position and adjust for axis positions
}
else {
var chartX_1 = 0,
chartY_1 = 0;
points.forEach(function (point) {
var pos = point.pos(true);
if (pos) {
chartX_1 += pos[0];
chartY_1 += pos[1];
}
});
chartX_1 /= points.length;
chartY_1 /= points.length;
// When shared, place the tooltip next to the mouse (#424)
if (this.shared && points.length > 1 && mouseEvent) {
if (inverted) {
chartX_1 = mouseEvent.chartX;
}
else {
chartY_1 = mouseEvent.chartY;
}
}
// Use the average position for multiple points
ret = [chartX_1 - plotLeft, chartY_1 - plotTop];
}
return ret.map(Math.round);
};
/**
* Get the CSS class names for the tooltip's label. Styles the label
* by `colorIndex` or user-defined CSS.
*
* @function Highcharts.Tooltip#getClassName
*
* @return {string}
* The class names.
*/
Tooltip.prototype.getClassName = function (point, isSplit, isHeader) {
var options = this.options,
series = point.series,
seriesOptions = series.options;
return [
options.className,
'highcharts-label',
isHeader && 'highcharts-tooltip-header',
isSplit ? 'highcharts-tooltip-box' : 'highcharts-tooltip',
!isHeader && 'highcharts-color-' + Tooltip_pick(point.colorIndex, series.colorIndex),
(seriesOptions && seriesOptions.className)
].filter(Tooltip_isString).join(' ');
};
/**
* Creates the Tooltip label element if it does not exist, then returns it.
*
* @function Highcharts.Tooltip#getLabel
*
* @return {Highcharts.SVGElement}
* Tooltip label
*/
Tooltip.prototype.getLabel = function (_a) {
var _b = _a === void 0 ? { anchorX: 0,
anchorY: 0 } : _a,
anchorX = _b.anchorX,
anchorY = _b.anchorY;
var tooltip = this,
styledMode = this.chart.styledMode,
options = this.options,
doSplit = this.split && this.allowShared;
var container = this.container,
renderer = this.chart.renderer;
// If changing from a split tooltip to a non-split tooltip, we must
// destroy it in order to get the SVG right. #13868.
if (this.label) {
var wasSplit = !this.label.hasClass('highcharts-label');
if ((!doSplit && wasSplit) || (doSplit && !wasSplit)) {
this.destroy();
}
}
if (!this.label) {
if (this.outside) {
var chart = this.chart,
chartStyle = chart.options.chart.style,
Renderer = Renderer_RendererRegistry.getRendererType();
/**
* Reference to the tooltip's container, when
* [Highcharts.Tooltip#outside] is set to true, otherwise
* it's undefined.
*
* @name Highcharts.Tooltip#container
* @type {Highcharts.HTMLDOMElement|undefined}
*/
this.container = container = Core_Globals.doc.createElement('div');
container.className = ('highcharts-tooltip-container ' +
(chart.renderTo.className.match(/(highcharts[a-zA-Z0-9-]+)\s?/gm) || [].join(' ')));
// We need to set pointerEvents = 'none' as otherwise it makes
// the area under the tooltip non-hoverable even after the
// tooltip disappears, #19035.
Tooltip_css(container, {
position: 'absolute',
top: '1px',
pointerEvents: 'none',
zIndex: Math.max(this.options.style.zIndex || 0, (chartStyle && chartStyle.zIndex || 0) + 3)
});
/**
* Reference to the tooltip's renderer, when
* [Highcharts.Tooltip#outside] is set to true, otherwise
* it's undefined.
*
* @name Highcharts.Tooltip#renderer
* @type {Highcharts.SVGRenderer|undefined}
*/
this.renderer = renderer = new Renderer(container, 0, 0, chartStyle, void 0, void 0, renderer.styledMode);
}
// Create the label
if (doSplit) {
this.label = renderer.g('tooltip');
}
else {
this.label = renderer
.label('', anchorX, anchorY, options.shape, void 0, void 0, options.useHTML, void 0, 'tooltip')
.attr({
padding: options.padding,
r: options.borderRadius
});
if (!styledMode) {
this.label
.attr({
fill: options.backgroundColor,
'stroke-width': options.borderWidth || 0
})
// #2301, #2657
.css(options.style)
.css({
pointerEvents: (options.style.pointerEvents ||
(this.shouldStickOnContact() ? 'auto' : 'none'))
});
}
}
// Split tooltip use updateTooltipContainer to position the tooltip
// container.
if (tooltip.outside) {
var label_1 = this.label;
[label_1.xSetter, label_1.ySetter].forEach(function (setter, i) {
label_1[i ? 'ySetter' : 'xSetter'] = function (value) {
setter.call(label_1, tooltip.distance);
label_1[i ? 'y' : 'x'] = value;
if (container) {
container.style[i ? 'top' : 'left'] = "" + value + "px";
}
};
});
}
this.label
.attr({ zIndex: 8 })
.shadow(options.shadow)
.add();
}
if (container && !container.parentElement) {
Core_Globals.doc.body.appendChild(container);
}
return this.label;
};
/**
* Get the total area available area to place the tooltip
*
* @private
*/
Tooltip.prototype.getPlayingField = function () {
var body = Tooltip_doc.body,
documentElement = Tooltip_doc.documentElement,
_a = this,
chart = _a.chart,
distance = _a.distance,
outside = _a.outside;
return {
width: outside ?
// Subtract distance to prevent scrollbars
Math.max(body.scrollWidth, documentElement.scrollWidth, body.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth) - (2 * distance) - 2 :
chart.chartWidth,
height: outside ?
Math.max(body.scrollHeight, documentElement.scrollHeight, body.offsetHeight, documentElement.offsetHeight, documentElement.clientHeight) :
chart.chartHeight
};
};
/**
* Place the tooltip in a chart without spilling over and not covering the
* point itself.
*
* @function Highcharts.Tooltip#getPosition
*
* @param {number} boxWidth
* Width of the tooltip box.
*
* @param {number} boxHeight
* Height of the tooltip box.
*
* @param {Highcharts.Point} point
* Tooltip related point.
*
* @return {Highcharts.PositionObject}
* Recommended position of the tooltip.
*/
Tooltip.prototype.getPosition = function (boxWidth, boxHeight, point) {
var _a,
_b;
var _c = this, distance = _c.distance, chart = _c.chart, outside = _c.outside, pointer = _c.pointer, inverted = chart.inverted, plotLeft = chart.plotLeft, plotTop = chart.plotTop, polar = chart.polar, _d = point.plotX, plotX = _d === void 0 ? 0 : _d, _e = point.plotY, plotY = _e === void 0 ? 0 : _e, ret = {},
// Don't use h if chart isn't inverted (#7242) ???
h = (inverted && point.h) || 0, // #4117 ???
_f = this.getPlayingField(), outerHeight = _f.height, outerWidth = _f.width, chartPosition = pointer.getChartPosition(), scaleX = function (val) { return (val * chartPosition.scaleX); }, scaleY = function (val) { return (val * chartPosition.scaleY); },
// Build parameter arrays for firstDimension()/secondDimension()
buildDimensionArray = function (dim) {
var isX = dim === 'x';
return [
dim, // Dimension - x or y
isX ? outerWidth : outerHeight,
isX ? boxWidth : boxHeight
].concat(outside ? [
// If we are using tooltip.outside, we need to scale the
// position to match scaling of the container in case there
// is a transform/zoom on the container. #11329
isX ? scaleX(boxWidth) : scaleY(boxHeight),
isX ? chartPosition.left - distance +
scaleX(plotX + plotLeft) :
chartPosition.top - distance +
scaleY(plotY + plotTop),
0,
isX ? outerWidth : outerHeight
] : [
// Not outside, no scaling is needed
isX ? boxWidth : boxHeight,
isX ? plotX + plotLeft : plotY + plotTop,
isX ? plotLeft : plotTop,
isX ? plotLeft + chart.plotWidth :
plotTop + chart.plotHeight
]);
};
var first = buildDimensionArray('y'), second = buildDimensionArray('x'), swapped;
// Handle negative points or reversed axis (#13780)
var flipped = !!point.negative;
if (!polar &&
((_b = (_a = chart.hoverSeries) === null || _a === void 0 ? void 0 : _a.yAxis) === null || _b === void 0 ? void 0 : _b.reversed)) {
flipped = !flipped;
}
// The far side is right or bottom
var preferFarSide = !this.followPointer &&
Tooltip_pick(point.ttBelow,
polar ? false : !inverted === flipped), // #4984
/*
* Handle the preferred dimension. When the preferred dimension is
* tooltip on top or bottom of the point,
it will look for space
* there.
*
* @private
*/
firstDimension = function (dim,
outerSize,
innerSize,
scaledInnerSize, // #11329
point,
min,
max) {
var scaledDist = outside ?
(dim === 'y' ? scaleY(distance) : scaleX(distance)) :
distance,
scaleDiff = (innerSize - scaledInnerSize) / 2,
roomLeft = scaledInnerSize < point - distance,
roomRight = point + distance + scaledInnerSize < outerSize,
alignedLeft = point - scaledDist - innerSize + scaleDiff,
alignedRight = point + scaledDist - scaleDiff;
if (preferFarSide && roomRight) {
ret[dim] = alignedRight;
}
else if (!preferFarSide && roomLeft) {
ret[dim] = alignedLeft;
}
else if (roomLeft) {
ret[dim] = Math.min(max - scaledInnerSize, alignedLeft - h < 0 ? alignedLeft : alignedLeft - h);
}
else if (roomRight) {
ret[dim] = Math.max(min, alignedRight + h + innerSize > outerSize ?
alignedRight :
alignedRight + h);
}
else {
return false;
}
},
/*
* Handle the secondary dimension. If the preferred dimension is
* tooltip on top or bottom of the point, the second dimension is to
* align the tooltip above the point, trying to align center but
* allowing left or right align within the chart box.
*
* @private
*/
secondDimension = function (dim, outerSize, innerSize, scaledInnerSize, // #11329
point) {
// Too close to the edge, return false and swap dimensions
if (point < distance || point > outerSize - distance) {
return false;
}
// Align left/top
if (point < innerSize / 2) {
ret[dim] = 1;
// Align right/bottom
}
else if (point > outerSize - scaledInnerSize / 2) {
ret[dim] = outerSize - scaledInnerSize - 2;
// Align center
}
else {
ret[dim] = point - innerSize / 2;
}
},
/*
* Swap the dimensions
*/
swap = function (count) {
var _a;
_a = [second, first], first = _a[0], second = _a[1];
swapped = count;
}, run = function () {
if (firstDimension.apply(0, first) !== false) {
if (secondDimension.apply(0, second) === false &&
!swapped) {
swap(true);
run();
}
}
else if (!swapped) {
swap(true);
run();
}
else {
ret.x = ret.y = 0;
}
};
// Under these conditions, prefer the tooltip on the side of the point
if ((inverted && !polar) || this.len > 1) {
swap();
}
run();
return ret;
};
/**
* Hides the tooltip with a fade out animation.
*
* @function Highcharts.Tooltip#hide
*
* @param {number} [delay]
* The fade out in milliseconds. If no value is provided the value
* of the tooltip.hideDelay option is used. A value of 0 disables
* the fade out animation.
*/
Tooltip.prototype.hide = function (delay) {
var tooltip = this;
// Disallow duplicate timers (#1728, #1766)
Core_Utilities.clearTimeout(this.hideTimer);
delay = Tooltip_pick(delay, this.options.hideDelay);
if (!this.isHidden) {
this.hideTimer = Tooltip_syncTimeout(function () {
var label = tooltip.getLabel();
// If there is a delay, fade out with the default duration. If
// the hideDelay is 0, we assume no animation is wanted, so we
// pass 0 duration. #12994.
tooltip.getLabel().animate({
opacity: 0
}, {
duration: delay ? 150 : delay,
complete: function () {
// #3088, assuming we're only using this for tooltips
label.hide();
// Clear the container for outside tooltip (#18490)
if (tooltip.container) {
tooltip.container.remove();
}
}
});
tooltip.isHidden = true;
}, delay);
}
};
/**
* Initialize tooltip.
*
* @private
* @function Highcharts.Tooltip#init
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {Highcharts.TooltipOptions} options
* Tooltip options.
*/
Tooltip.prototype.init = function (chart, options) {
/**
* Chart of the tooltip.
*
* @readonly
* @name Highcharts.Tooltip#chart
* @type {Highcharts.Chart}
*/
this.chart = chart;
/**
* Used tooltip options.
*
* @readonly
* @name Highcharts.Tooltip#options
* @type {Highcharts.TooltipOptions}
*/
this.options = options;
/**
* List of crosshairs.
*
* @private
* @readonly
* @name Highcharts.Tooltip#crosshairs
* @type {Array<null>}
*/
this.crosshairs = [];
/**
* Tooltips are initially hidden.
*
* @private
* @readonly
* @name Highcharts.Tooltip#isHidden
* @type {boolean}
*/
this.isHidden = true;
/**
* True, if the tooltip is split into one label per series, with the
* header close to the axis.
*
* @readonly
* @name Highcharts.Tooltip#split
* @type {boolean|undefined}
*/
this.split = options.split && !chart.inverted && !chart.polar;
/**
* When the tooltip is shared, the entire plot area will capture mouse
* movement or touch events.
*
* @readonly
* @name Highcharts.Tooltip#shared
* @type {boolean|undefined}
*/
this.shared = options.shared || this.split;
/**
* Whether to allow the tooltip to render outside the chart's SVG
* element box. By default (false), the tooltip is rendered within the
* chart's SVG element, which results in the tooltip being aligned
* inside the chart area.
*
* @readonly
* @name Highcharts.Tooltip#outside
* @type {boolean}
*
* @todo
* Split tooltip does not support outside in the first iteration. Should
* not be too complicated to implement.
*/
this.outside = Tooltip_pick(options.outside, Boolean(chart.scrollablePixelsX || chart.scrollablePixelsY));
};
Tooltip.prototype.shouldStickOnContact = function (pointerEvent) {
return !!(!this.followPointer &&
this.options.stickOnContact &&
(!pointerEvent || this.pointer.inClass(pointerEvent.target, 'highcharts-tooltip')));
};
/**
* Moves the tooltip with a soft animation to a new position.
*
* @private
* @function Highcharts.Tooltip#move
*
* @param {number} x
*
* @param {number} y
*
* @param {number} anchorX
*
* @param {number} anchorY
*/
Tooltip.prototype.move = function (x, y, anchorX, anchorY) {
var tooltip = this,
animation = Tooltip_animObject(!tooltip.isHidden && tooltip.options.animation),
skipAnchor = tooltip.followPointer || (tooltip.len || 0) > 1,
attr = { x: x,
y: y };
if (!skipAnchor) {
attr.anchorX = anchorX;
attr.anchorY = anchorY;
}
animation.step = function () { return tooltip.drawTracker(); };
tooltip.getLabel().animate(attr, animation);
};
/**
* Refresh the tooltip's text and position.
*
* @function Highcharts.Tooltip#refresh
*
* @param {Highcharts.Point|Array<Highcharts.Point>} pointOrPoints
* Either a point or an array of points.
*
* @param {Highcharts.PointerEventObject} [mouseEvent]
* Mouse event, that is responsible for the refresh and should be
* used for the tooltip update.
*/
Tooltip.prototype.refresh = function (pointOrPoints, mouseEvent) {
var tooltip = this,
_a = this,
chart = _a.chart,
options = _a.options,
pointer = _a.pointer,
shared = _a.shared,
points = Tooltip_splat(pointOrPoints),
point = points[0],
formatString = options.format,
formatter = options.formatter || tooltip.defaultFormatter,
styledMode = chart.styledMode;
var wasShared = tooltip.allowShared;
if (!options.enabled || !point.series) { // #16820
return;
}
Core_Utilities.clearTimeout(this.hideTimer);
// A switch saying if this specific tooltip configuration allows shared
// or split modes
tooltip.allowShared = !(!Tooltip_isArray(pointOrPoints) &&
pointOrPoints.series &&
pointOrPoints.series.noSharedTooltip);
wasShared = wasShared && !tooltip.allowShared;
// Get the reference point coordinates (pie charts use tooltipPos)
tooltip.followPointer = (!tooltip.split && point.series.tooltipOptions.followPointer);
var anchor = tooltip.getAnchor(pointOrPoints,
mouseEvent),
x = anchor[0],
y = anchor[1];
// Shared tooltip, array is sent over
if (shared && tooltip.allowShared) {
pointer.applyInactiveState(points);
// Now set hover state for the chosen ones:
points.forEach(function (item) { return item.setState('hover'); });
point.points = points;
}
this.len = points.length; // #6128
var text = Tooltip_isString(formatString) ?
Tooltip_format(formatString,
point,
chart) :
formatter.call(point,
tooltip);
// Reset the preliminary circular references
point.points = void 0;
// Register the current series
var currentSeries = point.series;
this.distance = Tooltip_pick(currentSeries.tooltipOptions.distance, 16);
// Update the inner HTML
if (text === false) {
this.hide();
}
else {
// Update text
if (tooltip.split && tooltip.allowShared) { // #13868
this.renderSplit(text, points);
}
else {
var checkX_1 = x;
var checkY_1 = y;
if (mouseEvent && pointer.isDirectTouch) {
checkX_1 = mouseEvent.chartX - chart.plotLeft;
checkY_1 = mouseEvent.chartY - chart.plotTop;
}
// #11493, #13095
if (chart.polar ||
currentSeries.options.clip === false ||
points.some(function (p) {
return pointer.isDirectTouch || // ##17929
p.series.shouldShowTooltip(checkX_1, checkY_1);
})) {
var label = tooltip.getLabel(wasShared && tooltip.tt || {});
// Prevent the tooltip from flowing over the chart box
// (#6659)
if (!options.style.width || styledMode) {
label.css({
width: (this.outside ?
this.getPlayingField() :
chart.spacingBox).width + 'px'
});
}
label.attr({
// Add class before the label BBox calculation (#21035)
'class': tooltip.getClassName(point),
text: text && text.join ?
text.join('') :
text
});
// When the length of the label has increased, immediately
// update the x position to prevent tooltip from flowing
// outside the viewport during animation (#21371)
if (this.outside) {
label.attr({
x: Tooltip_clamp(label.x || 0, 0, this.getPlayingField().width -
(label.width || 0) -
1)
});
}
if (!styledMode) {
label.attr({
stroke: (options.borderColor ||
point.color ||
currentSeries.color ||
"#666666" /* Palette.neutralColor60 */)
});
}
tooltip.updatePosition({
plotX: x,
plotY: y,
negative: point.negative,
ttBelow: point.ttBelow,
h: anchor[2] || 0
});
}
else {
tooltip.hide();
return;
}
}
// Show it
if (tooltip.isHidden && tooltip.label) {
tooltip.label.attr({
opacity: 1
}).show();
}
tooltip.isHidden = false;
}
Tooltip_fireEvent(this, 'refresh');
};
/**
* Render the split tooltip. Loops over each point's text and adds
* a label next to the point, then uses the distribute function to
* find best non-overlapping positions.
*
* @private
* @function Highcharts.Tooltip#renderSplit
*
* @param {string|Array<(boolean|string)>} labels
*
* @param {Array<Highcharts.Point>} points
*/
Tooltip.prototype.renderSplit = function (labels, points) {
var _a;
var tooltip = this;
var chart = tooltip.chart,
_b = tooltip.chart,
chartWidth = _b.chartWidth,
chartHeight = _b.chartHeight,
plotHeight = _b.plotHeight,
plotLeft = _b.plotLeft,
plotTop = _b.plotTop,
_c = _b.scrollablePixelsY,
scrollablePixelsY = _c === void 0 ? 0 : _c,
scrollablePixelsX = _b.scrollablePixelsX,
styledMode = _b.styledMode,
distance = tooltip.distance,
options = tooltip.options,
positioner = tooltip.options.positioner,
pointer = tooltip.pointer;
var _d = ((_a = chart.scrollablePlotArea) === null || _a === void 0 ? void 0 : _a.scrollingContainer) || {},
_e = _d.scrollLeft,
scrollLeft = _e === void 0 ? 0 : _e,
_f = _d.scrollTop,
scrollTop = _f === void 0 ? 0 : _f;
// The area which the tooltip should be limited to. Limit to scrollable
// plot area if enabled, otherwise limit to the chart container. If
// outside is true it should be the whole viewport
var bounds = (tooltip.outside &&
typeof scrollablePixelsX !== 'number') ?
Tooltip_doc.documentElement.getBoundingClientRect() : {
left: scrollLeft,
right: scrollLeft + chartWidth,
top: scrollTop,
bottom: scrollTop + chartHeight
};
var tooltipLabel = tooltip.getLabel();
var ren = this.renderer || chart.renderer;
var headerTop = Boolean(chart.xAxis[0] && chart.xAxis[0].opposite);
var _g = pointer.getChartPosition(),
chartLeft = _g.left,
chartTop = _g.top;
var distributionBoxTop = plotTop + scrollTop;
var headerHeight = 0;
var adjustedPlotHeight = plotHeight - scrollablePixelsY;
/**
* Calculates the anchor position for the partial tooltip
*
* @private
* @param {Highcharts.Point} point The point related to the tooltip
* @return {Object} Returns an object with anchorX and anchorY
*/
function getAnchor(point) {
var isHeader = point.isHeader,
_a = point.plotX,
plotX = _a === void 0 ? 0 : _a,
_b = point.plotY,
plotY = _b === void 0 ? 0 : _b,
series = point.series;
var anchorX;
var anchorY;
if (isHeader) {
// Set anchorX to plotX
anchorX = Math.max(plotLeft + plotX, plotLeft);
// Set anchorY to center of visible plot area.
anchorY = plotTop + plotHeight / 2;
}
else {
var xAxis = series.xAxis,
yAxis = series.yAxis;
// Set anchorX to plotX. Limit to within xAxis.
anchorX = xAxis.pos + Tooltip_clamp(plotX, -distance, xAxis.len + distance);
// Set anchorY, limit to the scrollable plot area
if (series.shouldShowTooltip(0, yAxis.pos - plotTop + plotY, {
ignoreX: true
})) {
anchorY = yAxis.pos + plotY;
}
}
// Limit values to plot area
anchorX = Tooltip_clamp(anchorX, bounds.left - distance, bounds.right + distance);
return { anchorX: anchorX, anchorY: anchorY };
}
/**
* Calculates the position of the partial tooltip
*
* @private
* @param {number} anchorX
* The partial tooltip anchor x position
*
* @param {number} anchorY
* The partial tooltip anchor y position
*
* @param {boolean|undefined} isHeader
* Whether the partial tooltip is a header
*
* @param {number} boxWidth
* Width of the partial tooltip
*
* @return {Highcharts.PositionObject}
* Returns the partial tooltip x and y position
*/
function defaultPositioner(anchorX, anchorY, isHeader, boxWidth, alignedLeft) {
if (alignedLeft === void 0) { alignedLeft = true; }
var y;
var x;
if (isHeader) {
y = headerTop ? 0 : adjustedPlotHeight;
x = Tooltip_clamp(anchorX - (boxWidth / 2), bounds.left, bounds.right - boxWidth - (tooltip.outside ? chartLeft : 0));
}
else {
y = anchorY - distributionBoxTop;
x = alignedLeft ?
anchorX - boxWidth - distance :
anchorX + distance;
x = Tooltip_clamp(x, alignedLeft ? x : bounds.left, bounds.right);
}
// NOTE: y is relative to distributionBoxTop
return { x: x, y: y };
}
/**
* Updates the attributes and styling of the partial tooltip. Creates a
* new partial tooltip if it does not exists.
*
* @private
* @param {Highcharts.SVGElement|undefined} partialTooltip
* The partial tooltip to update
* @param {Highcharts.Point} point
* The point related to the partial tooltip
* @param {boolean|string} str The text for the partial tooltip
* @return {Highcharts.SVGElement} Returns the updated partial tooltip
*/
function updatePartialTooltip(partialTooltip, point, str) {
var _a;
var tt = partialTooltip;
var isHeader = point.isHeader,
series = point.series;
if (!tt) {
var attribs = {
padding: options.padding,
r: options.borderRadius
};
if (!styledMode) {
attribs.fill = options.backgroundColor;
attribs['stroke-width'] = (_a = options.borderWidth) !== null && _a !== void 0 ? _a : 1;
}
tt = ren
.label('', 0, 0, (options[isHeader ? 'headerShape' : 'shape']), void 0, void 0, options.useHTML)
.addClass(tooltip.getClassName(point, true, isHeader))
.attr(attribs)
.add(tooltipLabel);
}
tt.isActive = true;
tt.attr({
text: str
});
if (!styledMode) {
tt.css(options.style)
.attr({
stroke: (options.borderColor ||
point.color ||
series.color ||
"#333333" /* Palette.neutralColor80 */)
});
}
return tt;
}
// Graceful degradation for legacy formatters
if (Tooltip_isString(labels)) {
labels = [false, labels];
}
// Create the individual labels for header and points, ignore footer
var boxes = labels.slice(0,
points.length + 1).reduce(function (boxes,
str,
i) {
if (str !== false && str !== '') {
var point = (points[i - 1] ||
{
// Item 0 is the header. Instead of this, we could also
// use the crosshair label
isHeader: true,
plotX: points[0].plotX,
plotY: plotHeight,
series: {}
});
var isHeader = point.isHeader;
// Store the tooltip label reference on the series
var owner = isHeader ? tooltip : point.series;
var tt = owner.tt = updatePartialTooltip(owner.tt,
point,
str.toString());
// Get X position now, so we can move all to the other side in
// case of overflow
var bBox = tt.getBBox();
var boxWidth = bBox.width + tt.strokeWidth();
if (isHeader) {
headerHeight = bBox.height;
adjustedPlotHeight += headerHeight;
if (headerTop) {
distributionBoxTop -= headerHeight;
}
}
var _a = getAnchor(point),
anchorX = _a.anchorX,
anchorY = _a.anchorY;
if (typeof anchorY === 'number') {
var size = bBox.height + 1;
var boxPosition = (positioner ?
positioner.call(tooltip,
boxWidth,
size,
point) :
defaultPositioner(anchorX,
anchorY,
isHeader,
boxWidth));
boxes.push({
// 0-align to the top, 1-align to the bottom
align: positioner ? 0 : void 0,
anchorX: anchorX,
anchorY: anchorY,
boxWidth: boxWidth,
point: point,
rank: Tooltip_pick(boxPosition.rank, isHeader ? 1 : 0),
size: size,
target: boxPosition.y,
tt: tt,
x: boxPosition.x
});
}
else {
// Hide tooltips which anchorY is outside the visible plot
// area
tt.isActive = false;
}
}
return boxes;
}, []);
// Realign the tooltips towards the right if there is not enough space
// to the left and there is space to the right
if (!positioner && boxes.some(function (box) {
// Always realign if the beginning of a label is outside bounds
var outside = tooltip.outside;
var boxStart = (outside ? chartLeft : 0) + box.anchorX;
if (boxStart < bounds.left &&
boxStart + box.boxWidth < bounds.right) {
return true;
}
// Otherwise, check if there is more space available to the right
return boxStart < (chartLeft - bounds.left) + box.boxWidth &&
bounds.right - boxStart > boxStart;
})) {
boxes = boxes.map(function (box) {
var _a = defaultPositioner(box.anchorX,
box.anchorY,
box.point.isHeader,
box.boxWidth,
false),
x = _a.x,
y = _a.y;
return Tooltip_extend(box, {
target: y,
x: x
});
});
}
// Clean previous run (for missing points)
tooltip.cleanSplit();
// Distribute and put in place
distribute(boxes, adjustedPlotHeight);
var boxExtremes = {
left: chartLeft,
right: chartLeft
};
// Get the extremes from series tooltips
boxes.forEach(function (box) {
var x = box.x,
boxWidth = box.boxWidth,
isHeader = box.isHeader;
if (!isHeader) {
if (tooltip.outside && chartLeft + x < boxExtremes.left) {
boxExtremes.left = chartLeft + x;
}
if (!isHeader &&
tooltip.outside &&
boxExtremes.left + boxWidth > boxExtremes.right) {
boxExtremes.right = chartLeft + x;
}
}
});
boxes.forEach(function (box) {
var x = box.x,
anchorX = box.anchorX,
anchorY = box.anchorY,
pos = box.pos,
isHeader = box.point.isHeader;
var attributes = {
visibility: typeof pos === 'undefined' ? 'hidden' : 'inherit',
x: x,
/* NOTE: y should equal pos to be consistent with !split
* tooltip,
but is currently relative to plotTop. Is left as is
* to avoid breaking change. Remove distributionBoxTop to make
* it consistent.
*/
y: (pos || 0) + distributionBoxTop,
anchorX: anchorX,
anchorY: anchorY
};
// Handle left-aligned tooltips overflowing the chart area
if (tooltip.outside && x < anchorX) {
var offset = chartLeft - boxExtremes.left;
// Skip this if there is no overflow
if (offset > 0) {
if (!isHeader) {
attributes.x = x + offset;
attributes.anchorX = anchorX + offset;
}
if (isHeader) {
attributes.x = (boxExtremes.right - boxExtremes.left) / 2;
attributes.anchorX = anchorX + offset;
}
}
}
// Put the label in place
box.tt.attr(attributes);
});
/* If we have a separate tooltip container, then update the necessary
* container properties.
* Test that tooltip has its own container and renderer before executing
* the operation.
*/
var container = tooltip.container,
outside = tooltip.outside,
renderer = tooltip.renderer;
if (outside && container && renderer) {
// Set container size to fit the bounds
var _h = tooltipLabel.getBBox(),
width = _h.width,
height = _h.height,
x = _h.x,
y = _h.y;
renderer.setSize(width + x, height + y, false);
// Position the tooltip container to the chart container
container.style.left = boxExtremes.left + 'px';
container.style.top = chartTop + 'px';
}
// Workaround for #18927, artefacts left by the shadows of split
// tooltips in Safari v16 (2023). Check again with later versions if we
// can remove this.
if (isSafari) {
tooltipLabel.attr({
// Force a redraw of the whole group by chaining the opacity
// slightly
opacity: tooltipLabel.opacity === 1 ? 0.999 : 1
});
}
};
/**
* If the `stickOnContact` option is active, this will add a tracker shape.
*
* @private
* @function Highcharts.Tooltip#drawTracker
*/
Tooltip.prototype.drawTracker = function () {
var tooltip = this;
if (!this.shouldStickOnContact()) {
if (tooltip.tracker) {
tooltip.tracker = tooltip.tracker.destroy();
}
return;
}
var chart = tooltip.chart;
var label = tooltip.label;
var points = tooltip.shared ? chart.hoverPoints : chart.hoverPoint;
if (!label || !points) {
return;
}
var box = {
x: 0,
y: 0,
width: 0,
height: 0
};
// Combine anchor and tooltip
var anchorPos = this.getAnchor(points);
var labelBBox = label.getBBox();
anchorPos[0] += chart.plotLeft - (label.translateX || 0);
anchorPos[1] += chart.plotTop - (label.translateY || 0);
// When the mouse pointer is between the anchor point and the label,
// the label should stick.
box.x = Math.min(0, anchorPos[0]);
box.y = Math.min(0, anchorPos[1]);
box.width = (anchorPos[0] < 0 ?
Math.max(Math.abs(anchorPos[0]), labelBBox.width - anchorPos[0]) :
Math.max(Math.abs(anchorPos[0]), labelBBox.width));
box.height = (anchorPos[1] < 0 ?
Math.max(Math.abs(anchorPos[1]), labelBBox.height - Math.abs(anchorPos[1])) :
Math.max(Math.abs(anchorPos[1]), labelBBox.height));
if (tooltip.tracker) {
tooltip.tracker.attr(box);
}
else {
tooltip.tracker = label.renderer
.rect(box)
.addClass('highcharts-tracker')
.add(label);
if (!chart.styledMode) {
tooltip.tracker.attr({
fill: 'rgba(0,0,0,0)'
});
}
}
};
/**
* @private
*/
Tooltip.prototype.styledModeFormat = function (formatString) {
return formatString
.replace('style="font-size: 0.8em"', 'class="highcharts-header"')
.replace(/style="color:{(point|series)\.color}"/g, 'class="highcharts-color-{$1.colorIndex} ' +
'{series.options.className} ' +
'{point.options.className}"');
};
/**
* Format the footer/header of the tooltip
* #3397: abstraction to enable formatting of footer and header
*
* @private
* @function Highcharts.Tooltip#headerFooterFormatter
*/
Tooltip.prototype.headerFooterFormatter = function (point, isFooter) {
var series = point.series,
tooltipOptions = series.tooltipOptions,
xAxis = series.xAxis,
dateTime = xAxis && xAxis.dateTime,
e = {
isFooter: isFooter,
point: point
};
var xDateFormat = tooltipOptions.xDateFormat || '', formatString = tooltipOptions[isFooter ? 'footerFormat' : 'headerFormat'];
Tooltip_fireEvent(this, 'headerFormatter', e, function (e) {
// Guess the best date format based on the closest point distance
// (#568, #3418)
if (dateTime && !xDateFormat && Tooltip_isNumber(point.key)) {
xDateFormat = dateTime.getXDateFormat(point.key, tooltipOptions.dateTimeLabelFormats);
}
// Insert the footer date format if any
if (dateTime && xDateFormat) {
if (Tooltip_isObject(xDateFormat)) {
var format_1 = xDateFormat;
dateFormats[0] = function (timestamp) {
return series.chart.time.dateFormat(format_1, timestamp);
};
xDateFormat = '%0';
}
(point.tooltipDateKeys || ['key']).forEach(function (key) {
formatString = formatString.replace(new RegExp('point\\.' + key + '([ \\)}])', ''), "(point.".concat(key, ":").concat(xDateFormat, ")$1"));
});
}
// Replace default header style with class name
if (series.chart.styledMode) {
formatString = this.styledModeFormat(formatString);
}
e.text = Tooltip_format(formatString, point, this.chart);
});
return e.text || '';
};
/**
* Updates the tooltip with the provided tooltip options.
*
* @function Highcharts.Tooltip#update
*
* @param {Highcharts.TooltipOptions} options
* The tooltip options to update.
*/
Tooltip.prototype.update = function (options) {
this.destroy();
this.init(this.chart, Tooltip_merge(true, this.options, options));
};
/**
* Find the new position and perform the move
*
* @private
* @function Highcharts.Tooltip#updatePosition
*
* @param {Highcharts.Point} point
*/
Tooltip.prototype.updatePosition = function (point) {
var _a = this,
chart = _a.chart,
container = _a.container,
distance = _a.distance,
options = _a.options,
pointer = _a.pointer,
renderer = _a.renderer,
_b = this.getLabel(),
_c = _b.height,
height = _c === void 0 ? 0 : _c,
_d = _b.width,
width = _d === void 0 ? 0 : _d,
// Needed for outside: true (#11688)
_e = pointer.getChartPosition(),
left = _e.left,
top = _e.top,
scaleX = _e.scaleX,
scaleY = _e.scaleY,
pos = (options.positioner || this.getPosition).call(this,
width,
height,
point),
doc = Core_Globals.doc;
var anchorX = (point.plotX || 0) + chart.plotLeft,
anchorY = (point.plotY || 0) + chart.plotTop,
pad;
// Set the renderer size dynamically to prevent document size to change.
// Renderer only exists when tooltip is outside.
if (renderer && container) {
// Corrects positions, occurs with tooltip positioner (#16944)
if (options.positioner) {
pos.x += left - distance;
pos.y += top - distance;
}
// Pad it by the border width and distance. Add 2 to make room for
// the default shadow (#19314).
pad = (options.borderWidth || 0) + 2 * distance + 2;
renderer.setSize(
// Clamp width to keep tooltip in viewport (#21698)
// and subtract one since tooltip container has 'left: 1px;'
Tooltip_clamp(width + pad, 0, doc.documentElement.clientWidth) - 1, height + pad, false);
// Anchor and tooltip container need scaling if chart container has
// scale transform/css zoom. #11329.
if (scaleX !== 1 || scaleY !== 1) {
Tooltip_css(container, {
transform: "scale(".concat(scaleX, ", ").concat(scaleY, ")")
});
anchorX *= scaleX;
anchorY *= scaleY;
}
anchorX += left - pos.x;
anchorY += top - pos.y;
}
// Do the move
this.move(Math.round(pos.x), Math.round(pos.y || 0), // Can be undefined (#3977)
anchorX, anchorY);
};
return Tooltip;
}());
/* *
*
* Class namespace
*
* */
(function (Tooltip) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* @private
*/
function compose(PointerClass) {
if (Tooltip_pushUnique(Tooltip_composed, 'Core.Tooltip')) {
Tooltip_addEvent(PointerClass, 'afterInit', function () {
var chart = this.chart;
if (chart.options.tooltip) {
/**
* Tooltip object for points of series.
*
* @name Highcharts.Chart#tooltip
* @type {Highcharts.Tooltip}
*/
chart.tooltip = new Tooltip(chart, chart.options.tooltip, this);
}
});
}
}
Tooltip.compose = compose;
})(Tooltip || (Tooltip = {}));
/* *
*
* Default export
*
* */
/* harmony default export */ var Core_Tooltip = (Tooltip);
/* *
*
* API Declarations
*
* */
/**
* Callback function to format the text of the tooltip from scratch.
*
* In case of single or shared tooltips, a string should be returned. In case
* of split tooltips, it should return an array where the first item is the
* header, and subsequent items are mapped to the points. Return `false` to
* disable tooltip for a specific point on series.
*
* @callback Highcharts.TooltipFormatterCallbackFunction
*
* @param {Highcharts.Point} this
* The formatter's context is the hovered `Point` instance. In case of shared or
* split tooltips, all points are available in `this.points`.
*
* @param {Highcharts.Tooltip} tooltip
* The tooltip instance
*
* @return {false|string|Array<(string|null|undefined)>|null|undefined}
* Formatted text or false
*/
/**
* A callback function to place the tooltip in a specific position.
*
* @callback Highcharts.TooltipPositionerCallbackFunction
*
* @param {Highcharts.Tooltip} this
* Tooltip context of the callback.
*
* @param {number} labelWidth
* Width of the tooltip.
*
* @param {number} labelHeight
* Height of the tooltip.
*
* @param {Highcharts.TooltipPositionerPointObject} point
* Point information for positioning a tooltip.
*
* @return {Highcharts.PositionObject}
* New position for the tooltip.
*/
/**
* Point information for positioning a tooltip.
*
* @interface Highcharts.TooltipPositionerPointObject
* @extends Highcharts.Point
*/ /**
* If `tooltip.split` option is enabled and positioner is called for each of the
* boxes separately, this property indicates the call on the xAxis header, which
* is not a point itself.
* @name Highcharts.TooltipPositionerPointObject#isHeader
* @type {boolean}
*/ /**
* The reference point relative to the plot area. Add chart.plotLeft to get the
* full coordinates.
* @name Highcharts.TooltipPositionerPointObject#plotX
* @type {number}
*/ /**
* The reference point relative to the plot area. Add chart.plotTop to get the
* full coordinates.
* @name Highcharts.TooltipPositionerPointObject#plotY
* @type {number}
*/
/**
* @typedef {"callout"|"circle"|"rect"} Highcharts.TooltipShapeValue
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Series/Point.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Point_animObject = AnimationUtilities.animObject;
var Point_defaultOptions = Defaults.defaultOptions;
var Point_format = Core_Templating.format;
var Point_addEvent = Core_Utilities.addEvent, Point_crisp = Core_Utilities.crisp, Point_erase = Core_Utilities.erase, Point_extend = Core_Utilities.extend, Point_fireEvent = Core_Utilities.fireEvent, Point_getNestedProperty = Core_Utilities.getNestedProperty, Point_isArray = Core_Utilities.isArray, Point_isFunction = Core_Utilities.isFunction, Point_isNumber = Core_Utilities.isNumber, Point_isObject = Core_Utilities.isObject, Point_merge = Core_Utilities.merge, Point_pick = Core_Utilities.pick, Point_syncTimeout = Core_Utilities.syncTimeout, Point_removeEvent = Core_Utilities.removeEvent, Point_uniqueKey = Core_Utilities.uniqueKey;
/* eslint-disable no-invalid-this, valid-jsdoc */
/* *
*
* Class
*
* */
/**
* The Point object. The point objects are generated from the `series.data`
* configuration objects or raw numbers. They can be accessed from the
* `Series.points` array. Other ways to instantiate points are through {@link
* Highcharts.Series#addPoint} or {@link Highcharts.Series#setData}.
*
* @class
* @name Highcharts.Point
*/
var Point = /** @class */ (function () {
/**
* Initialize the point. Called internally based on the `series.data`
* option.
*
* @function Highcharts.Point#init
*
* @param {Highcharts.Series} series
* The series object containing this point.
*
* @param {Highcharts.PointOptionsType} options
* The data in either number, array or object format.
*
* @param {number} [x]
* Optionally, the X value of the point.
*
* @return {Highcharts.Point}
* The Point instance.
*
* @emits Highcharts.Point#event:afterInit
*/
function Point(series, options, x) {
var _a;
this.formatPrefix = 'point';
this.visible = true;
// For tooltip and data label formatting
this.point = this;
this.series = series;
this.applyOptions(options, x);
// Add a unique ID to the point if none is assigned
(_a = this.id) !== null && _a !== void 0 ? _a : (this.id = Point_uniqueKey());
this.resolveColor();
series.chart.pointCount++;
Point_fireEvent(this, 'afterInit');
}
/**
* For categorized axes this property holds the category name for the
* point. For other axes it holds the X value.
*
* @name Highcharts.Point#category
* @type {number|string}
*/
/**
* The name of the point. The name can be given as the first position of the
* point configuration array, or as a `name` property in the configuration:
*
* @example
* // Array config
* data: [
* ['John', 1],
* ['Jane', 2]
* ]
*
* // Object config
* data: [{
* name: 'John',
* y: 1
* }, {
* name: 'Jane',
* y: 2
* }]
*
* @name Highcharts.Point#name
* @type {string}
*/
/**
* The point's name if it is defined, or its category in case of a category,
* otherwise the x value. Convenient for tooltip and data label formatting.
*
* @name Highcharts.Point#key
* @type {number|string}
*/
/**
* The point's options as applied in the initial configuration, or
* extended through `Point.update`.
*
* In TypeScript you have to extend `PointOptionsObject` via an
* additional interface to allow custom data options:
*
* ```
* declare interface PointOptionsObject {
* customProperty: string;
* }
* ```
*
* @name Highcharts.Point#options
* @type {Highcharts.PointOptionsObject}
*/
/**
* The percentage for points in a stacked series, pies or gauges.
*
* @name Highcharts.Point#percentage
* @type {number|undefined}
*/
/**
* The series object associated with the point.
*
* @name Highcharts.Point#series
* @type {Highcharts.Series}
*/
/**
* The attributes of the rendered SVG shape like in `column` or `pie`
* series.
*
* @readonly
* @name Highcharts.Point#shapeArgs
* @type {Readonly<Highcharts.SVGAttributes>|undefined}
*/
/**
* The total of values in either a stack for stacked series, or a pie in a
* pie series.
*
* @name Highcharts.Point#total
* @type {number|undefined}
*/
/**
* For certain series types, like pie charts, where individual points can
* be shown or hidden.
*
* @name Highcharts.Point#visible
* @type {boolean}
* @default true
*/
/* *
*
* Functions
*
* */
/**
* Animate SVG elements associated with the point.
*
* @private
* @function Highcharts.Point#animateBeforeDestroy
*/
Point.prototype.animateBeforeDestroy = function () {
var point = this,
animateParams = { x: point.startXPos,
opacity: 0 },
graphicalProps = point.getGraphicalProps();
graphicalProps.singular.forEach(function (prop) {
var isDataLabel = prop === 'dataLabel';
point[prop] = point[prop].animate(isDataLabel ? {
x: point[prop].startXPos,
y: point[prop].startYPos,
opacity: 0
} : animateParams);
});
graphicalProps.plural.forEach(function (plural) {
point[plural].forEach(function (item) {
if (item.element) {
item.animate(Point_extend({ x: point.startXPos }, (item.startYPos ? {
x: item.startXPos,
y: item.startYPos
} : {})));
}
});
});
};
/**
* Apply the options containing the x and y data and possible some extra
* properties. Called on point init or from point.update.
*
* @private
* @function Highcharts.Point#applyOptions
*
* @param {Highcharts.PointOptionsType} options
* The point options as defined in series.data.
*
* @param {number} [x]
* Optionally, the x value.
*
* @return {Highcharts.Point}
* The Point instance.
*/
Point.prototype.applyOptions = function (options, x) {
var point = this,
series = point.series,
pointValKey = series.options.pointValKey || series.pointValKey;
options = Point.prototype.optionsToObject.call(this, options);
// Copy options directly to point
Point_extend(point, options);
point.options = point.options ?
Point_extend(point.options, options) :
options;
// Since options are copied into the Point instance, some accidental
// options must be shielded (#5681)
if (options.group) {
delete point.group;
}
if (options.dataLabels) {
delete point.dataLabels;
}
/**
* The y value of the point.
* @name Highcharts.Point#y
* @type {number|undefined}
*/
// For higher dimension series types. For instance, for ranges, point.y
// is mapped to point.low.
if (pointValKey) {
point.y = Point.prototype.getNestedProperty.call(point, pointValKey);
}
// The point is initially selected by options (#5777)
if (point.selected) {
point.state = 'select';
}
/**
* The x value of the point.
* @name Highcharts.Point#x
* @type {number}
*/
// If no x is set by now, get auto incremented value. All points must
// have an x value, however the y value can be null to create a gap in
// the series
if ('name' in point &&
typeof x === 'undefined' &&
series.xAxis &&
series.xAxis.hasNames) {
point.x = series.xAxis.nameToX(point);
}
if (typeof point.x === 'undefined' && series) {
point.x = x !== null && x !== void 0 ? x : series.autoIncrement();
}
else if (Point_isNumber(options.x) && series.options.relativeXValue) {
point.x = series.autoIncrement(options.x);
// If x is a string, try to parse it to a datetime
}
else if (typeof point.x === 'string') {
x !== null && x !== void 0 ? x : (x = series.chart.time.parse(point.x));
if (Point_isNumber(x)) {
point.x = x;
}
}
point.isNull = this.isValid && !this.isValid();
point.formatPrefix = point.isNull ? 'null' : 'point'; // #9233, #10874
return point;
};
/**
* Destroy a point to clear memory. Its reference still stays in
* `series.data`.
*
* @private
* @function Highcharts.Point#destroy
*/
Point.prototype.destroy = function () {
if (!this.destroyed) {
var point_1 = this,
series = point_1.series,
chart = series.chart,
dataSorting = series.options.dataSorting,
hoverPoints = chart.hoverPoints,
globalAnimation = point_1.series.chart.renderer.globalAnimation,
animation = Point_animObject(globalAnimation);
/**
* Allow to call after animation.
* @private
*/
var destroyPoint = function () {
// Remove all events and elements
if (point_1.graphic ||
point_1.graphics ||
point_1.dataLabel ||
point_1.dataLabels) {
Point_removeEvent(point_1);
point_1.destroyElements();
}
for (var prop in point_1) { // eslint-disable-line guard-for-in
delete point_1[prop];
}
};
if (point_1.legendItem) {
// Pies have legend items
chart.legend.destroyItem(point_1);
}
if (hoverPoints) {
point_1.setState();
Point_erase(hoverPoints, point_1);
if (!hoverPoints.length) {
chart.hoverPoints = null;
}
}
if (point_1 === chart.hoverPoint) {
point_1.onMouseOut();
}
// Remove properties after animation
if (!dataSorting || !dataSorting.enabled) {
destroyPoint();
}
else {
this.animateBeforeDestroy();
Point_syncTimeout(destroyPoint, animation.duration);
}
chart.pointCount--;
}
this.destroyed = true;
};
/**
* Destroy SVG elements associated with the point.
*
* @private
* @function Highcharts.Point#destroyElements
* @param {Highcharts.Dictionary<number>} [kinds]
*/
Point.prototype.destroyElements = function (kinds) {
var point = this,
props = point.getGraphicalProps(kinds);
props.singular.forEach(function (prop) {
point[prop] = point[prop].destroy();
});
props.plural.forEach(function (plural) {
point[plural].forEach(function (item) {
if (item && item.element) {
item.destroy();
}
});
delete point[plural];
});
};
/**
* Fire an event on the Point object.
*
* @private
* @function Highcharts.Point#firePointEvent
*
* @param {string} eventType
* Type of the event.
*
* @param {Highcharts.Dictionary<any>|Event} [eventArgs]
* Additional event arguments.
*
* @param {Highcharts.EventCallbackFunction<Highcharts.Point>|Function} [defaultFunction]
* Default event handler.
*
* @emits Highcharts.Point#event:*
*/
Point.prototype.firePointEvent = function (eventType, eventArgs, defaultFunction) {
var point = this,
series = this.series,
seriesOptions = series.options;
// Load event handlers on demand to save time on mouseover/out
point.manageEvent(eventType);
// Add default handler if in selection mode
if (eventType === 'click' && seriesOptions.allowPointSelect) {
defaultFunction = function (event) {
// Control key is for Windows, meta (= Cmd key) for Mac, Shift
// for Opera.
if (!point.destroyed && point.select) { // #2911, #19075
point.select(null, event.ctrlKey || event.metaKey || event.shiftKey);
}
};
}
Point_fireEvent(point, eventType, eventArgs, defaultFunction);
};
/**
* Get the CSS class names for individual points. Used internally where the
* returned value is set on every point.
*
* @function Highcharts.Point#getClassName
*
* @return {string}
* The class names.
*/
Point.prototype.getClassName = function () {
var point = this;
return 'highcharts-point' +
(point.selected ? ' highcharts-point-select' : '') +
(point.negative ? ' highcharts-negative' : '') +
(point.isNull ? ' highcharts-null-point' : '') +
(typeof point.colorIndex !== 'undefined' ?
' highcharts-color-' + point.colorIndex : '') +
(point.options.className ? ' ' + point.options.className : '') +
(point.zone && point.zone.className ? ' ' +
point.zone.className.replace('highcharts-negative', '') : '');
};
/**
* Get props of all existing graphical point elements.
*
* @private
* @function Highcharts.Point#getGraphicalProps
*/
Point.prototype.getGraphicalProps = function (kinds) {
var point = this,
props = [],
graphicalProps = { singular: [],
plural: [] };
var prop,
i;
kinds = kinds || { graphic: 1, dataLabel: 1 };
if (kinds.graphic) {
props.push('graphic', 'connector' // Used by dumbbell
);
}
if (kinds.dataLabel) {
props.push('dataLabel', 'dataLabelPath', 'dataLabelUpper');
}
i = props.length;
while (i--) {
prop = props[i];
if (point[prop]) {
graphicalProps.singular.push(prop);
}
}
[
'graphic',
'dataLabel'
].forEach(function (prop) {
var plural = prop + 's';
if (kinds[prop] && point[plural]) {
graphicalProps.plural.push(plural);
}
});
return graphicalProps;
};
/**
* Returns the value of the point property for a given value.
* @private
*/
Point.prototype.getNestedProperty = function (key) {
if (!key) {
return;
}
if (key.indexOf('custom.') === 0) {
return Point_getNestedProperty(key, this.options);
}
return this[key];
};
/**
* In a series with `zones`, return the zone that the point belongs to.
*
* @function Highcharts.Point#getZone
*
* @return {Highcharts.SeriesZonesOptionsObject}
* The zone item.
*/
Point.prototype.getZone = function () {
var series = this.series,
zones = series.zones,
zoneAxis = series.zoneAxis || 'y';
var zone,
i = 0;
zone = zones[i];
while (this[zoneAxis] >= zone.value) {
zone = zones[++i];
}
// For resetting or reusing the point (#8100)
if (!this.nonZonedColor) {
this.nonZonedColor = this.color;
}
if (zone && zone.color && !this.options.color) {
this.color = zone.color;
}
else {
this.color = this.nonZonedColor;
}
return zone;
};
/**
* Utility to check if point has new shape type. Used in column series and
* all others that are based on column series.
* @private
*/
Point.prototype.hasNewShapeType = function () {
var point = this;
var oldShapeType = point.graphic &&
(point.graphic.symbolName || point.graphic.element.nodeName);
return oldShapeType !== this.shapeType;
};
/**
* Determine if point is valid.
* @private
* @function Highcharts.Point#isValid
*/
Point.prototype.isValid = function () {
return ((Point_isNumber(this.x) ||
this.x instanceof Date) &&
Point_isNumber(this.y));
};
/**
* Transform number or array configs into objects. Also called for object
* configs. Used internally to unify the different configuration formats for
* points. For example, a simple number `10` in a line series will be
* transformed to `{ y: 10 }`, and an array config like `[1, 10]` in a
* scatter series will be transformed to `{ x: 1, y: 10 }`.
*
* @function Highcharts.Point#optionsToObject
*
* @param {Highcharts.PointOptionsType} options
* Series data options.
*
* @return {Highcharts.Dictionary<*>}
* Transformed point options.
*/
Point.prototype.optionsToObject = function (options) {
var _a;
var series = this.series,
keys = series.options.keys,
pointArrayMap = keys || series.pointArrayMap || ['y'],
valueCount = pointArrayMap.length;
var ret = {},
firstItemType,
i = 0,
j = 0;
if (Point_isNumber(options) || options === null) {
ret[pointArrayMap[0]] = options;
}
else if (Point_isArray(options)) {
// With leading x value
if (!keys && options.length > valueCount) {
firstItemType = typeof options[0];
if (firstItemType === 'string') {
if ((_a = series.xAxis) === null || _a === void 0 ? void 0 : _a.dateTime) {
ret.x = series.chart.time.parse(options[0]);
}
else {
ret.name = options[0];
}
}
else if (firstItemType === 'number') {
ret.x = options[0];
}
i++;
}
while (j < valueCount) {
// Skip undefined positions for keys
if (!keys || typeof options[i] !== 'undefined') {
if (pointArrayMap[j].indexOf('.') > 0) {
// Handle nested keys, e.g. ['color.pattern.image']
// Avoid function call unless necessary.
Point.prototype.setNestedProperty(ret, options[i], pointArrayMap[j]);
}
else {
ret[pointArrayMap[j]] = options[i];
}
}
i++;
j++;
}
}
else if (typeof options === 'object') {
ret = options;
// This is the fastest way to detect if there are individual point
// dataLabels that need to be considered in drawDataLabels. These
// can only occur in object configs.
if (options.dataLabels) {
// Override the prototype function to always return true,
// regardless of whether data labels are enabled series-wide
series.hasDataLabels = function () { return true; };
}
// Same approach as above for markers
if (options.marker) {
series._hasPointMarkers = true;
}
}
return ret;
};
/**
* Get the pixel position of the point relative to the plot area.
* @function Highcharts.Point#pos
*
* @sample highcharts/point/position
* Get point's position in pixels.
*
* @param {boolean} chartCoordinates
* If true, the returned position is relative to the full chart area.
* If false, it is relative to the plot area determined by the axes.
*
* @param {number|undefined} plotY
* A custom plot y position to be computed. Used internally for some
* series types that have multiple `y` positions, like area range (low
* and high values).
*
* @return {Array<number>|undefined}
* Coordinates of the point if the point exists.
*/
Point.prototype.pos = function (chartCoordinates, plotY) {
if (plotY === void 0) { plotY = this.plotY; }
if (!this.destroyed) {
var _a = this,
plotX = _a.plotX,
series = _a.series,
chart = series.chart,
xAxis = series.xAxis,
yAxis = series.yAxis;
var posX = 0,
posY = 0;
if (Point_isNumber(plotX) && Point_isNumber(plotY)) {
if (chartCoordinates) {
posX = xAxis ? xAxis.pos : chart.plotLeft;
posY = yAxis ? yAxis.pos : chart.plotTop;
}
return chart.inverted && xAxis && yAxis ?
[yAxis.len - plotY + posY, xAxis.len - plotX + posX] :
[plotX + posX, plotY + posY];
}
}
};
/**
* @private
* @function Highcharts.Point#resolveColor
*/
Point.prototype.resolveColor = function () {
var series = this.series,
optionsChart = series.chart.options.chart,
styledMode = series.chart.styledMode;
var color,
colors,
colorCount = optionsChart.colorCount,
colorIndex;
// Remove points nonZonedColor for later recalculation
delete this.nonZonedColor;
if (series.options.colorByPoint) {
if (!styledMode) {
colors = series.options.colors || series.chart.options.colors;
color = colors[series.colorCounter];
colorCount = colors.length;
}
colorIndex = series.colorCounter;
series.colorCounter++;
// Loop back to zero
if (series.colorCounter === colorCount) {
series.colorCounter = 0;
}
}
else {
if (!styledMode) {
color = series.color;
}
colorIndex = series.colorIndex;
}
/**
* The point's current color index, used in styled mode instead of
* `color`. The color index is inserted in class names used for styling.
*
* @name Highcharts.Point#colorIndex
* @type {number|undefined}
*/
this.colorIndex = Point_pick(this.options.colorIndex, colorIndex);
/**
* The point's current color.
*
* @name Highcharts.Point#color
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined}
*/
this.color = Point_pick(this.options.color, color);
};
/**
* Set a value in an object, on the property defined by key. The key
* supports nested properties using dot notation. The function modifies the
* input object and does not make a copy.
*
* @function Highcharts.Point#setNestedProperty<T>
*
* @param {T} object
* The object to set the value on.
*
* @param {*} value
* The value to set.
*
* @param {string} key
* Key to the property to set.
*
* @return {T}
* The modified object.
*/
Point.prototype.setNestedProperty = function (object, value, key) {
var nestedKeys = key.split('.');
nestedKeys.reduce(function (result, key, i, arr) {
var isLastKey = arr.length - 1 === i;
result[key] = (isLastKey ?
value :
Point_isObject(result[key], true) ?
result[key] :
{});
return result[key];
}, object);
return object;
};
Point.prototype.shouldDraw = function () {
return !this.isNull;
};
/**
* Extendable method for formatting each point's tooltip line.
*
* @function Highcharts.Point#tooltipFormatter
*
* @param {string} pointFormat
* The point format.
*
* @return {string}
* A string to be concatenated in to the common tooltip text.
*/
Point.prototype.tooltipFormatter = function (pointFormat) {
var _a;
// Insert options for valueDecimals, valuePrefix, and valueSuffix
var _b = this.series, chart = _b.chart, _c = _b.pointArrayMap, pointArrayMap = _c === void 0 ? ['y'] : _c, tooltipOptions = _b.tooltipOptions, _d = tooltipOptions.valueDecimals, valueDecimals = _d === void 0 ? '' : _d, _e = tooltipOptions.valuePrefix, valuePrefix = _e === void 0 ? '' : _e, _f = tooltipOptions.valueSuffix, valueSuffix = _f === void 0 ? '' : _f;
// Replace default point style with class name
if (chart.styledMode) {
pointFormat = ((_a = chart.tooltip) === null || _a === void 0 ? void 0 : _a.styledModeFormat(pointFormat)) ||
pointFormat;
}
// Loop over the point array map and replace unformatted values with
// sprintf formatting markup
pointArrayMap.forEach(function (key) {
key = '{point.' + key; // Without the closing bracket
if (valuePrefix || valueSuffix) {
pointFormat = pointFormat.replace(RegExp(key + '}', 'g'), valuePrefix + key + '}' + valueSuffix);
}
pointFormat = pointFormat.replace(RegExp(key + '}', 'g'), key + ':,.' + valueDecimals + 'f}');
});
return Point_format(pointFormat, this, chart);
};
/**
* Update point with new options (typically x/y data) and optionally redraw
* the series.
*
* @sample highcharts/members/point-update-column/
* Update column value
* @sample highcharts/members/point-update-pie/
* Update pie slice
* @sample maps/members/point-update/
* Update map area value in Highmaps
*
* @function Highcharts.Point#update
*
* @param {Highcharts.PointOptionsType} options
* The point options. Point options are handled as described under
* the `series.type.data` item for each series type. For example
* for a line series, if options is a single number, the point will
* be given that number as the marin y value. If it is an array, it
* will be interpreted as x and y values respectively. If it is an
* object, advanced options are applied.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the point is updated. If doing
* more operations on the chart, it is best practice to set
* `redraw` to false and call `chart.redraw()` after.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation=true]
* Whether to apply animation, and optionally animation
* configuration.
*
* @emits Highcharts.Point#event:update
*/
Point.prototype.update = function (options, redraw, animation, runEvent) {
var point = this,
series = point.series,
graphic = point.graphic,
chart = series.chart,
seriesOptions = series.options;
var i;
redraw = Point_pick(redraw, true);
/**
* @private
*/
function update() {
point.applyOptions(options);
// Update visuals, #4146
// Handle mock graphic elements for a11y, #12718
var hasMockGraphic = graphic && point.hasMockGraphic;
var shouldDestroyGraphic = point.y === null ?
!hasMockGraphic :
hasMockGraphic;
if (graphic && shouldDestroyGraphic) {
point.graphic = graphic.destroy();
delete point.hasMockGraphic;
}
if (Point_isObject(options, true)) {
// Destroy so we can get new elements
if (graphic && graphic.element) {
// "null" is also a valid symbol
if (options &&
options.marker &&
typeof options.marker.symbol !== 'undefined') {
point.graphic = graphic.destroy();
}
}
if ((options === null || options === void 0 ? void 0 : options.dataLabels) && point.dataLabel) {
point.dataLabel = point.dataLabel.destroy(); // #2468
}
}
// Record changes in the data table
i = point.index;
var row = {};
for (var _i = 0, _a = series.dataColumnKeys(); _i < _a.length; _i++) {
var key = _a[_i];
row[key] = point[key];
}
series.dataTable.setRow(row, i);
// Record the options to options.data. If the old or the new config
// is an object, use point options, otherwise use raw options
// (#4701, #4916).
seriesOptions.data[i] = (Point_isObject(seriesOptions.data[i], true) ||
Point_isObject(options, true)) ?
point.options :
Point_pick(options, seriesOptions.data[i]);
// Redraw
series.isDirty = series.isDirtyData = true;
if (!series.fixedBox && series.hasCartesianSeries) { // #1906, #2320
chart.isDirtyBox = true;
}
if (seriesOptions.legendType === 'point') { // #1831, #1885
chart.isDirtyLegend = true;
}
if (redraw) {
chart.redraw(animation);
}
}
// Fire the event with a default handler of doing the update
if (runEvent === false) { // When called from setData
update();
}
else {
point.firePointEvent('update', { options: options }, update);
}
};
/**
* Remove a point and optionally redraw the series and if necessary the axes
*
* @sample highcharts/plotoptions/series-point-events-remove/
* Remove point and confirm
* @sample highcharts/members/point-remove/
* Remove pie slice
* @sample maps/members/point-remove/
* Remove selected points in Highmaps
*
* @function Highcharts.Point#remove
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart or wait for an explicit call. When
* doing more operations on the chart, for example running
* `point.remove()` in a loop, it is best practice to set `redraw`
* to false and call `chart.redraw()` after.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation=false]
* Whether to apply animation, and optionally animation
* configuration.
*/
Point.prototype.remove = function (redraw, animation) {
this.series.removePoint(this.series.data.indexOf(this), redraw, animation);
};
/**
* Toggle the selection status of a point.
*
* @see Highcharts.Chart#getSelectedPoints
*
* @sample highcharts/members/point-select/
* Select a point from a button
* @sample highcharts/members/point-select-lasso/
* Lasso selection
* @sample highcharts/chart/events-selection-points/
* Rectangle selection
* @sample maps/series/data-id/
* Select a point in Highmaps
*
* @function Highcharts.Point#select
*
* @param {boolean} [selected]
* When `true`, the point is selected. When `false`, the point is
* unselected. When `null` or `undefined`, the selection state is toggled.
*
* @param {boolean} [accumulate=false]
* When `true`, the selection is added to other selected points.
* When `false`, other selected points are deselected. Internally in
* Highcharts, when
* [allowPointSelect](https://api.highcharts.com/highcharts/plotOptions.series.allowPointSelect)
* is `true`, selected points are accumulated on Control, Shift or Cmd
* clicking the point.
*
* @emits Highcharts.Point#event:select
* @emits Highcharts.Point#event:unselect
*/
Point.prototype.select = function (selected, accumulate) {
var point = this,
series = point.series,
chart = series.chart;
selected = Point_pick(selected, !point.selected);
this.selectedStaging = selected;
// Fire the event with the default handler
point.firePointEvent(selected ? 'select' : 'unselect', { accumulate: accumulate }, function () {
/**
* Whether the point is selected or not.
*
* @see Point#select
* @see Chart#getSelectedPoints
*
* @name Highcharts.Point#selected
* @type {boolean}
*/
point.selected = point.options.selected = selected;
series.options.data[series.data.indexOf(point)] =
point.options;
point.setState(selected && 'select');
// Unselect all other points unless Ctrl or Cmd + click
if (!accumulate) {
chart.getSelectedPoints().forEach(function (loopPoint) {
var loopSeries = loopPoint.series;
if (loopPoint.selected && loopPoint !== point) {
loopPoint.selected = loopPoint.options.selected =
false;
loopSeries.options.data[loopSeries.data.indexOf(loopPoint)] = loopPoint.options;
// Programmatically selecting a point should restore
// normal state, but when click happened on other
// point, set inactive state to match other points
loopPoint.setState(chart.hoverPoints &&
loopSeries.options.inactiveOtherPoints ?
'inactive' : '');
loopPoint.firePointEvent('unselect');
}
});
}
});
delete this.selectedStaging;
};
/**
* Runs on mouse over the point. Called internally from mouse and touch
* events.
*
* @function Highcharts.Point#onMouseOver
*
* @param {Highcharts.PointerEventObject} [e]
* The event arguments.
*/
Point.prototype.onMouseOver = function (e) {
var point = this,
series = point.series,
_a = series.chart,
inverted = _a.inverted,
pointer = _a.pointer;
if (pointer) {
e = e ?
pointer.normalize(e) :
// In cases where onMouseOver is called directly without an
// event
pointer.getChartCoordinatesFromPoint(point, inverted);
pointer.runPointActions(e, point);
}
};
/**
* Runs on mouse out from the point. Called internally from mouse and touch
* events.
*
* @function Highcharts.Point#onMouseOut
* @emits Highcharts.Point#event:mouseOut
*/
Point.prototype.onMouseOut = function () {
var point = this,
chart = point.series.chart;
point.firePointEvent('mouseOut');
if (!point.series.options.inactiveOtherPoints) {
(chart.hoverPoints || []).forEach(function (p) {
p.setState();
});
}
chart.hoverPoints = chart.hoverPoint = null;
};
/**
* Manage specific event from the series' and point's options. Only do it on
* demand, to save processing time on hovering.
*
* @private
* @function Highcharts.Point#importEvents
*/
Point.prototype.manageEvent = function (eventType) {
var _a,
_b,
_c,
_d,
_e,
_f,
_g;
var point = this,
options = Point_merge(point.series.options.point,
point.options),
userEvent = (_a = options.events) === null || _a === void 0 ? void 0 : _a[eventType];
if (Point_isFunction(userEvent) &&
(!((_b = point.hcEvents) === null || _b === void 0 ? void 0 : _b[eventType]) ||
// Some HC modules, like marker-clusters, draggable-poins etc.
// use events in their logic, so we need to be sure, that
// callback function is different
((_d = (_c = point.hcEvents) === null || _c === void 0 ? void 0 : _c[eventType]) === null || _d === void 0 ? void 0 : _d.map(function (el) { return el.fn; }).indexOf(userEvent)) === -1)) {
// While updating the existing callback event the old one should be
// removed
(_e = point.importedUserEvent) === null || _e === void 0 ? void 0 : _e.call(point);
point.importedUserEvent = Point_addEvent(point, eventType, userEvent);
if (point.hcEvents) {
point.hcEvents[eventType].userEvent = true;
}
}
else if (point.importedUserEvent &&
!userEvent &&
((_f = point.hcEvents) === null || _f === void 0 ? void 0 : _f[eventType]) &&
((_g = point.hcEvents) === null || _g === void 0 ? void 0 : _g[eventType].userEvent)) {
Point_removeEvent(point, eventType);
delete point.hcEvents[eventType];
if (!Object.keys(point.hcEvents)) {
delete point.importedUserEvent;
}
}
};
/**
* Set the point's state.
*
* @function Highcharts.Point#setState
*
* @param {Highcharts.PointStateValue|""} [state]
* The new state, can be one of `'hover'`, `'select'`, `'inactive'`,
* or `''` (an empty string), `'normal'` or `undefined` to set to
* normal state.
* @param {boolean} [move]
* State for animation.
*
* @emits Highcharts.Point#event:afterSetState
*/
Point.prototype.setState = function (state, move) {
var _a;
var point = this,
series = point.series,
previousState = point.state,
stateOptions = (series.options.states[state || 'normal'] ||
{}),
markerOptions = (Point_defaultOptions.plotOptions[series.type].marker &&
series.options.marker),
normalDisabled = (markerOptions && markerOptions.enabled === false),
markerStateOptions = ((markerOptions &&
markerOptions.states &&
markerOptions.states[state || 'normal']) || {}),
stateDisabled = markerStateOptions.enabled === false,
pointMarker = point.marker || {},
chart = series.chart,
hasMarkers = (markerOptions && series.markerAttribs);
var halo = series.halo,
markerAttribs,
pointAttribs,
pointAttribsAnimation,
stateMarkerGraphic = series.stateMarkerGraphic,
newSymbol;
state = state || ''; // Empty string
if (
// Already has this state
(state === point.state && !move) ||
// Selected points don't respond to hover
(point.selected && state !== 'select') ||
// Series' state options is disabled
(stateOptions.enabled === false) ||
// General point marker's state options is disabled
(state && (stateDisabled ||
(normalDisabled &&
markerStateOptions.enabled === false))) ||
// Individual point marker's state options is disabled
(state &&
pointMarker.states &&
pointMarker.states[state] &&
pointMarker.states[state].enabled === false) // #1610
) {
return;
}
point.state = state;
if (hasMarkers) {
markerAttribs = series.markerAttribs(point, state);
}
// Apply hover styles to the existing point
// Prevent from mocked null points (#14966)
if (point.graphic && !point.hasMockGraphic) {
if (previousState) {
point.graphic.removeClass('highcharts-point-' + previousState);
}
if (state) {
point.graphic.addClass('highcharts-point-' + state);
}
if (!chart.styledMode) {
pointAttribs = series.pointAttribs(point, state);
pointAttribsAnimation = Point_pick(chart.options.chart.animation, stateOptions.animation);
var opacity_1 = pointAttribs.opacity;
// Some inactive points (e.g. slices in pie) should apply
// opacity also for their labels
if (series.options.inactiveOtherPoints && Point_isNumber(opacity_1)) {
(point.dataLabels || []).forEach(function (label) {
if (label &&
!label.hasClass('highcharts-data-label-hidden')) {
label.animate({ opacity: opacity_1 }, pointAttribsAnimation);
if (label.connector) {
label.connector.animate({ opacity: opacity_1 }, pointAttribsAnimation);
}
}
});
}
point.graphic.animate(pointAttribs, pointAttribsAnimation);
}
if (markerAttribs) {
point.graphic.animate(markerAttribs, Point_pick(
// Turn off globally:
chart.options.chart.animation, markerStateOptions.animation, markerOptions.animation));
}
// Zooming in from a range with no markers to a range with markers
if (stateMarkerGraphic) {
stateMarkerGraphic.hide();
}
}
else {
// If a graphic is not applied to each point in the normal state,
// create a shared graphic for the hover state
if (state && markerStateOptions) {
newSymbol = pointMarker.symbol || series.symbol;
// If the point has another symbol than the previous one, throw
// away the state marker graphic and force a new one (#1459)
if (stateMarkerGraphic &&
stateMarkerGraphic.currentSymbol !== newSymbol) {
stateMarkerGraphic = stateMarkerGraphic.destroy();
}
// Add a new state marker graphic
if (markerAttribs) {
if (!stateMarkerGraphic) {
if (newSymbol) {
series.stateMarkerGraphic = stateMarkerGraphic =
chart.renderer
.symbol(newSymbol, markerAttribs.x, markerAttribs.y, markerAttribs.width, markerAttribs.height, Point_merge(markerOptions, markerStateOptions))
.add(series.markerGroup);
stateMarkerGraphic.currentSymbol = newSymbol;
}
// Move the existing graphic
}
else {
stateMarkerGraphic[move ? 'animate' : 'attr']({
x: markerAttribs.x,
y: markerAttribs.y
});
}
}
if (!chart.styledMode && stateMarkerGraphic &&
point.state !== 'inactive') {
stateMarkerGraphic.attr(series.pointAttribs(point, state));
}
}
if (stateMarkerGraphic) {
stateMarkerGraphic[state && point.isInside ? 'show' : 'hide'](); // #2450
stateMarkerGraphic.element.point = point; // #4310
stateMarkerGraphic.addClass(point.getClassName(), true);
}
}
// Show me your halo
var haloOptions = stateOptions.halo;
var markerGraphic = (point.graphic || stateMarkerGraphic);
var markerVisibility = (markerGraphic && markerGraphic.visibility || 'inherit');
if (haloOptions &&
haloOptions.size &&
markerGraphic &&
markerVisibility !== 'hidden' &&
!point.isCluster) {
if (!halo) {
series.halo = halo = chart.renderer.path()
// #5818, #5903, #6705
.add(markerGraphic.parentGroup);
}
halo.show()[move ? 'animate' : 'attr']({
d: point.haloPath(haloOptions.size)
});
halo.attr({
'class': 'highcharts-halo highcharts-color-' +
Point_pick(point.colorIndex, series.colorIndex) +
(point.className ? ' ' + point.className : ''),
'visibility': markerVisibility,
'zIndex': -1 // #4929, #8276
});
halo.point = point; // #6055
if (!chart.styledMode) {
halo.attr(Point_extend({
'fill': point.color || series.color,
'fill-opacity': haloOptions.opacity
}, HTML_AST.filterUserAttributes(haloOptions.attributes || {})));
}
}
else if (((_a = halo === null || halo === void 0 ? void 0 : halo.point) === null || _a === void 0 ? void 0 : _a.haloPath) &&
!halo.point.destroyed) {
// Animate back to 0 on the current halo point (#6055)
halo.animate({ d: halo.point.haloPath(0) }, null,
// Hide after unhovering. The `complete` callback runs in the
// halo's context (#7681).
halo.hide);
}
Point_fireEvent(point, 'afterSetState', { state: state });
};
/**
* Get the path definition for the halo, which is usually a shadow-like
* circle around the currently hovered point.
*
* @function Highcharts.Point#haloPath
*
* @param {number} size
* The radius of the circular halo.
*
* @return {Highcharts.SVGPathArray}
* The path definition.
*/
Point.prototype.haloPath = function (size) {
var pos = this.pos();
return pos ? this.series.chart.renderer.symbols.circle(Point_crisp(pos[0], 1) - size, pos[1] - size, size * 2, size * 2) : [];
};
return Point;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Series_Point = (Point);
/* *
*
* API Declarations
*
* */
/**
* Function callback when a series point is clicked. Return false to cancel the
* action.
*
* @callback Highcharts.PointClickCallbackFunction
*
* @param {Highcharts.Point} this
* The point where the event occurred.
*
* @param {Highcharts.PointClickEventObject} event
* Event arguments.
*/
/**
* Common information for a click event on a series point.
*
* @interface Highcharts.PointClickEventObject
* @extends Highcharts.PointerEventObject
*/ /**
* Clicked point.
* @name Highcharts.PointClickEventObject#point
* @type {Highcharts.Point}
*/
/**
* Gets fired when the mouse leaves the area close to the point.
*
* @callback Highcharts.PointMouseOutCallbackFunction
*
* @param {Highcharts.Point} this
* Point where the event occurred.
*
* @param {global.PointerEvent} event
* Event that occurred.
*/
/**
* Gets fired when the mouse enters the area close to the point.
*
* @callback Highcharts.PointMouseOverCallbackFunction
*
* @param {Highcharts.Point} this
* Point where the event occurred.
*
* @param {global.Event} event
* Event that occurred.
*/
/**
* The generic point options for all series.
*
* In TypeScript you have to extend `PointOptionsObject` with an additional
* declaration to allow custom data options:
*
* ```
* declare interface PointOptionsObject {
* customProperty: string;
* }
* ```
*
* @interface Highcharts.PointOptionsObject
*/
/**
* Possible option types for a data point. Use `null` to indicate a gap.
*
* @typedef {number|string|Highcharts.PointOptionsObject|Array<(number|string|null)>|null} Highcharts.PointOptionsType
*/
/**
* Gets fired when the point is removed using the `.remove()` method.
*
* @callback Highcharts.PointRemoveCallbackFunction
*
* @param {Highcharts.Point} this
* Point where the event occurred.
*
* @param {global.Event} event
* Event that occurred.
*/
/**
* Possible key values for the point state options.
*
* @typedef {"hover"|"inactive"|"normal"|"select"} Highcharts.PointStateValue
*/
/**
* Gets fired when the point is updated programmatically through the `.update()`
* method.
*
* @callback Highcharts.PointUpdateCallbackFunction
*
* @param {Highcharts.Point} this
* Point where the event occurred.
*
* @param {Highcharts.PointUpdateEventObject} event
* Event that occurred.
*/
/**
* Information about the update event.
*
* @interface Highcharts.PointUpdateEventObject
* @extends global.Event
*/ /**
* Options data of the update event.
* @name Highcharts.PointUpdateEventObject#options
* @type {Highcharts.PointOptionsType}
*/
/**
* @interface Highcharts.PointEventsOptionsObject
*/ /**
* Fires when the point is selected either programmatically or following a click
* on the point. One parameter, `event`, is passed to the function. Returning
* `false` cancels the operation.
* @name Highcharts.PointEventsOptionsObject#select
* @type {Highcharts.PointSelectCallbackFunction|undefined}
*/ /**
* Fires when the point is unselected either programmatically or following a
* click on the point. One parameter, `event`, is passed to the function.
* Returning `false` cancels the operation.
* @name Highcharts.PointEventsOptionsObject#unselect
* @type {Highcharts.PointUnselectCallbackFunction|undefined}
*/
/**
* Information about the select/unselect event.
*
* @interface Highcharts.PointInteractionEventObject
* @extends global.Event
*/ /**
* @name Highcharts.PointInteractionEventObject#accumulate
* @type {boolean}
*/
/**
* Gets fired when the point is selected either programmatically or following a
* click on the point.
*
* @callback Highcharts.PointSelectCallbackFunction
*
* @param {Highcharts.Point} this
* Point where the event occurred.
*
* @param {Highcharts.PointInteractionEventObject} event
* Event that occurred.
*/
/**
* Fires when the point is unselected either programmatically or following a
* click on the point.
*
* @callback Highcharts.PointUnselectCallbackFunction
*
* @param {Highcharts.Point} this
* Point where the event occurred.
*
* @param {Highcharts.PointInteractionEventObject} event
* Event that occurred.
*/
''; // Keeps doclets above in JS file.
;// ./code/es5/es-modules/Core/Pointer.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Pointer_assign = (undefined && undefined.__assign) || function () {
Pointer_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return Pointer_assign.apply(this, arguments);
};
var Pointer_color = Color_Color.parse;
var Pointer_charts = Core_Globals.charts, Pointer_composed = Core_Globals.composed, Pointer_isTouchDevice = Core_Globals.isTouchDevice;
var Pointer_addEvent = Core_Utilities.addEvent, Pointer_attr = Core_Utilities.attr, Pointer_css = Core_Utilities.css, Pointer_extend = Core_Utilities.extend, Pointer_find = Core_Utilities.find, Pointer_fireEvent = Core_Utilities.fireEvent, Pointer_isNumber = Core_Utilities.isNumber, Pointer_isObject = Core_Utilities.isObject, Pointer_objectEach = Core_Utilities.objectEach, Pointer_offset = Core_Utilities.offset, Pointer_pick = Core_Utilities.pick, Pointer_pushUnique = Core_Utilities.pushUnique, Pointer_splat = Core_Utilities.splat;
/* *
*
* Class
*
* */
/**
* The mouse and touch tracker object. Each {@link Chart} item has one
* associated Pointer item that can be accessed from the {@link Chart.pointer}
* property.
*
* @class
* @name Highcharts.Pointer
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {Highcharts.Options} options
* The root options object. The pointer uses options from the chart and tooltip
* structures.
*/
var Pointer = /** @class */ (function () {
/**
* Initialize the Pointer.
*
* @private
* @function Highcharts.Pointer#init
*
* @param {Highcharts.Chart} chart
* The Chart instance.
*
* @param {Highcharts.Options} options
* The root options object. The pointer uses options from the chart and
* tooltip structures.
*/
function Pointer(chart, options) {
var _a;
this.hasDragged = 0;
this.pointerCaptureEventsToUnbind = [];
this.eventsToUnbind = [];
// Store references
this.options = options;
this.chart = chart;
// Do we need to handle click on a touch device?
this.runChartClick = Boolean((_a = options.chart.events) === null || _a === void 0 ? void 0 : _a.click);
this.pinchDown = [];
this.setDOMEvents();
Pointer_fireEvent(this, 'afterInit');
}
/* *
*
* Functions
*
* */
/**
* Set inactive state to all series that are not currently hovered,
* or, if `inactiveOtherPoints` is set to true, set inactive state to
* all points within that series.
*
* @private
* @function Highcharts.Pointer#applyInactiveState
*
* @param {Array<Highcharts.Point>} points
* Currently hovered points
*/
Pointer.prototype.applyInactiveState = function (points) {
var activeSeries = [],
series;
// Get all active series from the hovered points
(points || []).forEach(function (item) {
series = item.series;
// Include itself
activeSeries.push(series);
// Include parent series
if (series.linkedParent) {
activeSeries.push(series.linkedParent);
}
// Include all child series
if (series.linkedSeries) {
activeSeries = activeSeries.concat(series.linkedSeries);
}
// Include navigator series
if (series.navigatorSeries) {
activeSeries.push(series.navigatorSeries);
}
});
// Now loop over all series, filtering out active series
this.chart.series.forEach(function (inactiveSeries) {
if (activeSeries.indexOf(inactiveSeries) === -1) {
// Inactive series
inactiveSeries.setState('inactive', true);
}
else if (inactiveSeries.options.inactiveOtherPoints) {
// Active series, but other points should be inactivated
inactiveSeries.setAllPointsToState('inactive');
}
});
};
/**
* Destroys the Pointer object and disconnects DOM events.
*
* @function Highcharts.Pointer#destroy
*/
Pointer.prototype.destroy = function () {
var pointer = this;
this.eventsToUnbind.forEach(function (unbind) { return unbind(); });
this.eventsToUnbind = [];
if (!Core_Globals.chartCount) {
Pointer.unbindDocumentMouseUp.forEach(function (el) { return el.unbind(); });
Pointer.unbindDocumentMouseUp.length = 0;
if (Pointer.unbindDocumentTouchEnd) {
Pointer.unbindDocumentTouchEnd = (Pointer.unbindDocumentTouchEnd());
}
}
// Memory and CPU leak
clearInterval(pointer.tooltipTimeout);
Pointer_objectEach(pointer, function (_val, prop) {
pointer[prop] = void 0;
});
};
/**
* Calculate attrs for selection marker.
* @private
* @function Highcharts.Pointer#getSelectionMarkerAttrs
* @emits getSelectionMarkerAttrs
*/
Pointer.prototype.getSelectionMarkerAttrs = function (chartX, chartY) {
var _this = this;
var e = {
args: { chartX: chartX,
chartY: chartY },
attrs: {},
shapeType: 'rect'
};
Pointer_fireEvent(this, 'getSelectionMarkerAttrs', e, function (e) {
var _a = _this,
chart = _a.chart,
zoomHor = _a.zoomHor,
zoomVert = _a.zoomVert,
_b = chart.mouseDownX,
mouseDownX = _b === void 0 ? 0 : _b,
_c = chart.mouseDownY,
mouseDownY = _c === void 0 ? 0 : _c,
attrs = e.attrs;
var size;
attrs.x = chart.plotLeft;
attrs.y = chart.plotTop;
attrs.width = zoomHor ? 1 : chart.plotWidth;
attrs.height = zoomVert ? 1 : chart.plotHeight;
// Adjust the width of the selection marker. Firefox needs at
// least one pixel width or height in order to return a bounding
// box.
if (zoomHor) {
size = chartX - mouseDownX;
attrs.width = Math.max(1, Math.abs(size));
attrs.x = (size > 0 ? 0 : size) + mouseDownX;
}
// Adjust the height of the selection marker
if (zoomVert) {
size = chartY - mouseDownY;
attrs.height = Math.max(1, Math.abs(size));
attrs.y = (size > 0 ? 0 : size) + mouseDownY;
}
});
return e;
};
/**
* Perform a drag operation in response to a mousemove event while the mouse
* is down.
* @private
* @function Highcharts.Pointer#drag
*/
Pointer.prototype.drag = function (e) {
var chart = this.chart,
_a = chart.mouseDownX,
mouseDownX = _a === void 0 ? 0 : _a,
_b = chart.mouseDownY,
mouseDownY = _b === void 0 ? 0 : _b,
_c = chart.options.chart,
panning = _c.panning,
panKey = _c.panKey,
selectionMarkerFill = _c.selectionMarkerFill,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth,
plotHeight = chart.plotHeight,
panningEnabled = Pointer_isObject(panning) ?
panning.enabled :
panning,
panKeyPressed = panKey && e["" + panKey + "Key"];
var chartX = e.chartX,
chartY = e.chartY,
clickedInside,
selectionMarker = this.selectionMarker;
// If the device supports both touch and mouse (like IE11), and we are
// touch-dragging inside the plot area, don't handle the mouse event.
// #4339.
if (selectionMarker && selectionMarker.touch) {
return;
}
// If the mouse is outside the plot area, adjust to coordinates
// inside to prevent the selection marker from going outside
if (chartX < plotLeft) {
chartX = plotLeft;
}
else if (chartX > plotLeft + plotWidth) {
chartX = plotLeft + plotWidth;
}
if (chartY < plotTop) {
chartY = plotTop;
}
else if (chartY > plotTop + plotHeight) {
chartY = plotTop + plotHeight;
}
// Determine if the mouse has moved more than 10px
this.hasDragged = Math.sqrt(Math.pow(mouseDownX - chartX, 2) +
Math.pow(mouseDownY - chartY, 2));
if (this.hasDragged > 10) {
clickedInside = chart.isInsidePlot(mouseDownX - plotLeft, mouseDownY - plotTop, {
visiblePlotOnly: true
});
var _d = this.getSelectionMarkerAttrs(chartX,
chartY),
shapeType = _d.shapeType,
attrs = _d.attrs;
// Make a selection
if ((chart.hasCartesianSeries || chart.mapView) &&
this.hasZoom &&
clickedInside &&
!panKeyPressed) {
if (!selectionMarker) {
this.selectionMarker = selectionMarker =
chart.renderer[shapeType]();
selectionMarker
.attr({
'class': 'highcharts-selection-marker',
zIndex: 7
})
.add();
if (!chart.styledMode) {
selectionMarker.attr({
fill: selectionMarkerFill ||
Pointer_color("#334eff" /* Palette.highlightColor80 */)
.setOpacity(0.25).get()
});
}
}
}
if (selectionMarker) {
selectionMarker.attr(attrs);
}
// Panning
if (clickedInside && !selectionMarker && panningEnabled) {
chart.pan(e, panning);
}
}
};
/**
* Start a drag operation.
* @private
* @function Highcharts.Pointer#dragStart
*/
Pointer.prototype.dragStart = function (e) {
var chart = this.chart;
// Record the start position
chart.mouseIsDown = e.type;
chart.cancelClick = false;
chart.mouseDownX = e.chartX;
chart.mouseDownY = e.chartY;
};
/**
* Get selection box to calculate extremes
* @private
* @function Highcharts.Pointer#getSelectionBox
* @emits getSelectionBox
*/
Pointer.prototype.getSelectionBox = function (marker) {
var e = {
args: { marker: marker },
result: marker.getBBox()
};
Pointer_fireEvent(this, 'getSelectionBox', e);
return e.result;
};
/**
* On mouse up or touch end across the entire document, drop the selection.
* @private
* @function Highcharts.Pointer#drop
*/
Pointer.prototype.drop = function (e) {
var _this = this;
var _a = this,
chart = _a.chart,
selectionMarker = _a.selectionMarker;
// During a mouse, touch or mousewheel pan, the `startOnTick` and
// `endOnTick` options are ignored. Otherwise the zooming or panning
// would be jumpy, or even not performed because the end ticks would
// block it. After the touch has ended, we undo this and render again.
var redraw;
for (var _i = 0, _b = chart.axes; _i < _b.length; _i++) {
var axis = _b[_i];
if (axis.isPanning) {
axis.isPanning = false;
if (axis.options.startOnTick ||
axis.options.endOnTick ||
axis.series.some(function (s) { return s.boosted; })) {
axis.forceRedraw = true;
axis.setExtremes(axis.userMin, axis.userMax, false);
redraw = true;
}
}
}
if (redraw) {
chart.redraw();
}
if (selectionMarker && e) {
// A selection has been made
if (this.hasDragged) {
var from = this.getSelectionBox(selectionMarker);
chart.transform({
axes: chart.axes.filter(function (a) {
return a.zoomEnabled &&
((a.coll === 'xAxis' && _this.zoomX) ||
(a.coll === 'yAxis' && _this.zoomY));
}),
selection: Pointer_assign({ originalEvent: e, xAxis: [], yAxis: [] }, from),
from: from
});
}
if (Pointer_isNumber(chart.index)) {
this.selectionMarker = selectionMarker.destroy();
}
}
// Reset all. Check isNumber because it may be destroyed on mouse up
// (#877)
if (chart && Pointer_isNumber(chart.index)) {
Pointer_css(chart.container, { cursor: chart._cursor });
chart.cancelClick = this.hasDragged > 10; // #370
chart.mouseIsDown = false;
this.hasDragged = 0;
this.pinchDown = [];
}
};
/**
* Finds the closest point to a set of coordinates, using the k-d-tree
* algorithm.
*
* @function Highcharts.Pointer#findNearestKDPoint
*
* @param {Array<Highcharts.Series>} series
* All the series to search in.
*
* @param {boolean|undefined} shared
* Whether it is a shared tooltip or not.
*
* @param {Highcharts.PointerEventObject} e
* The pointer event object, containing chart coordinates of the pointer.
*
* @return {Highcharts.Point|undefined}
* The point closest to given coordinates.
*/
Pointer.prototype.findNearestKDPoint = function (series, shared, e) {
var closest;
/** @private */
function sort(p1, p2) {
var _a,
_b;
var isCloserX = p1.distX - p2.distX,
isCloser = p1.dist - p2.dist,
isAbove = (((_a = p2.series.group) === null || _a === void 0 ? void 0 : _a.zIndex) -
((_b = p1.series.group) === null || _b === void 0 ? void 0 : _b.zIndex));
var result;
// We have two points which are not in the same place on xAxis
// and shared tooltip:
if (isCloserX !== 0 && shared) { // #5721
result = isCloserX;
// Points are not exactly in the same place on x/yAxis:
}
else if (isCloser !== 0) {
result = isCloser;
// The same xAxis and yAxis position, sort by z-index:
}
else if (isAbove !== 0) {
result = isAbove;
// The same zIndex, sort by array index:
}
else {
result =
p1.series.index > p2.series.index ?
-1 :
1;
}
return result;
}
series.forEach(function (s) {
var noSharedTooltip = s.noSharedTooltip && shared,
compareX = (!noSharedTooltip &&
s.options.findNearestPointBy.indexOf('y') < 0),
point = s.searchPoint(e,
compareX);
if ( // Check that we actually found a point on the series.
Pointer_isObject(point, true) && point.series &&
// Use the new point if it is closer.
(!Pointer_isObject(closest, true) ||
(sort(closest, point) > 0))) {
closest = point;
}
});
return closest;
};
/**
* @private
* @function Highcharts.Pointer#getChartCoordinatesFromPoint
*/
Pointer.prototype.getChartCoordinatesFromPoint = function (point, inverted) {
var _a,
_b;
var _c = point.series,
xAxis = _c.xAxis,
yAxis = _c.yAxis,
shapeArgs = point.shapeArgs;
if (xAxis && yAxis) {
var x = (_b = (_a = point.clientX) !== null && _a !== void 0 ? _a : point.plotX) !== null && _b !== void 0 ? _b : 0,
y = point.plotY || 0;
if (point.isNode &&
shapeArgs &&
Pointer_isNumber(shapeArgs.x) &&
Pointer_isNumber(shapeArgs.y)) {
x = shapeArgs.x;
y = shapeArgs.y;
}
return inverted ? {
chartX: yAxis.len + yAxis.pos - y,
chartY: xAxis.len + xAxis.pos - x
} : {
chartX: x + xAxis.pos,
chartY: y + yAxis.pos
};
}
if (shapeArgs && shapeArgs.x && shapeArgs.y) {
// E.g. pies do not have axes
return {
chartX: shapeArgs.x,
chartY: shapeArgs.y
};
}
};
/**
* Return the cached chartPosition if it is available on the Pointer,
* otherwise find it. Running offset is quite expensive, so it should be
* avoided when we know the chart hasn't moved.
*
* @function Highcharts.Pointer#getChartPosition
*
* @return {Highcharts.ChartPositionObject}
* The offset of the chart container within the page
*/
Pointer.prototype.getChartPosition = function () {
if (this.chartPosition) {
return this.chartPosition;
}
var container = this.chart.container;
var pos = Pointer_offset(container);
this.chartPosition = {
left: pos.left,
top: pos.top,
scaleX: 1,
scaleY: 1
};
var offsetHeight = container.offsetHeight,
offsetWidth = container.offsetWidth;
// #13342 - tooltip was not visible in Chrome, when chart
// updates height.
if (offsetWidth > 2 && // #13342
offsetHeight > 2 // #13342
) {
this.chartPosition.scaleX = pos.width / offsetWidth;
this.chartPosition.scaleY = pos.height / offsetHeight;
}
return this.chartPosition;
};
/**
* Get the click position in terms of axis values.
*
* @function Highcharts.Pointer#getCoordinates
*
* @param {Highcharts.PointerEventObject} e
* Pointer event, extended with `chartX` and `chartY` properties.
*
* @return {Highcharts.PointerAxisCoordinatesObject}
* Axis coordinates.
*/
Pointer.prototype.getCoordinates = function (e) {
var coordinates = {
xAxis: [],
yAxis: []
};
for (var _i = 0, _a = this.chart.axes; _i < _a.length; _i++) {
var axis = _a[_i];
coordinates[axis.isXAxis ? 'xAxis' : 'yAxis'].push({
axis: axis,
value: axis.toValue(e[axis.horiz ? 'chartX' : 'chartY'])
});
}
return coordinates;
};
/**
* Calculates what is the current hovered point/points and series.
*
* @private
* @function Highcharts.Pointer#getHoverData
*
* @param {Highcharts.Point|undefined} existingHoverPoint
* The point currently being hovered.
*
* @param {Highcharts.Series|undefined} existingHoverSeries
* The series currently being hovered.
*
* @param {Array<Highcharts.Series>} series
* All the series in the chart.
*
* @param {boolean} isDirectTouch
* Is the pointer directly hovering the point.
*
* @param {boolean|undefined} shared
* Whether it is a shared tooltip or not.
*
* @param {Highcharts.PointerEventObject} [e]
* The triggering event, containing chart coordinates of the pointer.
*
* @return {Object}
* Object containing resulting hover data: hoverPoint, hoverSeries, and
* hoverPoints.
*/
Pointer.prototype.getHoverData = function (existingHoverPoint, existingHoverSeries, series, isDirectTouch, shared, e) {
var hoverPoints = [],
useExisting = !!(isDirectTouch && existingHoverPoint),
filter = function (s) {
return (s.visible &&
!(!shared && s.directTouch) && // #3821
Pointer_pick(s.options.enableMouseTracking,
true));
};
var hoverSeries = existingHoverSeries,
// Which series to look in for the hover point
searchSeries,
// Parameters needed for beforeGetHoverData event.
eventArgs = {
chartX: e ? e.chartX : void 0,
chartY: e ? e.chartY : void 0,
shared: shared
};
// Find chart.hoverPane and update filter method in polar.
Pointer_fireEvent(this, 'beforeGetHoverData', eventArgs);
var notSticky = hoverSeries && !hoverSeries.stickyTracking;
searchSeries = notSticky ?
// Only search on hovered series if it has stickyTracking false
[hoverSeries] :
// Filter what series to look in.
series.filter(function (s) { return s.stickyTracking &&
(eventArgs.filter || filter)(s); });
// Use existing hovered point or find the one closest to coordinates.
var hoverPoint = useExisting || !e ?
existingHoverPoint :
this.findNearestKDPoint(searchSeries,
shared,
e);
// Assign hover series
hoverSeries = hoverPoint && hoverPoint.series;
// If we have a hoverPoint, assign hoverPoints.
if (hoverPoint) {
// When tooltip is shared, it displays more than one point
if (shared && !hoverSeries.noSharedTooltip) {
searchSeries = series.filter(function (s) {
return eventArgs.filter ?
eventArgs.filter(s) : filter(s) && !s.noSharedTooltip;
});
// Get all points with the same x value as the hoverPoint
searchSeries.forEach(function (s) {
var point = Pointer_find(s.points,
function (p) {
return p.x === hoverPoint.x && !p.isNull;
});
if (Pointer_isObject(point)) {
/*
* Boost returns a minimal point. Convert it to a usable
* point for tooltip and states.
*/
if (s.boosted && s.boost) {
point = s.boost.getPoint(point);
}
hoverPoints.push(point);
}
});
}
else {
hoverPoints.push(hoverPoint);
}
}
// Check whether the hoverPoint is inside pane we are hovering over.
eventArgs = { hoverPoint: hoverPoint };
Pointer_fireEvent(this, 'afterGetHoverData', eventArgs);
return {
hoverPoint: eventArgs.hoverPoint,
hoverSeries: hoverSeries,
hoverPoints: hoverPoints
};
};
/**
* @private
* @function Highcharts.Pointer#getPointFromEvent
*/
Pointer.prototype.getPointFromEvent = function (e) {
var target = e.target,
point;
while (target && !point) {
point = target.point;
target = target.parentNode;
}
return point;
};
/**
* @private
* @function Highcharts.Pointer#onTrackerMouseOut
*/
Pointer.prototype.onTrackerMouseOut = function (e) {
var chart = this.chart;
var relatedTarget = e.relatedTarget;
var series = chart.hoverSeries;
this.isDirectTouch = false;
if (series &&
relatedTarget &&
!series.stickyTracking &&
!this.inClass(relatedTarget, 'highcharts-tooltip') &&
(!this.inClass(relatedTarget, 'highcharts-series-' + series.index) || // #2499, #4465, #5553
!this.inClass(relatedTarget, 'highcharts-tracker'))) {
series.onMouseOut();
}
};
/**
* Utility to detect whether an element has, or has a parent with, a
* specific class name. Used on detection of tracker objects and on deciding
* whether hovering the tooltip should cause the active series to mouse out.
*
* @function Highcharts.Pointer#inClass
*
* @param {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} element
* The element to investigate.
*
* @param {string} className
* The class name to look for.
*
* @return {boolean|undefined}
* True if either the element or one of its parents has the given class
* name.
*/
Pointer.prototype.inClass = function (element, className) {
var elem = element,
elemClassName;
while (elem) {
elemClassName = Pointer_attr(elem, 'class');
if (elemClassName) {
if (elemClassName.indexOf(className) !== -1) {
return true;
}
if (elemClassName.indexOf('highcharts-container') !== -1) {
return false;
}
}
elem = elem.parentElement;
}
};
/**
* Takes a browser event object and extends it with custom Highcharts
* properties `chartX` and `chartY` in order to work on the internal
* coordinate system.
*
* On map charts, the properties `lon` and `lat` are added to the event
* object given that the chart has projection information.
*
* @function Highcharts.Pointer#normalize
*
* @param {global.MouseEvent|global.PointerEvent|global.TouchEvent} e
* Event object in standard browsers.
*
* @param {Highcharts.OffsetObject} [chartPosition]
* Additional chart offset.
*
* @return {Highcharts.PointerEventObject}
* A browser event with extended properties `chartX` and `chartY`.
*/
Pointer.prototype.normalize = function (e, chartPosition) {
var touches = e.touches;
// Position for iOS (#2757)
var ePos = (touches ?
touches.length ?
touches.item(0) :
(Pointer_pick(// #13534
touches.changedTouches,
e.changedTouches))[0] :
e);
// Get mouse position
if (!chartPosition) {
chartPosition = this.getChartPosition();
}
var chartX = ePos.pageX - chartPosition.left,
chartY = ePos.pageY - chartPosition.top;
// #11329 - when there is scaling on a parent element, we need to take
// this into account
chartX /= chartPosition.scaleX;
chartY /= chartPosition.scaleY;
return Pointer_extend(e, {
chartX: Math.round(chartX),
chartY: Math.round(chartY)
});
};
/**
* @private
* @function Highcharts.Pointer#onContainerClick
*/
Pointer.prototype.onContainerClick = function (e) {
var chart = this.chart;
var hoverPoint = chart.hoverPoint;
var pEvt = this.normalize(e);
var plotLeft = chart.plotLeft;
var plotTop = chart.plotTop;
if (!chart.cancelClick) {
// On tracker click, fire the series and point events. #783, #1583
if (hoverPoint &&
this.inClass(pEvt.target, 'highcharts-tracker')) {
// The series click event
Pointer_fireEvent(hoverPoint.series, 'click', Pointer_extend(pEvt, {
point: hoverPoint
}));
// The point click event
if (chart.hoverPoint) { // It may be destroyed (#1844)
hoverPoint.firePointEvent('click', pEvt);
}
// When clicking outside a tracker, fire a chart event
}
else {
Pointer_extend(pEvt, this.getCoordinates(pEvt));
// Fire a click event in the chart
if (chart.isInsidePlot(pEvt.chartX - plotLeft, pEvt.chartY - plotTop, {
visiblePlotOnly: true
})) {
Pointer_fireEvent(chart, 'click', pEvt);
}
}
}
};
/**
* @private
* @function Highcharts.Pointer#onContainerMouseDown
*/
Pointer.prototype.onContainerMouseDown = function (e) {
var _a;
var isPrimaryButton = ((e.buttons || e.button) & 1) === 1;
e = this.normalize(e);
// #11635, Firefox does not reliably fire move event after click scroll
if (Core_Globals.isFirefox &&
e.button !== 0) {
this.onContainerMouseMove(e);
}
// #11635, limiting to primary button
if (typeof e.button === 'undefined' ||
isPrimaryButton) {
this.zoomOption(e);
// #295, #13737 solve conflict between container drag and chart zoom
if (isPrimaryButton) {
(_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
}
this.dragStart(e);
}
};
/**
* When mouse leaves the container, hide the tooltip.
* @private
* @function Highcharts.Pointer#onContainerMouseLeave
*/
Pointer.prototype.onContainerMouseLeave = function (e) {
var pointer = (Pointer_charts[Pointer_pick(Pointer.hoverChartIndex, -1)] || {}).pointer;
e = this.normalize(e);
this.onContainerMouseMove(e);
// #4886, MS Touch end fires mouseleave but with no related target
if (pointer &&
!this.inClass(e.relatedTarget, 'highcharts-tooltip')) {
pointer.reset();
// Also reset the chart position, used in #149 fix
pointer.chartPosition = void 0;
}
};
/**
* When mouse enters the container, delete pointer's chartPosition.
* @private
* @function Highcharts.Pointer#onContainerMouseEnter
*/
Pointer.prototype.onContainerMouseEnter = function () {
delete this.chartPosition;
};
/**
* The mousemove, touchmove and touchstart event handler
* @private
* @function Highcharts.Pointer#onContainerMouseMove
*/
Pointer.prototype.onContainerMouseMove = function (e) {
var chart = this.chart,
tooltip = chart.tooltip,
pEvt = this.normalize(e);
this.setHoverChartIndex(e);
if (chart.mouseIsDown === 'mousedown' || this.touchSelect(pEvt)) {
this.drag(pEvt);
}
// Show the tooltip and run mouse over events (#977)
if (!chart.openMenu &&
(this.inClass(pEvt.target, 'highcharts-tracker') ||
chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
visiblePlotOnly: true
})) &&
// If the tooltip has stickOnContact enabled, do nothing. This
// applies regardless of any combinations of the `split` and
// `useHTML` options.
!(tooltip &&
tooltip.shouldStickOnContact(pEvt))) {
if (this.inClass(pEvt.target, 'highcharts-no-tooltip')) {
this.reset(false, 0);
}
else {
this.runPointActions(pEvt);
}
}
};
/**
* @private
* @function Highcharts.Pointer#onDocumentTouchEnd
*/
Pointer.prototype.onDocumentTouchEnd = function (e) {
this.onDocumentMouseUp(e);
};
/**
* @private
* @function Highcharts.Pointer#onContainerTouchMove
*/
Pointer.prototype.onContainerTouchMove = function (e) {
if (this.touchSelect(e)) {
this.onContainerMouseMove(e);
}
else {
this.touch(e);
}
};
/**
* @private
* @function Highcharts.Pointer#onContainerTouchStart
*/
Pointer.prototype.onContainerTouchStart = function (e) {
if (this.touchSelect(e)) {
this.onContainerMouseDown(e);
}
else {
this.zoomOption(e);
this.touch(e, true);
}
};
/**
* Special handler for mouse move that will hide the tooltip when the mouse
* leaves the plotarea. Issue #149 workaround. The mouseleave event does not
* always fire.
* @private
* @function Highcharts.Pointer#onDocumentMouseMove
*/
Pointer.prototype.onDocumentMouseMove = function (e) {
var chart = this.chart;
var tooltip = chart.tooltip;
var chartPosition = this.chartPosition;
var pEvt = this.normalize(e,
chartPosition);
// If we're outside, hide the tooltip
if (chartPosition &&
!chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
visiblePlotOnly: true
}) &&
!(tooltip &&
tooltip.shouldStickOnContact(pEvt)) && (pEvt.target === chart.container.ownerDocument ||
!this.inClass(pEvt.target, 'highcharts-tracker'))) {
this.reset();
}
};
/**
* @private
* @function Highcharts.Pointer#onDocumentMouseUp
*/
Pointer.prototype.onDocumentMouseUp = function (e) {
var _a,
_b;
(_b = (_a = Pointer_charts[Pointer_pick(Pointer.hoverChartIndex, -1)]) === null || _a === void 0 ? void 0 : _a.pointer) === null || _b === void 0 ? void 0 : _b.drop(e);
};
/**
* Handle touch events with two touches
* @private
* @function Highcharts.Pointer#pinch
*/
Pointer.prototype.pinch = function (e) {
var _this = this;
var pointer = this,
chart = pointer.chart,
hasZoom = pointer.hasZoom,
lastTouches = pointer.lastTouches,
touches = [].map.call(e.touches || [],
// Normalize each touch
function (touch) { return pointer.normalize(touch); }),
touchesLength = touches.length,
fireClickEvent = touchesLength === 1 && ((pointer.inClass(e.target, 'highcharts-tracker') &&
chart.runTrackerClick) ||
pointer.runChartClick),
tooltip = chart.tooltip,
followTouchMove = touchesLength === 1 &&
Pointer_pick(tooltip === null || tooltip === void 0 ? void 0 : tooltip.options.followTouchMove,
true);
// Don't initiate panning until the user has pinched. This prevents us
// from blocking page scrolling as users scroll down a long page
// (#4210).
if (touchesLength > 1) {
pointer.initiated = true;
}
else if (followTouchMove) {
// #16119: Prevent blocking scroll when single-finger panning is
// not enabled
pointer.initiated = false;
}
// On touch devices, only proceed to trigger click if a handler is
// defined
if (hasZoom &&
pointer.initiated &&
!fireClickEvent &&
e.cancelable !== false) {
e.preventDefault();
}
// Register the touch start position
if (e.type === 'touchstart') {
pointer.pinchDown = touches;
pointer.res = true; // Reset on next move
chart.mouseDownX = e.chartX;
// Optionally move the tooltip on touchmove
}
else if (followTouchMove) {
this.runPointActions(pointer.normalize(e));
// Event type is touchmove, handle panning and pinching. The length can
// be 0 when releasing, if touchend fires first
}
else if (lastTouches) {
Pointer_fireEvent(chart, 'touchpan', {
originalEvent: e,
touches: touches
}, function () {
var boxFromTouches = function (touches) {
var finger0 = touches[0],
finger1 = touches[1] || finger0;
return {
x: finger0.chartX,
y: finger0.chartY,
width: finger1.chartX - finger0.chartX,
height: finger1.chartY - finger0.chartY
};
};
chart.transform({
axes: chart.axes
.filter(function (axis) {
return axis.zoomEnabled &&
((_this.zoomHor && axis.horiz) ||
(_this.zoomVert && !axis.horiz));
}),
to: boxFromTouches(touches),
from: boxFromTouches(lastTouches),
trigger: e.type
});
});
if (pointer.res) {
pointer.res = false;
this.reset(false, 0);
}
}
pointer.lastTouches = touches;
};
/**
* Run translation operations
* @private
* @function Highcharts.Pointer#pinchTranslate
* /
public pinchTranslate(
pinchDown: Array<any>,
touches: Array<PointerEvent>,
transform: any,
selectionMarker: any,
clip: any,
lastValidTouch: any
): void {
if (this.zoomHor) {
this.pinchTranslateDirection(
true,
pinchDown,
touches,
transform,
selectionMarker,
clip,
lastValidTouch
);
}
if (this.zoomVert) {
this.pinchTranslateDirection(
false,
pinchDown,
touches,
transform,
selectionMarker,
clip,
lastValidTouch
);
}
}
*/
/**
* Run translation operations for each direction (horizontal and vertical)
* independently.
* @private
* @function Highcharts.Pointer#pinchTranslateDirection
* /
public pinchTranslateDirection(
horiz: boolean,
pinchDown: Array<any>,
touches: Array<PointerEvent>,
transform: any,
selectionMarker: any,
clip: any,
lastValidTouch: any,
forcedScale?: number
): void {
const chart = this.chart,
xy: ('x'|'y') = horiz ? 'x' : 'y',
XY: ('X'|'Y') = horiz ? 'X' : 'Y',
sChartXY: ('chartX'|'chartY') = ('chart' + XY) as any,
wh = horiz ? 'width' : 'height',
plotLeftTop = (chart as any)['plot' + (horiz ? 'Left' : 'Top')],
inverted = chart.inverted,
bounds = chart.bounds[horiz ? 'h' : 'v'],
singleTouch = pinchDown.length === 1,
touch0Start = pinchDown[0][sChartXY],
touch1Start = !singleTouch && pinchDown[1][sChartXY],
setScale = function (): void {
// Don't zoom if fingers are too close on this axis
if (
typeof touch1Now === 'number' &&
Math.abs(touch0Start - touch1Start) > 20
) {
scale = forcedScale ||
Math.abs(touch0Now - touch1Now) /
Math.abs(touch0Start - touch1Start);
}
clipXY = ((plotLeftTop - touch0Now) / scale) + touch0Start;
selectionWH = (chart as any)[
'plot' + (horiz ? 'Width' : 'Height')
] / scale;
};
let selectionWH: any,
selectionXY,
clipXY: any,
scale = forcedScale || 1,
touch0Now = touches[0][sChartXY],
touch1Now = !singleTouch && touches[1][sChartXY],
outOfBounds;
// Set the scale, first pass
setScale();
// The clip position (x or y) is altered if out of bounds, the selection
// position is not
selectionXY = clipXY;
// Out of bounds
if (selectionXY < bounds.min) {
selectionXY = bounds.min;
outOfBounds = true;
} else if (selectionXY + selectionWH > bounds.max) {
selectionXY = bounds.max - selectionWH;
outOfBounds = true;
}
// Is the chart dragged off its bounds, determined by dataMin and
// dataMax?
if (outOfBounds) {
// Modify the touchNow position in order to create an elastic drag
// movement. This indicates to the user that the chart is responsive
// but can't be dragged further.
touch0Now -= 0.8 * (touch0Now - lastValidTouch[xy][0]);
if (typeof touch1Now === 'number') {
touch1Now -= 0.8 * (touch1Now - lastValidTouch[xy][1]);
}
// Set the scale, second pass to adapt to the modified touchNow
// positions
setScale();
} else {
lastValidTouch[xy] = [touch0Now, touch1Now];
}
// Set geometry for clipping, selection and transformation
if (!inverted) {
clip[xy] = clipXY - plotLeftTop;
clip[wh] = selectionWH;
}
const scaleKey = inverted ?
(horiz ? 'scaleY' : 'scaleX') : 'scale' + XY;
const transformScale = inverted ? 1 / scale : scale;
selectionMarker[wh] = selectionWH;
selectionMarker[xy] = selectionXY;
// Invert scale if needed (#19217)
transform[scaleKey] = scale * (inverted && !horiz ? -1 : 1);
transform['translate' + XY] = (transformScale * plotLeftTop) +
(touch0Now - (transformScale * touch0Start));
}
*/
/**
* Reset the tracking by hiding the tooltip, the hover series state and the
* hover point
*
* @function Highcharts.Pointer#reset
*
* @param {boolean} [allowMove]
* Instead of destroying the tooltip altogether, allow moving it if
* possible.
*
* @param {number} [delay]
*/
Pointer.prototype.reset = function (allowMove, delay) {
var pointer = this,
chart = pointer.chart,
hoverSeries = chart.hoverSeries,
hoverPoint = chart.hoverPoint,
hoverPoints = chart.hoverPoints,
tooltip = chart.tooltip,
tooltipPoints = tooltip && tooltip.shared ?
hoverPoints :
hoverPoint;
// Check if the points have moved outside the plot area (#1003, #4736,
// #5101)
if (allowMove && tooltipPoints) {
Pointer_splat(tooltipPoints).forEach(function (point) {
if (point.series.isCartesian &&
typeof point.plotX === 'undefined') {
allowMove = false;
}
});
}
// Just move the tooltip, #349
if (allowMove) {
if (tooltip && tooltipPoints && Pointer_splat(tooltipPoints).length) {
tooltip.refresh(tooltipPoints);
if (tooltip.shared && hoverPoints) { // #8284
hoverPoints.forEach(function (point) {
point.setState(point.state, true);
if (point.series.isCartesian) {
if (point.series.xAxis.crosshair) {
point.series.xAxis
.drawCrosshair(null, point);
}
if (point.series.yAxis.crosshair) {
point.series.yAxis
.drawCrosshair(null, point);
}
}
});
}
else if (hoverPoint) { // #2500
hoverPoint.setState(hoverPoint.state, true);
chart.axes.forEach(function (axis) {
if (axis.crosshair &&
hoverPoint.series[axis.coll] === axis) {
axis.drawCrosshair(null, hoverPoint);
}
});
}
}
// Full reset
}
else {
if (hoverPoint) {
hoverPoint.onMouseOut();
}
if (hoverPoints) {
hoverPoints.forEach(function (point) {
point.setState();
});
}
if (hoverSeries) {
hoverSeries.onMouseOut();
}
if (tooltip) {
tooltip.hide(delay);
}
if (pointer.unDocMouseMove) {
pointer.unDocMouseMove = pointer.unDocMouseMove();
}
// Remove crosshairs
chart.axes.forEach(function (axis) {
axis.hideCrosshair();
});
chart.hoverPoints = chart.hoverPoint = void 0;
}
};
/**
* With line type charts with a single tracker, get the point closest to the
* mouse. Run Point.onMouseOver and display tooltip for the point or points.
*
* @private
* @function Highcharts.Pointer#runPointActions
*
* @emits Highcharts.Point#event:mouseOut
* @emits Highcharts.Point#event:mouseOver
*/
Pointer.prototype.runPointActions = function (e, p, force) {
var pointer = this,
chart = pointer.chart,
series = chart.series,
tooltip = (chart.tooltip && chart.tooltip.options.enabled ?
chart.tooltip :
void 0),
shared = (tooltip ?
tooltip.shared :
false);
var hoverPoint = p || chart.hoverPoint,
hoverSeries = hoverPoint && hoverPoint.series || chart.hoverSeries;
var // `onMouseOver` or already hovering a series with directTouch
isDirectTouch = (!e || e.type !== 'touchmove') && (!!p || ((hoverSeries && hoverSeries.directTouch) &&
pointer.isDirectTouch)),
hoverData = this.getHoverData(hoverPoint,
hoverSeries,
series,
isDirectTouch,
shared,
e);
// Update variables from hoverData.
hoverPoint = hoverData.hoverPoint;
hoverSeries = hoverData.hoverSeries;
var points = hoverData.hoverPoints,
followPointer = hoverSeries &&
hoverSeries.tooltipOptions.followPointer &&
!hoverSeries.tooltipOptions.split,
useSharedTooltip = (shared &&
hoverSeries &&
!hoverSeries.noSharedTooltip);
// Refresh tooltip for kdpoint if new hover point or tooltip was hidden
// #3926, #4200
if (hoverPoint &&
(force ||
hoverPoint !== chart.hoverPoint ||
(tooltip && tooltip.isHidden))) {
(chart.hoverPoints || []).forEach(function (p) {
if (points.indexOf(p) === -1) {
p.setState();
}
});
// Set normal state to previous series
if (chart.hoverSeries !== hoverSeries) {
hoverSeries.onMouseOver();
}
pointer.applyInactiveState(points);
// Do mouseover on all points (#3919, #3985, #4410, #5622)
(points || []).forEach(function (p) {
p.setState('hover');
});
// If tracking is on series in stead of on each point,
// fire mouseOver on hover point. // #4448
if (chart.hoverPoint) {
chart.hoverPoint.firePointEvent('mouseOut');
}
// Hover point may have been destroyed in the event handlers (#7127)
if (!hoverPoint.series) {
return;
}
/**
* Contains all hovered points.
*
* @name Highcharts.Chart#hoverPoints
* @type {Array<Highcharts.Point>|null}
*/
chart.hoverPoints = points;
/**
* Contains the original hovered point.
*
* @name Highcharts.Chart#hoverPoint
* @type {Highcharts.Point|null}
*/
chart.hoverPoint = hoverPoint;
/**
* Hover state should not be lost when axis is updated (#12569)
* Axis.update runs pointer.reset which uses chart.hoverPoint.state
* to apply state which does not exist in hoverPoint yet.
* The mouseOver event should be triggered when hoverPoint
* is correct.
*/
hoverPoint.firePointEvent('mouseOver', void 0, function () {
// Draw tooltip if necessary
if (tooltip && hoverPoint) {
tooltip.refresh(useSharedTooltip ? points : hoverPoint, e);
}
});
// Update positions (regardless of kdpoint or hoverPoint)
}
else if (followPointer && tooltip && !tooltip.isHidden) {
var anchor = tooltip.getAnchor([{}],
e);
if (chart.isInsidePlot(anchor[0], anchor[1], {
visiblePlotOnly: true
})) {
tooltip.updatePosition({ plotX: anchor[0], plotY: anchor[1] });
}
}
// Start the event listener to pick up the tooltip and crosshairs
if (!pointer.unDocMouseMove) {
pointer.unDocMouseMove = Pointer_addEvent(chart.container.ownerDocument, 'mousemove', function (e) {
var _a,
_b,
_c;
return (_c = (_b = Pointer_charts[(_a = Pointer.hoverChartIndex) !== null && _a !== void 0 ? _a : -1]) === null || _b === void 0 ? void 0 : _b.pointer) === null || _c === void 0 ? void 0 : _c.onDocumentMouseMove(e);
});
pointer.eventsToUnbind.push(pointer.unDocMouseMove);
}
// Issues related to crosshair #4927, #5269 #5066, #5658
chart.axes.forEach(function drawAxisCrosshair(axis) {
var snap = Pointer_pick((axis.crosshair || {}).snap,
true);
var point;
if (snap) {
point = chart.hoverPoint; // #13002
if (!point || point.series[axis.coll] !== axis) {
point = Pointer_find(points, function (p) {
return p.series && p.series[axis.coll] === axis;
});
}
}
// Axis has snapping crosshairs, and one of the hover points belongs
// to axis. Always call drawCrosshair when it is not snap.
if (point || !snap) {
axis.drawCrosshair(e, point);
// Axis has snapping crosshairs, but no hover point belongs to axis
}
else {
axis.hideCrosshair();
}
});
};
/**
* Set the JS DOM events on the container and document. This method should
* contain a one-to-one assignment between methods and their handlers. Any
* advanced logic should be moved to the handler reflecting the event's
* name.
* @private
* @function Highcharts.Pointer#setDOMEvents
*/
Pointer.prototype.setDOMEvents = function () {
var _this = this;
var container = this.chart.container,
ownerDoc = container.ownerDocument;
container.onmousedown = this.onContainerMouseDown.bind(this);
container.onmousemove = this.onContainerMouseMove.bind(this);
container.onclick = this.onContainerClick.bind(this);
this.eventsToUnbind.push(Pointer_addEvent(container, 'mouseenter', this.onContainerMouseEnter.bind(this)), Pointer_addEvent(container, 'mouseleave', this.onContainerMouseLeave.bind(this)));
if (!Pointer.unbindDocumentMouseUp.some(function (el) { return el.doc === ownerDoc; })) {
Pointer.unbindDocumentMouseUp.push({
doc: ownerDoc,
unbind: Pointer_addEvent(ownerDoc, 'mouseup', this.onDocumentMouseUp.bind(this))
});
}
// In case we are dealing with overflow, reset the chart position when
// scrolling parent elements
var parent = this.chart.renderTo.parentElement;
while (parent && parent.tagName !== 'BODY') {
this.eventsToUnbind.push(Pointer_addEvent(parent, 'scroll', function () {
delete _this.chartPosition;
}));
parent = parent.parentElement;
}
this.eventsToUnbind.push(Pointer_addEvent(container, 'touchstart', this.onContainerTouchStart.bind(this), { passive: false }), Pointer_addEvent(container, 'touchmove', this.onContainerTouchMove.bind(this), { passive: false }));
if (!Pointer.unbindDocumentTouchEnd) {
Pointer.unbindDocumentTouchEnd = Pointer_addEvent(ownerDoc, 'touchend', this.onDocumentTouchEnd.bind(this), { passive: false });
}
this.setPointerCapture();
Pointer_addEvent(this.chart, 'redraw', this.setPointerCapture.bind(this));
};
/**
* Sets, or removes on update, pointer events using pointer capture for
* tooltip.followTouchMove if any series has findNearestPointBy that
* includes the y dimension.
* @private
* @function Highcharts.Pointer#setPointerCapture
*/
Pointer.prototype.setPointerCapture = function () {
var _a,
_b;
// Only for touch
if (!Pointer_isTouchDevice) {
return;
}
var pointer = this,
events = pointer.pointerCaptureEventsToUnbind,
chart = pointer.chart,
container = chart.container,
followTouchMove = Pointer_pick((_a = chart.options.tooltip) === null || _a === void 0 ? void 0 : _a.followTouchMove,
true),
shouldHave = followTouchMove && chart.series.some(function (series) { return series.options.findNearestPointBy
.indexOf('y') > -1; });
if (!pointer.hasPointerCapture && shouldHave) {
// Add
// Bind
events.push(Pointer_addEvent(container, 'pointerdown', function (e) {
var _a,
_b;
if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.hasPointerCapture(e.pointerId)) {
(_b = e.target) === null || _b === void 0 ? void 0 : _b.releasePointerCapture(e.pointerId);
}
}), Pointer_addEvent(container, 'pointermove', function (e) {
var _a,
_b;
(_b = (_a = chart.pointer) === null || _a === void 0 ? void 0 : _a.getPointFromEvent(e)) === null || _b === void 0 ? void 0 : _b.onMouseOver(e);
}));
if (!chart.styledMode) {
Pointer_css(container, { 'touch-action': 'none' });
}
// Mostly for styled mode
container.className += ' highcharts-no-touch-action';
pointer.hasPointerCapture = true;
}
else if (pointer.hasPointerCapture && !shouldHave) {
// Remove
// Unbind
events.forEach(function (e) { return e(); });
events.length = 0;
if (!chart.styledMode) {
Pointer_css(container, {
'touch-action': Pointer_pick((_b = chart.options.chart.style) === null || _b === void 0 ? void 0 : _b['touch-action'], 'manipulation')
});
}
// Mostly for styled mode
container.className = container.className.replace(' highcharts-no-touch-action', '');
pointer.hasPointerCapture = false;
}
};
/**
* Sets the index of the hovered chart and leaves the previous hovered
* chart, to reset states like tooltip.
* @private
* @function Highcharts.Pointer#setHoverChartIndex
*/
Pointer.prototype.setHoverChartIndex = function (e) {
var _a;
var chart = this.chart;
var hoverChart = Core_Globals.charts[Pointer_pick(Pointer.hoverChartIndex, -1)];
if (hoverChart &&
hoverChart !== chart) {
var relatedTargetObj = { relatedTarget: chart.container };
if (e && !(e === null || e === void 0 ? void 0 : e.relatedTarget)) {
// #17192, Non-enumerable properties of "e" are dropped with
// spreading (...e). Using Object.assign ensures integrity.
Object.assign({}, e, relatedTargetObj);
}
(_a = hoverChart.pointer) === null || _a === void 0 ? void 0 : _a.onContainerMouseLeave(e || relatedTargetObj);
}
if (!hoverChart ||
!hoverChart.mouseIsDown) {
Pointer.hoverChartIndex = chart.index;
}
};
/**
* General touch handler shared by touchstart and touchmove.
* @private
* @function Highcharts.Pointer#touch
*/
Pointer.prototype.touch = function (e, start) {
var _a = this,
chart = _a.chart,
_b = _a.pinchDown,
pinchDown = _b === void 0 ? [] : _b;
var hasMoved,
isInside;
this.setHoverChartIndex();
e = this.normalize(e);
if (e.touches.length === 1) {
isInside = chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop, {
visiblePlotOnly: true
});
if (isInside && !chart.openMenu) {
// Run mouse events and display tooltip etc
if (start) {
this.runPointActions(e);
}
// Android fires touchmove events after the touchstart even if
// the finger hasn't moved, or moved only a pixel or two. In iOS
// however, the touchmove doesn't fire unless the finger moves
// more than ~4px. So we emulate this behaviour in Android by
// checking how much it moved, and cancelling on small
// distances. #3450. Tested and still relevant as of 2024.
if (e.type === 'touchmove') {
hasMoved = pinchDown[0] ? // #5266
(Math.pow(pinchDown[0].chartX - e.chartX, 2) +
Math.pow(pinchDown[0].chartY - e.chartY, 2)) >= 16 :
false;
}
if (Pointer_pick(hasMoved, true)) {
this.pinch(e);
}
}
else if (start) {
// Hide the tooltip on touching outside the plot area (#1203)
this.reset();
}
}
else if (e.touches.length === 2) {
this.pinch(e);
}
};
/**
* Returns true if the chart is set up for zooming by single touch and the
* event is capable
* @private
* @function Highcharts.Pointer#touchSelect
*/
Pointer.prototype.touchSelect = function (e) {
return Boolean(this.chart.zooming.singleTouch &&
e.touches &&
e.touches.length === 1);
};
/**
* Resolve the zoomType option, this is reset on all touch start and mouse
* down events.
* @private
* @function Highcharts.Pointer#zoomOption
*/
Pointer.prototype.zoomOption = function (e) {
var chart = this.chart,
inverted = chart.inverted;
var zoomType = chart.zooming.type || '',
zoomX,
zoomY;
// Look for the pinchType option
if (/touch/.test(e.type)) {
zoomType = Pointer_pick(chart.zooming.pinchType, zoomType);
}
this.zoomX = zoomX = /x/.test(zoomType);
this.zoomY = zoomY = /y/.test(zoomType);
this.zoomHor = (zoomX && !inverted) || (zoomY && inverted);
this.zoomVert = (zoomY && !inverted) || (zoomX && inverted);
this.hasZoom = zoomX || zoomY;
};
Pointer.unbindDocumentMouseUp = [];
return Pointer;
}());
/* *
*
* Class Namespace
*
* */
(function (Pointer) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* @private
*/
function compose(ChartClass) {
if (Pointer_pushUnique(Pointer_composed, 'Core.Pointer')) {
Pointer_addEvent(ChartClass, 'beforeRender', function () {
/**
* The Pointer that keeps track of mouse and touch
* interaction.
*
* @memberof Highcharts.Chart
* @name pointer
* @type {Highcharts.Pointer}
* @instance
*/
this.pointer = new Pointer(this, this.options);
});
}
}
Pointer.compose = compose;
})(Pointer || (Pointer = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Core_Pointer = (Pointer);
/* *
*
* API Declarations
*
* */
/**
* Chart position and scale.
*
* @interface Highcharts.ChartPositionObject
*/ /**
* @name Highcharts.ChartPositionObject#left
* @type {number}
*/ /**
* @name Highcharts.ChartPositionObject#scaleX
* @type {number}
*/ /**
* @name Highcharts.ChartPositionObject#scaleY
* @type {number}
*/ /**
* @name Highcharts.ChartPositionObject#top
* @type {number}
*/
/**
* One position in relation to an axis.
*
* @interface Highcharts.PointerAxisCoordinateObject
*/ /**
* Related axis.
*
* @name Highcharts.PointerAxisCoordinateObject#axis
* @type {Highcharts.Axis}
*/ /**
* Axis value.
*
* @name Highcharts.PointerAxisCoordinateObject#value
* @type {number}
*/
/**
* Positions in terms of axis values.
*
* @interface Highcharts.PointerAxisCoordinatesObject
*/ /**
* Positions on the x-axis.
* @name Highcharts.PointerAxisCoordinatesObject#xAxis
* @type {Array<Highcharts.PointerAxisCoordinateObject>}
*/ /**
* Positions on the y-axis.
* @name Highcharts.PointerAxisCoordinatesObject#yAxis
* @type {Array<Highcharts.PointerAxisCoordinateObject>}
*/
/**
* Pointer coordinates.
*
* @interface Highcharts.PointerCoordinatesObject
*/ /**
* @name Highcharts.PointerCoordinatesObject#chartX
* @type {number}
*/ /**
* @name Highcharts.PointerCoordinatesObject#chartY
* @type {number}
*/
/**
* A native browser mouse or touch event, extended with position information
* relative to the {@link Chart.container}.
*
* @interface Highcharts.PointerEventObject
* @extends global.PointerEvent
*/ /**
* The X coordinate of the pointer interaction relative to the chart.
*
* @name Highcharts.PointerEventObject#chartX
* @type {number}
*/ /**
* The Y coordinate of the pointer interaction relative to the chart.
*
* @name Highcharts.PointerEventObject#chartY
* @type {number}
*/
/**
* Axis-specific data of a selection.
*
* @interface Highcharts.SelectDataObject
*/ /**
* The selected Axis.
* @name Highcharts.SelectDataObject#axis
* @type {Highcharts.Axis}
*/ /**
* The maximum axis value, either automatic or set manually.
* @name Highcharts.SelectDataObject#max
* @type {number}
*/ /**
* The minimum axis value, either automatic or set manually.
* @name Highcharts.SelectDataObject#min
* @type {number}
*/
/**
* Object for select events.
* The primary axes are `xAxis[0]` and `yAxis[0]`. Remember the unit of a
* datetime axis is milliseconds since 1970-01-01 00:00:00.
*
* @interface Highcharts.SelectEventObject
*/ /**
* The related browser event.
* @name Highcharts.SelectEventObject#originalEvent
* @type {global.Event}
*/ /**
* Prevents the default action for the event, if called.
* @name Highcharts.SelectEventObject#preventDefault
* @type {Function}
*/ /**
* Indicates a reset event to restore default state.
* @name Highcharts.SelectEventObject#resetSelection
* @type {boolean|undefined}
*/ /**
* Arrays containing the axes of each dimension and each axis' min and max
* values.
* @name Highcharts.SelectEventObject#xAxis
* @type {Array<Highcharts.SelectDataObject>}
*/ /**
* Arrays containing the axes of each dimension and each axis' min and max
* values.
* @name Highcharts.SelectEventObject#yAxis
* @type {Array<Highcharts.SelectDataObject>}
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Data/DataTableCore.js
/* *
*
* (c) 2009-2024 Highsoft AS
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* Authors:
* - Sophie Bremer
* - Gøran Slettemark
* - Torstein Hønsi
*
* */
var DataTableCore_fireEvent = Core_Utilities.fireEvent, DataTableCore_isArray = Core_Utilities.isArray, DataTableCore_objectEach = Core_Utilities.objectEach, DataTableCore_uniqueKey = Core_Utilities.uniqueKey;
/* *
*
* Class
*
* */
/**
* Class to manage columns and rows in a table structure. It provides methods
* to add, remove, and manipulate columns and rows, as well as to retrieve data
* from specific cells.
*
* @class
* @name Highcharts.DataTable
*
* @param {Highcharts.DataTableOptions} [options]
* Options to initialize the new DataTable instance.
*/
var DataTableCore = /** @class */ (function () {
/**
* Constructs an instance of the DataTable class.
*
* @example
* const dataTable = new Highcharts.DataTableCore({
* columns: {
* year: [2020, 2021, 2022, 2023],
* cost: [11, 13, 12, 14],
* revenue: [12, 15, 14, 18]
* }
* });
*
* @param {Highcharts.DataTableOptions} [options]
* Options to initialize the new DataTable instance.
*/
function DataTableCore(options) {
if (options === void 0) { options = {}; }
var _this = this;
/**
* Whether the ID was automatic generated or given in the constructor.
*
* @name Highcharts.DataTable#autoId
* @type {boolean}
*/
this.autoId = !options.id;
this.columns = {};
/**
* ID of the table for indentification purposes.
*
* @name Highcharts.DataTable#id
* @type {string}
*/
this.id = (options.id || DataTableCore_uniqueKey());
this.modified = this;
this.rowCount = 0;
this.versionTag = DataTableCore_uniqueKey();
var rowCount = 0;
DataTableCore_objectEach(options.columns || {}, function (column, columnName) {
_this.columns[columnName] = column.slice();
rowCount = Math.max(rowCount, column.length);
});
this.applyRowCount(rowCount);
}
/* *
*
* Functions
*
* */
/**
* Applies a row count to the table by setting the `rowCount` property and
* adjusting the length of all columns.
*
* @private
* @param {number} rowCount The new row count.
*/
DataTableCore.prototype.applyRowCount = function (rowCount) {
this.rowCount = rowCount;
DataTableCore_objectEach(this.columns, function (column) {
if (DataTableCore_isArray(column)) { // Not on typed array
column.length = rowCount;
}
});
};
/**
* Fetches the given column by the canonical column name. Simplified version
* of the full `DataTable.getRow` method, always returning by reference.
*
* @param {string} columnName
* Name of the column to get.
*
* @return {Highcharts.DataTableColumn|undefined}
* A copy of the column, or `undefined` if not found.
*/
DataTableCore.prototype.getColumn = function (columnName,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
asReference) {
return this.columns[columnName];
};
/**
* Retrieves all or the given columns. Simplified version of the full
* `DataTable.getColumns` method, always returning by reference.
*
* @param {Array<string>} [columnNames]
* Column names to retrieve.
*
* @return {Highcharts.DataTableColumnCollection}
* Collection of columns. If a requested column was not found, it is
* `undefined`.
*/
DataTableCore.prototype.getColumns = function (columnNames,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
asReference) {
var _this = this;
return (columnNames || Object.keys(this.columns)).reduce(function (columns, columnName) {
columns[columnName] = _this.columns[columnName];
return columns;
}, {});
};
/**
* Retrieves the row at a given index.
*
* @param {number} rowIndex
* Row index to retrieve. First row has index 0.
*
* @param {Array<string>} [columnNames]
* Column names to retrieve.
*
* @return {Record<string, number|string|undefined>|undefined}
* Returns the row values, or `undefined` if not found.
*/
DataTableCore.prototype.getRow = function (rowIndex, columnNames) {
var _this = this;
return (columnNames || Object.keys(this.columns)).map(function (key) { var _a; return (_a = _this.columns[key]) === null || _a === void 0 ? void 0 : _a[rowIndex]; });
};
/**
* Sets cell values for a column. Will insert a new column, if not found.
*
* @param {string} columnName
* Column name to set.
*
* @param {Highcharts.DataTableColumn} [column]
* Values to set in the column.
*
* @param {number} [rowIndex=0]
* Index of the first row to change. (Default: 0)
*
* @param {Record<string, (boolean|number|string|null|undefined)>} [eventDetail]
* Custom information for pending events.
*
* @emits #setColumns
* @emits #afterSetColumns
*/
DataTableCore.prototype.setColumn = function (columnName, column, rowIndex, eventDetail) {
var _a;
if (column === void 0) { column = []; }
if (rowIndex === void 0) { rowIndex = 0; }
this.setColumns((_a = {}, _a[columnName] = column, _a), rowIndex, eventDetail);
};
/**
* * Sets cell values for multiple columns. Will insert new columns, if not
* found. Simplified version of the full `DataTable.setColumns`, limited to
* full replacement of the columns (undefined `rowIndex`).
*
* @param {Highcharts.DataTableColumnCollection} columns
* Columns as a collection, where the keys are the column names.
*
* @param {number} [rowIndex]
* Index of the first row to change. Keep undefined to reset.
*
* @param {Record<string, (boolean|number|string|null|undefined)>} [eventDetail]
* Custom information for pending events.
*
* @emits #setColumns
* @emits #afterSetColumns
*/
DataTableCore.prototype.setColumns = function (columns, rowIndex, eventDetail) {
var _this = this;
var rowCount = this.rowCount;
DataTableCore_objectEach(columns, function (column, columnName) {
_this.columns[columnName] = column.slice();
rowCount = column.length;
});
this.applyRowCount(rowCount);
if (!(eventDetail === null || eventDetail === void 0 ? void 0 : eventDetail.silent)) {
DataTableCore_fireEvent(this, 'afterSetColumns');
this.versionTag = DataTableCore_uniqueKey();
}
};
/**
* Sets cell values of a row. Will insert a new row if no index was
* provided, or if the index is higher than the total number of table rows.
* A simplified version of the full `DateTable.setRow`, limited to objects.
*
* @param {Record<string, number|string|undefined>} row
* Cell values to set.
*
* @param {number} [rowIndex]
* Index of the row to set. Leave `undefind` to add as a new row.
*
* @param {boolean} [insert]
* Whether to insert the row at the given index, or to overwrite the row.
*
* @param {Record<string, (boolean|number|string|null|undefined)>} [eventDetail]
* Custom information for pending events.
*
* @emits #afterSetRows
*/
DataTableCore.prototype.setRow = function (row, rowIndex, insert, eventDetail) {
if (rowIndex === void 0) { rowIndex = this.rowCount; }
var columns = this.columns,
indexRowCount = insert ? this.rowCount + 1 : rowIndex + 1;
DataTableCore_objectEach(row, function (cellValue, columnName) {
var column = columns[columnName] ||
(eventDetail === null || eventDetail === void 0 ? void 0 : eventDetail.addColumns) !== false && new Array(indexRowCount);
if (column) {
if (insert) {
column.splice(rowIndex, 0, cellValue);
}
else {
column[rowIndex] = cellValue;
}
columns[columnName] = column;
}
});
if (indexRowCount > this.rowCount) {
this.applyRowCount(indexRowCount);
}
if (!(eventDetail === null || eventDetail === void 0 ? void 0 : eventDetail.silent)) {
DataTableCore_fireEvent(this, 'afterSetRows');
this.versionTag = DataTableCore_uniqueKey();
}
};
return DataTableCore;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Data_DataTableCore = (DataTableCore);
/* *
*
* API Declarations
*
* */
/**
* A column of values in a data table.
* @typedef {Array<boolean|null|number|string|undefined>} Highcharts.DataTableColumn
*/ /**
* A collection of data table columns defined by a object where the key is the
* column name and the value is an array of the column values.
* @typedef {Record<string, Highcharts.DataTableColumn>} Highcharts.DataTableColumnCollection
*/
/**
* Options for the `DataTable` or `DataTableCore` classes.
* @interface Highcharts.DataTableOptions
*/ /**
* The column options for the data table. The columns are defined by an object
* where the key is the column ID and the value is an array of the column
* values.
*
* @name Highcharts.DataTableOptions.columns
* @type {Highcharts.DataTableColumnCollection|undefined}
*/ /**
* Custom ID to identify the new DataTable instance.
*
* @name Highcharts.DataTableOptions.id
* @type {string|undefined}
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Legend/LegendSymbol.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var LegendSymbol_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var LegendSymbol_extend = Core_Utilities.extend, LegendSymbol_merge = Core_Utilities.merge, LegendSymbol_pick = Core_Utilities.pick;
/* *
*
* Namespace
*
* */
var LegendSymbol;
(function (LegendSymbol) {
/* *
*
* Functions
*
* */
/**
* Draw a line, a point marker and an area in the legend.
*
* @private
* @function Highcharts.LegendSymbolMixin.areaMarker
*
* @param {Highcharts.Legend} legend
* The legend object.
*/
function areaMarker(legend, item) {
lineMarker.call(this, legend, item, true);
}
LegendSymbol.areaMarker = areaMarker;
/**
* Draw a line and a point marker in the legend.
*
* @private
* @function Highcharts.LegendSymbolMixin.lineMarker
*
* @param {Highcharts.Legend} legend
* The legend object.
*/
function lineMarker(legend, item, hasArea) {
var _a,
_b;
var legendItem = this.legendItem = this.legendItem || {},
_c = this,
chart = _c.chart,
options = _c.options,
_d = legend.baseline,
baseline = _d === void 0 ? 0 : _d,
symbolWidth = legend.symbolWidth,
symbolHeight = legend.symbolHeight,
symbol = this.symbol || 'circle',
generalRadius = symbolHeight / 2,
renderer = chart.renderer,
legendItemGroup = legendItem.group,
verticalCenter = baseline - Math.round((((_a = legend.fontMetrics) === null || _a === void 0 ? void 0 : _a.b) || symbolHeight) *
// Render line and marker slightly higher to make room for the
// area
(hasArea ? 0.4 : 0.3)),
attr = {};
var legendSymbol,
markerOptions = options.marker,
lineSizer = 0;
// Draw the line
if (!chart.styledMode) {
attr['stroke-width'] = Math.min(options.lineWidth || 0, 24);
if (options.dashStyle) {
attr.dashstyle = options.dashStyle;
}
else if (options.linecap !== 'square') {
attr['stroke-linecap'] = 'round';
}
}
legendItem.line = renderer
.path()
.addClass('highcharts-graph')
.attr(attr)
.add(legendItemGroup);
if (hasArea) {
legendItem.area = renderer
.path()
.addClass('highcharts-area')
.add(legendItemGroup);
}
if (attr['stroke-linecap']) {
lineSizer = Math.min(legendItem.line.strokeWidth(), symbolWidth) / 2;
}
if (symbolWidth) {
var d = [
['M',
lineSizer,
verticalCenter],
['L',
symbolWidth - lineSizer,
verticalCenter]
];
legendItem.line.attr({ d: d });
(_b = legendItem.area) === null || _b === void 0 ? void 0 : _b.attr({
d: LegendSymbol_spreadArray(LegendSymbol_spreadArray([], d, true), [
['L', symbolWidth - lineSizer, baseline],
['L', lineSizer, baseline]
], false)
});
}
// Draw the marker
if (markerOptions && markerOptions.enabled !== false && symbolWidth) {
// Do not allow the marker to be larger than the symbolHeight
var radius = Math.min(LegendSymbol_pick(markerOptions.radius,
generalRadius),
generalRadius);
// Restrict symbol markers size
if (symbol.indexOf('url') === 0) {
markerOptions = LegendSymbol_merge(markerOptions, {
width: symbolHeight,
height: symbolHeight
});
radius = 0;
}
legendItem.symbol = legendSymbol = renderer
.symbol(symbol, (symbolWidth / 2) - radius, verticalCenter - radius, 2 * radius, 2 * radius, LegendSymbol_extend({ context: 'legend' }, markerOptions))
.addClass('highcharts-point')
.add(legendItemGroup);
legendSymbol.isMarker = true;
}
}
LegendSymbol.lineMarker = lineMarker;
/**
* Get the series' symbol in the legend.
*
* This method should be overridable to create custom symbols through
* Highcharts.seriesTypes[type].prototype.drawLegendSymbol.
*
* @private
* @function Highcharts.LegendSymbolMixin.rectangle
*
* @param {Highcharts.Legend} legend
* The legend object
*
* @param {Highcharts.Point|Highcharts.Series} item
* The series (this) or point
*/
function rectangle(legend, item) {
var legendItem = item.legendItem || {},
options = legend.options,
symbolHeight = legend.symbolHeight,
square = options.squareSymbol,
symbolWidth = square ? symbolHeight : legend.symbolWidth;
legendItem.symbol = this.chart.renderer
.rect(square ? (legend.symbolWidth - symbolHeight) / 2 : 0, legend.baseline - symbolHeight + 1, // #3988
symbolWidth, symbolHeight, LegendSymbol_pick(legend.options.symbolRadius, symbolHeight / 2))
.addClass('highcharts-point')
.attr({
zIndex: 3
})
.add(legendItem.group);
}
LegendSymbol.rectangle = rectangle;
})(LegendSymbol || (LegendSymbol = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Legend_LegendSymbol = (LegendSymbol);
;// ./code/es5/es-modules/Core/Series/SeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* General options for all series types.
*
* @optionparent plotOptions.series
*/
var seriesDefaults = {
// Base series options
/**
* The SVG value used for the `stroke-linecap` and `stroke-linejoin`
* of a line graph. Round means that lines are rounded in the ends and
* bends.
*
* @type {Highcharts.SeriesLinecapValue}
* @default round
* @since 3.0.7
* @apioption plotOptions.line.linecap
*/
/**
* Pixel width of the graph line.
*
* @see In styled mode, the line stroke-width can be set with the
* `.highcharts-graph` class name.
*
* @sample {highcharts} highcharts/plotoptions/series-linewidth-general/
* On all series
* @sample {highcharts} highcharts/plotoptions/series-linewidth-specific/
* On one single series
*
* @product highcharts highstock
*/
lineWidth: 2,
/**
* For some series, there is a limit that shuts down animation
* by default when the total number of points in the chart is too high.
* For example, for a column chart and its derivatives, animation does
* not run if there is more than 250 points totally. To disable this
* cap, set `animationLimit` to `Infinity`. This option works if animation
* is fired on individual points, not on a group of points like e.g. during
* the initial animation.
*
* @sample {highcharts} highcharts/plotoptions/series-animationlimit/
* Animation limit on updating individual points
*
* @type {number}
* @apioption plotOptions.series.animationLimit
*/
/**
* Allow this series' points to be selected by clicking on the graphic
* (columns, point markers, pie slices, map areas etc).
*
* The selected points can be handled by point select and unselect
* events, or collectively by the [getSelectedPoints
* ](/class-reference/Highcharts.Chart#getSelectedPoints) function.
*
* And alternative way of selecting points is through dragging.
*
* @sample {highcharts} highcharts/plotoptions/series-allowpointselect-line/
* Line
* @sample {highcharts} highcharts/plotoptions/series-allowpointselect-column/
* Column
* @sample {highcharts} highcharts/plotoptions/series-allowpointselect-pie/
* Pie
* @sample {highcharts} highcharts/chart/events-selection-points/
* Select a range of points through a drag selection
* @sample {highmaps} maps/plotoptions/series-allowpointselect/
* Map area
* @sample {highmaps} maps/plotoptions/mapbubble-allowpointselect/
* Map bubble
*
* @since 1.2.0
*
* @private
*/
allowPointSelect: false,
/**
* When true, each point or column edge is rounded to its nearest pixel
* in order to render sharp on screen. In some cases, when there are a
* lot of densely packed columns, this leads to visible difference
* in column widths or distance between columns. In these cases,
* setting `crisp` to `false` may look better, even though each column
* is rendered blurry.
*
* @sample {highcharts} highcharts/plotoptions/column-crisp-false/
* Crisp is false
*
* @since 5.0.10
* @product highcharts highstock gantt
*
* @private
*/
crisp: true,
/**
* If true, a checkbox is displayed next to the legend item to allow
* selecting the series. The state of the checkbox is determined by
* the `selected` option.
*
* @productdesc {highmaps}
* Note that if a `colorAxis` is defined, the color axis is represented
* in the legend, not the series.
*
* @sample {highcharts} highcharts/plotoptions/series-showcheckbox-true/
* Show select box
*
* @since 1.2.0
*
* @private
*/
showCheckbox: false,
/**
* Enable or disable the initial animation when a series is displayed.
* The animation can also be set as a configuration object. Please
* note that this option only applies to the initial animation of the
* series itself. For other animations, see [chart.animation](
* #chart.animation) and the animation parameter under the API methods.
* The following properties are supported:
*
* - `defer`: The animation delay time in milliseconds.
*
* - `duration`: The duration of the animation in milliseconds. (Defaults to
* `1000`)
*
* - `easing`: Can be a string reference to an easing function set on
* the `Math` object or a function. See the _Custom easing function_
* demo below. (Defaults to `easeInOutSine`)
*
* Due to poor performance, animation is disabled in old IE browsers
* for several chart types.
*
* @sample {highcharts} highcharts/plotoptions/series-animation-disabled/
* Animation disabled
* @sample {highcharts} highcharts/plotoptions/series-animation-slower/
* Slower animation
* @sample {highcharts} highcharts/plotoptions/series-animation-easing/
* Custom easing function
* @sample {highstock} stock/plotoptions/animation-slower/
* Slower animation
* @sample {highstock} stock/plotoptions/animation-easing/
* Custom easing function
* @sample {highmaps} maps/plotoptions/series-animation-true/
* Animation enabled on map series
* @sample {highmaps} maps/plotoptions/mapbubble-animation-false/
* Disabled on mapbubble series
*
* @type {boolean|Highcharts.AnimationOptionsObject}
* @default {highcharts} true
* @default {highstock} true
* @default {highmaps} false
*
* @private
*/
animation: {
/** @ignore-option */
duration: 1000
},
/**
* An additional class name to apply to the series' graphical elements.
* This option does not replace default class names of the graphical
* element. Changes to the series' color will also be reflected in a
* chart's legend and tooltip.
*
* @sample {highcharts} highcharts/css/point-series-classname
* Series and point class name
*
* @type {string}
* @since 5.0.0
* @apioption plotOptions.series.className
*/
/**
* Disable this option to allow series rendering in the whole plotting
* area.
*
* **Note:** Clipping should be always enabled when
* [chart.zoomType](#chart.zoomType) is set
*
* @sample {highcharts} highcharts/plotoptions/series-clip/
* Disabled clipping
*
* @default true
* @type {boolean}
* @since 3.0.0
* @apioption plotOptions.series.clip
*/
/**
* The main color of the series. In line type series it applies to the
* line and the point markers unless otherwise specified. In bar type
* series it applies to the bars unless a color is specified per point.
* The default value is pulled from the `options.colors` array.
*
* In styled mode, the color can be defined by the
* [colorIndex](#plotOptions.series.colorIndex) option. Also, the series
* color can be set with the `.highcharts-series`,
* `.highcharts-color-{n}`, `.highcharts-{type}-series` or
* `.highcharts-series-{n}` class, or individual classes given by the
* `className` option.
*
* @productdesc {highmaps}
* In maps, the series color is rarely used, as most choropleth maps use
* the color to denote the value of each point. The series color can
* however be used in a map with multiple series holding categorized
* data.
*
* @sample {highcharts} highcharts/plotoptions/series-color-general/
* General plot option
* @sample {highcharts} highcharts/plotoptions/series-color-specific/
* One specific series
* @sample {highcharts} highcharts/plotoptions/series-color-area/
* Area color
* @sample {highcharts} highcharts/series/infographic/
* Pattern fill
* @sample {highmaps} maps/demo/category-map/
* Category map by multiple series
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption plotOptions.series.color
*/
/**
* Styled mode only. A specific color index to use for the series, so its
* graphic representations are given the class name `highcharts-color-{n}`.
*
* Since v11, CSS variables on the form `--highcharts-color-{n}` make
* changing the color scheme very convenient.
*
* @sample {highcharts} highcharts/css/colorindex/ Series and point color
* index
*
* @type {number}
* @since 5.0.0
* @apioption plotOptions.series.colorIndex
*/
/**
* Whether to connect a graph line across null points, or render a gap
* between the two points on either side of the null.
*
* In stacked area chart, if `connectNulls` is set to true,
* null points are interpreted as 0.
*
* @sample {highcharts} highcharts/plotoptions/series-connectnulls-false/
* False by default
* @sample {highcharts} highcharts/plotoptions/series-connectnulls-true/
* True
*
* @type {boolean}
* @default false
* @product highcharts highstock
* @apioption plotOptions.series.connectNulls
*/
/**
* You can set the cursor to "pointer" if you have click events attached
* to the series, to signal to the user that the points and lines can
* be clicked.
*
* In styled mode, the series cursor can be set with the same classes
* as listed under [series.color](#plotOptions.series.color).
*
* @sample {highcharts} highcharts/plotoptions/series-cursor-line/
* On line graph
* @sample {highcharts} highcharts/plotoptions/series-cursor-column/
* On columns
* @sample {highcharts} highcharts/plotoptions/series-cursor-scatter/
* On scatter markers
* @sample {highstock} stock/plotoptions/cursor/
* Pointer on a line graph
* @sample {highmaps} maps/plotoptions/series-allowpointselect/
* Map area
* @sample {highmaps} maps/plotoptions/mapbubble-allowpointselect/
* Map bubble
*
* @type {string|Highcharts.CursorValue}
* @apioption plotOptions.series.cursor
*/
/**
* A reserved subspace to store options and values for customized
* functionality. Here you can add additional data for your own event
* callbacks and formatter callbacks.
*
* @sample {highcharts} highcharts/point/custom/
* Point and series with custom data
*
* @type {Highcharts.Dictionary<*>}
* @apioption plotOptions.series.custom
*/
/**
* Name of the dash style to use for the graph, or for some series types
* the outline of each shape.
*
* In styled mode, the
* [stroke dash-array](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/series-dashstyle/)
* can be set with the same classes as listed under
* [series.color](#plotOptions.series.color).
*
* @sample {highcharts} highcharts/plotoptions/series-dashstyle-all/
* Possible values demonstrated
* @sample {highcharts} highcharts/plotoptions/series-dashstyle/
* Chart suitable for printing in black and white
* @sample {highstock} highcharts/plotoptions/series-dashstyle-all/
* Possible values demonstrated
* @sample {highmaps} highcharts/plotoptions/series-dashstyle-all/
* Possible values demonstrated
* @sample {highmaps} maps/plotoptions/series-dashstyle/
* Dotted borders on a map
*
* @type {Highcharts.DashStyleValue}
* @default Solid
* @since 2.1
* @apioption plotOptions.series.dashStyle
*/
/**
* A description of the series to add to the screen reader information
* about the series.
*
* @type {string}
* @since 5.0.0
* @requires modules/accessibility
* @apioption plotOptions.series.description
*/
/**
* Options for the series data sorting.
*
* @type {Highcharts.DataSortingOptionsObject}
* @since 8.0.0
* @product highcharts highstock
* @apioption plotOptions.series.dataSorting
*/
/**
* Enable or disable data sorting for the series. Use [xAxis.reversed](
* #xAxis.reversed) to change the sorting order.
*
* @sample {highcharts} highcharts/datasorting/animation/
* Data sorting in scatter-3d
* @sample {highcharts} highcharts/datasorting/labels-animation/
* Axis labels animation
* @sample {highcharts} highcharts/datasorting/dependent-sorting/
* Dependent series sorting
* @sample {highcharts} highcharts/datasorting/independent-sorting/
* Independent series sorting
*
* @type {boolean}
* @since 8.0.0
* @apioption plotOptions.series.dataSorting.enabled
*/
/**
* Whether to allow matching points by name in an update. If this option
* is disabled, points will be matched by order.
*
* @sample {highcharts} highcharts/datasorting/match-by-name/
* Enabled match by name
*
* @type {boolean}
* @since 8.0.0
* @apioption plotOptions.series.dataSorting.matchByName
*/
/**
* Determines what data value should be used to sort by.
*
* @sample {highcharts} highcharts/datasorting/sort-key/
* Sort key as `z` value
*
* @type {string}
* @since 8.0.0
* @default y
* @apioption plotOptions.series.dataSorting.sortKey
*/
/**
* Enable or disable the mouse tracking for a specific series. This
* includes point tooltips and click events on graphs and points. For
* large datasets it improves performance.
*
* @sample {highcharts} highcharts/plotoptions/series-enablemousetracking-false/
* No mouse tracking
* @sample {highmaps} maps/plotoptions/series-enablemousetracking-false/
* No mouse tracking
*
* @type {boolean}
* @default true
* @apioption plotOptions.series.enableMouseTracking
*/
enableMouseTracking: true,
/**
* Whether to use the Y extremes of the total chart width or only the
* zoomed area when zooming in on parts of the X axis. By default, the
* Y axis adjusts to the min and max of the visible data. Cartesian
* series only.
*
* @type {boolean}
* @default false
* @since 4.1.6
* @product highcharts highstock gantt
* @apioption plotOptions.series.getExtremesFromAll
*/
/**
* Highlight only the hovered point and fade the remaining points.
*
* Scatter-type series require enabling the 'inactive' marker state and
* adjusting opacity. Note that this approach could affect performance
* with large datasets.
*
* @sample {highcharts} highcharts/plotoptions/series-inactiveotherpoints-enabled/
* Chart with inactiveOtherPoints option enabled.
*
* @type {boolean}
* @default false
* @apioption plotOptions.series.inactiveOtherPoints
*/
/**
* An array specifying which option maps to which key in the data point
* array. This makes it convenient to work with unstructured data arrays
* from different sources.
*
* @see [series.data](#series.line.data)
*
* @sample {highcharts|highstock} highcharts/series/data-keys/
* An extended data array with keys
* @sample {highcharts|highstock} highcharts/series/data-nested-keys/
* Nested keys used to access object properties
*
* @type {Array<string>}
* @since 4.1.6
* @apioption plotOptions.series.keys
*/
/**
* The line cap used for line ends and line joins on the graph.
*
* @sample highcharts/series-line/linecap/
* Line cap comparison
*
* @type {Highcharts.SeriesLinecapValue}
* @default round
* @product highcharts highstock
* @apioption plotOptions.series.linecap
*/
/**
* The [id](#series.id) of another series to link to. Additionally,
* the value can be ":previous" to link to the previous series. When
* two series are linked, only the first one appears in the legend.
* Toggling the visibility of this also toggles the linked series.
*
* If master series uses data sorting and linked series does not have
* its own sorting definition, the linked series will be sorted in the
* same order as the master one.
*
* @sample {highcharts|highstock} highcharts/demo/arearange-line/
* Linked series
*
* @type {string}
* @since 3.0
* @product highcharts highstock gantt
* @apioption plotOptions.series.linkedTo
*/
/**
* Options for the corresponding navigator series if `showInNavigator`
* is `true` for this series. Available options are the same as any
* series, documented at [plotOptions](#plotOptions.series) and
* [series](#series).
*
* These options are merged with options in [navigator.series](
* #navigator.series), and will take precedence if the same option is
* defined both places.
*
* @see [navigator.series](#navigator.series)
*
* @type {Highcharts.PlotSeriesOptions}
* @since 5.0.0
* @product highstock
* @apioption plotOptions.series.navigatorOptions
*/
/**
* The color for the parts of the graph or points that are below the
* [threshold](#plotOptions.series.threshold). Note that `zones` takes
* precedence over the negative color. Using `negativeColor` is
* equivalent to applying a zone with value of 0.
*
* @see In styled mode, a negative color is applied by setting this option
* to `true` combined with the `.highcharts-negative` class name.
*
* @sample {highcharts} highcharts/plotoptions/series-negative-color/
* Spline, area and column
* @sample {highcharts} highcharts/plotoptions/arearange-negativecolor/
* Arearange
* @sample {highcharts} highcharts/css/series-negative-color/
* Styled mode
* @sample {highstock} highcharts/plotoptions/series-negative-color/
* Spline, area and column
* @sample {highstock} highcharts/plotoptions/arearange-negativecolor/
* Arearange
* @sample {highmaps} highcharts/plotoptions/series-negative-color/
* Spline, area and column
* @sample {highmaps} highcharts/plotoptions/arearange-negativecolor/
* Arearange
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 3.0
* @apioption plotOptions.series.negativeColor
*/
/**
* Same as
* [accessibility.point.descriptionFormat](#accessibility.point.descriptionFormat),
* but for an individual series. Overrides the chart wide configuration.
*
* @type {Function}
* @since 11.1.0
* @apioption plotOptions.series.pointDescriptionFormat
*/
/**
* Same as
* [accessibility.series.descriptionFormatter](#accessibility.series.descriptionFormatter),
* but for an individual series. Overrides the chart wide configuration.
*
* @type {Function}
* @since 5.0.12
* @apioption plotOptions.series.pointDescriptionFormatter
*/
/**
* If no x values are given for the points in a series, `pointInterval`
* defines the interval of the x values. For example, if a series
* contains one value every decade starting from year 0, set
* `pointInterval` to `10`. In true `datetime` axes, the `pointInterval`
* is set in milliseconds.
*
* It can be also be combined with `pointIntervalUnit` to draw irregular
* time intervals.
*
* If combined with `relativeXValue`, an x value can be set on each
* point, and the `pointInterval` is added x times to the `pointStart`
* setting.
*
* Please note that this options applies to the _series data_, not the
* interval of the axis ticks, which is independent.
*
* @sample {highcharts} highcharts/plotoptions/series-pointstart-datetime/
* Datetime X axis
* @sample {highcharts} highcharts/plotoptions/series-relativexvalue/
* Relative x value
* @sample {highstock} stock/plotoptions/pointinterval-pointstart/
* Using pointStart and pointInterval
* @sample {highstock} stock/plotoptions/relativexvalue/
* Relative x value
*
* @type {number}
* @default 1
* @product highcharts highstock gantt
* @apioption plotOptions.series.pointInterval
*/
/**
* On datetime series, this allows for setting the
* [pointInterval](#plotOptions.series.pointInterval) to irregular time
* units, `day`, `month` and `year`. A day is usually the same as 24
* hours, but `pointIntervalUnit` also takes the DST crossover into
* consideration when dealing with local time. Combine this option with
* `pointInterval` to draw weeks, quarters, 6 months, 10 years etc.
*
* Please note that this options applies to the _series data_, not the
* interval of the axis ticks, which is independent.
*
* @sample {highcharts} highcharts/plotoptions/series-pointintervalunit/
* One point a month
* @sample {highstock} highcharts/plotoptions/series-pointintervalunit/
* One point a month
*
* @type {string}
* @since 4.1.0
* @product highcharts highstock gantt
* @validvalue ["day", "month", "year"]
* @apioption plotOptions.series.pointIntervalUnit
*/
/**
* Possible values: `"on"`, `"between"`, `number`.
*
* In a column chart, when pointPlacement is `"on"`, the point will not
* create any padding of the X axis. In a polar column chart this means
* that the first column points directly north. If the pointPlacement is
* `"between"`, the columns will be laid out between ticks. This is
* useful for example for visualising an amount between two points in
* time or in a certain sector of a polar chart.
*
* Since Highcharts 3.0.2, the point placement can also be numeric,
* where 0 is on the axis value, -0.5 is between this value and the
* previous, and 0.5 is between this value and the next. Unlike the
* textual options, numeric point placement options won't affect axis
* padding.
*
* Note that pointPlacement needs a [pointRange](
* #plotOptions.series.pointRange) to work. For column series this is
* computed, but for line-type series it needs to be set.
*
* For the `xrange` series type and gantt charts, if the Y axis is a
* category axis, the `pointPlacement` applies to the Y axis rather than
* the (typically datetime) X axis.
*
* Defaults to `undefined` in cartesian charts, `"between"` in polar
* charts.
*
* @see [xAxis.tickmarkPlacement](#xAxis.tickmarkPlacement)
*
* @sample {highcharts|highstock} highcharts/plotoptions/series-pointplacement-between/
* Between in a column chart
* @sample {highcharts|highstock} highcharts/plotoptions/series-pointplacement-numeric/
* Numeric placement for custom layout
* @sample {highcharts|highstock} maps/plotoptions/heatmap-pointplacement/
* Placement in heatmap
*
* @type {string|number}
* @since 2.3.0
* @product highcharts highstock gantt
* @apioption plotOptions.series.pointPlacement
*/
/**
* If no x values are given for the points in a series, `pointStart`
* defines on what value to start. For example, if a series contains one
* yearly value starting from 1945, set `pointStart` to 1945.
*
* The `pointStart` setting can be a number, or a datetime string that is
* parsed according to the `time.timezone` setting.
*
* If combined with `relativeXValue`, an x value can be set on each
* point. The x value from the point options is multiplied by
* `pointInterval` and added to `pointStart` to produce a modified x
* value.
*
* @sample {highcharts} highcharts/plotoptions/series-pointstart-linear/
* Linear
* @sample {highcharts} highcharts/plotoptions/series-pointstart-datetime/
* Datetime
* @sample {highcharts} highcharts/plotoptions/series-relativexvalue/
* Relative x value
* @sample {highstock} stock/plotoptions/pointinterval-pointstart/
* Using pointStart and pointInterval
* @sample {highstock} stock/plotoptions/relativexvalue/
* Relative x value
*
* @type {number|string}
* @default 0
* @product highcharts highstock gantt
* @apioption plotOptions.series.pointStart
*/
/**
* When true, X values in the data set are relative to the current
* `pointStart`, `pointInterval` and `pointIntervalUnit` settings. This
* allows compression of the data for datasets with irregular X values.
*
* The real X values are computed on the formula `f(x) = ax + b`, where
* `a` is the `pointInterval` (optionally with a time unit given by
* `pointIntervalUnit`), and `b` is the `pointStart`.
*
* @sample {highcharts} highcharts/plotoptions/series-relativexvalue/
* Relative X value
* @sample {highstock} stock/plotoptions/relativexvalue/
* Relative X value
*
* @type {boolean}
* @default false
* @product highcharts highstock
* @apioption plotOptions.series.relativeXValue
*/
/**
* Whether to select the series initially. If `showCheckbox` is true,
* the checkbox next to the series name in the legend will be checked
* for a selected series.
*
* @sample {highcharts} highcharts/plotoptions/series-selected/
* One out of two series selected
*
* @type {boolean}
* @default false
* @since 1.2.0
* @apioption plotOptions.series.selected
*/
/**
* Whether to apply a drop shadow to the graph line. Since 2.3 the
* shadow can be an object configuration containing `color`, `offsetX`,
* `offsetY`, `opacity` and `width`.
*
* Note that in some cases, like stacked columns or other dense layouts, the
* series may cast shadows on each other. In that case, the
* `chart.seriesGroupShadow` allows applying a common drop shadow to the
* whole series group.
*
* @sample {highcharts} highcharts/plotoptions/series-shadow/
* Shadow enabled
*
* @type {boolean|Highcharts.ShadowOptionsObject}
* @default false
* @apioption plotOptions.series.shadow
*/
/**
* Whether to display this particular series or series type in the
* legend. Standalone series are shown in legend by default, and linked
* series are not. Since v7.2.0 it is possible to show series that use
* colorAxis by setting this option to `true`.
*
* @sample {highcharts} highcharts/plotoptions/series-showinlegend/
* One series in the legend, one hidden
*
* @type {boolean}
* @apioption plotOptions.series.showInLegend
*/
/**
* Whether or not to show the series in the navigator. Takes precedence
* over [navigator.baseSeries](#navigator.baseSeries) if defined.
*
* @type {boolean}
* @since 5.0.0
* @product highstock
* @apioption plotOptions.series.showInNavigator
*/
/**
* If set to `true`, the accessibility module will skip past the points
* in this series for keyboard navigation.
*
* @type {boolean}
* @since 5.0.12
* @apioption plotOptions.series.skipKeyboardNavigation
*/
/**
* Whether to stack the values of each series on top of each other.
* Possible values are `undefined` to disable, `"normal"` to stack by
* value or `"percent"`.
*
* When stacking is enabled, data must be sorted
* in ascending X order.
*
* Some stacking options are related to specific series types. In the
* streamgraph series type, the stacking option is set to `"stream"`.
* The second one is `"overlap"`, which only applies to waterfall
* series.
*
* @see [yAxis.reversedStacks](#yAxis.reversedStacks)
*
* @sample {highcharts} highcharts/plotoptions/series-stacking-line/
* Line
* @sample {highcharts} highcharts/plotoptions/series-stacking-column/
* Column
* @sample {highcharts} highcharts/plotoptions/series-stacking-bar/
* Bar
* @sample {highcharts} highcharts/plotoptions/series-stacking-area/
* Area
* @sample {highcharts} highcharts/plotoptions/series-stacking-percent-line/
* Line
* @sample {highcharts} highcharts/plotoptions/series-stacking-percent-column/
* Column
* @sample {highcharts} highcharts/plotoptions/series-stacking-percent-bar/
* Bar
* @sample {highcharts} highcharts/plotoptions/series-stacking-percent-area/
* Area
* @sample {highcharts} highcharts/plotoptions/series-waterfall-with-normal-stacking
* Waterfall with normal stacking
* @sample {highcharts} highcharts/plotoptions/series-waterfall-with-overlap-stacking
* Waterfall with overlap stacking
* @sample {highstock} stock/plotoptions/stacking/
* Area
*
* @type {string}
* @product highcharts highstock
* @validvalue ["normal", "overlap", "percent", "stream"]
* @apioption plotOptions.series.stacking
*/
/**
* Whether to apply steps to the line. Possible values are `left`,
* `center` and `right`.
*
* @sample {highcharts} highcharts/plotoptions/line-step/
* Different step line options
* @sample {highcharts} highcharts/plotoptions/area-step/
* Stepped, stacked area
* @sample {highstock} stock/plotoptions/line-step/
* Step line
*
* @type {string}
* @since 1.2.5
* @product highcharts highstock
* @validvalue ["left", "center", "right"]
* @apioption plotOptions.series.step
*/
/**
* The threshold, also called zero level or base level. For line type
* series this is only used in conjunction with
* [negativeColor](#plotOptions.series.negativeColor).
*
* @see [softThreshold](#plotOptions.series.softThreshold).
*
* @type {number|null}
* @default 0
* @since 3.0
* @product highcharts highstock
* @apioption plotOptions.series.threshold
*/
/**
* Set the initial visibility of the series.
*
* @sample {highcharts} highcharts/plotoptions/series-visible/
* Two series, one hidden and one visible
* @sample {highstock} stock/plotoptions/series-visibility/
* Hidden series
*
* @type {boolean}
* @default true
* @apioption plotOptions.series.visible
*/
/**
* Defines the Axis on which the zones are applied.
*
* @see [zones](#plotOptions.series.zones)
*
* @sample {highcharts} highcharts/series/color-zones-zoneaxis-x/
* Zones on the X-Axis
* @sample {highstock} highcharts/series/color-zones-zoneaxis-x/
* Zones on the X-Axis
*
* @type {string}
* @default y
* @since 4.1.0
* @product highcharts highstock
* @apioption plotOptions.series.zoneAxis
*/
/**
* General event handlers for the series items. These event hooks can
* also be attached to the series at run time using the
* `Highcharts.addEvent` function.
*
* @declare Highcharts.SeriesEventsOptionsObject
*
* @private
*/
events: {},
/**
* Fires after the series has finished its initial animation, or in case
* animation is disabled, immediately as the series is displayed.
*
* @sample {highcharts} highcharts/plotoptions/series-events-afteranimate/
* Show label after animate
* @sample {highstock} highcharts/plotoptions/series-events-afteranimate/
* Show label after animate
*
* @type {Highcharts.SeriesAfterAnimateCallbackFunction}
* @since 4.0
* @product highcharts highstock gantt
* @context Highcharts.Series
* @apioption plotOptions.series.events.afterAnimate
*/
/**
* Fires when the checkbox next to the series' name in the legend is
* clicked. One parameter, `event`, is passed to the function. The state
* of the checkbox is found by `event.checked`. The checked item is
* found by `event.item`. Return `false` to prevent the default action
* which is to toggle the select state of the series.
*
* @sample {highcharts} highcharts/plotoptions/series-events-checkboxclick/
* Alert checkbox status
*
* @type {Highcharts.SeriesCheckboxClickCallbackFunction}
* @since 1.2.0
* @context Highcharts.Series
* @apioption plotOptions.series.events.checkboxClick
*/
/**
* Fires when the series is clicked. One parameter, `event`, is passed
* to the function, containing common event information. Additionally,
* `event.point` holds a pointer to the nearest point on the graph.
*
* @sample {highcharts} highcharts/plotoptions/series-events-click/
* Alert click info
* @sample {highstock} stock/plotoptions/series-events-click/
* Alert click info
* @sample {highmaps} maps/plotoptions/series-events-click/
* Display click info in subtitle
*
* @type {Highcharts.SeriesClickCallbackFunction}
* @context Highcharts.Series
* @apioption plotOptions.series.events.click
*/
/**
* Fires when the series is hidden after chart generation time, either
* by clicking the legend item or by calling `.hide()`.
*
* @sample {highcharts} highcharts/plotoptions/series-events-hide/
* Alert when the series is hidden by clicking the legend item
*
* @type {Highcharts.SeriesHideCallbackFunction}
* @since 1.2.0
* @context Highcharts.Series
* @apioption plotOptions.series.events.hide
*/
/**
* Fires when the legend item belonging to the series is clicked. One
* parameter, `event`, is passed to the function. The default action
* is to toggle the visibility of the series. This can be prevented
* by returning `false` or calling `event.preventDefault()`.
*
* **Note:** This option is deprecated in favor of
* [legend.events.itemClick](#legend.events.itemClick).
*
* @type {Highcharts.SeriesLegendItemClickCallbackFunction}
* @deprecated 11.4.4
* @context Highcharts.Series
* @apioption plotOptions.series.events.legendItemClick
*/
/**
* Fires when the mouse leaves the graph. One parameter, `event`, is
* passed to the function, containing common event information. If the
* [stickyTracking](#plotOptions.series) option is true, `mouseOut`
* doesn't happen before the mouse enters another graph or leaves the
* plot area.
*
* @sample {highcharts} highcharts/plotoptions/series-events-mouseover-sticky/
* With sticky tracking by default
* @sample {highcharts} highcharts/plotoptions/series-events-mouseover-no-sticky/
* Without sticky tracking
*
* @type {Highcharts.SeriesMouseOutCallbackFunction}
* @context Highcharts.Series
* @apioption plotOptions.series.events.mouseOut
*/
/**
* Fires when the mouse enters the graph. One parameter, `event`, is
* passed to the function, containing common event information.
*
* @sample {highcharts} highcharts/plotoptions/series-events-mouseover-sticky/
* With sticky tracking by default
* @sample {highcharts} highcharts/plotoptions/series-events-mouseover-no-sticky/
* Without sticky tracking
*
* @type {Highcharts.SeriesMouseOverCallbackFunction}
* @context Highcharts.Series
* @apioption plotOptions.series.events.mouseOver
*/
/**
* Fires when the series is shown after chart generation time, either
* by clicking the legend item or by calling `.show()`.
*
* @sample {highcharts} highcharts/plotoptions/series-events-show/
* Alert when the series is shown by clicking the legend item.
*
* @type {Highcharts.SeriesShowCallbackFunction}
* @since 1.2.0
* @context Highcharts.Series
* @apioption plotOptions.series.events.show
*/
/**
* Options for the point markers of line and scatter-like series. Properties
* like `fillColor`, `lineColor` and `lineWidth` define the visual
* appearance of the markers. The `symbol` option defines the shape. Other
* series types, like column series, don't have markers, but have visual
* options on the series level instead.
*
* In styled mode, the markers can be styled with the `.highcharts-point`,
* `.highcharts-point-hover` and `.highcharts-point-select` class names.
*
* @declare Highcharts.PointMarkerOptionsObject
*
* @sample {highmaps} maps/demo/mappoint-mapmarker
* Using the mapmarker symbol for points
*
* @private
*/
marker: {
/**
* Enable or disable the point marker. If `undefined`, the markers
* are hidden when the data is dense, and shown for more widespread
* data points.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-enabled/
* Disabled markers
* @sample {highcharts} highcharts/plotoptions/series-marker-enabled-false/
* Disabled in normal state but enabled on hover
* @sample {highstock} stock/plotoptions/series-marker/
* Enabled markers
*
* @type {boolean}
* @default {highcharts} undefined
* @default {highstock} false
* @apioption plotOptions.series.marker.enabled
*/
/**
* The threshold for how dense the point markers should be before
* they are hidden, given that `enabled` is not defined. The number
* indicates the horizontal distance between the two closest points
* in the series, as multiples of the `marker.radius`. In other
* words, the default value of 2 means points are hidden if
* overlapping horizontally.
*
* @sample highcharts/plotoptions/series-marker-enabledthreshold
* A higher threshold
*
* @since 6.0.5
*/
enabledThreshold: 2,
/**
* The fill color of the point marker. When `undefined`, the series'
* or point's color is used.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-fillcolor/
* White fill
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption plotOptions.series.marker.fillColor
*/
/**
* Image markers only. Set the image width explicitly. When using
* this option, a `width` must also be set.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-width-height/
* Fixed width and height
* @sample {highstock} highcharts/plotoptions/series-marker-width-height/
* Fixed width and height
*
* @type {number}
* @since 4.0.4
* @apioption plotOptions.series.marker.height
*/
/**
* The color of the point marker's outline. When `undefined`, the
* series' or point's color is used.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-fillcolor/
* Inherit from series color (undefined)
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
lineColor: "#ffffff" /* Palette.backgroundColor */,
/**
* The width of the point marker's outline.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-fillcolor/
* 2px blue marker
*/
lineWidth: 0,
/**
* The radius of the point marker.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-radius/
* Bigger markers
*
* @default {highstock} 2
* @default {highcharts} 4
*
*/
radius: 4,
/**
* A predefined shape or symbol for the marker. When undefined, the
* symbol is pulled from options.symbols. Other possible values are
* `'circle'`, `'square'`,`'diamond'`, `'triangle'` and
* `'triangle-down'`.
*
* Additionally, the URL to a graphic can be given on this form:
* `'url(graphic.png)'`. Note that for the image to be applied to
* exported charts, its URL needs to be accessible by the export
* server.
*
* Custom callbacks for symbol path generation can also be added to
* `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
* used by its method name, as shown in the demo.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-symbol/
* Predefined, graphic and custom markers
* @sample {highstock} highcharts/plotoptions/series-marker-symbol/
* Predefined, graphic and custom markers
* @sample {highmaps} maps/demo/mappoint-mapmarker
* Using the mapmarker symbol for points
*
* @type {string}
* @apioption plotOptions.series.marker.symbol
*/
/**
* Image markers only. Set the image width explicitly. When using
* this option, a `height` must also be set.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-width-height/
* Fixed width and height
* @sample {highstock} highcharts/plotoptions/series-marker-width-height/
* Fixed width and height
*
* @type {number}
* @since 4.0.4
* @apioption plotOptions.series.marker.width
*/
/**
* States for a single point marker.
*
* @declare Highcharts.PointStatesOptionsObject
*/
states: {
/**
* The normal state of a single point marker. Currently only
* used for setting animation when returning to normal state
* from hover.
*
* @declare Highcharts.PointStatesNormalOptionsObject
*/
normal: {
/**
* Animation when returning to normal state after hovering.
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
*/
animation: true
},
/**
* The hover state for a single point marker.
*
* @declare Highcharts.PointStatesHoverOptionsObject
*/
hover: {
/**
* Animation when hovering over the marker.
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
*/
animation: {
/** @internal */
duration: 150
},
/**
* Enable or disable the point marker.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-enabled/
* Disabled hover state
*/
enabled: true,
/**
* The fill color of the marker in hover state. When
* `undefined`, the series' or point's fillColor for normal
* state is used.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption plotOptions.series.marker.states.hover.fillColor
*/
/**
* The color of the point marker's outline. When
* `undefined`, the series' or point's lineColor for normal
* state is used.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-linecolor/
* White fill color, black line color
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption plotOptions.series.marker.states.hover.lineColor
*/
/**
* The width of the point marker's outline. When
* `undefined`, the series' or point's lineWidth for normal
* state is used.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-linewidth/
* 3px line width
*
* @type {number}
* @apioption plotOptions.series.marker.states.hover.lineWidth
*/
/**
* The radius of the point marker. In hover state, it
* defaults to the normal state's radius + 2 as per the
* [radiusPlus](#plotOptions.series.marker.states.hover.radiusPlus)
* option.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-hover-radius/
* 10px radius
*
* @type {number}
* @apioption plotOptions.series.marker.states.hover.radius
*/
/**
* The number of pixels to increase the radius of the
* hovered point.
*
* @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidthplus/
* 5 pixels greater radius on hover
* @sample {highstock} highcharts/plotoptions/series-states-hover-linewidthplus/
* 5 pixels greater radius on hover
*
* @since 4.0.3
*/
radiusPlus: 2,
/**
* The additional line width for a hovered point.
*
* @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidthplus/
* 2 pixels wider on hover
* @sample {highstock} highcharts/plotoptions/series-states-hover-linewidthplus/
* 2 pixels wider on hover
*
* @since 4.0.3
*/
lineWidthPlus: 1
},
/**
* The appearance of the point marker when selected. In order to
* allow a point to be selected, set the
* `series.allowPointSelect` option to true.
*
* @declare Highcharts.PointStatesSelectOptionsObject
*/
select: {
/**
* Enable or disable visible feedback for selection.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-select-enabled/
* Disabled select state
*
* @type {boolean}
* @default true
* @apioption plotOptions.series.marker.states.select.enabled
*/
/**
* The radius of the point marker. In hover state, it
* defaults to the normal state's radius + 2.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-select-radius/
* 10px radius for selected points
*
* @type {number}
* @apioption plotOptions.series.marker.states.select.radius
*/
/**
* The fill color of the point marker.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-select-fillcolor/
* Solid red discs for selected points
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
fillColor: "#cccccc" /* Palette.neutralColor20 */,
/**
* The color of the point marker's outline. When
* `undefined`, the series' or point's color is used.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-select-linecolor/
* Red line color for selected points
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
lineColor: "#000000" /* Palette.neutralColor100 */,
/**
* The width of the point marker's outline.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-states-select-linewidth/
* 3px line width for selected points
*/
lineWidth: 2
}
}
},
/**
* Properties for each single point.
*
* @declare Highcharts.PlotSeriesPointOptions
*
* @private
*/
point: {
/**
* Fires when a point is clicked. One parameter, `event`, is passed
* to the function, containing common event information.
*
* If the `series.allowPointSelect` option is true, the default
* action for the point's click event is to toggle the point's
* select state. Returning `false` cancels this action.
*
* @sample {highcharts} highcharts/plotoptions/series-point-events-click/
* Click marker to alert values
* @sample {highcharts} highcharts/plotoptions/series-point-events-click-column/
* Click column
* @sample {highcharts} highcharts/plotoptions/series-point-events-click-url/
* Go to URL
* @sample {highmaps} maps/plotoptions/series-point-events-click/
* Click marker to display values
* @sample {highmaps} maps/plotoptions/series-point-events-click-url/
* Go to URL
*
* @type {Highcharts.PointClickCallbackFunction}
* @context Highcharts.Point
* @apioption plotOptions.series.point.events.click
*/
/**
* Fires when the mouse leaves the area close to the point. One
* parameter, `event`, is passed to the function, containing common
* event information.
*
* @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
* Show values in the chart's corner on mouse over
*
* @type {Highcharts.PointMouseOutCallbackFunction}
* @context Highcharts.Point
* @apioption plotOptions.series.point.events.mouseOut
*/
/**
* Fires when the mouse enters the area close to the point. One
* parameter, `event`, is passed to the function, containing common
* event information.
*
* Returning `false` cancels the default behavior, which is to show a
* tooltip for the point.
*
* @sample {highcharts} highcharts/plotoptions/series-point-events-mouseover/
* Show values in the chart's corner on mouse over
*
* @type {Highcharts.PointMouseOverCallbackFunction}
* @context Highcharts.Point
* @apioption plotOptions.series.point.events.mouseOver
*/
/**
* Fires when the point is removed using the `.remove()` method. One
* parameter, `event`, is passed to the function. Returning `false`
* cancels the operation.
*
* @sample {highcharts} highcharts/plotoptions/series-point-events-remove/
* Remove point and confirm
*
* @type {Highcharts.PointRemoveCallbackFunction}
* @since 1.2.0
* @context Highcharts.Point
* @apioption plotOptions.series.point.events.remove
*/
/**
* Fires when the point is selected either programmatically or
* following a click on the point. One parameter, `event`, is passed
* to the function. Returning `false` cancels the operation.
*
* @sample {highcharts} highcharts/plotoptions/series-point-events-select/
* Report the last selected point
* @sample {highmaps} maps/plotoptions/series-allowpointselect/
* Report select and unselect
*
* @type {Highcharts.PointSelectCallbackFunction}
* @since 1.2.0
* @context Highcharts.Point
* @apioption plotOptions.series.point.events.select
*/
/**
* Fires when the point is unselected either programmatically or
* following a click on the point. One parameter, `event`, is passed
* to the function.
* Returning `false` cancels the operation.
*
* @sample {highcharts} highcharts/plotoptions/series-point-events-unselect/
* Report the last unselected point
* @sample {highmaps} maps/plotoptions/series-allowpointselect/
* Report select and unselect
*
* @type {Highcharts.PointUnselectCallbackFunction}
* @since 1.2.0
* @context Highcharts.Point
* @apioption plotOptions.series.point.events.unselect
*/
/**
* Fires when the point is updated programmatically through the
* `.update()` method. One parameter, `event`, is passed to the
* function. The new point options can be accessed through
* `event.options`. Returning `false` cancels the operation.
*
* @sample {highcharts} highcharts/plotoptions/series-point-events-update/
* Confirm point updating
*
* @type {Highcharts.PointUpdateCallbackFunction}
* @since 1.2.0
* @context Highcharts.Point
* @apioption plotOptions.series.point.events.update
*/
/**
* Events for each single point.
*
* @declare Highcharts.PointEventsOptionsObject
*/
events: {}
},
/**
* Options for the series data labels, appearing next to each data
* point.
*
* Since v6.2.0, multiple data labels can be applied to each single
* point by defining them as an array of configs.
*
* In styled mode, the data labels can be styled with the
* `.highcharts-data-label-box` and `.highcharts-data-label` class names
* ([see example](https://www.highcharts.com/samples/highcharts/css/series-datalabels)).
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-enabled
* Data labels enabled
* @sample {highcharts} highcharts/plotoptions/series-datalabels-multiple
* Multiple data labels on a bar series
* @sample {highcharts} highcharts/css/series-datalabels
* Styled mode example
* @sample {highmaps} maps/demo/color-axis
* Choropleth map with data labels
* @sample {highmaps} maps/demo/mappoint-datalabels-mapmarker
* Using data labels as map markers
*
* @type {*|Array<*>}
* @product highcharts highstock highmaps gantt
*
* @private
*/
dataLabels: {
/**
* Enable or disable the initial animation when a series is displayed
* for the `dataLabels`. The animation can also be set as a
* configuration object. Please note that this option only applies to
* the initial animation.
*
* For other animations, see [chart.animation](#chart.animation) and the
* animation parameter under the API methods. The following properties
* are supported:
*
* - `defer`: The animation delay time in milliseconds.
*
* @sample {highcharts} highcharts/plotoptions/animation-defer/
* Animation defer settings
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
* @since 8.2.0
* @apioption plotOptions.series.dataLabels.animation
*/
animation: {},
/**
* The animation delay time in milliseconds. Set to `0` to render the
* data labels immediately. As `undefined` inherits defer time from the
* [series.animation.defer](#plotOptions.series.animation.defer).
*
* @type {number}
* @since 8.2.0
* @apioption plotOptions.series.dataLabels.animation.defer
*/
/**
* The alignment of the data label compared to the point. If `right`,
* the right side of the label should be touching the point. For points
* with an extent, like columns, the alignments also dictates how to
* align it inside the box, as given with the
* [inside](#plotOptions.column.dataLabels.inside) option. Can be one of
* `left`, `center` or `right`.
*
* @sample {highcharts}
* highcharts/plotoptions/series-datalabels-align-left/ Left
* aligned
* @sample {highcharts}
* highcharts/plotoptions/bar-datalabels-align-inside-bar/ Data
* labels inside the bar
*
* @type {Highcharts.AlignValue|null}
*/
align: 'center',
/**
* Alignment method for data labels. If set to `plotEdges`, the labels
* are aligned within the plot area in the direction of the y-axis. So
* in a regular column chart, the labels are aligned vertically
* according to the `verticalAlign` setting. In a bar chart, which is
* inverted, the labels are aligned horizontally according to the
* `align` setting. Applies to cartesian series only.
*
* @sample {highcharts} highcharts/series-bar/datalabels-alignto/
* Align to plot edges
*
* @type {string}
* @since 11.4.2
* @apioption plotOptions.series.dataLabels.alignTo
*/
/**
* Whether to allow data labels to overlap. To make the labels less
* sensitive for overlapping, the
* [dataLabels.padding](#plotOptions.series.dataLabels.padding)
* can be set to 0.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-allowoverlap-false/
* Don't allow overlap
*
* @type {boolean}
* @default false
* @since 4.1.0
* @apioption plotOptions.series.dataLabels.allowOverlap
*/
/**
* The background color or gradient for the data label. Setting it to
* `auto` will use the point's color.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
* Data labels box options
* @sample {highmaps} maps/plotoptions/series-datalabels-box/
* Data labels box options
* @sample {highmaps} maps/demo/mappoint-datalabels-mapmarker
* Data labels as map markers
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 2.2.1
* @apioption plotOptions.series.dataLabels.backgroundColor
*/
/**
* The border color for the data label. Setting it to `auto` will use
* the point's color. Defaults to `undefined`.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
* Data labels box options
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 2.2.1
* @apioption plotOptions.series.dataLabels.borderColor
*/
/**
* The border radius in pixels for the data label.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
* Data labels box options
* @sample {highmaps} maps/plotoptions/series-datalabels-box/
* Data labels box options
*
* @type {number}
* @default 0
* @since 2.2.1
* @apioption plotOptions.series.dataLabels.borderRadius
*/
/**
* The border width in pixels for the data label.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
* Data labels box options
*
* @type {number}
* @default 0
* @since 2.2.1
* @apioption plotOptions.series.dataLabels.borderWidth
*/
borderWidth: 0,
/**
* A class name for the data label. Particularly in styled mode,
* this can be used to give each series' or point's data label
* unique styling. In addition to this option, a default color class
* name is added so that we can give the labels a contrast text
* shadow.
*
* @sample {highcharts} highcharts/css/data-label-contrast/
* Contrast text shadow
* @sample {highcharts} highcharts/css/series-datalabels/
* Styling by CSS
*
* @type {string}
* @since 5.0.0
* @apioption plotOptions.series.dataLabels.className
*/
/**
* This options is deprecated.
* Use [style.color](#plotOptions.series.dataLabels.style) instead.
*
* The text color for the data labels. Defaults to `undefined`. For
* certain series types, like column or map, the data labels can be
* drawn inside the points. In this case the data label will be
* drawn with maximum contrast by default. Additionally, it will be
* given a `text-outline` style with the opposite color, to further
* increase the contrast. This can be overridden by setting the
* `text-outline` style to `none` in the `dataLabels.style` option.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-color/
* Red data labels
* @sample {highmaps} maps/demo/color-axis/
* White data labels
*
* @see [style.color](#plotOptions.series.dataLabels.style)
*
* @type {Highcharts.ColorType}
* @deprecated 10.3
* @apioption plotOptions.series.dataLabels.color
*/
/**
* Whether to hide data labels that are outside the plot area. By
* default, the data label is moved inside the plot area according
* to the
* [overflow](#plotOptions.series.dataLabels.overflow)
* option.
*
* @type {boolean}
* @default true
* @since 2.3.3
* @apioption plotOptions.series.dataLabels.crop
*/
/**
* Whether to defer displaying the data labels until the initial
* series animation has finished. Setting to `false` renders the
* data label immediately. If set to `true` inherits the defer
* time set in [plotOptions.series.animation](#plotOptions.series.animation).
*
* @since 4.0.0
* @type {boolean}
* @product highcharts highstock gantt
*/
defer: true,
/**
* Enable or disable the data labels.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-enabled/
* Data labels enabled
* @sample {highmaps} maps/demo/color-axis/
* Data labels enabled
*
* @type {boolean}
* @default false
* @apioption plotOptions.series.dataLabels.enabled
*/
/**
* A declarative filter to control of which data labels to display.
* The declarative filter is designed for use when callback
* functions are not available, like when the chart options require
* a pure JSON structure or for use with graphical editors. For
* programmatic control, use the `formatter` instead, and return
* `undefined` to disable a single data label.
*
* @example
* filter: {
* property: 'percentage',
* operator: '>',
* value: 4
* }
*
* @sample {highcharts} highcharts/demo/pie-monochrome
* Data labels filtered by percentage
*
* @declare Highcharts.DataLabelsFilterOptionsObject
* @since 6.0.3
* @apioption plotOptions.series.dataLabels.filter
*/
/**
* The operator to compare by. Can be one of `>`, `<`, `>=`, `<=`,
* `==`, `===`, `!=` and `!==`.
*
* @type {string}
* @validvalue [">", "<", ">=", "<=", "==", "===", "!=", "!=="]
* @apioption plotOptions.series.dataLabels.filter.operator
*/
/**
* The point property to filter by. Point options are passed
* directly to properties, additionally there are `y` value,
* `percentage` and others listed under {@link Highcharts.Point}
* members.
*
* @type {string}
* @apioption plotOptions.series.dataLabels.filter.property
*/
/**
* The value to compare against.
*
* @type {number}
* @apioption plotOptions.series.dataLabels.filter.value
*/
/**
* A
* [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
* for the data label. Available variables are the same as for
* `formatter`.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-format/
* Add a unit
* @sample {highcharts} highcharts/plotoptions/series-datalabels-format-subexpression/
* Complex logic in the format string
* @sample {highmaps} maps/plotoptions/series-datalabels-format/
* Formatted value in the data label
*
* @type {string}
* @default y
* @default point.value
* @since 3.0
* @apioption plotOptions.series.dataLabels.format
*/
// eslint-disable-next-line valid-jsdoc
/**
* Callback JavaScript function to format the data label. Note that if a
* `format` is defined, the format takes precedence and the formatter is
* ignored.
*
* @sample {highmaps} maps/plotoptions/series-datalabels-format/
* Formatted value
*
* @type {Highcharts.DataLabelsFormatterCallbackFunction}
*/
formatter: function () {
var numberFormatter = this.series.chart.numberFormatter;
return typeof this.y !== 'number' ?
'' : numberFormatter(this.y, -1);
},
/**
* For points with an extent, like columns or map areas, whether to
* align the data label inside the box or to the actual value point.
* Defaults to `false` in most cases, `true` in stacked columns.
*
* @type {boolean}
* @since 3.0
* @apioption plotOptions.series.dataLabels.inside
*/
/**
* Format for points with the value of null. Works analogously to
* [format](#plotOptions.series.dataLabels.format). `nullFormat` can
* be applied only to series which support displaying null points
* i.e `heatmap` or `tilemap`. Does not work with series that don't
* display null points, like `line`, `column`, `bar` or `pie`.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-nullformat/
* Format data label for null points in heat map
*
* @type {boolean|string}
* @since 7.1.0
* @apioption plotOptions.series.dataLabels.nullFormat
*/
/**
* Callback JavaScript function that defines formatting for points
* with the value of null. Works analogously to
* [formatter](#plotOptions.series.dataLabels.formatter).
* `nullFormatter` can be applied only to series which support
* displaying null points i.e `heatmap` or `tilemap`. Does not work
* with series that don't display null points, like `line`, `column`,
* `bar` or `pie`.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-nullformat/
* Format data label for null points in heat map
*
* @type {Highcharts.DataLabelsFormatterCallbackFunction}
* @since 7.1.0
* @apioption plotOptions.series.dataLabels.nullFormatter
*/
/**
* How to handle data labels that flow outside the plot area. The
* default is `"justify"`, which aligns them inside the plot area.
* For columns and bars, this means it will be moved inside the bar.
* To display data labels outside the plot area, set `crop` to
* `false` and `overflow` to `"allow"`.
*
* @type {Highcharts.DataLabelsOverflowValue}
* @default justify
* @since 3.0.6
* @apioption plotOptions.series.dataLabels.overflow
*/
/**
* When either the `borderWidth` or the `backgroundColor` is set,
* this is the padding within the box.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
* Data labels box options
* @sample {highmaps} maps/plotoptions/series-datalabels-box/
* Data labels box options
*
* @since 2.2.1
*/
padding: 5,
/**
* Aligns data labels relative to points. If `center` alignment is
* not possible, it defaults to `right`.
*
* @type {Highcharts.AlignValue}
* @default center
* @apioption plotOptions.series.dataLabels.position
*/
/**
* Text rotation in degrees. Note that due to a more complex
* structure, backgrounds, borders and padding will be lost on a
* rotated data label.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-rotation/
* Vertical labels
*
* @type {number}
* @default 0
* @apioption plotOptions.series.dataLabels.rotation
*/
/**
* The shadow of the box. Works best with `borderWidth` or
* `backgroundColor`. Since 2.3 the shadow can be an object
* configuration containing `color`, `offsetX`, `offsetY`, `opacity`
* and `width`.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-box/
* Data labels box options
*
* @type {boolean|Highcharts.ShadowOptionsObject}
* @default false
* @since 2.2.1
* @apioption plotOptions.series.dataLabels.shadow
*/
/**
* The name of a symbol to use for the border around the label.
* Symbols are predefined functions on the Renderer object.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-shape/
* A callout for annotations
*
* @type {string}
* @default square
* @since 4.1.2
* @apioption plotOptions.series.dataLabels.shape
*/
/**
* Styles for the label. The default `color` setting is
* `"contrast"`, which is a pseudo color that Highcharts picks up
* and applies the maximum contrast to the underlying point item,
* for example the bar in a bar chart.
*
* The `textOutline` is a pseudo property that applies an outline of
* the given width with the given color, which by default is the
* maximum contrast to the text. So a bright text color will result
* in a black text outline for maximum readability on a mixed
* background. In some cases, especially with grayscale text, the
* text outline doesn't work well, in which cases it can be disabled
* by setting it to `"none"`. When `useHTML` is true, the
* `textOutline` will not be picked up. In this, case, the same
* effect can be acheived through the `text-shadow` CSS property.
*
* For some series types, where each point has an extent, like for
* example tree maps, the data label may overflow the point. There
* are two strategies for handling overflow. By default, the text
* will wrap to multiple lines. The other strategy is to set
* `style.textOverflow` to `ellipsis`, which will keep the text on
* one line plus it will break inside long words.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-style/
* Bold labels
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-overflow/
* Long labels truncated with an ellipsis in a pie
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-overflow-wrap/
* Long labels are wrapped in a pie
* @sample {highmaps} maps/demo/color-axis/
* Bold labels
*
* @type {Highcharts.CSSObject}
* @since 4.1.0
* @apioption plotOptions.series.dataLabels.style
*/
style: {
/** @internal */
fontSize: '0.7em',
/** @internal */
fontWeight: 'bold',
/** @internal */
color: 'contrast',
/** @internal */
textOutline: '1px contrast'
},
/**
* Options for a label text which should follow marker's shape.
* Border and background are disabled for a label that follows a
* path.
*
* **Note:** Only SVG-based renderer supports this option. Setting
* `useHTML` to true will disable this option.
*
* @declare Highcharts.DataLabelsTextPathOptionsObject
* @since 7.1.0
* @apioption plotOptions.series.dataLabels.textPath
*/
/**
* Presentation attributes for the text path.
*
* @type {Highcharts.SVGAttributes}
* @since 7.1.0
* @apioption plotOptions.series.dataLabels.textPath.attributes
*/
/**
* Enable or disable `textPath` option for link's or marker's data
* labels.
*
* @type {boolean}
* @since 7.1.0
* @apioption plotOptions.series.dataLabels.textPath.enabled
*/
/**
* Whether to
* [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
* to render the labels.
*
* @type {boolean}
* @default false
* @apioption plotOptions.series.dataLabels.useHTML
*/
/**
* The vertical alignment of a data label. Can be one of `top`,
* `middle` or `bottom`. The default value depends on the data, for
* instance in a column chart, the label is above positive values
* and below negative values.
*
* @type {Highcharts.VerticalAlignValue|null}
* @since 2.3.3
*/
verticalAlign: 'bottom',
/**
* The x position offset of the label relative to the point in
* pixels.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-rotation/
* Vertical and positioned
* @sample {highcharts} highcharts/plotoptions/bar-datalabels-align-inside-bar/
* Data labels inside the bar
*/
x: 0,
/**
* The z index of the data labels. Use a `zIndex` of 6 to display it above
* the series, or use a `zIndex` of 2 to display it behind the series.
*
* @type {number}
* @default 6
* @since 2.3.5
* @apioption plotOptions.series.dataLabels.zIndex
*/
/**
* The y position offset of the label relative to the point in
* pixels.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-rotation/
* Vertical and positioned
*/
y: 0
},
/**
* When the series contains less points than the crop threshold, all
* points are drawn, even if the points fall outside the visible plot
* area at the current zoom. The advantage of drawing all points
* (including markers and columns), is that animation is performed on
* updates. On the other hand, when the series contains more points than
* the crop threshold, the series data is cropped to only contain points
* that fall within the plot area. The advantage of cropping away
* invisible points is to increase performance on large series.
*
* @since 2.2
* @product highcharts highstock
*
* @private
*/
cropThreshold: 300,
/**
* Opacity of a series parts: line, fill (e.g. area) and dataLabels.
*
* @see [states.inactive.opacity](#plotOptions.series.states.inactive.opacity)
*
* @since 7.1.0
*
* @private
*/
opacity: 1,
/**
* The width of each point on the x axis. For example in a column chart
* with one value each day, the pointRange would be 1 day (= 24 * 3600
* * 1000 milliseconds). This is normally computed automatically, but
* this option can be used to override the automatic value.
*
* @product highstock
*
* @private
*/
pointRange: 0,
/**
* When this is true, the series will not cause the Y axis to cross
* the zero plane (or [threshold](#plotOptions.series.threshold) option)
* unless the data actually crosses the plane.
*
* For example, if `softThreshold` is `false`, a series of 0, 1, 2,
* 3 will make the Y axis show negative values according to the
* `minPadding` option. If `softThreshold` is `true`, the Y axis starts
* at 0.
*
* @since 4.1.9
* @product highcharts highstock
*
* @private
*/
softThreshold: true,
/**
* @declare Highcharts.SeriesStatesOptionsObject
*
* @private
*/
states: {
/**
* The normal state of a series, or for point items in column, pie
* and similar series. Currently only used for setting animation
* when returning to normal state from hover.
*
* @declare Highcharts.SeriesStatesNormalOptionsObject
*/
normal: {
/**
* Animation when returning to normal state after hovering.
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
*/
animation: true
},
/**
* Options for the hovered series. These settings override the
* normal state options when a series is moused over or touched.
*
* @declare Highcharts.SeriesStatesHoverOptionsObject
*/
hover: {
/**
* Enable separate styles for the hovered series to visualize
* that the user hovers either the series itself or the legend.
*
* @sample {highcharts} highcharts/plotoptions/series-states-hover-enabled/
* Line
* @sample {highcharts} highcharts/plotoptions/series-states-hover-enabled-column/
* Column
* @sample {highcharts} highcharts/plotoptions/series-states-hover-enabled-pie/
* Pie
*
* @type {boolean}
* @default true
* @since 1.2
* @apioption plotOptions.series.states.hover.enabled
*/
/**
* Animation setting for hovering the graph in line-type series.
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
* @since 5.0.8
* @product highcharts highstock
*/
animation: {
/**
* The duration of the hover animation in milliseconds. By
* default the hover state animates quickly in, and slowly
* back to normal.
*
* @internal
*/
duration: 150
},
/**
* Pixel width of the graph line. By default this property is
* undefined, and the `lineWidthPlus` property dictates how much
* to increase the linewidth from normal state.
*
* @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidth/
* 5px line on hover
*
* @type {number}
* @product highcharts highstock
* @apioption plotOptions.series.states.hover.lineWidth
*/
/**
* The additional line width for the graph of a hovered series.
*
* @sample {highcharts} highcharts/plotoptions/series-states-hover-linewidthplus/
* 5 pixels wider
* @sample {highstock} highcharts/plotoptions/series-states-hover-linewidthplus/
* 5 pixels wider
*
* @since 4.0.3
* @product highcharts highstock
*/
lineWidthPlus: 1,
/**
* In Highcharts 1.0, the appearance of all markers belonging
* to the hovered series. For settings on the hover state of the
* individual point, see
* [marker.states.hover](#plotOptions.series.marker.states.hover).
*
* @deprecated
*
* @extends plotOptions.series.marker
* @excluding states, symbol
* @product highcharts highstock
*/
marker: {
// `lineWidth: base + 1`,
// `radius: base + 1`
},
/**
* Options for the halo appearing around the hovered point in
* line-type series as well as outside the hovered slice in pie
* charts. By default the halo is filled by the current point or
* series color with an opacity of 0.25\. The halo can be
* disabled by setting the `halo` option to `null`.
*
* In styled mode, the halo is styled with the
* `.highcharts-halo` class, with colors inherited from
* `.highcharts-color-{n}`.
*
* @sample {highcharts} highcharts/plotoptions/halo/
* Halo options
* @sample {highstock} highcharts/plotoptions/halo/
* Halo options
*
* @declare Highcharts.SeriesStatesHoverHaloOptionsObject
* @type {null|*}
* @since 4.0
* @product highcharts highstock
*/
halo: {
/**
* A collection of SVG attributes to override the appearance
* of the halo, for example `fill`, `stroke` and
* `stroke-width`.
*
* @type {Highcharts.SVGAttributes}
* @since 4.0
* @product highcharts highstock
* @apioption plotOptions.series.states.hover.halo.attributes
*/
/**
* The pixel size of the halo. For point markers this is the
* radius of the halo. For pie slices it is the width of the
* halo outside the slice. For bubbles it defaults to 5 and
* is the width of the halo outside the bubble.
*
* @since 4.0
* @product highcharts highstock
*/
size: 10,
/**
* Opacity for the halo unless a specific fill is overridden
* using the `attributes` setting. Note that Highcharts is
* only able to apply opacity to colors of hex or rgb(a)
* formats.
*
* @since 4.0
* @product highcharts highstock
*/
opacity: 0.25
}
},
/**
* Specific options for point in selected states, after being
* selected by
* [allowPointSelect](#plotOptions.series.allowPointSelect)
* or programmatically.
*
* @sample maps/plotoptions/series-allowpointselect/
* Allow point select demo
*
* @declare Highcharts.SeriesStatesSelectOptionsObject
* @extends plotOptions.series.states.hover
* @excluding brightness
*/
select: {
animation: {
/** @internal */
duration: 0
}
},
/**
* The opposite state of a hover for series.
*
* @sample highcharts/plotoptions/series-states-inactive-disabled
* Disabled inactive state
*
* @declare Highcharts.SeriesStatesInactiveOptionsObject
*/
inactive: {
/**
* Enable or disable the inactive state for a series
*
* @sample highcharts/plotoptions/series-states-inactive-disabled
* Disabled inactive state
*
* @type {boolean}
* @default true
* @apioption plotOptions.series.states.inactive.enabled
*/
/**
* The animation for entering the inactive state.
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
*/
animation: {
/** @internal */
duration: 150
},
/**
* Opacity of series elements (dataLabels, line, area).
*
* @type {number}
*/
opacity: 0.2
}
},
/**
* Sticky tracking of mouse events. When true, the `mouseOut` event on a
* series isn't triggered until the mouse moves over another series, or
* out of the plot area. When false, the `mouseOut` event on a series is
* triggered when the mouse leaves the area around the series' graph or
* markers. This also implies the tooltip when not shared. When
* `stickyTracking` is false and `tooltip.shared` is false, the tooltip
* will be hidden when moving the mouse between series. Defaults to true
* for line and area type series, but to false for columns, pies etc.
*
* **Note:** The boost module will force this option because of
* technical limitations.
*
* @sample {highcharts} highcharts/plotoptions/series-stickytracking-true/
* True by default
* @sample {highcharts} highcharts/plotoptions/series-stickytracking-false/
* False
*
* @default {highcharts} true
* @default {highstock} true
* @default {highmaps} false
* @since 2.0
*
* @private
*/
stickyTracking: true,
/**
* A configuration object for the tooltip rendering of each single
* series. Properties are inherited from [tooltip](#tooltip), but only
* the following properties can be defined on a series level.
*
* @declare Highcharts.SeriesTooltipOptionsObject
* @since 2.3
* @extends tooltip
* @excluding animation, backgroundColor, borderColor, borderRadius,
* borderWidth, className, crosshairs, enabled, formatter,
* headerShape, hideDelay, outside, padding, positioner,
* shadow, shape, shared, snap, split, stickOnContact,
* style, useHTML
* @apioption plotOptions.series.tooltip
*/
/**
* When a series contains a `data` array that is longer than this, the
* Series class looks for data configurations of plain numbers or arrays of
* numbers. The first and last valid points are checked. If found, the rest
* of the data is assumed to be the same. This saves expensive data checking
* and indexing in long series, and makes data-heavy charts render faster.
*
* Set it to `0` disable.
*
* Note:
* - In boost mode turbo threshold is forced. Only array of numbers or two
* dimensional arrays are allowed.
* - In version 11.4.3 and earlier, if object configurations were passed
* beyond the turbo threshold, a warning was logged in the console and the
* data series didn't render.
*
* @since 2.2
* @product highcharts highstock gantt
*
* @private
*/
turboThreshold: 1000,
/**
* An array defining zones within a series. Zones can be applied to the
* X axis, Y axis or Z axis for bubbles, according to the `zoneAxis`
* option. The zone definitions have to be in ascending order regarding
* to the value.
*
* In styled mode, the color zones are styled with the
* `.highcharts-zone-{n}` class, or custom classed from the `className`
* option
* ([view live demo](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/color-zones/)).
*
* @see [zoneAxis](#plotOptions.series.zoneAxis)
*
* @sample {highcharts} highcharts/series/color-zones-simple/
* Color zones
* @sample {highstock} highcharts/series/color-zones-simple/
* Color zones
*
* @declare Highcharts.SeriesZonesOptionsObject
* @type {Array<*>}
* @since 4.1.0
* @product highcharts highstock
* @apioption plotOptions.series.zones
*/
/**
* Styled mode only. A custom class name for the zone.
*
* @sample highcharts/css/color-zones/
* Zones styled by class name
*
* @type {string}
* @since 5.0.0
* @apioption plotOptions.series.zones.className
*/
/**
* Defines the color of the series.
*
* @see [series color](#plotOptions.series.color)
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 4.1.0
* @product highcharts highstock
* @apioption plotOptions.series.zones.color
*/
/**
* A name for the dash style to use for the graph.
*
* @see [plotOptions.series.dashStyle](#plotOptions.series.dashStyle)
*
* @sample {highcharts|highstock} highcharts/series/color-zones-dashstyle-dot/
* Dashed line indicates prognosis
*
* @type {Highcharts.DashStyleValue}
* @since 4.1.0
* @product highcharts highstock
* @apioption plotOptions.series.zones.dashStyle
*/
/**
* Defines the fill color for the series (in area type series)
*
* @see [fillColor](#plotOptions.area.fillColor)
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 4.1.0
* @product highcharts highstock
* @apioption plotOptions.series.zones.fillColor
*/
/**
* The value up to where the zone extends, if undefined the zones
* stretches to the last value in the series.
*
* @type {number}
* @since 4.1.0
* @product highcharts highstock
* @apioption plotOptions.series.zones.value
*/
/**
* When using dual or multiple color axes, this number defines which
* colorAxis the particular series is connected to. It refers to
* either the
* {@link #colorAxis.id|axis id}
* or the index of the axis in the colorAxis array, with 0 being the
* first. Set this option to false to prevent a series from connecting
* to the default color axis.
*
* Since v7.2.0 the option can also be an axis id or an axis index
* instead of a boolean flag.
*
* @sample highcharts/coloraxis/coloraxis-with-pie/
* Color axis with pie series
* @sample highcharts/coloraxis/multiple-coloraxis/
* Multiple color axis
*
* @type {number|string|boolean}
* @default 0
* @product highcharts highstock highmaps
* @apioption plotOptions.series.colorAxis
*/
/**
* Determines what data value should be used to calculate point color
* if `colorAxis` is used. Requires to set `min` and `max` if some
* custom point property is used or if approximation for data grouping
* is set to `'sum'`.
*
* @sample highcharts/coloraxis/custom-color-key/
* Custom color key
* @sample highcharts/coloraxis/color-key-with-stops/
* Custom colorKey with color axis stops
* @sample highcharts/coloraxis/changed-default-color-key/
* Changed default color key
*
* @type {string}
* @default y
* @since 7.2.0
* @product highcharts highstock highmaps
* @apioption plotOptions.series.colorKey
*/
/**
* What type of legend symbol to render for this series. Can be one of
* `areaMarker`, `lineMarker` or `rectangle`.
*
* @validvalue ["areaMarker", "lineMarker", "rectangle"]
*
* @sample {highcharts} highcharts/series/legend-symbol/
* Change the legend symbol
*
* @type {string}
* @default rectangle
* @since 11.0.1
* @apioption plotOptions.series.legendSymbol
*/
/**
* Defines the color of the legend symbol for this series. Defaults to
* undefined, in which case the series color is used. Does not work with
* styled mode.
*
* @sample {highcharts|highstock} highcharts/series/legend-symbol-color/
* Change the legend symbol color
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default undefined
* @since 12.0.0
* @product highcharts highstock highmaps
* @apioption plotOptions.series.legendSymbolColor
*/
/**
* Determines whether the series should look for the nearest point
* in both dimensions or just the x-dimension when hovering the series.
* Defaults to `'xy'` for scatter series and `'x'` for most other
* series. If the data has duplicate x-values, it is recommended to
* set this to `'xy'` to allow hovering over all points.
*
* Applies only to series types using nearest neighbor search (not
* direct hover) for tooltip.
*
* @sample {highcharts} highcharts/series/findnearestpointby/
* Different hover behaviors
* @sample {highstock} highcharts/series/findnearestpointby/
* Different hover behaviors
* @sample {highmaps} highcharts/series/findnearestpointby/
* Different hover behaviors
*
* @since 5.0.10
* @validvalue ["x", "xy"]
*
* @private
*/
findNearestPointBy: 'x'
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var SeriesDefaults = (seriesDefaults);
;// ./code/es5/es-modules/Core/Series/SeriesRegistry.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var SeriesRegistry_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var SeriesRegistry_defaultOptions = Defaults.defaultOptions;
var SeriesRegistry_extend = Core_Utilities.extend, SeriesRegistry_extendClass = Core_Utilities.extendClass, SeriesRegistry_merge = Core_Utilities.merge;
/* *
*
* Namespace
*
* */
var SeriesRegistry;
(function (SeriesRegistry) {
/* *
*
* Properties
*
* */
/**
* @internal
* @todo Move `Globals.seriesTypes` code to her.
*/
SeriesRegistry.seriesTypes = Core_Globals.seriesTypes;
/* *
*
* Functions
*
* */
/**
* Registers class pattern of a series.
*
* @private
*/
function registerSeriesType(seriesType, SeriesClass) {
var defaultPlotOptions = SeriesRegistry_defaultOptions.plotOptions || {},
seriesOptions = SeriesClass.defaultOptions,
seriesProto = SeriesClass.prototype;
seriesProto.type = seriesType;
if (!seriesProto.pointClass) {
seriesProto.pointClass = Series_Point;
}
if (SeriesRegistry.seriesTypes[seriesType]) {
return false;
}
if (seriesOptions) {
defaultPlotOptions[seriesType] = seriesOptions;
}
SeriesRegistry.seriesTypes[seriesType] = SeriesClass;
return true;
}
SeriesRegistry.registerSeriesType = registerSeriesType;
/**
* Old factory to create new series prototypes.
*
* @deprecated
* @function Highcharts.seriesType
*
* @param {string} type
* The series type name.
*
* @param {string} parent
* The parent series type name. Use `line` to inherit from the basic
* {@link Series} object.
*
* @param {Highcharts.SeriesOptionsType|Highcharts.Dictionary<*>} options
* The additional default options that are merged with the parent's options.
*
* @param {Highcharts.Dictionary<*>} [props]
* The properties (functions and primitives) to set on the new prototype.
*
* @param {Highcharts.Dictionary<*>} [pointProps]
* Members for a series-specific extension of the {@link Point} prototype if
* needed.
*
* @return {Highcharts.Series}
* The newly created prototype as extended from {@link Series} or its
* derivatives.
*/
function seriesType(type, parent, options, seriesProto, pointProto) {
var defaultPlotOptions = SeriesRegistry_defaultOptions.plotOptions || {};
parent = parent || '';
// Merge the options
defaultPlotOptions[type] = SeriesRegistry_merge(defaultPlotOptions[parent], options);
// Create the class
delete SeriesRegistry.seriesTypes[type];
registerSeriesType(type, SeriesRegistry_extendClass(SeriesRegistry.seriesTypes[parent] || function () { }, seriesProto));
SeriesRegistry.seriesTypes[type].prototype.type = type;
// Create the point class if needed
if (pointProto) {
var PointClass = /** @class */ (function (_super) {
SeriesRegistry_extends(PointClass, _super);
function PointClass() {
return _super !== null && _super.apply(this, arguments) || this;
}
return PointClass;
}(Series_Point));
SeriesRegistry_extend(PointClass.prototype, pointProto);
SeriesRegistry.seriesTypes[type].prototype.pointClass = PointClass;
}
return SeriesRegistry.seriesTypes[type];
}
SeriesRegistry.seriesType = seriesType;
})(SeriesRegistry || (SeriesRegistry = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Series_SeriesRegistry = (SeriesRegistry);
;// ./code/es5/es-modules/Core/Series/Series.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Series_assign = (undefined && undefined.__assign) || function () {
Series_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return Series_assign.apply(this, arguments);
};
var Series_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var Series_animObject = AnimationUtilities.animObject, Series_setAnimation = AnimationUtilities.setAnimation;
var Series_defaultOptions = Defaults.defaultOptions;
var Series_registerEventOptions = Core_Foundation.registerEventOptions;
var Series_svg = Core_Globals.svg, Series_win = Core_Globals.win;
var seriesTypes = Series_SeriesRegistry.seriesTypes;
var Series_arrayMax = Core_Utilities.arrayMax, Series_arrayMin = Core_Utilities.arrayMin, Series_clamp = Core_Utilities.clamp, Series_correctFloat = Core_Utilities.correctFloat, Series_crisp = Core_Utilities.crisp, Series_defined = Core_Utilities.defined, Series_destroyObjectProperties = Core_Utilities.destroyObjectProperties, Series_diffObjects = Core_Utilities.diffObjects, Series_erase = Core_Utilities.erase, Series_error = Core_Utilities.error, Series_extend = Core_Utilities.extend, Series_find = Core_Utilities.find, Series_fireEvent = Core_Utilities.fireEvent, Series_getClosestDistance = Core_Utilities.getClosestDistance, Series_getNestedProperty = Core_Utilities.getNestedProperty, Series_insertItem = Core_Utilities.insertItem, Series_isArray = Core_Utilities.isArray, Series_isNumber = Core_Utilities.isNumber, Series_isString = Core_Utilities.isString, Series_merge = Core_Utilities.merge, Series_objectEach = Core_Utilities.objectEach, Series_pick = Core_Utilities.pick, Series_removeEvent = Core_Utilities.removeEvent, Series_syncTimeout = Core_Utilities.syncTimeout;
/* *
*
* Class
*
* */
/**
* This is the base series prototype that all other series types inherit from.
* A new series is initialized either through the
* [series](https://api.highcharts.com/highcharts/series)
* option structure, or after the chart is initialized, through
* {@link Highcharts.Chart#addSeries}.
*
* The object can be accessed in a number of ways. All series and point event
* handlers give a reference to the `series` object. The chart object has a
* {@link Highcharts.Chart#series|series} property that is a collection of all
* the chart's series. The point objects and axis objects also have the same
* reference.
*
* Another way to reference the series programmatically is by `id`. Add an id
* in the series configuration options, and get the series object by
* {@link Highcharts.Chart#get}.
*
* Configuration options for the series are given in three levels. Options for
* all series in a chart are given in the
* [plotOptions.series](https://api.highcharts.com/highcharts/plotOptions.series)
* object. Then options for all series of a specific type
* are given in the plotOptions of that type, for example `plotOptions.line`.
* Next, options for one single series are given in the series array, or as
* arguments to `chart.addSeries`.
*
* The data in the series is stored in various arrays.
*
* - First, `series.options.data` contains all the original config options for
* each point whether added by options or methods like `series.addPoint`.
*
* - The `series.dataTable` refers to an instance of [DataTableCore](https://api.highcharts.com/class-reference/Highcharts.Data)
* or `DataTable` that contains the data in a tabular format. Individual
* columns can be read from `series.getColumn()`.
*
* - Next, `series.data` contains those values converted to points, but in case
* the series data length exceeds the `cropThreshold`, or if the data is
* grouped, `series.data` doesn't contain all the points. It only contains the
* points that have been created on demand.
*
* - Then there's `series.points` that contains all currently visible point
* objects. In case of cropping, the cropped-away points are not part of this
* array. The `series.points` array starts at `series.cropStart` compared to
* `series.data` and `series.options.data`. If however the series data is
* grouped, these can't be correlated one to one.
*
* @class
* @name Highcharts.Series
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {Highcharts.SeriesOptionsType|object} options
* The series options.
*/
var Series = /** @class */ (function () {
function Series() {
/* *
*
* Static Properties
*
* */
this.zoneAxis = 'y';
// eslint-enable valid-jsdoc
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
Series.prototype.init = function (chart, userOptions) {
var _a;
Series_fireEvent(this, 'init', { options: userOptions });
// Create the data table
(_a = this.dataTable) !== null && _a !== void 0 ? _a : (this.dataTable = new Data_DataTableCore());
var series = this,
chartSeries = chart.series;
// The 'eventsToUnbind' property moved from prototype into the
// Series init to avoid reference to the same array between
// the different series and charts. #12959, #13937
this.eventsToUnbind = [];
/**
* Read only. The chart that the series belongs to.
*
* @name Highcharts.Series#chart
* @type {Highcharts.Chart}
*/
series.chart = chart;
/**
* Read only. The series' type, like "line", "area", "column" etc.
* The type in the series options anc can be altered using
* {@link Series#update}.
*
* @name Highcharts.Series#type
* @type {string}
*/
/**
* Read only. The series' current options. To update, use
* {@link Series#update}.
*
* @name Highcharts.Series#options
* @type {Highcharts.SeriesOptionsType}
*/
series.options = series.setOptions(userOptions);
var options = series.options,
visible = options.visible !== false;
/**
* All child series that are linked to the current series through the
* [linkedTo](https://api.highcharts.com/highcharts/series.line.linkedTo)
* option.
*
* @name Highcharts.Series#linkedSeries
* @type {Array<Highcharts.Series>}
* @readonly
*/
series.linkedSeries = [];
// Bind the axes
series.bindAxes();
Series_extend(series, {
/**
* The series name as given in the options. Defaults to
* "Series {n}".
*
* @name Highcharts.Series#name
* @type {string}
*/
name: options.name,
state: '',
/**
* Read only. The series' visibility state as set by {@link
* Series#show}, {@link Series#hide}, or in the initial
* configuration.
*
* @name Highcharts.Series#visible
* @type {boolean}
*/
visible: visible, // True by default
/**
* Read only. The series' selected state as set by {@link
* Highcharts.Series#select}.
*
* @name Highcharts.Series#selected
* @type {boolean}
*/
selected: options.selected === true // False by default
});
Series_registerEventOptions(this, options);
var events = options.events;
if ((events && events.click) ||
(options.point &&
options.point.events &&
options.point.events.click) ||
options.allowPointSelect) {
chart.runTrackerClick = true;
}
series.getColor();
series.getSymbol();
// Mark cartesian
if (series.isCartesian) {
chart.hasCartesianSeries = true;
}
// Get the index and register the series in the chart. The index is
// one more than the current latest series index (#5960).
var lastSeries;
if (chartSeries.length) {
lastSeries = chartSeries[chartSeries.length - 1];
}
series._i = Series_pick(lastSeries && lastSeries._i, -1) + 1;
series.opacity = series.options.opacity;
// Insert the series and re-order all series above the insertion
// point.
chart.orderItems('series', Series_insertItem(this, chartSeries));
// Set options for series with sorting and set data later.
if (options.dataSorting && options.dataSorting.enabled) {
series.setDataSortingOptions();
}
else if (!series.points && !series.data) {
series.setData(options.data, false);
}
Series_fireEvent(this, 'afterInit');
};
/**
* Check whether the series item is itself or inherits from a certain
* series type.
*
* @function Highcharts.Series#is
* @param {string} type The type of series to check for, can be either
* featured or custom series types. For example `column`, `pie`,
* `ohlc` etc.
*
* @return {boolean}
* True if this item is or inherits from the given type.
*/
Series.prototype.is = function (type) {
return seriesTypes[type] && this instanceof seriesTypes[type];
};
/**
* Set the xAxis and yAxis properties of cartesian series, and register
* the series in the `axis.series` array.
*
* @private
* @function Highcharts.Series#bindAxes
*/
Series.prototype.bindAxes = function () {
var series = this,
seriesOptions = series.options,
chart = series.chart;
var axisOptions;
Series_fireEvent(this, 'bindAxes', null, function () {
// Repeat for xAxis and yAxis
(series.axisTypes || []).forEach(function (coll) {
// Loop through the chart's axis objects
(chart[coll] || []).forEach(function (axis) {
axisOptions = axis.options;
// Apply if the series xAxis or yAxis option matches
// the number of the axis, or if undefined, use the
// first axis
if (Series_pick(seriesOptions[coll], 0) === axis.index ||
(typeof seriesOptions[coll] !==
'undefined' &&
seriesOptions[coll] === axisOptions.id)) {
// Register this series in the axis.series lookup
Series_insertItem(series, axis.series);
// Set this series.xAxis or series.yAxis reference
/**
* Read only. The unique xAxis object associated
* with the series.
*
* @name Highcharts.Series#xAxis
* @type {Highcharts.Axis}
*/
/**
* Read only. The unique yAxis object associated
* with the series.
*
* @name Highcharts.Series#yAxis
* @type {Highcharts.Axis}
*/
series[coll] = axis;
// Mark dirty for redraw
axis.isDirty = true;
}
});
// The series needs an X and an Y axis
if (!series[coll] &&
series.optionalAxis !== coll) {
Series_error(18, true, chart);
}
});
});
Series_fireEvent(this, 'afterBindAxes');
};
/**
* Define hasData functions for series. These return true if there
* are data points on this series within the plot area.
*
* @private
* @function Highcharts.Series#hasData
*/
Series.prototype.hasData = function () {
return ((this.visible &&
typeof this.dataMax !== 'undefined' &&
typeof this.dataMin !== 'undefined') || ( // #3703
this.visible &&
this.dataTable.rowCount > 0 // #9758
));
};
/**
* Determine whether the marker in a series has changed.
*
* @private
* @function Highcharts.Series#hasMarkerChanged
*/
Series.prototype.hasMarkerChanged = function (options, oldOptions) {
var marker = options.marker,
oldMarker = oldOptions.marker || {};
return marker && ((oldMarker.enabled && !marker.enabled) ||
oldMarker.symbol !== marker.symbol || // #10870, #15946
oldMarker.height !== marker.height || // #16274
oldMarker.width !== marker.width // #16274
);
};
/**
* Return an auto incremented x value based on the pointStart and
* pointInterval options. This is only used if an x value is not given
* for the point that calls autoIncrement.
*
* @private
* @function Highcharts.Series#autoIncrement
*/
Series.prototype.autoIncrement = function (x) {
var _a,
_b;
var options = this.options,
_c = this.options,
pointIntervalUnit = _c.pointIntervalUnit,
relativeXValue = _c.relativeXValue,
time = this.chart.time,
xIncrement = (_b = (_a = this.xIncrement) !== null && _a !== void 0 ? _a : time.parse(options.pointStart)) !== null && _b !== void 0 ? _b : 0;
var pointInterval;
this.pointInterval = pointInterval = Series_pick(this.pointInterval, options.pointInterval, 1);
if (relativeXValue && Series_isNumber(x)) {
pointInterval *= x;
}
// Added code for pointInterval strings
if (pointIntervalUnit) {
var d = time.toParts(xIncrement);
if (pointIntervalUnit === 'day') {
d[2] += pointInterval;
}
else if (pointIntervalUnit === 'month') {
d[1] += pointInterval;
}
else if (pointIntervalUnit === 'year') {
d[0] += pointInterval;
}
pointInterval = time.makeTime.apply(time, d) - xIncrement;
}
if (relativeXValue && Series_isNumber(x)) {
return xIncrement + pointInterval;
}
this.xIncrement = xIncrement + pointInterval;
return xIncrement;
};
/**
* Internal function to set properties for series if data sorting is
* enabled.
*
* @private
* @function Highcharts.Series#setDataSortingOptions
*/
Series.prototype.setDataSortingOptions = function () {
var options = this.options;
Series_extend(this, {
requireSorting: false,
sorted: false,
enabledDataSorting: true,
allowDG: false
});
// To allow unsorted data for column series.
if (!Series_defined(options.pointRange)) {
options.pointRange = 1;
}
};
/**
* Set the series options by merging from the options tree. Called
* internally on initializing and updating series. This function will
* not redraw the series. For API usage, use {@link Series#update}.
* @private
* @function Highcharts.Series#setOptions
* @param {Highcharts.SeriesOptionsType} itemOptions
* The series options.
* @emits Highcharts.Series#event:afterSetOptions
*/
Series.prototype.setOptions = function (itemOptions) {
var _a,
_b;
var chart = this.chart,
chartOptions = chart.options,
plotOptions = chartOptions.plotOptions,
userOptions = chart.userOptions || {},
seriesUserOptions = Series_merge(itemOptions),
styledMode = chart.styledMode,
e = {
plotOptions: plotOptions,
userOptions: seriesUserOptions
};
var zone;
Series_fireEvent(this, 'setOptions', e);
// These may be modified by the event
var typeOptions = e.plotOptions[this.type],
userPlotOptions = (userOptions.plotOptions || {}),
userPlotOptionsSeries = userPlotOptions.series || {},
defaultPlotOptionsType = (Series_defaultOptions.plotOptions[this.type] || {}),
userPlotOptionsType = userPlotOptions[this.type] || {};
// Use copy to prevent undetected changes (#9762)
/**
* Contains series options by the user without defaults.
* @name Highcharts.Series#userOptions
* @type {Highcharts.SeriesOptionsType}
*/
this.userOptions = e.userOptions;
var options = Series_merge(typeOptions,
plotOptions.series,
// #3881, chart instance plotOptions[type] should trump
// plotOptions.series
userPlotOptionsType,
seriesUserOptions);
// The tooltip options are merged between global and series specific
// options. Importance order asscendingly:
// globals: (1)tooltip, (2)plotOptions.series,
// (3)plotOptions[this.type]
// init userOptions with possible later updates: 4-6 like 1-3 and
// (7)this series options
this.tooltipOptions = Series_merge(Series_defaultOptions.tooltip, // 1
(_a = Series_defaultOptions.plotOptions.series) === null || _a === void 0 ? void 0 : _a.tooltip, // 2
defaultPlotOptionsType === null || defaultPlotOptionsType === void 0 ? void 0 : defaultPlotOptionsType.tooltip, // 3
chart.userOptions.tooltip, // 4
(_b = userPlotOptions.series) === null || _b === void 0 ? void 0 : _b.tooltip, // 5
userPlotOptionsType.tooltip, // 6
seriesUserOptions.tooltip // 7
);
// When shared tooltip, stickyTracking is true by default,
// unless user says otherwise.
this.stickyTracking = Series_pick(seriesUserOptions.stickyTracking, userPlotOptionsType.stickyTracking, userPlotOptionsSeries.stickyTracking, (this.tooltipOptions.shared && !this.noSharedTooltip ?
true :
options.stickyTracking));
// Delete marker object if not allowed (#1125)
if (typeOptions.marker === null) {
delete options.marker;
}
// Handle color zones
this.zoneAxis = options.zoneAxis || 'y';
var zones = this.zones = // #20440, create deep copy of zones options
(options.zones || []).map(function (z) { return (Series_assign({},
z)); });
if ((options.negativeColor || options.negativeFillColor) &&
!options.zones) {
zone = {
value: options[this.zoneAxis + 'Threshold'] ||
options.threshold ||
0,
className: 'highcharts-negative'
};
if (!styledMode) {
zone.color = options.negativeColor;
zone.fillColor = options.negativeFillColor;
}
zones.push(zone);
}
// Push one extra zone for the rest
if (zones.length && Series_defined(zones[zones.length - 1].value)) {
zones.push(styledMode ? {} : {
color: this.color,
fillColor: this.fillColor
});
}
Series_fireEvent(this, 'afterSetOptions', { options: options });
return options;
};
/**
* Return series name in "Series {Number}" format or the one defined by
* a user. This method can be simply overridden as series name format
* can vary (e.g. technical indicators).
*
* @function Highcharts.Series#getName
*
* @return {string}
* The series name.
*/
Series.prototype.getName = function () {
// #4119
return Series_pick(this.options.name, 'Series ' + (this.index + 1));
};
/**
* @private
* @function Highcharts.Series#getCyclic
*/
Series.prototype.getCyclic = function (prop, value, defaults) {
var chart = this.chart, indexName = "" + prop + "Index", counterName = "" + prop + "Counter", len = (
// Symbol count
(defaults === null || defaults === void 0 ? void 0 : defaults.length) ||
// Color count
chart.options.chart.colorCount);
var i,
setting;
if (!value) {
// Pick up either the colorIndex option, or the series.colorIndex
// after Series.update()
setting = Series_pick(prop === 'color' ? this.options.colorIndex : void 0, this[indexName]);
if (Series_defined(setting)) { // After Series.update()
i = setting;
}
else {
// #6138
if (!chart.series.length) {
chart[counterName] = 0;
}
i = chart[counterName] % len;
chart[counterName] += 1;
}
if (defaults) {
value = defaults[i];
}
}
// Set the colorIndex
if (typeof i !== 'undefined') {
this[indexName] = i;
}
this[prop] = value;
};
/**
* Get the series' color based on either the options or pulled from
* global options.
*
* @private
* @function Highcharts.Series#getColor
*/
Series.prototype.getColor = function () {
if (this.chart.styledMode) {
this.getCyclic('color');
}
else if (this.options.colorByPoint) {
this.color = "#cccccc" /* Palette.neutralColor20 */;
}
else {
this.getCyclic('color', this.options.color ||
Series_defaultOptions.plotOptions[this.type].color, this.chart.options.colors);
}
};
/**
* Get all points' instances created for this series.
*
* @private
* @function Highcharts.Series#getPointsCollection
*/
Series.prototype.getPointsCollection = function () {
return (this.hasGroupedData ? this.points : this.data) || [];
};
/**
* Get the series' symbol based on either the options or pulled from
* global options.
*
* @private
* @function Highcharts.Series#getSymbol
*/
Series.prototype.getSymbol = function () {
var seriesMarkerOption = this.options.marker;
this.getCyclic('symbol', seriesMarkerOption.symbol, this.chart.options.symbols);
};
/**
* Shorthand to get one of the series' data columns from `Series.dataTable`.
*
* @private
* @function Highcharts.Series#getColumn
*/
Series.prototype.getColumn = function (columnName, modified) {
return (modified ? this.dataTable.modified : this.dataTable)
.getColumn(columnName, true) || [];
};
/**
* Finds the index of an existing point that matches the given point
* options.
*
* @private
* @function Highcharts.Series#findPointIndex
* @param {Highcharts.PointOptionsObject} optionsObject
* The options of the point.
* @param {number} fromIndex
* The index to start searching from, used for optimizing series with
* required sorting.
* @return {number|undefined}
* Returns the index of a matching point, or undefined if no match is found.
*/
Series.prototype.findPointIndex = function (optionsObject, fromIndex) {
var id = optionsObject.id,
x = optionsObject.x,
oldData = this.points,
dataSorting = this.options.dataSorting;
var matchingPoint,
matchedById,
pointIndex;
if (id) {
var item = this.chart.get(id);
if (item instanceof Series_Point) {
matchingPoint = item;
}
}
else if (this.linkedParent ||
this.enabledDataSorting ||
this.options.relativeXValue) {
var matcher = function (oldPoint) { return !oldPoint.touched &&
oldPoint.index === optionsObject.index; };
if (dataSorting && dataSorting.matchByName) {
matcher = function (oldPoint) { return !oldPoint.touched &&
oldPoint.name === optionsObject.name; };
}
else if (this.options.relativeXValue) {
matcher = function (oldPoint) { return !oldPoint.touched &&
oldPoint.options.x === optionsObject.x; };
}
matchingPoint = Series_find(oldData, matcher);
// Add unmatched point as a new point
if (!matchingPoint) {
return void 0;
}
}
if (matchingPoint) {
pointIndex = matchingPoint && matchingPoint.index;
if (typeof pointIndex !== 'undefined') {
matchedById = true;
}
}
// Search for the same X in the existing data set
if (typeof pointIndex === 'undefined' && Series_isNumber(x)) {
pointIndex = this.getColumn('x').indexOf(x, fromIndex);
}
// Reduce pointIndex if data is cropped
if (pointIndex !== -1 &&
typeof pointIndex !== 'undefined' &&
this.cropped) {
pointIndex = (pointIndex >= this.cropStart) ?
pointIndex - this.cropStart : pointIndex;
}
if (!matchedById &&
Series_isNumber(pointIndex) &&
oldData[pointIndex] && oldData[pointIndex].touched) {
pointIndex = void 0;
}
return pointIndex;
};
/**
* Internal function called from setData. If the point count is the same
* as it was, or if there are overlapping X values, just run
* Point.update which is cheaper, allows animation, and keeps references
* to points. This also allows adding or removing points if the X-es
* don't match.
*
* @private
* @function Highcharts.Series#updateData
*/
Series.prototype.updateData = function (data, animation) {
var options = this.options,
dataSorting = options.dataSorting,
oldData = this.points,
pointsToAdd = [],
requireSorting = this.requireSorting,
equalLength = data.length === oldData.length;
var hasUpdatedByKey,
i,
point,
lastIndex,
succeeded = true;
this.xIncrement = null;
// Iterate the new data
data.forEach(function (pointOptions, i) {
var optionsObject = (Series_defined(pointOptions) &&
this.pointClass.prototype.optionsToObject.call({ series: this },
pointOptions)) || {};
var pointIndex;
// Get the x of the new data point
var x = optionsObject.x,
id = optionsObject.id;
if (id || Series_isNumber(x)) {
pointIndex = this.findPointIndex(optionsObject, lastIndex);
// Matching X not found
// or used already due to ununique x values (#8995),
// add point (but later)
if (pointIndex === -1 ||
typeof pointIndex === 'undefined') {
pointsToAdd.push(pointOptions);
// Matching X found, update
}
else if (oldData[pointIndex] &&
pointOptions !== options.data[pointIndex]) {
oldData[pointIndex].update(pointOptions, false, null, false);
// Mark it touched, below we will remove all points that
// are not touched.
oldData[pointIndex].touched = true;
// Speed optimize by only searching after last known
// index. Performs ~20% bettor on large data sets.
if (requireSorting) {
lastIndex = pointIndex + 1;
}
// Point exists, no changes, don't remove it
}
else if (oldData[pointIndex]) {
oldData[pointIndex].touched = true;
}
// If the length is equal and some of the nodes had a
// match in the same position, we don't want to remove
// non-matches.
if (!equalLength ||
i !== pointIndex ||
(dataSorting && dataSorting.enabled) ||
this.hasDerivedData) {
hasUpdatedByKey = true;
}
}
else {
// Gather all points that are not matched
pointsToAdd.push(pointOptions);
}
}, this);
// Remove points that don't exist in the updated data set
if (hasUpdatedByKey) {
i = oldData.length;
while (i--) {
point = oldData[i];
if (point && !point.touched && point.remove) {
point.remove(false, animation);
}
}
// If we did not find keys (ids or x-values), and the length is the
// same, update one-to-one
}
else if (equalLength && (!dataSorting || !dataSorting.enabled)) {
data.forEach(function (point, i) {
// .update doesn't exist on a linked, hidden series (#3709)
// (#10187)
if (point !== oldData[i].y && !oldData[i].destroyed) {
oldData[i].update(point, false, null, false);
}
});
// Don't add new points since those configs are used above
pointsToAdd.length = 0;
// Did not succeed in updating data
}
else {
succeeded = false;
}
oldData.forEach(function (point) {
if (point) {
point.touched = false;
}
});
if (!succeeded) {
return false;
}
// Add new points
pointsToAdd.forEach(function (point) {
this.addPoint(point, false, null, null, false);
}, this);
var xData = this.getColumn('x');
if (this.xIncrement === null &&
xData.length) {
this.xIncrement = Series_arrayMax(xData);
this.autoIncrement();
}
return true;
};
Series.prototype.dataColumnKeys = function () {
return Series_spreadArray(['x'], (this.pointArrayMap || ['y']), true);
};
/**
* Apply a new set of data to the series and optionally redraw it. The
* new data array is passed by reference (except in case of
* `updatePoints`), and may later be mutated when updating the chart
* data.
*
* Note the difference in behaviour when setting the same amount of
* points, or a different amount of points, as handled by the
* `updatePoints` parameter.
*
* @sample highcharts/members/series-setdata/
* Set new data from a button
* @sample highcharts/members/series-setdata-pie/
* Set data in a pie
* @sample stock/members/series-setdata/
* Set new data in Highcharts Stock
* @sample maps/members/series-setdata/
* Set new data in Highmaps
*
* @function Highcharts.Series#setData
*
* @param {Array<Highcharts.PointOptionsType>} data
* Takes an array of data in the same format as described under
* `series.{type}.data` for the given series type, for example a
* line series would take data in the form described under
* [series.line.data](https://api.highcharts.com/highcharts/series.line.data).
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the series is altered. If
* doing more operations on the chart, it is a good idea to set
* redraw to false and call {@link Chart#redraw} after.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* When the updated data is the same length as the existing data,
* points will be updated by default, and animation visualizes
* how the points are changed. Set false to disable animation, or
* a configuration object to set duration or easing.
*
* @param {boolean} [updatePoints=true]
* When this is true, points will be updated instead of replaced
* whenever possible. This occurs a) when the updated data is the
* same length as the existing data, b) when points are matched
* by their id's, or c) when points can be matched by X values.
* This allows updating with animation and performs better. In
* this case, the original array is not passed by reference. Set
* `false` to prevent.
*/
Series.prototype.setData = function (data, redraw, animation, updatePoints) {
var _a,
_b;
var _c,
_d;
if (redraw === void 0) { redraw = true; }
var series = this,
oldData = series.points,
oldDataLength = (oldData && oldData.length) || 0,
options = series.options,
chart = series.chart,
dataSorting = options.dataSorting,
xAxis = series.xAxis,
turboThreshold = options.turboThreshold,
table = this.dataTable,
dataColumnKeys = this.dataColumnKeys(),
pointValKey = series.pointValKey || 'y',
pointArrayMap = series.pointArrayMap || [],
valueCount = pointArrayMap.length,
keys = options.keys;
var i,
updatedData,
indexOfX = 0,
indexOfY = 1,
copiedData;
if (!chart.options.chart.allowMutatingData) { // #4259
// Remove old reference
if (options.data) {
delete series.options.data;
}
if (series.userOptions.data) {
delete series.userOptions.data;
}
copiedData = Series_merge(true, data);
}
data = copiedData || data || [];
var dataLength = data.length;
if (dataSorting && dataSorting.enabled) {
data = this.sortData(data);
}
// First try to run Point.update which is cheaper, allows animation, and
// keeps references to points.
if (chart.options.chart.allowMutatingData &&
updatePoints !== false &&
dataLength &&
oldDataLength &&
!series.cropped &&
!series.hasGroupedData &&
series.visible &&
// Soft updating has no benefit in boost, and causes JS error
// (#8355)
!series.boosted) {
updatedData = this.updateData(data, animation);
}
if (!updatedData) {
// Reset properties
series.xIncrement = null;
series.colorCounter = 0; // For series with colorByPoint (#1547)
// In turbo mode, look for one- or twodimensional arrays of numbers.
// The first and the last valid value are tested, and we assume that
// all the rest are defined the same way. Although the 'for' loops
// are similar, they are repeated inside each if-else conditional
// for max performance.
var runTurbo = turboThreshold && dataLength > turboThreshold;
if (runTurbo) {
var firstPoint = series.getFirstValidPoint(data),
lastPoint = series.getFirstValidPoint(data,
dataLength - 1, -1),
isShortArray = function (a) { return Boolean(Series_isArray(a) && (keys || Series_isNumber(a[0]))); };
// Assume all points are numbers
if (Series_isNumber(firstPoint) && Series_isNumber(lastPoint)) {
var x = [],
valueData = [];
for (var _e = 0, data_1 = data; _e < data_1.length; _e++) {
var value = data_1[_e];
x.push(this.autoIncrement());
valueData.push(value);
}
table.setColumns((_a = {
x: x
},
_a[pointValKey] = valueData,
_a));
// Assume all points are arrays when first point is
}
else if (isShortArray(firstPoint) &&
isShortArray(lastPoint)) {
if (valueCount) { // [x, low, high] or [x, o, h, l, c]
// When autoX is 1, the x is skipped: [low, high]. When
// autoX is 0, the x is included: [x, low, high]
var autoX = firstPoint.length === valueCount ?
1 : 0,
colArray_1 = new Array(dataColumnKeys.length)
.fill(0).map(function () { return []; });
for (var _f = 0, _g = data; _f < _g.length; _f++) {
var pt = _g[_f];
if (autoX) {
colArray_1[0].push(this.autoIncrement());
}
for (var j = autoX; j <= valueCount; j++) {
(_c = colArray_1[j]) === null || _c === void 0 ? void 0 : _c.push(pt[j - autoX]);
}
}
table.setColumns(dataColumnKeys.reduce(function (columns, columnName, i) {
columns[columnName] = colArray_1[i];
return columns;
}, {}));
}
else { // [x, y]
if (keys) {
indexOfX = keys.indexOf('x');
indexOfY = keys.indexOf('y');
indexOfX = indexOfX >= 0 ? indexOfX : 0;
indexOfY = indexOfY >= 0 ? indexOfY : 1;
}
if (firstPoint.length === 1) {
indexOfY = 0;
}
var xData = [],
valueData = [];
if (indexOfX === indexOfY) {
for (var _h = 0, data_2 = data; _h < data_2.length; _h++) {
var pt = data_2[_h];
xData.push(this.autoIncrement());
valueData.push(pt[indexOfY]);
}
}
else {
for (var _j = 0, data_3 = data; _j < data_3.length; _j++) {
var pt = data_3[_j];
xData.push(pt[indexOfX]);
valueData.push(pt[indexOfY]);
}
}
table.setColumns((_b = {
x: xData
},
_b[pointValKey] = valueData,
_b));
}
}
else {
// Highcharts expects configs to be numbers or arrays in
// turbo mode
runTurbo = false;
}
}
if (!runTurbo) {
var columns = dataColumnKeys.reduce(function (columns,
columnName) {
columns[columnName] = [];
return columns;
}, {});
for (i = 0; i < dataLength; i++) {
var pt = series.pointClass.prototype.applyOptions.apply({ series: series },
[data[i]]);
for (var _k = 0, dataColumnKeys_1 = dataColumnKeys; _k < dataColumnKeys_1.length; _k++) {
var key = dataColumnKeys_1[_k];
columns[key][i] = pt[key];
}
}
table.setColumns(columns);
}
// Forgetting to cast strings to numbers is a common caveat when
// handling CSV or JSON
if (Series_isString(this.getColumn('y')[0])) {
Series_error(14, true, chart);
}
series.data = [];
series.options.data = series.userOptions.data = data;
// Destroy old points
i = oldDataLength;
while (i--) {
(_d = oldData[i]) === null || _d === void 0 ? void 0 : _d.destroy();
}
// Reset minRange (#878)
if (xAxis) {
xAxis.minRange = xAxis.userMinRange;
}
// Redraw
series.isDirty = chart.isDirtyBox = true;
series.isDirtyData = !!oldData;
animation = false;
}
// Typically for pie series, points need to be processed and
// generated prior to rendering the legend
if (options.legendType === 'point') {
this.processData();
this.generatePoints();
}
if (redraw) {
chart.redraw(animation);
}
};
/**
* Internal function to sort series data
*
* @private
* @function Highcharts.Series#sortData
* @param {Array<Highcharts.PointOptionsType>} data
* Force data grouping.
*/
Series.prototype.sortData = function (data) {
var series = this,
options = series.options,
dataSorting = options.dataSorting,
sortKey = dataSorting.sortKey || 'y',
getPointOptionsObject = function (series,
pointOptions) {
return (Series_defined(pointOptions) &&
series.pointClass.prototype.optionsToObject.call({
series: series
},
pointOptions)) || {};
};
data.forEach(function (pointOptions, i) {
data[i] = getPointOptionsObject(series, pointOptions);
data[i].index = i;
}, this);
// Sorting
var sortedData = data.concat().sort(function (a,
b) {
var aValue = Series_getNestedProperty(sortKey,
a);
var bValue = Series_getNestedProperty(sortKey,
b);
return bValue < aValue ? -1 : bValue > aValue ? 1 : 0;
});
// Set x value depending on the position in the array
sortedData.forEach(function (point, i) {
point.x = i;
}, this);
// Set the same x for linked series points if they don't have their
// own sorting
if (series.linkedSeries) {
series.linkedSeries.forEach(function (linkedSeries) {
var options = linkedSeries.options,
seriesData = options.data;
if ((!options.dataSorting ||
!options.dataSorting.enabled) &&
seriesData) {
seriesData.forEach(function (pointOptions, i) {
seriesData[i] = getPointOptionsObject(linkedSeries, pointOptions);
if (data[i]) {
seriesData[i].x = data[i].x;
seriesData[i].index = i;
}
});
linkedSeries.setData(seriesData, false);
}
});
}
return data;
};
/**
* Internal function to process the data by cropping away unused data
* points if the series is longer than the crop threshold. This saves
* computing time for large series.
*
* @private
* @function Highcharts.Series#getProcessedData
* @param {boolean} [forceExtremesFromAll]
* Force getting extremes of a total series data range.
*/
Series.prototype.getProcessedData = function (forceExtremesFromAll) {
var series = this,
table = series.dataTable,
isCartesian = series.isCartesian,
options = series.options,
xAxis = series.xAxis,
cropThreshold = options.cropThreshold,
getExtremesFromAll = forceExtremesFromAll ||
// X-range series etc, #21003
series.getExtremesFromAll,
logarithmic = xAxis === null || xAxis === void 0 ? void 0 : xAxis.logarithmic,
dataLength = table.rowCount;
var croppedData,
cropped,
cropStart = 0,
xExtremes,
min,
max,
xData = series.getColumn('x'),
modified = table,
updatingNames = false;
if (xAxis) {
// Corrected for log axis (#3053)
xExtremes = xAxis.getExtremes();
min = xExtremes.min;
max = xExtremes.max;
updatingNames = !!(xAxis.categories && !xAxis.names.length);
// Optionally filter out points outside the plot area
if (isCartesian &&
series.sorted &&
!getExtremesFromAll &&
(!cropThreshold ||
dataLength > cropThreshold ||
series.forceCrop)) {
// It's outside current extremes
if (xData[dataLength - 1] < min ||
xData[0] > max) {
modified = new Data_DataTableCore();
// Only crop if it's actually spilling out
}
else if (
// Don't understand why this condition is needed
series.getColumn(series.pointValKey || 'y').length && (xData[0] < min ||
xData[dataLength - 1] > max)) {
croppedData = this.cropData(table, min, max);
modified = croppedData.modified;
cropStart = croppedData.start;
cropped = true;
}
}
}
// Find the closest distance between processed points
xData = modified.getColumn('x') || [];
var closestPointRange = Series_getClosestDistance([
logarithmic ?
xData.map(logarithmic.log2lin) :
xData
],
// Unsorted data is not supported by the line tooltip, as well as
// data grouping and navigation in Stock charts (#725) and width
// calculation of columns (#1900). Avoid warning during the
// premature processing pass in updateNames (#16104).
function () { return (series.requireSorting &&
!updatingNames &&
Series_error(15,
false,
series.chart)); });
return {
modified: modified,
cropped: cropped,
cropStart: cropStart,
closestPointRange: closestPointRange
};
};
/**
* Internal function to apply processed data.
* In Highcharts Stock, this function is extended to provide data grouping.
*
* @private
* @function Highcharts.Series#processData
* @param {boolean} [force]
* Force data grouping.
*/
Series.prototype.processData = function (force) {
var series = this,
xAxis = series.xAxis,
table = series.dataTable;
// If the series data or axes haven't changed, don't go through
// this. Return false to pass the message on to override methods
// like in data grouping.
if (series.isCartesian &&
!series.isDirty &&
!xAxis.isDirty &&
!series.yAxis.isDirty &&
!force) {
return false;
}
var processedData = series.getProcessedData();
// Record the properties
table.modified = processedData.modified;
series.cropped = processedData.cropped; // Undefined or true
series.cropStart = processedData.cropStart;
series.closestPointRange = (series.basePointRange = processedData.closestPointRange);
Series_fireEvent(series, 'afterProcessData');
};
/**
* Iterate over xData and crop values between min and max. Returns
* object containing crop start/end cropped xData with corresponding
* part of yData, dataMin and dataMax within the cropped range.
*
* @private
* @function Highcharts.Series#cropData
*/
Series.prototype.cropData = function (table, min, max) {
var xData = table.getColumn('x',
true) || [],
dataLength = xData.length,
columns = {};
var i,
j,
start = 0,
end = dataLength;
// Iterate up to find slice start
for (i = 0; i < dataLength; i++) {
if (xData[i] >= min) {
start = Math.max(0, i - 1);
break;
}
}
// Proceed to find slice end
for (j = i; j < dataLength; j++) {
if (xData[j] > max) {
end = j + 1;
break;
}
}
for (var _a = 0, _b = this.dataColumnKeys(); _a < _b.length; _a++) {
var key = _b[_a];
var column = table.getColumn(key,
true);
if (column) {
columns[key] = column.slice(start, end);
}
}
return {
modified: new Data_DataTableCore({ columns: columns }),
start: start,
end: end
};
};
/**
* Generate the data point after the data has been processed by cropping
* away unused points and optionally grouped in Highcharts Stock.
*
* @private
* @function Highcharts.Series#generatePoints
*/
Series.prototype.generatePoints = function () {
var _a,
_b,
_c,
_d;
var series = this,
options = series.options,
dataOptions = series.processedData || options.data,
table = series.dataTable.modified,
xData = series.getColumn('x',
true),
PointClass = series.pointClass,
processedDataLength = table.rowCount,
cropStart = series.cropStart || 0,
hasGroupedData = series.hasGroupedData,
keys = options.keys,
points = [],
groupCropStartIndex = (options.dataGrouping &&
options.dataGrouping.groupAll ?
cropStart :
0),
categories = (_a = series.xAxis) === null || _a === void 0 ? void 0 : _a.categories,
pointArrayMap = series.pointArrayMap || ['y'],
// Create a configuration object out of a data row
dataColumnKeys = this.dataColumnKeys();
var dataLength,
cursor,
point,
i,
data = series.data,
pOptions;
if (!data && !hasGroupedData) {
var arr = [];
arr.length = (dataOptions === null || dataOptions === void 0 ? void 0 : dataOptions.length) || 0;
data = series.data = arr;
}
if (keys && hasGroupedData) {
// Grouped data has already applied keys (#6590)
series.options.keys = false;
}
for (i = 0; i < processedDataLength; i++) {
cursor = cropStart + i;
if (!hasGroupedData) {
point = data[cursor];
pOptions = dataOptions ?
dataOptions[cursor] :
table.getRow(i, pointArrayMap);
// #970:
if (!point &&
pOptions !== void 0) {
data[cursor] = point = new PointClass(series, pOptions, xData[i]);
}
}
else {
// Splat the y data in case of ohlc data array
point = new PointClass(series, table.getRow(i, dataColumnKeys) || []);
point.dataGroup = series.groupMap[groupCropStartIndex + i];
if ((_b = point.dataGroup) === null || _b === void 0 ? void 0 : _b.options) {
point.options = point.dataGroup.options;
Series_extend(point, point.dataGroup.options);
// Collision of props and options (#9770)
delete point.dataLabels;
}
}
if (point) { // #6279
/**
* Contains the point's index in the `Series.points` array.
*
* @name Highcharts.Point#index
* @type {number}
* @readonly
*/
// For faster access in Point.update
point.index = hasGroupedData ?
(groupCropStartIndex + i) : cursor;
points[i] = point;
// Set point properties for convenient access in tooltip and
// data labels
point.category = (_c = categories === null || categories === void 0 ? void 0 : categories[point.x]) !== null && _c !== void 0 ? _c : point.x;
point.key = (_d = point.name) !== null && _d !== void 0 ? _d : point.category;
}
}
// Restore keys options (#6590)
series.options.keys = keys;
// Hide cropped-away points - this only runs when the number of
// points is above cropThreshold, or when switching view from
// non-grouped data to grouped data (#637)
if (data &&
(processedDataLength !== (dataLength = data.length) ||
hasGroupedData)) {
for (i = 0; i < dataLength; i++) {
// When has grouped data, clear all points
if (i === cropStart && !hasGroupedData) {
i += processedDataLength;
}
if (data[i]) {
data[i].destroyElements();
data[i].plotX = void 0; // #1003
}
}
}
/**
* Read only. An array containing those values converted to points.
* In case the series data length exceeds the `cropThreshold`, or if
* the data is grouped, `series.data` doesn't contain all the
* points. Also, in case a series is hidden, the `data` array may be
* empty. In case of cropping, the `data` array may contain `undefined`
* values, instead of points. To access raw values,
* `series.options.data` will always be up to date. `Series.data` only
* contains the points that have been created on demand. To modify the
* data, use
* {@link Highcharts.Series#setData} or
* {@link Highcharts.Point#update}.
*
* @see Series.points
*
* @name Highcharts.Series#data
* @type {Array<Highcharts.Point>}
*/
series.data = data;
/**
* An array containing all currently visible point objects. In case
* of cropping, the cropped-away points are not part of this array.
* The `series.points` array starts at `series.cropStart` compared
* to `series.data` and `series.options.data`. If however the series
* data is grouped, these can't be correlated one to one. To modify
* the data, use {@link Highcharts.Series#setData} or
* {@link Highcharts.Point#update}.
*
* @name Highcharts.Series#points
* @type {Array<Highcharts.Point>}
*/
series.points = points;
Series_fireEvent(this, 'afterGeneratePoints');
};
/**
* Get current X extremes for the visible data.
*
* @private
* @function Highcharts.Series#getXExtremes
* @param {Array<number>} xData
* The data to inspect. Defaults to the current data within the visible
* range.
*/
Series.prototype.getXExtremes = function (xData) {
return {
min: Series_arrayMin(xData),
max: Series_arrayMax(xData)
};
};
/**
* Calculate Y extremes for the visible data. The result is returned
* as an object with `dataMin` and `dataMax` properties.
*
* @private
* @function Highcharts.Series#getExtremes
* @param {Array<number>} [yData]
* The data to inspect. Defaults to the current data within the visible
* range.
* @param {boolean} [forceExtremesFromAll]
* Force getting extremes of a total series data range.
*/
Series.prototype.getExtremes = function (yData, forceExtremesFromAll) {
var _a;
var _b = this, xAxis = _b.xAxis, yAxis = _b.yAxis, getExtremesFromAll = forceExtremesFromAll ||
this.getExtremesFromAll ||
this.options.getExtremesFromAll, // #4599, #21003
table = getExtremesFromAll && this.cropped ?
this.dataTable :
this.dataTable.modified, rowCount = table.rowCount, customData = yData || this.stackedYData, yAxisData = customData ?
[customData] :
((_a = (this.keysAffectYAxis || this.pointArrayMap || ['y'])) === null || _a === void 0 ? void 0 : _a.map(function (key) { return table.getColumn(key, true) || []; })) || [], xData = this.getColumn('x', true), activeYData = [],
// Handle X outside the viewed area. This does not work with
// non-sorted data like scatter (#7639).
shoulder = this.requireSorting && !this.is('column') ?
1 : 0,
// #2117, need to compensate for log X axis
positiveValuesOnly = yAxis ? yAxis.positiveValuesOnly : false, doAll = getExtremesFromAll ||
this.cropped ||
!xAxis; // For colorAxis support
var xExtremes, x, i, xMin = 0, xMax = 0;
if (xAxis) {
xExtremes = xAxis.getExtremes();
xMin = xExtremes.min;
xMax = xExtremes.max;
}
for (i = 0; i < rowCount; i++) {
x = xData[i];
// Check if it is within the selected x axis range
if (doAll ||
((xData[i + shoulder] || x) >= xMin &&
(xData[i - shoulder] || x) <= xMax)) {
for (var _c = 0, yAxisData_1 = yAxisData; _c < yAxisData_1.length; _c++) {
var values = yAxisData_1[_c];
var val = values[i];
// For points within the visible range, including the
// first point outside the visible range (#7061),
// consider y extremes.
if (Series_isNumber(val) &&
(val > 0 || !positiveValuesOnly)) {
activeYData.push(val);
}
}
}
}
var dataExtremes = {
activeYData: activeYData, // Needed for Stock Cumulative Sum
dataMin: Series_arrayMin(activeYData),
dataMax: Series_arrayMax(activeYData)
};
Series_fireEvent(this, 'afterGetExtremes', { dataExtremes: dataExtremes });
return dataExtremes;
};
/**
* Set the current data extremes as `dataMin` and `dataMax` on the
* Series item. Use this only when the series properties should be
* updated.
*
* @private
* @function Highcharts.Series#applyExtremes
*/
Series.prototype.applyExtremes = function () {
var dataExtremes = this.getExtremes();
/**
* Contains the minimum value of the series' data point. Some series
* types like `networkgraph` do not support this property as they
* lack a `y`-value.
* @name Highcharts.Series#dataMin
* @type {number|undefined}
* @readonly
*/
this.dataMin = dataExtremes.dataMin;
/**
* Contains the maximum value of the series' data point. Some series
* types like `networkgraph` do not support this property as they
* lack a `y`-value.
* @name Highcharts.Series#dataMax
* @type {number|undefined}
* @readonly
*/
this.dataMax = dataExtremes.dataMax;
return dataExtremes;
};
/**
* Find and return the first non nullish point in the data
*
* @private
* @function Highcharts.Series.getFirstValidPoint
* @param {Array<Highcharts.PointOptionsType>} data
* Array of options for points
* @param {number} [start=0]
* Index to start searching from
* @param {number} [increment=1]
* Index increment, set -1 to search backwards
*/
Series.prototype.getFirstValidPoint = function (data, start, increment) {
if (start === void 0) { start = 0; }
if (increment === void 0) { increment = 1; }
var dataLength = data.length;
var i = start;
while (i >= 0 && i < dataLength) {
if (Series_defined(data[i])) {
return data[i];
}
i += increment;
}
};
/**
* Translate data points from raw data values to chart specific
* positioning data needed later in the `drawPoints` and `drawGraph`
* functions. This function can be overridden in plugins and custom
* series type implementations.
*
* @function Highcharts.Series#translate
*
* @emits Highcharts.Series#events:translate
*/
Series.prototype.translate = function () {
var _a;
this.generatePoints();
var series = this,
options = series.options,
stacking = options.stacking,
xAxis = series.xAxis,
enabledDataSorting = series.enabledDataSorting,
yAxis = series.yAxis,
points = series.points,
dataLength = points.length,
pointPlacement = series.pointPlacementToXValue(), // #7860
dynamicallyPlaced = Boolean(pointPlacement),
threshold = options.threshold,
stackThreshold = options.startFromThreshold ? threshold : 0;
var i,
plotX,
lastPlotX,
stackIndicator,
closestPointRangePx = Number.MAX_VALUE;
/**
* Plotted coordinates need to be within a limited range. Drawing
* too far outside the viewport causes various rendering issues
* (#3201, #3923, #7555).
* @private
*/
function limitedRange(val) {
return Series_clamp(val, -1e9, 1e9);
}
// Translate each point
for (i = 0; i < dataLength; i++) {
var point = points[i],
xValue = point.x;
var stackItem = void 0,
stackValues = void 0,
yValue = point.y,
lowValue = point.low;
var stacks = stacking && ((_a = yAxis.stacking) === null || _a === void 0 ? void 0 : _a.stacks[(series.negStacks &&
yValue <
(stackThreshold ? 0 : threshold) ?
'-' :
'') + series.stackKey]);
plotX = xAxis.translate(// #3923
xValue, false, false, false, true, pointPlacement);
/**
* The translated X value for the point in terms of pixels. Relative
* to the X axis position if the series has one, otherwise relative
* to the plot area. Depending on the series type this value might
* not be defined.
*
* In an inverted chart the x-axis is going from the bottom to the
* top so the `plotX` value is the number of pixels from the bottom
* of the axis.
*
* @see Highcharts.Point#pos
* @name Highcharts.Point#plotX
* @type {number|undefined}
*/
point.plotX = Series_isNumber(plotX) ? Series_correctFloat(// #5236
limitedRange(plotX) // #3923
) : void 0;
// Calculate the bottom y value for stacked series
if (stacking &&
series.visible &&
stacks &&
stacks[xValue]) {
stackIndicator = series.getStackIndicator(stackIndicator, xValue, series.index);
if (!point.isNull && stackIndicator.key) {
stackItem = stacks[xValue];
stackValues = stackItem.points[stackIndicator.key];
}
if (stackItem && Series_isArray(stackValues)) {
lowValue = stackValues[0];
yValue = stackValues[1];
if (lowValue === stackThreshold &&
stackIndicator.key === stacks[xValue].base) {
lowValue = Series_pick(Series_isNumber(threshold) ? threshold : yAxis.min);
}
// #1200, #1232
if (yAxis.positiveValuesOnly &&
Series_defined(lowValue) &&
lowValue <= 0) {
lowValue = void 0;
}
point.total = point.stackTotal = Series_pick(stackItem.total);
point.percentage = Series_defined(point.y) && stackItem.total ?
(point.y / stackItem.total * 100) : void 0;
point.stackY = yValue;
// In case of variwide series (where widths of points are
// different in most cases), stack labels are positioned
// wrongly, so the call of the setOffset is omitted here and
// labels are correctly positioned later, at the end of the
// variwide's translate function (#10962)
if (!series.irregularWidths) {
stackItem.setOffset(series.pointXOffset || 0, series.barW || 0, void 0, void 0, void 0, series.xAxis);
}
}
}
// Set translated yBottom or remove it
point.yBottom = Series_defined(lowValue) ?
limitedRange(yAxis.translate(lowValue, false, true, false, true)) :
void 0;
// General hook, used for Highcharts Stock compare and cumulative
if (series.dataModify) {
yValue = series.dataModify.modifyValue(yValue, i);
}
// Set the plotY value, reset it for redraws #3201, #18422
var plotY = void 0;
if (Series_isNumber(yValue) && point.plotX !== void 0) {
plotY = yAxis.translate(yValue, false, true, false, true);
plotY = Series_isNumber(plotY) ? limitedRange(plotY) : void 0;
}
/**
* The translated Y value for the point in terms of pixels. Relative
* to the Y axis position if the series has one, otherwise relative
* to the plot area. Depending on the series type this value might
* not be defined.
*
* In an inverted chart the y-axis is going from right to left
* so the `plotY` value is the number of pixels from the right
* of the `yAxis`.
*
* @see Highcharts.Point#pos
* @name Highcharts.Point#plotY
* @type {number|undefined}
*/
point.plotY = plotY;
point.isInside = this.isPointInside(point);
// Set client related positions for mouse tracking
point.clientX = dynamicallyPlaced ?
Series_correctFloat(xAxis.translate(xValue, false, false, false, true, pointPlacement)) :
plotX; // #1514, #5383, #5518
// Negative points #19028
point.negative = (point.y || 0) < (threshold || 0);
// Determine auto enabling of markers (#3635, #5099)
if (!point.isNull && point.visible !== false) {
if (typeof lastPlotX !== 'undefined') {
closestPointRangePx = Math.min(closestPointRangePx, Math.abs(plotX - lastPlotX));
}
lastPlotX = plotX;
}
// Find point zone
point.zone = this.zones.length ? point.getZone() : void 0;
// Animate new points with data sorting
if (!point.graphic && series.group && enabledDataSorting) {
point.isNew = true;
}
}
series.closestPointRangePx = closestPointRangePx;
Series_fireEvent(this, 'afterTranslate');
};
/**
* Return the series points with null points filtered out.
*
* @function Highcharts.Series#getValidPoints
*
* @param {Array<Highcharts.Point>} [points]
* The points to inspect, defaults to {@link Series.points}.
*
* @param {boolean} [insideOnly=false]
* Whether to inspect only the points that are inside the visible view.
*
* @param {boolean} [allowNull=false]
* Whether to allow null points to pass as valid points.
*
* @return {Array<Highcharts.Point>}
* The valid points.
*/
Series.prototype.getValidPoints = function (points, insideOnly, allowNull) {
var chart = this.chart;
// #3916, #5029, #5085
return (points || this.points || []).filter(function (point) {
var plotX = point.plotX,
plotY = point.plotY,
// Undefined plotY is treated as null when negative values
// in log axis (#18422)
asNull = !allowNull && (point.isNull || !Series_isNumber(plotY));
if (asNull || (insideOnly && !chart.isInsidePlot(plotX, plotY, { inverted: chart.inverted }))) {
return false;
}
return point.visible !== false;
});
};
/**
* Get the clipping for the series. Could be called for a series to
* initiate animating the clip or to set the final clip (only width
* and x).
*
* @private
* @function Highcharts.Series#getClip
*/
Series.prototype.getClipBox = function () {
var _a;
var _b = this,
chart = _b.chart,
xAxis = _b.xAxis,
yAxis = _b.yAxis;
// If no axes on the series, use global clipBox
var _c = Series_merge(chart.clipBox),
x = _c.x,
y = _c.y,
width = _c.width,
height = _c.height;
// Otherwise, use clipBox.width which is corrected for plotBorderWidth
// and clipOffset
if (xAxis && xAxis.len !== chart.plotSizeX) {
width = xAxis.len;
}
if (yAxis && yAxis.len !== chart.plotSizeY) {
height = yAxis.len;
}
// If the chart is inverted and the series is not invertible, the chart
// clip box should be inverted, but not the series clip box (#20264)
if (chart.inverted && !this.invertible) {
_a = [height, width], width = _a[0], height = _a[1];
}
return { x: x, y: y, width: width, height: height };
};
/**
* Get the shared clip key, creating it if it doesn't exist.
*
* @private
* @function Highcharts.Series#getSharedClipKey
*/
Series.prototype.getSharedClipKey = function () {
this.sharedClipKey = (this.options.xAxis || 0) + ',' +
(this.options.yAxis || 0);
return this.sharedClipKey;
};
/**
* Set the clipping for the series. For animated series the clip is later
* modified.
*
* @private
* @function Highcharts.Series#setClip
*/
Series.prototype.setClip = function () {
var _a = this,
chart = _a.chart,
group = _a.group,
markerGroup = _a.markerGroup,
sharedClips = chart.sharedClips,
renderer = chart.renderer,
clipBox = this.getClipBox(),
sharedClipKey = this.getSharedClipKey(); // #4526
var clipRect = sharedClips[sharedClipKey];
// If a clipping rectangle for the same set of axes does not exist,
// create it
if (!clipRect) {
sharedClips[sharedClipKey] = clipRect = renderer.clipRect(clipBox);
// When setting chart size, or when the series is rendered again before
// starting animating, in compliance to a responsive rule
}
else {
clipRect.animate(clipBox);
}
if (group) {
// When clip is false, reset to no clip after animation
group.clip(this.options.clip === false ? void 0 : clipRect);
}
// Unclip temporary animation clip
if (markerGroup) {
markerGroup.clip();
}
};
/**
* Animate in the series. Called internally twice. First with the `init`
* parameter set to true, which sets up the initial state of the
* animation. Then when ready, it is called with the `init` parameter
* undefined, in order to perform the actual animation.
*
* @function Highcharts.Series#animate
*
* @param {boolean} [init]
* Initialize the animation.
*/
Series.prototype.animate = function (init) {
var _a = this, chart = _a.chart, group = _a.group, markerGroup = _a.markerGroup, inverted = chart.inverted, animation = Series_animObject(this.options.animation),
// The key for temporary animation clips
animationClipKey = [
this.getSharedClipKey(),
animation.duration,
animation.easing,
animation.defer
].join(',');
var animationClipRect = chart.sharedClips[animationClipKey],
markerAnimationClipRect = chart.sharedClips[animationClipKey + 'm'];
// Initialize the animation. Set up the clipping rectangle.
if (init && group) {
var clipBox = this.getClipBox();
// Create temporary animation clips
if (!animationClipRect) {
clipBox.width = 0;
if (inverted) {
clipBox.x = chart.plotHeight;
}
animationClipRect = chart.renderer.clipRect(clipBox);
chart.sharedClips[animationClipKey] = animationClipRect;
// The marker clip box. The number 99 is a safe margin to avoid
// markers being clipped during animation.
var markerClipBox = {
x: inverted ? -99 : -99,
y: inverted ? -99 : -99,
width: inverted ? chart.plotWidth + 199 : 99,
height: inverted ? 99 : chart.plotHeight + 199
};
markerAnimationClipRect = chart.renderer.clipRect(markerClipBox);
chart.sharedClips[animationClipKey + 'm'] = markerAnimationClipRect;
}
else {
// When height changes during animation, typically due to
// responsive settings
animationClipRect.attr('height', clipBox.height);
}
group.clip(animationClipRect);
markerGroup === null || markerGroup === void 0 ? void 0 : markerGroup.clip(markerAnimationClipRect);
// Run the animation
}
else if (animationClipRect &&
// Only first series in this pane
!animationClipRect.hasClass('highcharts-animating')) {
var finalBox = this.getClipBox(),
step_1 = animation.step;
// Only do this when there are actually markers, or we have multiple
// series (#20473)
if ((markerGroup === null || markerGroup === void 0 ? void 0 : markerGroup.element.childNodes.length) ||
chart.series.length > 1) {
// To provide as smooth animation as possible, update the marker
// group clipping in steps of the main group animation
animation.step = function (val, fx) {
if (step_1) {
step_1.apply(fx, arguments);
}
if (fx.prop === 'width' &&
(markerAnimationClipRect === null || markerAnimationClipRect === void 0 ? void 0 : markerAnimationClipRect.element)) {
markerAnimationClipRect.attr(inverted ? 'height' : 'width', val + 99);
}
};
}
animationClipRect
.addClass('highcharts-animating')
.animate(finalBox, animation);
}
};
/**
* This runs after animation to land on the final plot clipping.
*
* @private
* @function Highcharts.Series#afterAnimate
*
* @emits Highcharts.Series#event:afterAnimate
*/
Series.prototype.afterAnimate = function () {
var _this = this;
this.setClip();
// Destroy temporary clip rectangles that are no longer in use
Series_objectEach(this.chart.sharedClips, function (clip, key, sharedClips) {
if (clip && !_this.chart.container.querySelector("[clip-path=\"url(#".concat(clip.id, ")\"]"))) {
clip.destroy();
delete sharedClips[key];
}
});
this.finishedAnimating = true;
Series_fireEvent(this, 'afterAnimate');
};
/**
* Draw the markers for line-like series types, and columns or other
* graphical representation for {@link Point} objects for other series
* types. The resulting element is typically stored as
* {@link Point.graphic}, and is created on the first call and updated
* and moved on subsequent calls.
*
* @function Highcharts.Series#drawPoints
*/
Series.prototype.drawPoints = function (points) {
if (points === void 0) { points = this.points; }
var series = this,
chart = series.chart,
styledMode = chart.styledMode,
colorAxis = series.colorAxis,
options = series.options,
seriesMarkerOptions = options.marker,
markerGroup = series[series.specialGroup || 'markerGroup'],
xAxis = series.xAxis,
globallyEnabled = Series_pick(seriesMarkerOptions.enabled, !xAxis || xAxis.isRadial ? true : null,
// Use larger or equal as radius is null in bubbles (#6321)
series.closestPointRangePx >= (seriesMarkerOptions.enabledThreshold *
seriesMarkerOptions.radius));
var i,
point,
graphic,
verb,
pointMarkerOptions,
hasPointMarker,
markerAttribs;
if (seriesMarkerOptions.enabled !== false ||
series._hasPointMarkers) {
for (i = 0; i < points.length; i++) {
point = points[i];
graphic = point.graphic;
verb = graphic ? 'animate' : 'attr';
pointMarkerOptions = point.marker || {};
hasPointMarker = !!point.marker;
var shouldDrawMarker = ((globallyEnabled &&
typeof pointMarkerOptions.enabled === 'undefined') || pointMarkerOptions.enabled) && !point.isNull && point.visible !== false;
// Only draw the point if y is defined
if (shouldDrawMarker) {
// Shortcuts
var symbol = Series_pick(pointMarkerOptions.symbol,
series.symbol, 'rect');
markerAttribs = series.markerAttribs(point, (point.selected && 'select'));
// Set starting position for point sliding animation.
if (series.enabledDataSorting) {
point.startXPos = xAxis.reversed ?
-(markerAttribs.width || 0) :
xAxis.width;
}
var isInside = point.isInside !== false;
if (!graphic &&
isInside &&
((markerAttribs.width || 0) > 0 || point.hasImage)) {
/**
* SVG graphic representing the point in the chart. In
* some cases it may be a hidden graphic to improve
* accessibility.
*
* Typically this is a simple shape, like a `rect`
* for column charts or `path` for line markers, but
* for some complex series types like boxplot or 3D
* charts, the graphic may be a `g` element
* containing other shapes. The graphic is generated
* the first time {@link Series#drawPoints} runs,
* and updated and moved on subsequent runs.
*
* @see Highcharts.Point#graphics
*
* @name Highcharts.Point#graphic
* @type {Highcharts.SVGElement|undefined}
*/
point.graphic = graphic = chart.renderer
.symbol(symbol, markerAttribs.x, markerAttribs.y, markerAttribs.width, markerAttribs.height, hasPointMarker ?
pointMarkerOptions :
seriesMarkerOptions)
.add(markerGroup);
// Sliding animation for new points
if (series.enabledDataSorting &&
chart.hasRendered) {
graphic.attr({
x: point.startXPos
});
verb = 'animate';
}
}
if (graphic && verb === 'animate') { // Update
// Since the marker group isn't clipped, each
// individual marker must be toggled
graphic[isInside ? 'show' : 'hide'](isInside)
.animate(markerAttribs);
}
// Presentational attributes
if (graphic) {
var pointAttr = series.pointAttribs(point, ((styledMode || !point.selected) ?
void 0 :
'select'));
if (!styledMode) {
graphic[verb](pointAttr);
}
else if (colorAxis) { // #14114
graphic['css']({
fill: pointAttr.fill
});
}
}
if (graphic) {
graphic.addClass(point.getClassName(), true);
}
}
else if (graphic) {
point.graphic = graphic.destroy(); // #1269
}
}
}
};
/**
* Get non-presentational attributes for a point. Used internally for
* both styled mode and classic. Can be overridden for different series
* types.
*
* @see Series#pointAttribs
*
* @function Highcharts.Series#markerAttribs
*
* @param {Highcharts.Point} point
* The Point to inspect.
*
* @param {string} [state]
* The state, can be either `hover`, `select` or undefined.
*
* @return {Highcharts.SVGAttributes}
* A hash containing those attributes that are not settable from CSS.
*/
Series.prototype.markerAttribs = function (point, state) {
var seriesOptions = this.options,
seriesMarkerOptions = seriesOptions.marker,
pointMarkerOptions = point.marker || {},
symbol = (pointMarkerOptions.symbol ||
seriesMarkerOptions.symbol),
attribs = {};
var seriesStateOptions,
pointStateOptions,
radius = Series_pick(pointMarkerOptions.radius,
seriesMarkerOptions && seriesMarkerOptions.radius);
// Handle hover and select states
if (state) {
seriesStateOptions = seriesMarkerOptions.states[state];
pointStateOptions = pointMarkerOptions.states &&
pointMarkerOptions.states[state];
radius = Series_pick(pointStateOptions && pointStateOptions.radius, seriesStateOptions && seriesStateOptions.radius, radius && radius + (seriesStateOptions && seriesStateOptions.radiusPlus ||
0));
}
point.hasImage = symbol && symbol.indexOf('url') === 0;
if (point.hasImage) {
radius = 0; // And subsequently width and height is not set
}
var pos = point.pos();
if (Series_isNumber(radius) && pos) {
if (seriesOptions.crisp) {
pos[0] = Series_crisp(pos[0], point.hasImage ?
0 :
symbol === 'rect' ?
// Rectangle symbols need crisp edges, others don't
(seriesMarkerOptions === null || seriesMarkerOptions === void 0 ? void 0 : seriesMarkerOptions.lineWidth) || 0 :
1);
}
attribs.x = pos[0] - radius;
attribs.y = pos[1] - radius;
}
if (radius) {
attribs.width = attribs.height = 2 * radius;
}
return attribs;
};
/**
* Internal function to get presentational attributes for each point.
* Unlike {@link Series#markerAttribs}, this function should return
* those attributes that can also be set in CSS. In styled mode,
* `pointAttribs` won't be called.
*
* @private
* @function Highcharts.Series#pointAttribs
*
* @param {Highcharts.Point} [point]
* The point instance to inspect.
*
* @param {string} [state]
* The point state, can be either `hover`, `select` or 'normal'. If
* undefined, normal state is assumed.
*
* @return {Highcharts.SVGAttributes}
* The presentational attributes to be set on the point.
*/
Series.prototype.pointAttribs = function (point, state) {
var seriesMarkerOptions = this.options.marker,
pointOptions = point && point.options,
pointMarkerOptions = ((pointOptions && pointOptions.marker) || {}),
pointColorOption = pointOptions && pointOptions.color,
pointColor = point && point.color,
zoneColor = point && point.zone && point.zone.color;
var seriesStateOptions,
pointStateOptions,
color = this.color,
fill,
stroke,
strokeWidth = Series_pick(pointMarkerOptions.lineWidth,
seriesMarkerOptions.lineWidth),
opacity = 1;
color = (pointColorOption ||
zoneColor ||
pointColor ||
color);
fill = (pointMarkerOptions.fillColor ||
seriesMarkerOptions.fillColor ||
color);
stroke = (pointMarkerOptions.lineColor ||
seriesMarkerOptions.lineColor ||
color);
// Handle hover and select states
state = state || 'normal';
if (state) {
seriesStateOptions = (seriesMarkerOptions.states[state] || {});
pointStateOptions = (pointMarkerOptions.states &&
pointMarkerOptions.states[state]) || {};
strokeWidth = Series_pick(pointStateOptions.lineWidth, seriesStateOptions.lineWidth, strokeWidth + Series_pick(pointStateOptions.lineWidthPlus, seriesStateOptions.lineWidthPlus, 0));
fill = (pointStateOptions.fillColor ||
seriesStateOptions.fillColor ||
fill);
stroke = (pointStateOptions.lineColor ||
seriesStateOptions.lineColor ||
stroke);
opacity = Series_pick(pointStateOptions.opacity, seriesStateOptions.opacity, opacity);
}
return {
'stroke': stroke,
'stroke-width': strokeWidth,
'fill': fill,
'opacity': opacity
};
};
/**
* Clear DOM objects and free up memory.
*
* @private
* @function Highcharts.Series#destroy
*
* @emits Highcharts.Series#event:destroy
*/
Series.prototype.destroy = function (keepEventsForUpdate) {
var series = this, chart = series.chart, issue134 = /AppleWebKit\/533/.test(Series_win.navigator.userAgent), data = series.data || [];
var destroy,
i,
point,
axis;
// Add event hook
Series_fireEvent(series, 'destroy', { keepEventsForUpdate: keepEventsForUpdate });
// Remove events
this.removeEvents(keepEventsForUpdate);
// Erase from axes
(series.axisTypes || []).forEach(function (AXIS) {
axis = series[AXIS];
if (axis && axis.series) {
Series_erase(axis.series, series);
axis.isDirty = axis.forceRedraw = true;
}
});
// Remove legend items
if (series.legendItem) {
series.chart.legend.destroyItem(series);
}
// Destroy all points with their elements
i = data.length;
while (i--) {
point = data[i];
if (point && point.destroy) {
point.destroy();
}
}
for (var _a = 0, _b = series.zones; _a < _b.length; _a++) {
var zone = _b[_a];
// Destroy SVGElement's but preserve primitive props (#20426)
Series_destroyObjectProperties(zone, void 0, true);
}
// Clear the animation timeout if we are destroying the series
// during initial animation
Core_Utilities.clearTimeout(series.animationTimeout);
// Destroy all SVGElements associated to the series
Series_objectEach(series, function (val, prop) {
// Survive provides a hook for not destroying
if (val instanceof SVG_SVGElement && !val.survive) {
// Issue 134 workaround
destroy = issue134 && prop === 'group' ?
'hide' :
'destroy';
val[destroy]();
}
});
// Remove from hoverSeries
if (chart.hoverSeries === series) {
chart.hoverSeries = void 0;
}
Series_erase(chart.series, series);
chart.orderItems('series');
// Clear all members
Series_objectEach(series, function (val, prop) {
if (!keepEventsForUpdate || prop !== 'hcEvents') {
delete series[prop];
}
});
};
/**
* Clip the graphs into zones for colors and styling.
*
* @private
* @function Highcharts.Series#applyZones
*/
Series.prototype.applyZones = function () {
var series = this,
area = series.area,
chart = series.chart,
graph = series.graph,
zones = series.zones,
points = series.points,
xAxis = series.xAxis,
yAxis = series.yAxis,
zoneAxis = series.zoneAxis,
inverted = chart.inverted,
renderer = chart.renderer,
axis = this["" + zoneAxis + "Axis"],
_a = axis || {},
isXAxis = _a.isXAxis,
_b = _a.len,
len = _b === void 0 ? 0 : _b,
_c = _a.minPointOffset,
minPointOffset = _c === void 0 ? 0 : _c,
halfWidth = ((graph === null || graph === void 0 ? void 0 : graph.strokeWidth()) || 0) / 2 + 1,
// Avoid points that are so close to the threshold that the graph
// line would be split
avoidClose = function (zone,
plotX,
plotY) {
if (plotX === void 0) { plotX = 0; }
if (plotY === void 0) { plotY = 0; }
if (inverted) {
plotY = len - plotY;
}
var _a = zone.translated,
translated = _a === void 0 ? 0 : _a,
lineClip = zone.lineClip,
distance = plotY - translated;
lineClip === null || lineClip === void 0 ? void 0 : lineClip.push([
'L',
plotX,
Math.abs(distance) < halfWidth ?
plotY - halfWidth * (distance <= 0 ? -1 : 1) :
translated
]);
};
if (zones.length &&
(graph || area) &&
axis &&
Series_isNumber(axis.min)) {
var axisMax_1 = axis.getExtremes().max + minPointOffset,
// Invert the x and y coordinates of inverted charts
invertPath_1 = function (path) {
path.forEach(function (segment,
i) {
if (segment[0] === 'M' || segment[0] === 'L') {
path[i] = [
segment[0],
isXAxis ? len - segment[1] : segment[1],
isXAxis ? segment[2] : len - segment[2]
];
}
});
};
// Reset
zones.forEach(function (zone) {
zone.lineClip = [];
zone.translated = Series_clamp(axis.toPixels(Series_pick(zone.value, axisMax_1), true) || 0, 0, len);
});
// The use of the Color Threshold assumes there are no gaps so it is
// safe to hide the original graph and area unless it is not
// waterfall series, then use showLine property to set lines between
// columns to be visible (#7862)
if (graph && !this.showLine) {
graph.hide();
}
if (area) {
area.hide();
}
// Prepare for adaptive clips, avoiding segments close to the
// threshold (#19709)
if (zoneAxis === 'y' &&
// Overheat protection
points.length < xAxis.len) {
for (var _d = 0, points_1 = points; _d < points_1.length; _d++) {
var point = points_1[_d];
var plotX = point.plotX,
plotY = point.plotY,
zone = point.zone,
zoneBelow = zone && zones[zones.indexOf(zone) - 1];
// Close to upper boundary
if (zone) {
avoidClose(zone, plotX, plotY);
}
// Close to lower boundary
if (zoneBelow) {
avoidClose(zoneBelow, plotX, plotY);
}
}
}
// Compute and apply the clips
var lastLineClip_1 = [],
// Starting point of the first zone. Offset for category axis
// (#22188).
lastTranslated_1 = axis.toPixels(axis.getExtremes().min - minPointOffset,
true);
zones.forEach(function (zone) {
var _a,
_b;
var lineClip = zone.lineClip || [],
translated = Math.round(zone.translated || 0);
if (xAxis.reversed) {
lineClip.reverse();
}
var clip = zone.clip,
simpleClip = zone.simpleClip,
x1 = 0,
y1 = 0,
x2 = xAxis.len,
y2 = yAxis.len;
if (isXAxis) {
x1 = translated;
x2 = lastTranslated_1;
}
else {
y1 = translated;
y2 = lastTranslated_1;
}
// Adaptive clips
var simplePath = [
['M',
x1,
y1],
['L',
x2,
y1],
['L',
x2,
y2],
['L',
x1,
y2],
['Z']
],
adaptivePath = Series_spreadArray(Series_spreadArray(Series_spreadArray(Series_spreadArray([
simplePath[0]
],
lineClip,
true),
[
simplePath[1],
simplePath[2]
],
false),
lastLineClip_1,
true),
[
simplePath[3],
simplePath[4]
],
false);
lastLineClip_1 = lineClip.reverse();
lastTranslated_1 = translated;
if (inverted) {
invertPath_1(adaptivePath);
if (area) {
invertPath_1(simplePath);
}
}
/* Debug clip paths
zone.path?.destroy();
zone.path = chart.renderer.path(adaptivePath)
.attr({
stroke: zone.color || this.color || 'gray',
'stroke-width': 1,
'dashstyle': 'Dash'
})
.add(series.group);
// */
if (clip) {
clip.animate({ d: adaptivePath });
simpleClip === null || simpleClip === void 0 ? void 0 : simpleClip.animate({ d: simplePath });
}
else {
clip = zone.clip = renderer.path(adaptivePath);
if (area) {
simpleClip = zone.simpleClip = renderer.path(simplePath);
}
}
// When no data, graph zone is not applied and after setData
// clip was ignored. As a result, it should be applied each
// time.
if (graph) {
(_a = zone.graph) === null || _a === void 0 ? void 0 : _a.clip(clip);
}
if (area) {
(_b = zone.area) === null || _b === void 0 ? void 0 : _b.clip(simpleClip);
}
});
}
else if (series.visible) {
// If zones were removed, restore graph and area
if (graph) {
graph.show();
}
if (area) {
area.show();
}
}
};
/**
* General abstraction for creating plot groups like series.group,
* series.dataLabelsGroup and series.markerGroup. On subsequent calls,
* the group will only be adjusted to the updated plot size.
*
* @private
* @function Highcharts.Series#plotGroup
*/
Series.prototype.plotGroup = function (prop, name, visibility, zIndex, parent) {
var group = this[prop];
var isNew = !group,
attrs = {
visibility: visibility,
zIndex: zIndex || 0.1 // Pointer logic uses this
};
// Avoid setting undefined opacity, or in styled mode
if (Series_defined(this.opacity) &&
!this.chart.styledMode && this.state !== 'inactive' // #13719
) {
attrs.opacity = this.opacity;
}
// Generate it on first call
if (!group) {
this[prop] = group = this.chart.renderer
.g()
.add(parent);
}
// Add the class names, and replace existing ones as response to
// Series.update (#6660)
group.addClass(('highcharts-' + name +
' highcharts-series-' + this.index +
' highcharts-' + this.type + '-series ' +
(Series_defined(this.colorIndex) ?
'highcharts-color-' + this.colorIndex + ' ' :
'') +
(this.options.className || '') +
(group.hasClass('highcharts-tracker') ?
' highcharts-tracker' :
'')), true);
// Place it on first and subsequent (redraw) calls
group.attr(attrs)[isNew ? 'attr' : 'animate'](this.getPlotBox(name));
return group;
};
/**
* Get the translation and scale for the plot area of this series.
*
* @function Highcharts.Series#getPlotBox
*/
Series.prototype.getPlotBox = function (name) {
var horAxis = this.xAxis,
vertAxis = this.yAxis;
var chart = this.chart,
inverted = (chart.inverted &&
!chart.polar &&
horAxis &&
this.invertible &&
name === 'series');
// Swap axes for inverted (#2339)
if (chart.inverted) {
horAxis = vertAxis;
vertAxis = this.xAxis;
}
return {
translateX: horAxis ? horAxis.left : chart.plotLeft,
translateY: vertAxis ? vertAxis.top : chart.plotTop,
rotation: inverted ? 90 : 0,
rotationOriginX: inverted ?
(horAxis.len - vertAxis.len) / 2 :
0,
rotationOriginY: inverted ?
(horAxis.len + vertAxis.len) / 2 :
0,
scaleX: inverted ? -1 : 1, // #1623
scaleY: 1
};
};
/**
* Removes the event handlers attached previously with addEvents.
* @private
* @function Highcharts.Series#removeEvents
*/
Series.prototype.removeEvents = function (keepEventsForUpdate) {
var eventsToUnbind = this.eventsToUnbind;
if (!keepEventsForUpdate) {
// Remove all events
Series_removeEvent(this);
}
if (eventsToUnbind.length) {
// Remove only internal events for proper update. #12355 solves
// problem with multiple destroy events
eventsToUnbind.forEach(function (unbind) {
unbind();
});
eventsToUnbind.length = 0;
}
};
/**
* Render the graph and markers. Called internally when first rendering
* and later when redrawing the chart. This function can be extended in
* plugins, but normally shouldn't be called directly.
*
* @function Highcharts.Series#render
*
* @emits Highcharts.Series#event:afterRender
*/
Series.prototype.render = function () {
var _a,
_b,
_c,
_d,
_e;
var series = this,
chart = series.chart,
options = series.options,
hasRendered = series.hasRendered,
animOptions = Series_animObject(options.animation),
visibility = series.visible ?
'inherit' : 'hidden', // #2597
zIndex = options.zIndex,
chartSeriesGroup = chart.seriesGroup;
var animDuration = series.finishedAnimating ?
0 : animOptions.duration;
Series_fireEvent(this, 'render');
// The group
series.plotGroup('group', 'series', visibility, zIndex, chartSeriesGroup);
series.markerGroup = series.plotGroup('markerGroup', 'markers', visibility, zIndex, chartSeriesGroup);
// Initial clipping, applies to columns etc. (#3839).
if (options.clip !== false) {
series.setClip();
}
// Initialize the animation
if (animDuration) {
(_a = series.animate) === null || _a === void 0 ? void 0 : _a.call(series, true);
}
// Draw the graph if any
if (series.drawGraph) {
series.drawGraph();
series.applyZones();
}
// Draw the points
if (series.visible) {
series.drawPoints();
}
// Draw the data labels
(_b = series.drawDataLabels) === null || _b === void 0 ? void 0 : _b.call(series);
// In pie charts, slices are added to the DOM, but actual rendering
// is postponed until labels reserved their space
(_c = series.redrawPoints) === null || _c === void 0 ? void 0 : _c.call(series);
// Draw the mouse tracking area
if (options.enableMouseTracking) {
(_d = series.drawTracker) === null || _d === void 0 ? void 0 : _d.call(series);
}
// Run the animation
if (animDuration) {
(_e = series.animate) === null || _e === void 0 ? void 0 : _e.call(series);
}
// Call the afterAnimate function on animation complete (but don't
// overwrite the animation.complete option which should be available
// to the user).
if (!hasRendered) {
// Additional time if defer is defined before afterAnimate
// will be triggered
if (animDuration && animOptions.defer) {
animDuration += animOptions.defer;
}
series.animationTimeout = Series_syncTimeout(function () {
series.afterAnimate();
}, animDuration || 0);
}
// Means data is in accordance with what you see
series.isDirty = false;
// (See #322) series.isDirty = series.isDirtyData = false; // means
// data is in accordance with what you see
series.hasRendered = true;
Series_fireEvent(series, 'afterRender');
};
/**
* Redraw the series. This function is called internally from
* `chart.redraw` and normally shouldn't be called directly.
* @private
* @function Highcharts.Series#redraw
*/
Series.prototype.redraw = function () {
// Cache it here as it is set to false in render, but used after
var wasDirty = this.isDirty || this.isDirtyData;
this.translate();
this.render();
if (wasDirty) { // #3868, #3945
delete this.kdTree;
}
};
/**
* Whether to reserve space for the series, either because it is visible or
* because the `chart.ignoreHiddenSeries` option is false.
*
* @private
*/
Series.prototype.reserveSpace = function () {
return this.visible || !this.chart.options.chart.ignoreHiddenSeries;
};
/**
* Find the nearest point from a pointer event. This applies to series that
* use k-d-trees to get the nearest point. Native pointer events must be
* normalized using `Pointer.normalize`, that adds `chartX` and `chartY`
* properties.
*
* @sample highcharts/demo/synchronized-charts
* Synchronized charts with tooltips
*
* @function Highcharts.Series#searchPoint
*
* @param {Highcharts.PointerEvent} e
* The normalized pointer event
* @param {boolean} [compareX=false]
* Search only by the X value, not Y
*
* @return {Point|undefined}
* The closest point to the pointer event
*/
Series.prototype.searchPoint = function (e, compareX) {
var _a = this,
xAxis = _a.xAxis,
yAxis = _a.yAxis,
inverted = this.chart.inverted;
return this.searchKDTree({
clientX: inverted ?
xAxis.len - e.chartY + xAxis.pos :
e.chartX - xAxis.pos,
plotY: inverted ?
yAxis.len - e.chartX + yAxis.pos :
e.chartY - yAxis.pos
}, compareX, e);
};
/**
* Build the k-d-tree that is used by mouse and touch interaction to get
* the closest point. Line-like series typically have a one-dimensional
* tree where points are searched along the X axis, while scatter-like
* series typically search in two dimensions, X and Y.
*
* @private
* @function Highcharts.Series#buildKDTree
*/
Series.prototype.buildKDTree = function (e) {
// Prevent multiple k-d-trees from being built simultaneously
// (#6235)
this.buildingKdTree = true;
var series = this,
dimensions = series.options.findNearestPointBy
.indexOf('y') > -1 ? 2 : 1;
/**
* Internal function
* @private
*/
function kdtree(points, depth, dimensions) {
var length = points === null || points === void 0 ? void 0 : points.length;
var axis,
median;
if (length) {
// Alternate between the axis
axis = series.kdAxisArray[depth % dimensions];
// Sort point array
points.sort(function (a, b) { return (a[axis] || 0) - (b[axis] || 0); });
median = Math.floor(length / 2);
// Build and return node
return {
point: points[median],
left: kdtree(points.slice(0, median), depth + 1, dimensions),
right: kdtree(points.slice(median + 1), depth + 1, dimensions)
};
}
}
/**
* Start the recursive build process with a clone of the points
* array and null points filtered out. (#3873)
* @private
*/
function startRecursive() {
series.kdTree = kdtree(series.getValidPoints(void 0,
// For line-type series restrict to plot area, but
// column-type series not (#3916, #4511)
!series.directTouch), dimensions, dimensions);
series.buildingKdTree = false;
}
delete series.kdTree;
// For testing tooltips, don't build async. Also if touchstart, we may
// be dealing with click events on mobile, so don't delay (#6817).
Series_syncTimeout(startRecursive, series.options.kdNow || (e === null || e === void 0 ? void 0 : e.type) === 'touchstart' ? 0 : 1);
};
/**
* @private
* @function Highcharts.Series#searchKDTree
*/
Series.prototype.searchKDTree = function (point, compareX, e, suppliedPointEvaluator, suppliedBSideCheckEvaluator) {
var series = this, _a = this.kdAxisArray, kdX = _a[0], kdY = _a[1], kdComparer = compareX ? 'distX' : 'dist', kdDimensions = (series.options.findNearestPointBy || '')
.indexOf('y') > -1 ? 2 : 1, useRadius = !!series.isBubble, pointEvaluator = suppliedPointEvaluator || (function (p1, p2, comparisonProp) { return [
(p1[comparisonProp] || 0) < (p2[comparisonProp] || 0) ?
p1 :
p2,
false
]; }), bSideCheckEvaluator = suppliedBSideCheckEvaluator || (function (a, b) { return a < b; });
/**
* Set the one and two dimensional distance on the point object.
* @private
*/
function setDistance(p1, p2) {
var _a;
var p1kdX = p1[kdX],
p2kdX = p2[kdX],
x = (Series_defined(p1kdX) && Series_defined(p2kdX)) ? p1kdX - p2kdX : null,
p1kdY = p1[kdY],
p2kdY = p2[kdY],
y = (Series_defined(p1kdY) && Series_defined(p2kdY)) ? p1kdY - p2kdY : 0,
radius = useRadius ? (((_a = p2.marker) === null || _a === void 0 ? void 0 : _a.radius) || 0) : 0;
p2.dist = Math.sqrt(((x && x * x) || 0) + y * y) - radius;
p2.distX = Series_defined(x) ? (Math.abs(x) - radius) : Number.MAX_VALUE;
}
/**
* @private
*/
function doSearch(search, tree, depth, dimensions) {
var _a;
var _b;
var point = tree.point,
axis = series.kdAxisArray[depth % dimensions];
var ret = point,
flip = false;
setDistance(search, point);
// Pick side based on distance to splitting point
var tdist = (search[axis] || 0) - (point[axis] || 0) +
(useRadius ? (((_b = point.marker) === null || _b === void 0 ? void 0 : _b.radius) || 0) : 0), sideA = tdist < 0 ? 'left' : 'right', sideB = tdist < 0 ? 'right' : 'left';
// End of tree
if (tree[sideA]) {
_a = pointEvaluator(point, doSearch(search, tree[sideA], depth + 1, dimensions), kdComparer), ret = _a[0], flip = _a[1];
}
if (tree[sideB]) {
var sqrtTDist = Math.sqrt(tdist * tdist),
retDist = ret[kdComparer];
// Compare distance to current best to splitting point to decide
// whether to check side B or no
if (bSideCheckEvaluator(sqrtTDist, retDist, flip)) {
ret = pointEvaluator(ret, doSearch(search, tree[sideB], depth + 1, dimensions), kdComparer)[0];
}
}
return ret;
}
if (!this.kdTree && !this.buildingKdTree) {
this.buildKDTree(e);
}
if (this.kdTree) {
return doSearch(point, this.kdTree, kdDimensions, kdDimensions);
}
};
/**
* @private
* @function Highcharts.Series#pointPlacementToXValue
*/
Series.prototype.pointPlacementToXValue = function () {
var _a = this,
options = _a.options,
xAxis = _a.xAxis;
var factor = options.pointPlacement;
// Point placement is relative to each series pointRange (#5889)
if (factor === 'between') {
factor = xAxis.reversed ? -0.5 : 0.5; // #11955
}
return Series_isNumber(factor) ?
factor * (options.pointRange || xAxis.pointRange) :
0;
};
/**
* @private
* @function Highcharts.Series#isPointInside
*/
Series.prototype.isPointInside = function (point) {
var _a = this,
chart = _a.chart,
xAxis = _a.xAxis,
yAxis = _a.yAxis,
_b = point.plotX,
plotX = _b === void 0 ? -1 : _b,
_c = point.plotY,
plotY = _c === void 0 ? -1 : _c,
isInside = (plotY >= 0 &&
plotY <= (yAxis ? yAxis.len : chart.plotHeight) &&
plotX >= 0 &&
plotX <= (xAxis ? xAxis.len : chart.plotWidth));
return isInside;
};
/**
* Draw the tracker object that sits above all data labels and markers to
* track mouse events on the graph or points. For the line type charts
* the tracker uses the same graphPath, but with a greater stroke width
* for better control.
* @private
*/
Series.prototype.drawTracker = function () {
var _a;
var series = this,
options = series.options,
trackByArea = options.trackByArea,
trackerPath = [].concat((trackByArea ? series.areaPath : series.graphPath) || []),
chart = series.chart,
pointer = chart.pointer,
renderer = chart.renderer,
snap = ((_a = chart.options.tooltip) === null || _a === void 0 ? void 0 : _a.snap) || 0,
onMouseOver = function () {
if (options.enableMouseTracking &&
chart.hoverSeries !== series) {
series.onMouseOver();
}
},
/*
* Empirical lowest possible opacities for TRACKER_FILL for an
* element to stay invisible but clickable
* IE9: 0.00000000001 (unlimited)
* IE10: 0.0001 (exporting only)
* FF: 0.00000000001 (unlimited)
* Chrome: 0.000001
* Safari: 0.000001
* Opera: 0.00000000001 (unlimited)
*/
TRACKER_FILL = 'rgba(192,192,192,' + (Series_svg ? 0.0001 : 0.002) + ')';
var tracker = series.tracker;
// Draw the tracker
if (tracker) {
tracker.attr({ d: trackerPath });
}
else if (series.graph) { // Create
series.tracker = tracker = renderer.path(trackerPath)
.attr({
visibility: series.visible ? 'inherit' : 'hidden',
zIndex: 2
})
.addClass(trackByArea ?
'highcharts-tracker-area' :
'highcharts-tracker-line')
.add(series.group);
if (!chart.styledMode) {
tracker.attr({
'stroke-linecap': 'round',
'stroke-linejoin': 'round', // #1225
stroke: TRACKER_FILL,
fill: trackByArea ? TRACKER_FILL : 'none',
'stroke-width': series.graph.strokeWidth() +
(trackByArea ? 0 : 2 * snap)
});
}
// The tracker is added to the series group, which is clipped, but
// is covered by the marker group. So the marker group also needs to
// capture events.
[
series.tracker,
series.markerGroup,
series.dataLabelsGroup
].forEach(function (tracker) {
if (tracker) {
tracker.addClass('highcharts-tracker')
.on('mouseover', onMouseOver)
.on('mouseout', function (e) {
pointer === null || pointer === void 0 ? void 0 : pointer.onTrackerMouseOut(e);
});
if (options.cursor && !chart.styledMode) {
tracker.css({ cursor: options.cursor });
}
tracker.on('touchstart', onMouseOver);
}
});
}
Series_fireEvent(this, 'afterDrawTracker');
};
/**
* Add a point to the series after render time. The point can be added at
* the end, or by giving it an X value, to the start or in the middle of the
* series.
*
* @sample highcharts/members/series-addpoint-append/
* Append point
* @sample highcharts/members/series-addpoint-append-and-shift/
* Append and shift
* @sample highcharts/members/series-addpoint-x-and-y/
* Both X and Y values given
* @sample highcharts/members/series-addpoint-pie/
* Append pie slice
* @sample stock/members/series-addpoint/
* Append 100 points in Highcharts Stock
* @sample stock/members/series-addpoint-shift/
* Append and shift in Highcharts Stock
* @sample maps/members/series-addpoint/
* Add a point in Highmaps
*
* @function Highcharts.Series#addPoint
*
* @param {Highcharts.PointOptionsType} options
* The point options. If options is a single number, a point with
* that y value is appended to the series. If it is an array, it will
* be interpreted as x and y values respectively. If it is an
* object, advanced options as outlined under `series.data` are
* applied.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the point is added. When adding
* more than one point, it is highly recommended that the redraw
* option be set to false, and instead {@link Chart#redraw} is
* explicitly called after the adding of points is finished.
* Otherwise, the chart will redraw after adding each point.
*
* @param {boolean} [shift=false]
* If true, a point is shifted off the start of the series as one is
* appended to the end.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether to apply animation, and optionally animation
* configuration.
*
* @param {boolean} [withEvent=true]
* Used internally, whether to fire the series `addPoint` event.
*
* @emits Highcharts.Series#event:addPoint
*/
Series.prototype.addPoint = function (options, redraw, shift, animation, withEvent) {
var series = this,
seriesOptions = series.options,
chart = series.chart,
data = series.data,
table = series.dataTable,
xAxis = series.xAxis,
names = xAxis && xAxis.hasNames && xAxis.names,
dataOptions = seriesOptions.data,
xData = series.getColumn('x');
var isInTheMiddle,
i;
// Optional redraw, defaults to true
redraw = Series_pick(redraw, true);
// Get options and push the point to xData, yData and series.options. In
// series.generatePoints the Point instance will be created on demand
// and pushed to the series.data array.
var point = { series: series };
series.pointClass.prototype.applyOptions.apply(point, [options]);
var x = point.x;
// Get the insertion point
i = xData.length;
if (series.requireSorting && x < xData[i - 1]) {
isInTheMiddle = true;
while (i && xData[i - 1] > x) {
i--;
}
}
// Insert the row at the given index
table.setRow(point, i, true, { addColumns: false });
if (names && point.name) {
names[x] = point.name;
}
dataOptions === null || dataOptions === void 0 ? void 0 : dataOptions.splice(i, 0, options);
if (isInTheMiddle ||
// When processedData is present we need to splice an empty slot
// into series.data, otherwise generatePoints won't pick it up.
series.processedData) {
series.data.splice(i, 0, null);
series.processData();
}
// Generate points to be added to the legend (#1329)
if (seriesOptions.legendType === 'point') {
series.generatePoints();
}
// Shift the first point off the parallel arrays
if (shift) {
if (data[0] && !!data[0].remove) {
data[0].remove(false);
}
else {
Series_spreadArray([
data,
dataOptions
], Object.values(table.getColumns()), true).filter(Series_defined).forEach(function (coll) {
coll.shift();
});
table.rowCount -= 1;
Series_fireEvent(table, 'afterDeleteRows');
}
}
// Fire event
if (withEvent !== false) {
Series_fireEvent(series, 'addPoint', { point: point });
}
// Redraw
series.isDirty = true;
series.isDirtyData = true;
if (redraw) {
chart.redraw(animation); // Animation is set anyway on redraw, #5665
}
};
/**
* Remove a point from the series. Unlike the
* {@link Highcharts.Point#remove} method, this can also be done on a point
* that is not instantiated because it is outside the view or subject to
* Highcharts Stock data grouping.
*
* @sample highcharts/members/series-removepoint/
* Remove cropped point
*
* @function Highcharts.Series#removePoint
*
* @param {number} i
* The index of the point in the {@link Highcharts.Series.data|data}
* array.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the point is added. When
* removing more than one point, it is highly recommended that the
* `redraw` option be set to `false`, and instead {@link
* Highcharts.Chart#redraw} is explicitly called after the adding of
* points is finished.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether and optionally how the series should be animated.
*
* @emits Highcharts.Point#event:remove
*/
Series.prototype.removePoint = function (i, redraw, animation) {
var series = this,
chart = series.chart,
data = series.data,
points = series.points,
table = series.dataTable,
point = data[i],
remove = function () {
// Splice out the point's data from all parallel arrays
Series_spreadArray([
// #4935
(points === null || points === void 0 ? void 0 : points.length) === data.length ? points : void 0,
data,
series.options.data
],
Object.values(table.getColumns()),
true).filter(Series_defined).forEach(function (coll) {
coll.splice(i, 1);
});
// Shorthand row deletion in order to avoid including the whole
// `deleteRows` function in the DataTableCore module.
table.rowCount -= 1;
Series_fireEvent(table, 'afterDeleteRows');
point === null || point === void 0 ? void 0 : point.destroy();
// Redraw
series.isDirty = true;
series.isDirtyData = true;
if (redraw) {
chart.redraw();
}
};
Series_setAnimation(animation, chart);
redraw = Series_pick(redraw, true);
// Fire the event with a default handler of removing the point
if (point) {
point.firePointEvent('remove', null, remove);
}
else {
remove();
}
};
/**
* Remove a series and optionally redraw the chart.
*
* @sample highcharts/members/series-remove/
* Remove first series from a button
*
* @function Highcharts.Series#remove
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart or wait for an explicit call to
* {@link Highcharts.Chart#redraw}.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether to apply animation, and optionally animation
* configuration.
*
* @param {boolean} [withEvent=true]
* Used internally, whether to fire the series `remove` event.
*
* @emits Highcharts.Series#event:remove
*/
Series.prototype.remove = function (redraw, animation, withEvent, keepEvents) {
var series = this,
chart = series.chart;
/**
* @private
*/
function remove() {
// Destroy elements
series.destroy(keepEvents);
// Redraw
chart.isDirtyLegend = chart.isDirtyBox = true;
chart.linkSeries(keepEvents);
if (Series_pick(redraw, true)) {
chart.redraw(animation);
}
}
// Fire the event with a default handler of removing the point
if (withEvent !== false) {
Series_fireEvent(series, 'remove', null, remove);
}
else {
remove();
}
};
/**
* Update the series with a new set of options. For a clean and precise
* handling of new options, all methods and elements from the series are
* removed, and it is initialized from scratch. Therefore, this method is
* more performance expensive than some other utility methods like {@link
* Series#setData} or {@link Series#setVisible}.
*
* Note that `Series.update` may mutate the passed `data` options.
*
* @sample highcharts/members/series-update/
* Updating series options
* @sample maps/members/series-update/
* Update series options in Highmaps
*
* @function Highcharts.Series#update
*
* @param {Highcharts.SeriesOptionsType} options
* New options that will be merged with the series' existing options.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the series is altered. If doing
* more operations on the chart, it is a good idea to set redraw to
* false and call {@link Chart#redraw} after.
*
* @emits Highcharts.Series#event:update
* @emits Highcharts.Series#event:afterUpdate
*/
Series.prototype.update = function (options, redraw) {
var _a,
_b,
_c,
_d;
options = Series_diffObjects(options, this.userOptions);
Series_fireEvent(this, 'update', { options: options });
var series = this,
chart = series.chart,
// Must use user options when changing type because series.options
// is merged in with type specific plotOptions
oldOptions = series.userOptions,
initialType = series.initialType || series.type,
plotOptions = chart.options.plotOptions,
initialSeriesProto = seriesTypes[initialType].prototype,
groups = [
'group',
'markerGroup',
'dataLabelsGroup',
'transformGroup'
],
optionsToCheck = [
'dataGrouping',
'pointStart',
'pointInterval',
'pointIntervalUnit',
'keys'
],
// Animation must be enabled when calling update before the initial
// animation has first run. This happens when calling update
// directly after chart initialization, or when applying responsive
// rules (#6912).
animation = series.finishedAnimating && { animation: false },
kinds = {};
var seriesOptions,
n,
preserve = [
'colorIndex',
'eventOptions',
'navigatorSeries',
'symbolIndex',
'baseSeries'
],
newType = (options.type ||
oldOptions.type ||
chart.options.chart.type);
var keepPoints = !(
// Indicators, histograms etc recalculate the data. It should be
// possible to omit this.
this.hasDerivedData ||
// New type requires new point classes
(newType && newType !== this.type) ||
// New options affecting how the data points are built
typeof options.keys !== 'undefined' ||
typeof options.pointStart !== 'undefined' ||
typeof options.pointInterval !== 'undefined' ||
typeof options.relativeXValue !== 'undefined' ||
options.joinBy ||
options.mapData || // #11636
// Changes to data grouping requires new points in new group
optionsToCheck.some(function (option) { return series.hasOptionChanged(option); }));
newType = newType || initialType;
if (keepPoints) {
preserve.push('data', 'isDirtyData',
// GeoHeatMap interpolation
'isDirtyCanvas', 'points', 'dataTable', 'processedData', // #17057
'xIncrement', 'cropped', '_hasPointMarkers', 'hasDataLabels',
// Networkgraph (#14397)
'nodes', 'layout',
// Treemap
'level',
// Map specific, consider moving it to series-specific preserve-
// properties (#10617)
'mapMap', 'mapData', 'minY', 'maxY', 'minX', 'maxX', 'transformGroups' // #18857
);
if (options.visible !== false) {
preserve.push('area', 'graph');
}
series.parallelArrays.forEach(function (key) {
preserve.push(key + 'Data');
});
if (options.data) {
// `setData` uses `dataSorting` options so we need to update
// them earlier
if (options.dataSorting) {
Series_extend(series.options.dataSorting, options.dataSorting);
}
this.setData(options.data, false);
}
}
else {
this.dataTable.modified = this.dataTable;
}
// Do the merge, with some forced options
options = Series_merge(oldOptions, {
// When oldOptions.index is null it should't be cleared.
// Otherwise navigator series will have wrong indexes (#10193).
index: oldOptions.index === void 0 ?
series.index : oldOptions.index,
pointStart:
// When updating from blank (#7933)
(_c = (_b = (_a = plotOptions === null || plotOptions === void 0 ? void 0 : plotOptions.series) === null || _a === void 0 ? void 0 : _a.pointStart) !== null && _b !== void 0 ? _b : oldOptions.pointStart) !== null && _c !== void 0 ? _c :
// When updating after addPoint
series.getColumn('x')[0]
}, !keepPoints && { data: series.options.data }, options, animation);
// Merge does not merge arrays, but replaces them. Since points were
// updated, `series.options.data` has correct merged options, use it:
if (keepPoints && options.data) {
options.data = series.options.data;
}
// Make sure preserved properties are not destroyed (#3094)
preserve = groups.concat(preserve);
preserve.forEach(function (prop) {
preserve[prop] = series[prop];
delete series[prop];
});
var casting = false;
if (seriesTypes[newType]) {
casting = newType !== series.type;
// Destroy the series and delete all properties, it will be
// reinserted within the `init` call below
series.remove(false, false, false, true);
if (casting) {
// #20264: Re-detect a certain chart properties from new series
chart.propFromSeries();
// Modern browsers including IE11
if (Object.setPrototypeOf) {
Object.setPrototypeOf(series, seriesTypes[newType].prototype);
// Legacy (IE < 11)
}
else {
var ownEvents = Object.hasOwnProperty.call(series, 'hcEvents') && series.hcEvents;
for (n in initialSeriesProto) { // eslint-disable-line guard-for-in
series[n] = void 0;
}
// Reinsert all methods and properties from the new type
// prototype (#2270, #3719).
Series_extend(series, seriesTypes[newType].prototype);
// The events are tied to the prototype chain, don't copy if
// they're not the series' own
if (ownEvents) {
series.hcEvents = ownEvents;
}
else {
delete series.hcEvents;
}
}
}
}
else {
Series_error(17, true, chart, { missingModuleFor: newType });
}
// Re-register groups (#3094) and other preserved properties
preserve.forEach(function (prop) {
series[prop] = preserve[prop];
});
series.init(chart, options);
// Remove particular elements of the points. Check `series.options`
// because we need to consider the options being set on plotOptions as
// well.
if (keepPoints && this.points) {
seriesOptions = series.options;
// What kind of elements to destroy
if (seriesOptions.visible === false) {
kinds.graphic = 1;
kinds.dataLabel = 1;
}
else {
// If the marker got disabled or changed its symbol, width or
// height - destroy
if (this.hasMarkerChanged(seriesOptions, oldOptions)) {
kinds.graphic = 1;
}
if (!((_d = series.hasDataLabels) === null || _d === void 0 ? void 0 : _d.call(series))) {
kinds.dataLabel = 1;
}
}
for (var _e = 0, _f = this.points; _e < _f.length; _e++) {
var point = _f[_e];
if (point && point.series) {
point.resolveColor();
// Destroy elements in order to recreate based on updated
// series options.
if (Object.keys(kinds).length) {
point.destroyElements(kinds);
}
if (seriesOptions.showInLegend === false &&
point.legendItem) {
chart.legend.destroyItem(point);
}
}
}
}
series.initialType = initialType;
chart.linkSeries(); // Links are lost in series.remove (#3028)
// Set data for series with sorting enabled if it isn't set yet (#19715)
chart.setSortedData();
// #15383: Fire updatedData if the type has changed to keep linked
// series such as indicators updated
if (casting && series.linkedSeries.length) {
series.isDirtyData = true;
}
Series_fireEvent(this, 'afterUpdate');
if (Series_pick(redraw, true)) {
chart.redraw(keepPoints ? void 0 : false);
}
};
/**
* Used from within series.update
* @private
*/
Series.prototype.setName = function (name) {
this.name = this.options.name = this.userOptions.name = name;
this.chart.isDirtyLegend = true;
};
/**
* Check if the option has changed.
* @private
*/
Series.prototype.hasOptionChanged = function (optionName) {
var _a,
_b;
var chart = this.chart,
option = this.options[optionName],
plotOptions = chart.options.plotOptions,
oldOption = this.userOptions[optionName],
plotOptionsOption = Series_pick((_a = plotOptions === null || plotOptions === void 0 ? void 0 : plotOptions[this.type]) === null || _a === void 0 ? void 0 : _a[optionName], (_b = plotOptions === null || plotOptions === void 0 ? void 0 : plotOptions.series) === null || _b === void 0 ? void 0 : _b[optionName]);
// Check if `plotOptions` are defined already, #19203
if (oldOption && !Series_defined(plotOptionsOption)) {
return option !== oldOption;
}
return option !== Series_pick(plotOptionsOption, option);
};
/**
* Runs on mouse over the series graphical items.
*
* @function Highcharts.Series#onMouseOver
* @emits Highcharts.Series#event:mouseOver
*/
Series.prototype.onMouseOver = function () {
var series = this,
chart = series.chart,
hoverSeries = chart.hoverSeries,
pointer = chart.pointer;
pointer === null || pointer === void 0 ? void 0 : pointer.setHoverChartIndex();
// Set normal state to previous series
if (hoverSeries && hoverSeries !== series) {
hoverSeries.onMouseOut();
}
// Trigger the event, but to save processing time,
// only if defined
if (series.options.events.mouseOver) {
Series_fireEvent(series, 'mouseOver');
}
// Hover this
series.setState('hover');
/**
* Contains the original hovered series.
*
* @name Highcharts.Chart#hoverSeries
* @type {Highcharts.Series|null}
*/
chart.hoverSeries = series;
};
/**
* Runs on mouse out of the series graphical items.
*
* @function Highcharts.Series#onMouseOut
*
* @emits Highcharts.Series#event:mouseOut
*/
Series.prototype.onMouseOut = function () {
// Trigger the event only if listeners exist
var series = this,
options = series.options,
chart = series.chart,
tooltip = chart.tooltip,
hoverPoint = chart.hoverPoint;
// #182, set to null before the mouseOut event fires
chart.hoverSeries = null;
// Trigger mouse out on the point, which must be in this series
if (hoverPoint) {
hoverPoint.onMouseOut();
}
// Fire the mouse out event
if (series && options.events.mouseOut) {
Series_fireEvent(series, 'mouseOut');
}
// Hide the tooltip
if (tooltip &&
!series.stickyTracking &&
(!tooltip.shared || series.noSharedTooltip)) {
tooltip.hide();
}
// Reset all inactive states
chart.series.forEach(function (s) {
s.setState('', true);
});
};
/**
* Set the state of the series. Called internally on mouse interaction
* operations, but it can also be called directly to visually
* highlight a series.
*
* @function Highcharts.Series#setState
*
* @param {Highcharts.SeriesStateValue|""} [state]
* The new state, can be either `'hover'`, `'inactive'`, `'select'`,
* or `''` (an empty string), `'normal'` or `undefined` to set to
* normal state.
* @param {boolean} [inherit]
* Determines if state should be inherited by points too.
*/
Series.prototype.setState = function (state, inherit) {
var series = this, options = series.options, graph = series.graph, inactiveOtherPoints = options.inactiveOtherPoints, stateOptions = options.states,
// By default a quick animation to hover/inactive,
// slower to un-hover
stateAnimation = Series_pick((stateOptions[state || 'normal'] &&
stateOptions[state || 'normal'].animation), series.chart.options.chart.animation);
var lineWidth = options.lineWidth,
opacity = options.opacity;
state = state || '';
if (series.state !== state) {
// Toggle class names
[
series.group,
series.markerGroup,
series.dataLabelsGroup
].forEach(function (group) {
if (group) {
// Old state
if (series.state) {
group.removeClass('highcharts-series-' + series.state);
}
// New state
if (state) {
group.addClass('highcharts-series-' + state);
}
}
});
series.state = state;
if (!series.chart.styledMode) {
if (stateOptions[state] &&
stateOptions[state].enabled === false) {
return;
}
if (state) {
lineWidth = (stateOptions[state].lineWidth ||
lineWidth + (stateOptions[state].lineWidthPlus || 0)); // #4035
opacity = Series_pick(stateOptions[state].opacity, opacity);
}
if (graph && !graph.dashstyle && Series_isNumber(lineWidth)) {
// Animate the graph stroke-width
for (var _a = 0, _b = Series_spreadArray([
graph
], this.zones.map(function (zone) { return zone.graph; }), true); _a < _b.length; _a++) {
var graphElement = _b[_a];
graphElement === null || graphElement === void 0 ? void 0 : graphElement.animate({
'stroke-width': lineWidth
}, stateAnimation);
}
}
// For some types (pie, networkgraph, sankey) opacity is
// resolved on a point level
if (!inactiveOtherPoints) {
[
series.group,
series.markerGroup,
series.dataLabelsGroup,
series.labelBySeries
].forEach(function (group) {
if (group) {
group.animate({
opacity: opacity
}, stateAnimation);
}
});
}
}
}
// Don't loop over points on a series that doesn't apply inactive state
// to siblings markers (e.g. line, column)
if (inherit && inactiveOtherPoints && series.points) {
series.setAllPointsToState(state || void 0);
}
};
/**
* Set the state for all points in the series.
*
* @function Highcharts.Series#setAllPointsToState
*
* @private
*
* @param {string} [state]
* Can be either `hover` or undefined to set to normal state.
*/
Series.prototype.setAllPointsToState = function (state) {
this.points.forEach(function (point) {
if (point.setState) {
point.setState(state);
}
});
};
/**
* Show or hide the series.
*
* @function Highcharts.Series#setVisible
*
* @param {boolean} [visible]
* True to show the series, false to hide. If undefined, the visibility is
* toggled.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the series is altered. If doing more
* operations on the chart, it is a good idea to set redraw to false and
* call {@link Chart#redraw|chart.redraw()} after.
*
* @emits Highcharts.Series#event:hide
* @emits Highcharts.Series#event:show
*/
Series.prototype.setVisible = function (vis, redraw) {
var _a;
var series = this,
chart = series.chart,
ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries,
oldVisibility = series.visible;
// If called without an argument, toggle visibility
series.visible =
vis =
series.options.visible =
series.userOptions.visible =
typeof vis === 'undefined' ? !oldVisibility : vis; // #5618
var showOrHide = vis ? 'show' : 'hide';
// Show or hide elements
[
'group',
'dataLabelsGroup',
'markerGroup',
'tracker',
'tt'
].forEach(function (key) {
var _a;
(_a = series[key]) === null || _a === void 0 ? void 0 : _a[showOrHide]();
});
// Hide tooltip (#1361)
if (chart.hoverSeries === series ||
((_a = chart.hoverPoint) === null || _a === void 0 ? void 0 : _a.series) === series) {
series.onMouseOut();
}
if (series.legendItem) {
chart.legend.colorizeItem(series, vis);
}
// Rescale or adapt to resized chart
series.isDirty = true;
// In a stack, all other series are affected
if (series.options.stacking) {
chart.series.forEach(function (otherSeries) {
if (otherSeries.options.stacking && otherSeries.visible) {
otherSeries.isDirty = true;
}
});
}
// Show or hide linked series
series.linkedSeries.forEach(function (otherSeries) {
otherSeries.setVisible(vis, false);
});
if (ignoreHiddenSeries) {
chart.isDirtyBox = true;
}
Series_fireEvent(series, showOrHide);
if (redraw !== false) {
chart.redraw();
}
};
/**
* Show the series if hidden.
*
* @sample highcharts/members/series-hide/
* Toggle visibility from a button
*
* @function Highcharts.Series#show
* @emits Highcharts.Series#event:show
*/
Series.prototype.show = function () {
this.setVisible(true);
};
/**
* Hide the series if visible. If the
* [chart.ignoreHiddenSeries](https://api.highcharts.com/highcharts/chart.ignoreHiddenSeries)
* option is true, the chart is redrawn without this series.
*
* @sample highcharts/members/series-hide/
* Toggle visibility from a button
*
* @function Highcharts.Series#hide
* @emits Highcharts.Series#event:hide
*/
Series.prototype.hide = function () {
this.setVisible(false);
};
/**
* Select or unselect the series. This means its
* {@link Highcharts.Series.selected|selected}
* property is set, the checkbox in the legend is toggled and when selected,
* the series is returned by the {@link Highcharts.Chart#getSelectedSeries}
* function.
*
* @sample highcharts/members/series-select/
* Select a series from a button
*
* @function Highcharts.Series#select
*
* @param {boolean} [selected]
* True to select the series, false to unselect. If undefined, the selection
* state is toggled.
*
* @emits Highcharts.Series#event:select
* @emits Highcharts.Series#event:unselect
*/
Series.prototype.select = function (selected) {
var series = this;
series.selected =
selected =
this.options.selected = (typeof selected === 'undefined' ?
!series.selected :
selected);
if (series.checkbox) {
series.checkbox.checked = selected;
}
Series_fireEvent(series, selected ? 'select' : 'unselect');
};
/**
* Checks if a tooltip should be shown for a given point.
*
* @private
*/
Series.prototype.shouldShowTooltip = function (plotX, plotY, options) {
if (options === void 0) { options = {}; }
options.series = this;
options.visiblePlotOnly = true;
return this.chart.isInsidePlot(plotX, plotY, options);
};
/**
* Draws the legend symbol based on the legendSymbol user option.
*
* @private
*/
Series.prototype.drawLegendSymbol = function (legend, item) {
var _a;
(_a = Legend_LegendSymbol[this.options.legendSymbol || 'rectangle']) === null || _a === void 0 ? void 0 : _a.call(this, legend, item);
};
Series.defaultOptions = SeriesDefaults;
/**
* Registry of all available series types.
*
* @name Highcharts.Series.types
* @type {Highcharts.Dictionary<typeof_Highcharts.Series>}
*/
Series.types = Series_SeriesRegistry.seriesTypes;
/* *
*
* Static Functions
*
* */
/**
* Registers a series class to be accessible via `Series.types`.
*
* @function Highcharts.Series.registerType
*
* @param {string} seriesType
* The series type as an identifier string in lower case.
*
* @param {Function} SeriesClass
* The series class as a class pattern or a constructor function with
* prototype.
*/
Series.registerType = Series_SeriesRegistry.registerSeriesType;
return Series;
}());
Series_extend(Series.prototype, {
axisTypes: ['xAxis', 'yAxis'],
coll: 'series',
colorCounter: 0,
directTouch: false,
invertible: true,
isCartesian: true,
kdAxisArray: ['clientX', 'plotY'],
// Each point's x and y values are stored in this.xData and this.yData:
parallelArrays: ['x', 'y'],
pointClass: Series_Point,
requireSorting: true,
// Requires the data to be sorted:
sorted: true
});
/* *
*
* Registry
*
* */
Series_SeriesRegistry.series = Series;
/* *
*
* Default Export
*
* */
/* harmony default export */ var Series_Series = (Series);
/* *
*
* API Declarations
*
* */
/**
* This is a placeholder type of the possible series options for
* [Highcharts](../highcharts/series), [Highcharts Stock](../highstock/series),
* [Highmaps](../highmaps/series), and [Gantt](../gantt/series).
*
* In TypeScript is this dynamically generated to reference all possible types
* of series options.
*
* @ignore-declaration
* @typedef {Highcharts.SeriesOptions|Highcharts.Dictionary<*>} Highcharts.SeriesOptionsType
*/
/**
* Options for `dataSorting`.
*
* @interface Highcharts.DataSortingOptionsObject
* @since 8.0.0
*/ /**
* Enable or disable data sorting for the series.
* @name Highcharts.DataSortingOptionsObject#enabled
* @type {boolean|undefined}
*/ /**
* Whether to allow matching points by name in an update.
* @name Highcharts.DataSortingOptionsObject#matchByName
* @type {boolean|undefined}
*/ /**
* Determines what data value should be used to sort by.
* @name Highcharts.DataSortingOptionsObject#sortKey
* @type {string|undefined}
*/
/**
* Function callback when a series has been animated.
*
* @callback Highcharts.SeriesAfterAnimateCallbackFunction
*
* @param {Highcharts.Series} this
* The series where the event occurred.
*
* @param {Highcharts.SeriesAfterAnimateEventObject} event
* Event arguments.
*/
/**
* Event information regarding completed animation of a series.
*
* @interface Highcharts.SeriesAfterAnimateEventObject
*/ /**
* Animated series.
* @name Highcharts.SeriesAfterAnimateEventObject#target
* @type {Highcharts.Series}
*/ /**
* Event type.
* @name Highcharts.SeriesAfterAnimateEventObject#type
* @type {"afterAnimate"}
*/
/**
* Function callback when the checkbox next to the series' name in the legend is
* clicked.
*
* @callback Highcharts.SeriesCheckboxClickCallbackFunction
*
* @param {Highcharts.Series} this
* The series where the event occurred.
*
* @param {Highcharts.SeriesCheckboxClickEventObject} event
* Event arguments.
*/
/**
* Event information regarding check of a series box.
*
* @interface Highcharts.SeriesCheckboxClickEventObject
*/ /**
* Whether the box has been checked.
* @name Highcharts.SeriesCheckboxClickEventObject#checked
* @type {boolean}
*/ /**
* Related series.
* @name Highcharts.SeriesCheckboxClickEventObject#item
* @type {Highcharts.Series}
*/ /**
* Related series.
* @name Highcharts.SeriesCheckboxClickEventObject#target
* @type {Highcharts.Series}
*/ /**
* Event type.
* @name Highcharts.SeriesCheckboxClickEventObject#type
* @type {"checkboxClick"}
*/
/**
* Function callback when a series is clicked. Return false to cancel toogle
* actions.
*
* @callback Highcharts.SeriesClickCallbackFunction
*
* @param {Highcharts.Series} this
* The series where the event occurred.
*
* @param {Highcharts.SeriesClickEventObject} event
* Event arguments.
*/
/**
* Common information for a click event on a series.
*
* @interface Highcharts.SeriesClickEventObject
* @extends global.Event
*/ /**
* Nearest point on the graph.
* @name Highcharts.SeriesClickEventObject#point
* @type {Highcharts.Point}
*/
/**
* Gets fired when the series is hidden after chart generation time, either by
* clicking the legend item or by calling `.hide()`.
*
* @callback Highcharts.SeriesHideCallbackFunction
*
* @param {Highcharts.Series} this
* The series where the event occurred.
*
* @param {global.Event} event
* The event that occurred.
*/
/**
* The SVG value used for the `stroke-linecap` and `stroke-linejoin` of a line
* graph.
*
* @typedef {"butt"|"round"|"square"|string} Highcharts.SeriesLinecapValue
*/
/**
* Gets fired when the legend item belonging to the series is clicked. The
* default action is to toggle the visibility of the series. This can be
* prevented by returning `false` or calling `event.preventDefault()`.
*
* **Note:** This option is deprecated in favor of
* Highcharts.LegendItemClickCallbackFunction.
*
* @deprecated 11.4.4
* @callback Highcharts.SeriesLegendItemClickCallbackFunction
*
* @param {Highcharts.Series} this
* The series where the event occurred.
*
* @param {Highcharts.SeriesLegendItemClickEventObject} event
* The event that occurred.
*/
/**
* Information about the event.
*
* **Note:** This option is deprecated in favor of
* Highcharts.LegendItemClickEventObject.
*
* @deprecated 11.4.4
* @interface Highcharts.SeriesLegendItemClickEventObject
*/ /**
* Related browser event.
* @name Highcharts.SeriesLegendItemClickEventObject#browserEvent
* @type {global.PointerEvent}
*/ /**
* Prevent the default action of toggle the visibility of the series.
* @name Highcharts.SeriesLegendItemClickEventObject#preventDefault
* @type {Function}
*/ /**
* Related series.
* @name Highcharts.SeriesCheckboxClickEventObject#target
* @type {Highcharts.Series}
*/ /**
* Event type.
* @name Highcharts.SeriesCheckboxClickEventObject#type
* @type {"checkboxClick"}
*/
/**
* Gets fired when the mouse leaves the graph.
*
* @callback Highcharts.SeriesMouseOutCallbackFunction
*
* @param {Highcharts.Series} this
* Series where the event occurred.
*
* @param {global.PointerEvent} event
* Event that occurred.
*/
/**
* Gets fired when the mouse enters the graph.
*
* @callback Highcharts.SeriesMouseOverCallbackFunction
*
* @param {Highcharts.Series} this
* Series where the event occurred.
*
* @param {global.PointerEvent} event
* Event that occurred.
*/
/**
* Translation and scale for the plot area of a series.
*
* @interface Highcharts.SeriesPlotBoxObject
*/ /**
* @name Highcharts.SeriesPlotBoxObject#scaleX
* @type {number}
*/ /**
* @name Highcharts.SeriesPlotBoxObject#scaleY
* @type {number}
*/ /**
* @name Highcharts.SeriesPlotBoxObject#translateX
* @type {number}
*/ /**
* @name Highcharts.SeriesPlotBoxObject#translateY
* @type {number}
*/
/**
* Gets fired when the series is shown after chart generation time, either by
* clicking the legend item or by calling `.show()`.
*
* @callback Highcharts.SeriesShowCallbackFunction
*
* @param {Highcharts.Series} this
* Series where the event occurred.
*
* @param {global.Event} event
* Event that occurred.
*/
/**
* Possible key values for the series state options.
*
* @typedef {"hover"|"inactive"|"normal"|"select"} Highcharts.SeriesStateValue
*/
''; // Detach doclets above
/* *
*
* API Options
*
* */
/**
* Series options for specific data and the data itself. In TypeScript you
* have to cast the series options to specific series types, to get all
* possible options for a series.
*
* @example
* // TypeScript example
* Highcharts.chart('container', {
* series: [{
* color: '#06C',
* data: [[0, 1], [2, 3]]
* } as Highcharts.SeriesLineOptions ]
* });
*
* @type {Array<*>}
* @apioption series
*/
/**
* An id for the series. This can be used after render time to get a pointer
* to the series object through `chart.get()`.
*
* @sample {highcharts} highcharts/plotoptions/series-id/
* Get series by id
*
* @type {string}
* @since 1.2.0
* @apioption series.id
*/
/**
* The index of the series in the chart, affecting the internal index in the
* `chart.series` array, the visible Z index as well as the order in the
* legend.
*
* @type {number}
* @since 2.3.0
* @apioption series.index
*/
/**
* The sequential index of the series in the legend.
*
* @see [legend.reversed](#legend.reversed),
* [yAxis.reversedStacks](#yAxis.reversedStacks)
*
* @sample {highcharts|highstock} highcharts/series/legendindex/
* Legend in opposite order
*
* @type {number}
* @apioption series.legendIndex
*/
/**
* The name of the series as shown in the legend, tooltip etc.
*
* @sample {highcharts} highcharts/series/name/
* Series name
* @sample {highmaps} maps/demo/category-map/
* Series name
*
* @type {string}
* @apioption series.name
*/
/**
* This option allows grouping series in a stacked chart. The stack option
* can be a string or anything else, as long as the grouped series' stack
* options match each other after conversion into a string.
*
* @sample {highcharts} highcharts/series/stack/
* Stacked and grouped columns
* @sample {highcharts} highcharts/series/stack-centerincategory/
* Stacked and grouped, centered in category
*
* @type {number|string}
* @since 2.1
* @product highcharts highstock
* @apioption series.stack
*/
/**
* The type of series, for example `line` or `column`. By default, the
* series type is inherited from [chart.type](#chart.type), so unless the
* chart is a combination of series types, there is no need to set it on the
* series level.
*
* @sample {highcharts} highcharts/series/type/
* Line and column in the same chart
* @sample highcharts/series/type-dynamic/
* Dynamic types with button selector
* @sample {highmaps} maps/demo/mapline-mappoint/
* Multiple types in the same map
*
* @type {string}
* @apioption series.type
*/
/**
* When using dual or multiple x axes, this number defines which xAxis the
* particular series is connected to. It refers to either the
* {@link #xAxis.id|axis id}
* or the index of the axis in the xAxis array, with 0 being the first.
*
* @type {number|string}
* @default 0
* @product highcharts highstock
* @apioption series.xAxis
*/
/**
* When using dual or multiple y axes, this number defines which yAxis the
* particular series is connected to. It refers to either the
* {@link #yAxis.id|axis id}
* or the index of the axis in the yAxis array, with 0 being the first.
*
* @sample {highcharts} highcharts/series/yaxis/
* Apply the column series to the secondary Y axis
*
* @type {number|string}
* @default 0
* @product highcharts highstock
* @apioption series.yAxis
*/
/**
* Define the visual z index of the series.
*
* @sample {highcharts} highcharts/plotoptions/series-zindex-default/
* With no z index, the series defined last are on top
* @sample {highcharts} highcharts/plotoptions/series-zindex/
* With a z index, the series with the highest z index is on top
* @sample {highstock} highcharts/plotoptions/series-zindex-default/
* With no z index, the series defined last are on top
* @sample {highstock} highcharts/plotoptions/series-zindex/
* With a z index, the series with the highest z index is on top
*
* @type {number}
* @product highcharts highstock
* @apioption series.zIndex
*/
''; // Include precedent doclets in transpiled
;// ./code/es5/es-modules/Core/Legend/Legend.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Legend_animObject = AnimationUtilities.animObject, Legend_setAnimation = AnimationUtilities.setAnimation;
var Legend_registerEventOptions = Core_Foundation.registerEventOptions;
var Legend_composed = Core_Globals.composed, marginNames = Core_Globals.marginNames;
var Legend_distribute = Renderer_RendererUtilities.distribute;
var Legend_format = Core_Templating.format;
var Legend_addEvent = Core_Utilities.addEvent, Legend_createElement = Core_Utilities.createElement, Legend_css = Core_Utilities.css, Legend_defined = Core_Utilities.defined, Legend_discardElement = Core_Utilities.discardElement, Legend_find = Core_Utilities.find, Legend_fireEvent = Core_Utilities.fireEvent, Legend_isNumber = Core_Utilities.isNumber, Legend_merge = Core_Utilities.merge, Legend_pick = Core_Utilities.pick, Legend_pushUnique = Core_Utilities.pushUnique, Legend_relativeLength = Core_Utilities.relativeLength, Legend_stableSort = Core_Utilities.stableSort, Legend_syncTimeout = Core_Utilities.syncTimeout;
/* *
*
* Class
*
* */
/**
* The overview of the chart's series. The legend object is instantiated
* internally in the chart constructor, and is available from the `chart.legend`
* property. Each chart has only one legend.
*
* @class
* @name Highcharts.Legend
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {Highcharts.LegendOptions} options
* Legend options.
*/
var Legend = /** @class */ (function () {
/* *
*
* Functions
*
* */
/**
* Initialize the legend.
*
* @private
* @function Highcharts.Legend#init
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {Highcharts.LegendOptions} options
* Legend options.
*/
function Legend(chart, options) {
var _this = this;
/* *
*
* Properties
*
* */
this.allItems = [];
this.initialItemY = 0;
this.itemHeight = 0;
this.itemMarginBottom = 0;
this.itemMarginTop = 0;
this.itemX = 0;
this.itemY = 0;
this.lastItemY = 0;
this.lastLineHeight = 0;
this.legendHeight = 0;
this.legendWidth = 0;
this.maxItemWidth = 0;
this.maxLegendWidth = 0;
this.offsetWidth = 0;
this.padding = 0;
this.pages = [];
this.symbolHeight = 0;
this.symbolWidth = 0;
this.titleHeight = 0;
this.totalItemWidth = 0;
this.widthOption = 0;
/**
* Chart of this legend.
*
* @readonly
* @name Highcharts.Legend#chart
* @type {Highcharts.Chart}
*/
this.chart = chart;
this.setOptions(options);
if (options.enabled) {
// Render it
this.render();
Legend_registerEventOptions(this, options);
// Move checkboxes
Legend_addEvent(this.chart, 'endResize', function () {
this.legend.positionCheckboxes();
});
}
// On Legend.init and Legend.update, make sure that proximate layout
// events are either added or removed (#18362).
Legend_addEvent(this.chart, 'render', function () {
if (_this.options.enabled && _this.proximate) {
_this.proximatePositions();
_this.positionItems();
}
});
}
/**
* @private
* @function Highcharts.Legend#setOptions
* @param {Highcharts.LegendOptions} options
*/
Legend.prototype.setOptions = function (options) {
var padding = Legend_pick(options.padding, 8);
/**
* Legend options.
*
* @readonly
* @name Highcharts.Legend#options
* @type {Highcharts.LegendOptions}
*/
this.options = options;
if (!this.chart.styledMode) {
this.itemStyle = options.itemStyle;
this.itemHiddenStyle = Legend_merge(this.itemStyle, options.itemHiddenStyle);
}
this.itemMarginTop = options.itemMarginTop;
this.itemMarginBottom = options.itemMarginBottom;
this.padding = padding;
this.initialItemY = padding - 5; // 5 is pixels above the text
this.symbolWidth = Legend_pick(options.symbolWidth, 16);
this.pages = [];
this.proximate = options.layout === 'proximate' && !this.chart.inverted;
// #12705: baseline has to be reset on every update
this.baseline = void 0;
};
/**
* Update the legend with new options. Equivalent to running `chart.update`
* with a legend configuration option.
*
* @sample highcharts/legend/legend-update/
* Legend update
*
* @function Highcharts.Legend#update
*
* @param {Highcharts.LegendOptions} options
* Legend options.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the axis is altered. If doing more
* operations on the chart, it is a good idea to set redraw to false and
* call {@link Chart#redraw} after. Whether to redraw the chart.
*
* @emits Highcharts.Legends#event:afterUpdate
*/
Legend.prototype.update = function (options, redraw) {
var chart = this.chart;
this.setOptions(Legend_merge(true, this.options, options));
if ('events' in this.options) {
// Legend event handlers
Legend_registerEventOptions(this, this.options);
}
this.destroy();
chart.isDirtyLegend = chart.isDirtyBox = true;
if (Legend_pick(redraw, true)) {
chart.redraw();
}
Legend_fireEvent(this, 'afterUpdate', { redraw: redraw });
};
/**
* Set the colors for the legend item.
*
* @private
* @function Highcharts.Legend#colorizeItem
* @param {Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series} item
* A Series or Point instance
* @param {boolean} [visible=false]
* Dimmed or colored
*
* @todo
* Make events official: Fires the event `afterColorizeItem`.
*/
Legend.prototype.colorizeItem = function (item, visible) {
var _a;
var originalColor = item.color,
_b = item.legendItem || {},
area = _b.area,
group = _b.group,
label = _b.label,
line = _b.line,
symbol = _b.symbol;
if (item instanceof Series_Series || item instanceof Series_Point) {
item.color = ((_a = item.options) === null || _a === void 0 ? void 0 : _a.legendSymbolColor) || originalColor;
}
group === null || group === void 0 ? void 0 : group[visible ? 'removeClass' : 'addClass']('highcharts-legend-item-hidden');
if (!this.chart.styledMode) {
var _c = this.itemHiddenStyle,
itemHiddenStyle = _c === void 0 ? {} : _c,
hiddenColor_1 = itemHiddenStyle.color,
_d = item.options,
fillColor = _d.fillColor,
fillOpacity = _d.fillOpacity,
lineColor = _d.lineColor,
marker = _d.marker,
colorizeHidden = function (attr) {
if (!visible) {
if (attr.fill) {
attr.fill = hiddenColor_1;
}
if (attr.stroke) {
attr.stroke = hiddenColor_1;
}
}
return attr;
};
label === null || label === void 0 ? void 0 : label.css(Legend_merge(visible ? this.itemStyle : itemHiddenStyle));
line === null || line === void 0 ? void 0 : line.attr(colorizeHidden({ stroke: lineColor || item.color }));
if (symbol) {
// Apply marker options
symbol.attr(colorizeHidden(marker && symbol.isMarker ? // #585
item.pointAttribs() :
{ fill: item.color }));
}
area === null || area === void 0 ? void 0 : area.attr(colorizeHidden({
fill: fillColor || item.color,
'fill-opacity': fillColor ? 1 : (fillOpacity !== null && fillOpacity !== void 0 ? fillOpacity : 0.75)
}));
}
item.color = originalColor;
Legend_fireEvent(this, 'afterColorizeItem', { item: item, visible: visible });
};
/**
* @private
* @function Highcharts.Legend#positionItems
*/
Legend.prototype.positionItems = function () {
// Now that the legend width and height are established, put the items
// in the final position
this.allItems.forEach(this.positionItem, this);
if (!this.chart.isResizing) {
this.positionCheckboxes();
}
};
/**
* Position the legend item.
*
* @private
* @function Highcharts.Legend#positionItem
* @param {Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series} item
* The item to position
*/
Legend.prototype.positionItem = function (item) {
var _this = this;
var legend = this,
_a = item.legendItem || {},
group = _a.group,
_b = _a.x,
x = _b === void 0 ? 0 : _b,
_c = _a.y,
y = _c === void 0 ? 0 : _c,
options = legend.options,
symbolPadding = options.symbolPadding,
ltr = !options.rtl,
checkbox = item.checkbox;
if (group && group.element) {
var attribs = {
translateX: ltr ?
x :
legend.legendWidth - x - 2 * symbolPadding - 4,
translateY: y
};
var complete = function () {
Legend_fireEvent(_this, 'afterPositionItem', { item: item });
};
group[Legend_defined(group.translateY) ? 'animate' : 'attr'](attribs, void 0, complete);
}
if (checkbox) {
checkbox.x = x;
checkbox.y = y;
}
};
/**
* Destroy a single legend item, used internally on removing series items.
*
* @private
* @function Highcharts.Legend#destroyItem
* @param {Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series} item
* The item to remove
*/
Legend.prototype.destroyItem = function (item) {
var checkbox = item.checkbox,
legendItem = item.legendItem || {};
// Destroy SVG elements
for (var _i = 0, _a = ['group', 'label', 'line', 'symbol']; _i < _a.length; _i++) {
var key = _a[_i];
if (legendItem[key]) {
legendItem[key] = legendItem[key].destroy();
}
}
if (checkbox) {
Legend_discardElement(checkbox);
}
item.legendItem = void 0;
};
/**
* Destroy the legend. Used internally. To reflow objects, `chart.redraw`
* must be called after destruction.
*
* @private
* @function Highcharts.Legend#destroy
*/
Legend.prototype.destroy = function () {
var legend = this;
// Destroy items
for (var _i = 0, _a = this.getAllItems(); _i < _a.length; _i++) {
var item = _a[_i];
this.destroyItem(item);
}
// Destroy legend elements
for (var _b = 0, _c = [
'clipRect',
'up',
'down',
'pager',
'nav',
'box',
'title',
'group'
]; _b < _c.length; _b++) {
var key = _c[_b];
if (legend[key]) {
legend[key] = legend[key].destroy();
}
}
this.display = null; // Reset in .render on update.
};
/**
* Position the checkboxes after the width is determined.
*
* @private
* @function Highcharts.Legend#positionCheckboxes
*/
Legend.prototype.positionCheckboxes = function () {
var alignAttr = this.group && this.group.alignAttr,
clipHeight = this.clipHeight || this.legendHeight,
titleHeight = this.titleHeight;
var translateY;
if (alignAttr) {
translateY = alignAttr.translateY;
this.allItems.forEach(function (item) {
var checkbox = item.checkbox;
var top;
if (checkbox) {
top = translateY + titleHeight + checkbox.y +
(this.scrollOffset || 0) + 3;
Legend_css(checkbox, {
left: (alignAttr.translateX + item.checkboxOffset +
checkbox.x - 20) + 'px',
top: top + 'px',
display: this.proximate || (top > translateY - 6 &&
top < translateY + clipHeight - 6) ?
'' :
'none'
});
}
}, this);
}
};
/**
* Render the legend title on top of the legend.
*
* @private
* @function Highcharts.Legend#renderTitle
*/
Legend.prototype.renderTitle = function () {
var options = this.options,
padding = this.padding,
titleOptions = options.title;
var bBox,
titleHeight = 0;
if (titleOptions.text) {
if (!this.title) {
/**
* SVG element of the legend title.
*
* @readonly
* @name Highcharts.Legend#title
* @type {Highcharts.SVGElement}
*/
this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, void 0, void 0, void 0, options.useHTML, void 0, 'legend-title')
.attr({ zIndex: 1 });
if (!this.chart.styledMode) {
this.title.css(titleOptions.style);
}
this.title.add(this.group);
}
// Set the max title width (#7253)
if (!titleOptions.width) {
this.title.css({
width: this.maxLegendWidth + 'px'
});
}
bBox = this.title.getBBox();
titleHeight = bBox.height;
this.offsetWidth = bBox.width; // #1717
this.contentGroup.attr({ translateY: titleHeight });
}
this.titleHeight = titleHeight;
};
/**
* Set the legend item text.
*
* @function Highcharts.Legend#setText
* @param {Highcharts.Point|Highcharts.Series} item
* The item for which to update the text in the legend.
*/
Legend.prototype.setText = function (item) {
var options = this.options;
item.legendItem.label.attr({
text: options.labelFormat ?
Legend_format(options.labelFormat, item, this.chart) :
options.labelFormatter.call(item)
});
};
/**
* Render a single specific legend item. Called internally from the `render`
* function.
*
* @private
* @function Highcharts.Legend#renderItem
* @param {Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series} item
* The item to render.
*/
Legend.prototype.renderItem = function (item) {
var legend = this,
legendItem = item.legendItem = item.legendItem || {},
chart = legend.chart,
renderer = chart.renderer,
options = legend.options,
horizontal = options.layout === 'horizontal',
symbolWidth = legend.symbolWidth,
symbolPadding = options.symbolPadding || 0,
itemStyle = legend.itemStyle,
itemHiddenStyle = legend.itemHiddenStyle,
itemDistance = horizontal ? Legend_pick(options.itemDistance, 20) : 0,
ltr = !options.rtl,
isSeries = !item.series,
series = !isSeries && item.series.drawLegendSymbol ?
item.series :
item,
seriesOptions = series.options,
showCheckbox = (!!legend.createCheckboxForItem &&
seriesOptions &&
seriesOptions.showCheckbox),
useHTML = options.useHTML,
itemClassName = item.options.className;
var label = legendItem.label,
// Full width minus text width
itemExtraWidth = symbolWidth + symbolPadding +
itemDistance + (showCheckbox ? 20 : 0);
if (!label) { // Generate it once, later move it
// Generate the group box, a group to hold the symbol and text. Text
// is to be appended in Legend class.
legendItem.group = renderer
.g('legend-item')
.addClass('highcharts-' + series.type + '-series ' +
'highcharts-color-' + item.colorIndex +
(itemClassName ? ' ' + itemClassName : '') +
(isSeries ?
' highcharts-series-' + item.index :
''))
.attr({ zIndex: 1 })
.add(legend.scrollGroup);
// Generate the list item text and add it to the group
legendItem.label = label = renderer.text('', ltr ?
symbolWidth + symbolPadding :
-symbolPadding, legend.baseline || 0, useHTML);
if (!chart.styledMode) {
// Merge to prevent modifying original (#1021)
label.css(Legend_merge(item.visible ?
itemStyle :
itemHiddenStyle));
}
label
.attr({
align: ltr ? 'left' : 'right',
zIndex: 2
})
.add(legendItem.group);
// Get the baseline for the first item - the font size is equal for
// all
if (!legend.baseline) {
legend.fontMetrics = renderer.fontMetrics(label);
legend.baseline =
legend.fontMetrics.f + 3 + legend.itemMarginTop;
label.attr('y', legend.baseline);
legend.symbolHeight =
Legend_pick(options.symbolHeight, legend.fontMetrics.f);
if (options.squareSymbol) {
legend.symbolWidth = Legend_pick(options.symbolWidth, Math.max(legend.symbolHeight, 16));
itemExtraWidth = legend.symbolWidth + symbolPadding +
itemDistance + (showCheckbox ? 20 : 0);
if (ltr) {
label.attr('x', legend.symbolWidth + symbolPadding);
}
}
}
// Draw the legend symbol inside the group box
series.drawLegendSymbol(legend, item);
if (legend.setItemEvents) {
legend.setItemEvents(item, label, useHTML);
}
}
// Add the HTML checkbox on top
if (showCheckbox && !item.checkbox && legend.createCheckboxForItem) {
legend.createCheckboxForItem(item);
}
// Colorize the items
legend.colorizeItem(item, item.visible);
// Take care of max width and text overflow (#6659)
if (chart.styledMode || !itemStyle.width) {
label.css({
width: ((options.itemWidth ||
legend.widthOption ||
chart.spacingBox.width) - itemExtraWidth) + 'px'
});
}
// Always update the text
legend.setText(item);
// Calculate the positions for the next line
var bBox = label.getBBox();
var fontMetricsH = (legend.fontMetrics && legend.fontMetrics.h) || 0;
item.itemWidth = item.checkboxOffset =
options.itemWidth ||
legendItem.labelWidth ||
bBox.width + itemExtraWidth;
legend.maxItemWidth = Math.max(legend.maxItemWidth, item.itemWidth);
legend.totalItemWidth += item.itemWidth;
legend.itemHeight = item.itemHeight = Math.round(legendItem.labelHeight ||
// Use bBox for multiline (#16398)
(bBox.height > fontMetricsH * 1.5 ? bBox.height : fontMetricsH));
};
/**
* Get the position of the item in the layout. We now know the
* maxItemWidth from the previous loop.
*
* @private
* @function Highcharts.Legend#layoutItem
* @param {Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series} item
*/
Legend.prototype.layoutItem = function (item) {
var options = this.options,
padding = this.padding,
horizontal = options.layout === 'horizontal',
itemHeight = item.itemHeight,
itemMarginBottom = this.itemMarginBottom,
itemMarginTop = this.itemMarginTop,
itemDistance = horizontal ? Legend_pick(options.itemDistance, 20) : 0,
maxLegendWidth = this.maxLegendWidth,
itemWidth = (options.alignColumns &&
this.totalItemWidth > maxLegendWidth) ?
this.maxItemWidth :
item.itemWidth,
legendItem = item.legendItem || {};
// If the item exceeds the width, start a new line
if (horizontal &&
this.itemX - padding + itemWidth > maxLegendWidth) {
this.itemX = padding;
if (this.lastLineHeight) { // Not for the first line (#10167)
this.itemY += (itemMarginTop +
this.lastLineHeight +
itemMarginBottom);
}
this.lastLineHeight = 0; // Reset for next line (#915, #3976)
}
// Set the edge positions
this.lastItemY = itemMarginTop + this.itemY + itemMarginBottom;
this.lastLineHeight = Math.max(// #915
itemHeight, this.lastLineHeight);
// Cache the position of the newly generated or reordered items
legendItem.x = this.itemX;
legendItem.y = this.itemY;
// Advance
if (horizontal) {
this.itemX += itemWidth;
}
else {
this.itemY +=
itemMarginTop + itemHeight + itemMarginBottom;
this.lastLineHeight = itemHeight;
}
// The width of the widest item
this.offsetWidth = this.widthOption || Math.max((horizontal ? this.itemX - padding - (item.checkbox ?
// Decrease by itemDistance only when no checkbox #4853
0 :
itemDistance) : itemWidth) + padding, this.offsetWidth);
};
/**
* Get all items, which is one item per series for most series and one
* item per point for pie series and its derivatives. Fires the event
* `afterGetAllItems`.
*
* @private
* @function Highcharts.Legend#getAllItems
* @return {Array<(Highcharts.BubbleLegendItem|Highcharts.Point|Highcharts.Series)>}
* The current items in the legend.
* @emits Highcharts.Legend#event:afterGetAllItems
*/
Legend.prototype.getAllItems = function () {
var allItems = [];
this.chart.series.forEach(function (series) {
var seriesOptions = series && series.options;
// Handle showInLegend. If the series is linked to another series,
// defaults to false.
if (series && Legend_pick(seriesOptions.showInLegend, !Legend_defined(seriesOptions.linkedTo) ? void 0 : false, true)) {
// Use points or series for the legend item depending on
// legendType
allItems = allItems.concat((series.legendItem || {}).labels ||
(seriesOptions.legendType === 'point' ?
series.data :
series));
}
});
Legend_fireEvent(this, 'afterGetAllItems', { allItems: allItems });
return allItems;
};
/**
* Get a short, three letter string reflecting the alignment and layout.
*
* @private
* @function Highcharts.Legend#getAlignment
* @return {string}
* The alignment, empty string if floating
*/
Legend.prototype.getAlignment = function () {
var options = this.options;
// Use the first letter of each alignment option in order to detect
// the side. (#4189 - use charAt(x) notation instead of [x] for IE7)
if (this.proximate) {
return options.align.charAt(0) + 'tv';
}
return options.floating ? '' : (options.align.charAt(0) +
options.verticalAlign.charAt(0) +
options.layout.charAt(0));
};
/**
* Adjust the chart margins by reserving space for the legend on only one
* side of the chart. If the position is set to a corner, top or bottom is
* reserved for horizontal legends and left or right for vertical ones.
*
* @private
* @function Highcharts.Legend#adjustMargins
* @param {Array<number>} margin
* @param {Array<number>} spacing
*/
Legend.prototype.adjustMargins = function (margin, spacing) {
var chart = this.chart,
options = this.options,
alignment = this.getAlignment();
if (alignment) {
([
/(lth|ct|rth)/,
/(rtv|rm|rbv)/,
/(rbh|cb|lbh)/,
/(lbv|lm|ltv)/
]).forEach(function (alignments, side) {
if (alignments.test(alignment) && !Legend_defined(margin[side])) {
// Now we have detected on which side of the chart we should
// reserve space for the legend
chart[marginNames[side]] = Math.max(chart[marginNames[side]], (chart.legend[(side + 1) % 2 ? 'legendHeight' : 'legendWidth'] +
[1, -1, -1, 1][side] * options[(side % 2) ? 'x' : 'y'] +
Legend_pick(options.margin, 12) +
spacing[side] +
(chart.titleOffset[side] || 0)));
}
});
}
};
/**
* @private
* @function Highcharts.Legend#proximatePositions
*/
Legend.prototype.proximatePositions = function () {
var chart = this.chart,
boxes = [],
alignLeft = this.options.align === 'left';
this.allItems.forEach(function (item) {
var lastPoint,
height,
useFirstPoint = alignLeft,
target,
top;
if (item.yAxis) {
if (item.xAxis.options.reversed) {
useFirstPoint = !useFirstPoint;
}
if (item.points) {
lastPoint = Legend_find(useFirstPoint ?
item.points :
item.points.slice(0).reverse(), function (item) {
return Legend_isNumber(item.plotY);
});
}
height = this.itemMarginTop +
item.legendItem.label.getBBox().height +
this.itemMarginBottom;
top = item.yAxis.top - chart.plotTop;
if (item.visible) {
target = lastPoint ?
lastPoint.plotY :
item.yAxis.height;
target += top - 0.3 * height;
}
else {
target = top + item.yAxis.height;
}
boxes.push({
target: target,
size: height,
item: item
});
}
}, this);
var legendItem;
for (var _i = 0, _a = Legend_distribute(boxes, chart.plotHeight); _i < _a.length; _i++) {
var box = _a[_i];
legendItem = box.item.legendItem || {};
if (Legend_isNumber(box.pos)) {
legendItem.y = chart.plotTop - chart.spacing[0] + box.pos;
}
}
};
/**
* Render the legend. This method can be called both before and after
* `chart.render`. If called after, it will only rearrange items instead
* of creating new ones. Called internally on initial render and after
* redraws.
*
* @private
* @function Highcharts.Legend#render
*/
Legend.prototype.render = function () {
var legend = this,
chart = legend.chart,
renderer = chart.renderer,
options = legend.options,
padding = legend.padding,
// Add each series or point
allItems = legend.getAllItems();
var display,
legendWidth,
legendHeight,
legendGroup = legend.group,
allowedWidth,
box = legend.box;
legend.itemX = padding;
legend.itemY = legend.initialItemY;
legend.offsetWidth = 0;
legend.lastItemY = 0;
legend.widthOption = Legend_relativeLength(options.width, chart.spacingBox.width - padding);
// Compute how wide the legend is allowed to be
allowedWidth = chart.spacingBox.width - 2 * padding - options.x;
if (['rm', 'lm'].indexOf(legend.getAlignment().substring(0, 2)) > -1) {
allowedWidth /= 2;
}
legend.maxLegendWidth = legend.widthOption || allowedWidth;
if (!legendGroup) {
/**
* SVG group of the legend.
*
* @readonly
* @name Highcharts.Legend#group
* @type {Highcharts.SVGElement}
*/
legend.group = legendGroup = renderer
.g('legend')
.addClass(options.className || '')
.attr({ zIndex: 7 })
.add();
legend.contentGroup = renderer
.g()
.attr({ zIndex: 1 }) // Above background
.add(legendGroup);
legend.scrollGroup = renderer
.g()
.add(legend.contentGroup);
}
legend.renderTitle();
// Sort by legendIndex
Legend_stableSort(allItems, function (a, b) {
return ((a.options && a.options.legendIndex) || 0) -
((b.options && b.options.legendIndex) || 0);
});
// Reversed legend
if (options.reversed) {
allItems.reverse();
}
/**
* All items for the legend, which is an array of series for most series
* and an array of points for pie series and its derivatives.
*
* @readonly
* @name Highcharts.Legend#allItems
* @type {Array<(Highcharts.Point|Highcharts.Series)>}
*/
legend.allItems = allItems;
legend.display = display = !!allItems.length;
// Render the items. First we run a loop to set the text and properties
// and read all the bounding boxes. The next loop computes the item
// positions based on the bounding boxes.
legend.lastLineHeight = 0;
legend.maxItemWidth = 0;
legend.totalItemWidth = 0;
legend.itemHeight = 0;
allItems.forEach(legend.renderItem, legend);
allItems.forEach(legend.layoutItem, legend);
// Get the box
legendWidth = (legend.widthOption || legend.offsetWidth) + padding;
legendHeight = legend.lastItemY + legend.lastLineHeight +
legend.titleHeight;
legendHeight = legend.handleOverflow(legendHeight);
legendHeight += padding;
// Draw the border and/or background
if (!box) {
/**
* SVG element of the legend box.
*
* @readonly
* @name Highcharts.Legend#box
* @type {Highcharts.SVGElement}
*/
legend.box = box = renderer.rect()
.addClass('highcharts-legend-box')
.attr({
r: options.borderRadius
})
.add(legendGroup);
}
// Presentational
if (!chart.styledMode) {
box
.attr({
stroke: options.borderColor,
'stroke-width': options.borderWidth || 0,
fill: options.backgroundColor || 'none'
})
.shadow(options.shadow);
}
if (legendWidth > 0 && legendHeight > 0) {
box[box.placed ? 'animate' : 'attr'](box.crisp.call({}, {
x: 0,
y: 0,
width: legendWidth,
height: legendHeight
}, box.strokeWidth()));
}
// Hide the border if no items
legendGroup[display ? 'show' : 'hide']();
// Open for responsiveness
if (chart.styledMode && legendGroup.getStyle('display') === 'none') {
legendWidth = legendHeight = 0;
}
legend.legendWidth = legendWidth;
legend.legendHeight = legendHeight;
if (display) {
legend.align();
}
if (!this.proximate) {
this.positionItems();
}
Legend_fireEvent(this, 'afterRender');
};
/**
* Align the legend to chart's box.
*
* @private
* @function Highcharts.align
* @param {Highcharts.BBoxObject} alignTo
*/
Legend.prototype.align = function (alignTo) {
if (alignTo === void 0) { alignTo = this.chart.spacingBox; }
var chart = this.chart,
options = this.options;
// If aligning to the top and the layout is horizontal, adjust for
// the title (#7428)
var y = alignTo.y;
if (/(lth|ct|rth)/.test(this.getAlignment()) &&
chart.titleOffset[0] > 0) {
y += chart.titleOffset[0];
}
else if (/(lbh|cb|rbh)/.test(this.getAlignment()) &&
chart.titleOffset[2] > 0) {
y -= chart.titleOffset[2];
}
if (y !== alignTo.y) {
alignTo = Legend_merge(alignTo, { y: y });
}
if (!chart.hasRendered) {
// Avoid animation when adjusting alignment for responsiveness and
// colorAxis label layout
this.group.placed = false;
}
this.group.align(Legend_merge(options, {
width: this.legendWidth,
height: this.legendHeight,
verticalAlign: this.proximate ? 'top' : options.verticalAlign
}), true, alignTo);
};
/**
* Set up the overflow handling by adding navigation with up and down arrows
* below the legend.
*
* @private
* @function Highcharts.Legend#handleOverflow
*/
Legend.prototype.handleOverflow = function (legendHeight) {
var legend = this,
chart = this.chart,
renderer = chart.renderer,
options = this.options,
optionsY = options.y,
alignTop = options.verticalAlign === 'top',
padding = this.padding,
maxHeight = options.maxHeight,
navOptions = options.navigation,
animation = Legend_pick(navOptions.animation,
true),
arrowSize = navOptions.arrowSize || 12,
pages = this.pages,
allItems = this.allItems,
clipToHeight = function (height) {
if (typeof height === 'number') {
clipRect.attr({
height: height
});
}
else if (clipRect) { // Reset (#5912)
legend.clipRect = clipRect.destroy();
legend.contentGroup.clip();
}
// Use HTML
if (legend.contentGroup.div) {
legend.contentGroup.div.style.clip = height ?
'rect(' + padding + 'px,9999px,' +
(padding + height) + 'px,0)' :
'auto';
}
}, addTracker = function (key) {
legend[key] = renderer
.circle(0, 0, arrowSize * 1.3)
.translate(arrowSize / 2, arrowSize / 2)
.add(nav);
if (!chart.styledMode) {
legend[key].attr('fill', 'rgba(0,0,0,0.0001)');
}
return legend[key];
};
var clipHeight,
lastY,
legendItem,
spaceHeight = (chart.spacingBox.height +
(alignTop ? -optionsY : optionsY) - padding),
nav = this.nav,
clipRect = this.clipRect;
// Adjust the height
if (options.layout === 'horizontal' &&
options.verticalAlign !== 'middle' &&
!options.floating) {
spaceHeight /= 2;
}
if (maxHeight) {
spaceHeight = Math.min(spaceHeight, maxHeight);
}
// Reset the legend height and adjust the clipping rectangle
pages.length = 0;
if (legendHeight &&
spaceHeight > 0 &&
legendHeight > spaceHeight &&
navOptions.enabled !== false) {
this.clipHeight = clipHeight =
Math.max(spaceHeight - 20 - this.titleHeight - padding, 0);
this.currentPage = Legend_pick(this.currentPage, 1);
this.fullHeight = legendHeight;
// Fill pages with Y positions so that the top of each a legend item
// defines the scroll top for each page (#2098)
allItems.forEach(function (item, i) {
legendItem = item.legendItem || {};
var y = legendItem.y || 0,
h = Math.round(legendItem.label.getBBox().height);
var len = pages.length;
if (!len || (y - pages[len - 1] > clipHeight &&
(lastY || y) !== pages[len - 1])) {
pages.push(lastY || y);
len++;
}
// Keep track of which page each item is on
legendItem.pageIx = len - 1;
if (lastY) {
(allItems[i - 1].legendItem || {}).pageIx = len - 1;
}
// Add the last page if needed (#2617, #13683)
if (
// Check the last item
i === allItems.length - 1 &&
// If adding next page is needed (#18768)
y + h - pages[len - 1] > clipHeight &&
y > pages[len - 1]) {
pages.push(y);
legendItem.pageIx = len;
}
if (y !== lastY) {
lastY = y;
}
});
// Only apply clipping if needed. Clipping causes blurred legend in
// PDF export (#1787)
if (!clipRect) {
clipRect = legend.clipRect =
renderer.clipRect(0, padding - 2, 9999, 0);
legend.contentGroup.clip(clipRect);
}
clipToHeight(clipHeight);
// Add navigation elements
if (!nav) {
this.nav = nav = renderer.g()
.attr({ zIndex: 1 })
.add(this.group);
this.up = renderer
.symbol('triangle', 0, 0, arrowSize, arrowSize)
.add(nav);
addTracker('upTracker')
.on('click', function () {
legend.scroll(-1, animation);
});
this.pager = renderer.text('', 15, 10)
.addClass('highcharts-legend-navigation');
if (!chart.styledMode && navOptions.style) {
this.pager.css(navOptions.style);
}
this.pager.add(nav);
this.down = renderer
.symbol('triangle-down', 0, 0, arrowSize, arrowSize)
.add(nav);
addTracker('downTracker')
.on('click', function () {
legend.scroll(1, animation);
});
}
// Set initial position
legend.scroll(0);
legendHeight = spaceHeight;
// Reset
}
else if (nav) {
clipToHeight();
this.nav = nav.destroy(); // #6322
this.scrollGroup.attr({
translateY: 1
});
this.clipHeight = 0; // #1379
}
return legendHeight;
};
/**
* Scroll the legend by a number of pages.
*
* @private
* @function Highcharts.Legend#scroll
*
* @param {number} scrollBy
* The number of pages to scroll.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether and how to apply animation.
*
*/
Legend.prototype.scroll = function (scrollBy, animation) {
var _this = this;
var chart = this.chart,
pages = this.pages,
pageCount = pages.length,
clipHeight = this.clipHeight,
navOptions = this.options.navigation,
pager = this.pager,
padding = this.padding;
var currentPage = this.currentPage + scrollBy;
// When resizing while looking at the last page
if (currentPage > pageCount) {
currentPage = pageCount;
}
if (currentPage > 0) {
if (typeof animation !== 'undefined') {
Legend_setAnimation(animation, chart);
}
this.nav.attr({
translateX: padding,
translateY: clipHeight + this.padding + 7 + this.titleHeight,
visibility: 'inherit'
});
[this.up, this.upTracker].forEach(function (elem) {
elem.attr({
'class': currentPage === 1 ?
'highcharts-legend-nav-inactive' :
'highcharts-legend-nav-active'
});
});
pager.attr({
text: currentPage + '/' + pageCount
});
[this.down, this.downTracker].forEach(function (elem) {
elem.attr({
// Adjust to text width
x: 18 + this.pager.getBBox().width,
'class': currentPage === pageCount ?
'highcharts-legend-nav-inactive' :
'highcharts-legend-nav-active'
});
}, this);
if (!chart.styledMode) {
this.up
.attr({
fill: currentPage === 1 ?
navOptions.inactiveColor :
navOptions.activeColor
});
this.upTracker
.css({
cursor: currentPage === 1 ? 'default' : 'pointer'
});
this.down
.attr({
fill: currentPage === pageCount ?
navOptions.inactiveColor :
navOptions.activeColor
});
this.downTracker
.css({
cursor: currentPage === pageCount ?
'default' :
'pointer'
});
}
this.scrollOffset = -pages[currentPage - 1] + this.initialItemY;
this.scrollGroup.animate({
translateY: this.scrollOffset
});
this.currentPage = currentPage;
this.positionCheckboxes();
// Fire event after scroll animation is complete
var animOptions = Legend_animObject(Legend_pick(animation,
chart.renderer.globalAnimation,
true));
Legend_syncTimeout(function () {
Legend_fireEvent(_this, 'afterScroll', { currentPage: currentPage });
}, animOptions.duration);
}
};
/**
* @private
* @function Highcharts.Legend#setItemEvents
* @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
* @param {Highcharts.SVGElement} legendLabel
* @param {boolean} [useHTML=false]
* @emits Highcharts.Legend#event:itemClick
*/
Legend.prototype.setItemEvents = function (item, legendLabel, useHTML) {
var legend = this,
legendItem = item.legendItem || {},
boxWrapper = legend.chart.renderer.boxWrapper,
isPoint = item instanceof Series_Point,
isSeries = item instanceof Series_Series,
activeClass = 'highcharts-legend-' +
(isPoint ? 'point' : 'series') + '-active',
styledMode = legend.chart.styledMode,
// When `useHTML`, the symbol is rendered in other group, so
// we need to apply events listeners to both places
legendElements = useHTML ?
[legendLabel,
legendItem.symbol] :
[legendItem.group];
var setOtherItemsState = function (state) {
legend.allItems.forEach(function (otherItem) {
if (item !== otherItem) {
[otherItem]
.concat(otherItem.linkedSeries || [])
.forEach(function (otherItem) {
otherItem.setState(state, !isPoint);
});
}
});
};
// Set the events on the item group, or in case of useHTML, the item
// itself (#1249)
for (var _i = 0, legendElements_1 = legendElements; _i < legendElements_1.length; _i++) {
var element = legendElements_1[_i];
if (element) {
element
.on('mouseover', function () {
if (item.visible) {
setOtherItemsState('inactive');
}
item.setState('hover');
// A CSS class to dim or hide other than the hovered
// series.
// Works only if hovered series is visible (#10071).
if (item.visible) {
boxWrapper.addClass(activeClass);
}
if (!styledMode) {
legendLabel.css(legend.options.itemHoverStyle);
}
})
.on('mouseout', function () {
if (!legend.chart.styledMode) {
legendLabel.css(Legend_merge(item.visible ?
legend.itemStyle :
legend.itemHiddenStyle));
}
setOtherItemsState('');
// A CSS class to dim or hide other than the hovered
// series.
boxWrapper.removeClass(activeClass);
item.setState();
})
.on('click', function (event) {
var defaultItemClick = function () {
if (item.setVisible) {
item.setVisible();
}
// Reset inactive state
setOtherItemsState(item.visible ? 'inactive' : '');
};
// A CSS class to dim or hide other than the hovered
// series. Event handling in iOS causes the activeClass
// to be added prior to click in some cases (#7418).
boxWrapper.removeClass(activeClass);
Legend_fireEvent(legend, 'itemClick', {
// Pass over the click/touch event. #4.
browserEvent: event,
legendItem: item
}, defaultItemClick);
// Deprecated logic
// Click the name or symbol
if (isPoint) {
item.firePointEvent('legendItemClick', {
browserEvent: event
});
}
else if (isSeries) {
Legend_fireEvent(item, 'legendItemClick', {
browserEvent: event
});
}
});
}
}
};
/**
* @private
* @function Highcharts.Legend#createCheckboxForItem
* @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
* @emits Highcharts.Series#event:checkboxClick
*/
Legend.prototype.createCheckboxForItem = function (item) {
var legend = this;
item.checkbox = Legend_createElement('input', {
type: 'checkbox',
className: 'highcharts-legend-checkbox',
checked: item.selected,
defaultChecked: item.selected // Required by IE7
}, legend.options.itemCheckboxStyle, legend.chart.container);
Legend_addEvent(item.checkbox, 'click', function (event) {
var target = event.target;
Legend_fireEvent(item.series || item, 'checkboxClick', {
checked: target.checked,
item: item
}, function () {
item.select();
});
});
};
return Legend;
}());
/* *
*
* Class Namespace
*
* */
(function (Legend) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* @private
*/
function compose(ChartClass) {
if (Legend_pushUnique(Legend_composed, 'Core.Legend')) {
Legend_addEvent(ChartClass, 'beforeMargins', function () {
/**
* The legend contains an interactive overview over chart items,
* usually individual series or points depending on the series
* type. The color axis and bubble legend are also rendered in
* the chart legend.
*
* @name Highcharts.Chart#legend
* @type {Highcharts.Legend}
*/
this.legend = new Legend(this, this.options.legend);
});
}
}
Legend.compose = compose;
})(Legend || (Legend = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Legend_Legend = (Legend);
/* *
*
* API Declarations
*
* */
/**
* @interface Highcharts.LegendItemObject
*/ /**
* @name Highcharts.LegendItemObject#item
* @type {Highcharts.SVGElement|undefined}
*/ /**
* @name Highcharts.LegendItemObject#line
* @type {Highcharts.SVGElement|undefined}
*/ /**
* @name Highcharts.LegendItemObject#symbol
* @type {Highcharts.SVGElement|undefined}
*/
/**
* Gets fired when the legend item is clicked. The default
* action is to toggle the visibility of the series or point. This can be
* prevented by returning `false` or calling `event.preventDefault()`.
*
* @callback Highcharts.LegendItemClickCallbackFunction
*
* @param {Highcharts.Legend} this
* The legend on which the event occurred.
*
* @param {Highcharts.LegendItemClickEventObject} event
* The event that occurred.
*/
/**
* Information about the legend click event.
*
* @interface Highcharts.LegendItemClickEventObject
*/ /**
* Related browser event.
* @name Highcharts.LegendItemClickEventObject#browserEvent
* @type {Highcharts.PointerEvent}
*/ /**
* Prevent the default action of toggle the visibility of the series or point.
* @name Highcharts.LegendItemClickEventObject#preventDefault
* @type {Function}
* */ /**
* Related legend item, it can be series, point, color axis or data class from
* color axis.
* @name Highcharts.LegendItemClickEventObject#legendItem
* @type {Highcharts.Series|Highcharts.Point|Highcharts.LegendItemObject}
* */ /**
* Related legend.
* @name Highcharts.LegendItemClickEventObject#target
* @type {Highcharts.Legend}
*/ /**
* Event type.
* @name Highcharts.LegendItemClickEventObject#type
* @type {"itemClick"}
*/
/**
* Gets fired when the legend item belonging to a point is clicked. The default
* action is to toggle the visibility of the point. This can be prevented by
* returning `false` or calling `event.preventDefault()`.
*
* **Note:** This option is deprecated in favor of
* Highcharts.LegendItemClickCallbackFunction.
*
* @deprecated 11.4.4
* @callback Highcharts.PointLegendItemClickCallbackFunction
*
* @param {Highcharts.Point} this
* The point on which the event occurred.
*
* @param {Highcharts.PointLegendItemClickEventObject} event
* The event that occurred.
*/
/**
* Information about the legend click event.
*
* **Note:** This option is deprecated in favor of
* Highcharts.LegendItemClickEventObject.
*
* @deprecated 11.4.4
* @interface Highcharts.PointLegendItemClickEventObject
*/ /**
* Related browser event.
* @name Highcharts.PointLegendItemClickEventObject#browserEvent
* @type {Highcharts.PointerEvent}
*/ /**
* Prevent the default action of toggle the visibility of the point.
* @name Highcharts.PointLegendItemClickEventObject#preventDefault
* @type {Function}
*/ /**
* Related point.
* @name Highcharts.PointLegendItemClickEventObject#target
* @type {Highcharts.Point}
*/ /**
* Event type.
* @name Highcharts.PointLegendItemClickEventObject#type
* @type {"legendItemClick"}
*/
/**
* Series color as used by the legend and some series types.
* @name Highcharts.Series#color
* @type {Highcharts.ColorType|undefined}
*/ /**
* Legend data for the series.
* @name Highcharts.Series#legendItem
* @type {Highcharts.LegendItemObject|undefined}
* @since 10.3.0
*/
/**
* Gets fired when the legend item belonging to a series is clicked. The default
* action is to toggle the visibility of the series. This can be prevented by
* returning `false` or calling `event.preventDefault()`.
*
* **Note:** This option is deprecated in favor of
* Highcharts.LegendItemClickCallbackFunction.
*
* @deprecated 11.4.4
* @callback Highcharts.SeriesLegendItemClickCallbackFunction
*
* @param {Highcharts.Series} this
* The series where the event occurred.
*
* @param {Highcharts.SeriesLegendItemClickEventObject} event
* The event that occurred.
*/
/**
* Information about the legend click event.
*
* **Note:** This option is deprecated in favor of
* Highcharts.LegendItemClickEventObject.
*
* @deprecated 11.4.4
* @interface Highcharts.SeriesLegendItemClickEventObject
*/ /**
* Related browser event.
* @name Highcharts.SeriesLegendItemClickEventObject#browserEvent
* @type {Highcharts.PointerEvent}
*/ /**
* Prevent the default action of toggle the visibility of the series.
* @name Highcharts.SeriesLegendItemClickEventObject#preventDefault
* @type {Function}
*/ /**
* Related series.
* @name Highcharts.SeriesLegendItemClickEventObject#target
* @type {Highcharts.Series}
*/ /**
* Event type.
* @name Highcharts.SeriesLegendItemClickEventObject#type
* @type {"legendItemClick"}
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Chart/Chart.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Chart_assign = (undefined && undefined.__assign) || function () {
Chart_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return Chart_assign.apply(this, arguments);
};
var Chart_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var Chart_animate = AnimationUtilities.animate, Chart_animObject = AnimationUtilities.animObject, Chart_setAnimation = AnimationUtilities.setAnimation;
var Chart_defaultOptions = Defaults.defaultOptions;
var Chart_numberFormat = Core_Templating.numberFormat;
var Chart_registerEventOptions = Core_Foundation.registerEventOptions;
var Chart_charts = Core_Globals.charts, Chart_doc = Core_Globals.doc, Chart_marginNames = Core_Globals.marginNames, Chart_svg = Core_Globals.svg, Chart_win = Core_Globals.win;
var Chart_seriesTypes = Series_SeriesRegistry.seriesTypes;
var Chart_addEvent = Core_Utilities.addEvent, Chart_attr = Core_Utilities.attr, Chart_createElement = Core_Utilities.createElement, Chart_css = Core_Utilities.css, Chart_defined = Core_Utilities.defined, Chart_diffObjects = Core_Utilities.diffObjects, Chart_discardElement = Core_Utilities.discardElement, Chart_erase = Core_Utilities.erase, Chart_error = Core_Utilities.error, Chart_extend = Core_Utilities.extend, Chart_find = Core_Utilities.find, Chart_fireEvent = Core_Utilities.fireEvent, Chart_getAlignFactor = Core_Utilities.getAlignFactor, Chart_getStyle = Core_Utilities.getStyle, Chart_isArray = Core_Utilities.isArray, Chart_isNumber = Core_Utilities.isNumber, Chart_isObject = Core_Utilities.isObject, Chart_isString = Core_Utilities.isString, Chart_merge = Core_Utilities.merge, Chart_objectEach = Core_Utilities.objectEach, Chart_pick = Core_Utilities.pick, Chart_pInt = Core_Utilities.pInt, Chart_relativeLength = Core_Utilities.relativeLength, Chart_removeEvent = Core_Utilities.removeEvent, Chart_splat = Core_Utilities.splat, Chart_syncTimeout = Core_Utilities.syncTimeout, Chart_uniqueKey = Core_Utilities.uniqueKey;
/* *
*
* Class
*
* */
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* The Chart class. The recommended constructor is {@link Highcharts#chart}.
*
* @example
* let chart = Highcharts.chart('container', {
* title: {
* text: 'My chart'
* },
* series: [{
* data: [1, 3, 2, 4]
* }]
* })
*
* @class
* @name Highcharts.Chart
*
* @param {string|Highcharts.HTMLDOMElement} [renderTo]
* The DOM element to render to, or its id.
*
* @param {Highcharts.Options} options
* The chart options structure.
*
* @param {Highcharts.ChartCallbackFunction} [callback]
* Function to run when the chart has loaded and all external images
* are loaded. Defining a
* [chart.events.load](https://api.highcharts.com/highcharts/chart.events.load)
* handler is equivalent.
*/
var Chart = /** @class */ (function () {
// Implementation
function Chart(a,
/* eslint-disable @typescript-eslint/no-unused-vars */
b, c
/* eslint-enable @typescript-eslint/no-unused-vars */
) {
this.sharedClips = {};
var args = Chart_spreadArray([],
arguments,
true);
// Remove the optional first argument, renderTo, and set it on this.
if (Chart_isString(a) || a.nodeName) {
this.renderTo = args.shift();
}
this.init(args[0], args[1]);
}
/**
* Factory function for basic charts.
*
* @example
* // Render a chart in to div#container
* let chart = Highcharts.chart('container', {
* title: {
* text: 'My chart'
* },
* series: [{
* data: [1, 3, 2, 4]
* }]
* });
*
* @function Highcharts.chart
*
* @param {string|Highcharts.HTMLDOMElement} [renderTo]
* The DOM element to render to, or its id.
*
* @param {Highcharts.Options} options
* The chart options structure.
*
* @param {Highcharts.ChartCallbackFunction} [callback]
* Function to run when the chart has loaded and all external images are
* loaded. Defining a
* [chart.events.load](https://api.highcharts.com/highcharts/chart.events.load)
* handler is equivalent.
*
* @return {Highcharts.Chart}
* Returns the Chart object.
*/
Chart.chart = function (a, b, c) {
return new Chart(a, b, c);
};
/* *
*
* Functions
*
* */
/**
* Function setting zoom options after chart init and after chart update.
* Offers support for deprecated options.
*
* @private
* @function Highcharts.Chart#setZoomOptions
*/
Chart.prototype.setZoomOptions = function () {
var chart = this,
options = chart.options.chart,
zooming = options.zooming;
chart.zooming = Chart_assign(Chart_assign({}, zooming), { type: Chart_pick(options.zoomType, zooming.type), key: Chart_pick(options.zoomKey, zooming.key), pinchType: Chart_pick(options.pinchType, zooming.pinchType), singleTouch: Chart_pick(options.zoomBySingleTouch, zooming.singleTouch, false), resetButton: Chart_merge(zooming.resetButton, options.resetZoomButton) });
};
/**
* Overridable function that initializes the chart. The constructor's
* arguments are passed on directly.
*
* @function Highcharts.Chart#init
*
* @param {Highcharts.Options} userOptions
* Custom options.
*
* @param {Function} [callback]
* Function to run when the chart has loaded and all external
* images are loaded.
*
*
* @emits Highcharts.Chart#event:init
* @emits Highcharts.Chart#event:afterInit
*/
Chart.prototype.init = function (userOptions, callback) {
// Fire the event with a default function
Chart_fireEvent(this, 'init', { args: arguments }, function () {
var _a,
_b;
var options = Chart_merge(Chart_defaultOptions,
userOptions), // Do the merge
optionsChart = options.chart,
renderTo = this.renderTo || optionsChart.renderTo;
/**
* The original options given to the constructor or a chart factory
* like {@link Highcharts.chart} and {@link Highcharts.stockChart}.
* The original options are shallow copied to avoid mutation. The
* copy, `chart.userOptions`, may later be mutated to reflect
* updated options throughout the lifetime of the chart.
*
* For collections, like `series`, `xAxis` and `yAxis`, the chart
* user options should always be reflected by the item user option,
* so for example the following should always be true:
*
* `chart.xAxis[0].userOptions === chart.userOptions.xAxis[0]`
*
* @name Highcharts.Chart#userOptions
* @type {Highcharts.Options}
*/
this.userOptions = Chart_extend({}, userOptions);
if (!(this.renderTo = (Chart_isString(renderTo) ?
Chart_doc.getElementById(renderTo) :
renderTo))) {
// Display an error if the renderTo is wrong
Chart_error(13, true, this);
}
this.margin = [];
this.spacing = [];
// An array of functions that returns labels that should be
// considered for anti-collision
this.labelCollectors = [];
this.callback = callback;
this.isResizing = 0;
/**
* The options structure for the chart after merging
* {@link #defaultOptions} and {@link #userOptions}. It contains
* members for the sub elements like series, legend, tooltip etc.
*
* @name Highcharts.Chart#options
* @type {Highcharts.Options}
*/
this.options = options;
/**
* All the axes in the chart.
*
* @see Highcharts.Chart.xAxis
* @see Highcharts.Chart.yAxis
*
* @name Highcharts.Chart#axes
* @type {Array<Highcharts.Axis>}
*/
this.axes = [];
/**
* All the current series in the chart.
*
* @name Highcharts.Chart#series
* @type {Array<Highcharts.Series>}
*/
this.series = [];
this.locale = (_a = options.lang.locale) !== null && _a !== void 0 ? _a : (_b = this.renderTo.closest('[lang]')) === null || _b === void 0 ? void 0 : _b.lang;
/**
* The `Time` object associated with the chart. Since v6.0.5,
* time settings can be applied individually for each chart. If
* no individual settings apply, the `Time` object is shared by
* all instances.
*
* @name Highcharts.Chart#time
* @type {Highcharts.Time}
*/
this.time = new Core_Time(Chart_extend(options.time || {}, {
locale: this.locale
}));
options.time = this.time.options;
/**
* Callback function to override the default function that formats
* all the numbers in the chart. Returns a string with the formatted
* number.
*
* @name Highcharts.Chart#numberFormatter
* @type {Highcharts.NumberFormatterCallbackFunction}
*/
this.numberFormatter = (optionsChart.numberFormatter || Chart_numberFormat).bind(this);
/**
* Whether the chart is in styled mode, meaning all presentational
* attributes are avoided.
*
* @name Highcharts.Chart#styledMode
* @type {boolean}
*/
this.styledMode = optionsChart.styledMode;
this.hasCartesianSeries = optionsChart.showAxes;
var chart = this;
/**
* Index position of the chart in the {@link Highcharts#charts}
* property.
*
* @name Highcharts.Chart#index
* @type {number}
* @readonly
*/
chart.index = Chart_charts.length; // Add the chart to the global lookup
Chart_charts.push(chart);
Core_Globals.chartCount++;
// Chart event handlers
Chart_registerEventOptions(this, optionsChart);
/**
* A collection of the X axes in the chart.
*
* @name Highcharts.Chart#xAxis
* @type {Array<Highcharts.Axis>}
*/
chart.xAxis = [];
/**
* A collection of the Y axes in the chart.
*
* @name Highcharts.Chart#yAxis
* @type {Array<Highcharts.Axis>}
*
* @todo
* Make events official: Fire the event `afterInit`.
*/
chart.yAxis = [];
chart.pointCount = chart.colorCounter = chart.symbolCounter = 0;
this.setZoomOptions();
// Fire after init but before first render, before axes and series
// have been initialized.
Chart_fireEvent(chart, 'afterInit');
chart.firstRender();
});
};
/**
* Internal function to unitialize an individual series.
*
* @private
* @function Highcharts.Chart#initSeries
*/
Chart.prototype.initSeries = function (options) {
var chart = this,
optionsChart = chart.options.chart,
type = (options.type ||
optionsChart.type),
SeriesClass = Chart_seriesTypes[type];
// No such series type
if (!SeriesClass) {
Chart_error(17, true, chart, { missingModuleFor: type });
}
var series = new SeriesClass();
if (typeof series.init === 'function') {
series.init(chart, options);
}
return series;
};
/**
* Internal function to set data for all series with enabled sorting.
*
* @private
* @function Highcharts.Chart#setSortedData
*/
Chart.prototype.setSortedData = function () {
this.getSeriesOrderByLinks().forEach(function (series) {
// We need to set data for series with sorting after series init
if (!series.points && !series.data && series.enabledDataSorting) {
series.setData(series.options.data, false);
}
});
};
/**
* Sort and return chart series in order depending on the number of linked
* series.
*
* @private
* @function Highcharts.Series#getSeriesOrderByLinks
*/
Chart.prototype.getSeriesOrderByLinks = function () {
return this.series.concat().sort(function (a, b) {
if (a.linkedSeries.length || b.linkedSeries.length) {
return b.linkedSeries.length - a.linkedSeries.length;
}
return 0;
});
};
/**
* Order all series or axes above a given index. When series or axes are
* added and ordered by configuration, only the last series is handled
* (#248, #1123, #2456, #6112). This function is called on series and axis
* initialization and destroy.
*
* @private
* @function Highcharts.Chart#orderItems
* @param {string} coll The collection name
* @param {number} [fromIndex=0]
* If this is given, only the series above this index are handled.
*/
Chart.prototype.orderItems = function (coll, fromIndex) {
if (fromIndex === void 0) { fromIndex = 0; }
var collection = this[coll],
// Item options should be reflected in chart.options.series,
// chart.options.yAxis etc
optionsArray = this.options[coll] = Chart_splat(this.options[coll])
.slice(),
userOptionsArray = this.userOptions[coll] = this.userOptions[coll] ?
Chart_splat(this.userOptions[coll]).slice() :
[];
if (this.hasRendered) {
// Remove all above index
optionsArray.splice(fromIndex);
userOptionsArray.splice(fromIndex);
}
if (collection) {
for (var i = fromIndex, iEnd = collection.length; i < iEnd; ++i) {
var item = collection[i];
if (item) {
/**
* Contains the series' index in the `Chart.series` array.
*
* @name Highcharts.Series#index
* @type {number}
* @readonly
*/
item.index = i;
if (item instanceof Series_Series) {
item.name = item.getName();
}
if (!item.options.isInternal) {
optionsArray[i] = item.options;
userOptionsArray[i] = item.userOptions;
}
}
}
}
};
/**
* Check whether a given point is within the plot area.
*
* @function Highcharts.Chart#isInsidePlot
*
* @param {number} plotX
* Pixel x relative to the plot area.
*
* @param {number} plotY
* Pixel y relative to the plot area.
*
* @param {Highcharts.ChartIsInsideOptionsObject} [options]
* Options object.
*
* @return {boolean}
* Returns true if the given point is inside the plot area.
*/
Chart.prototype.isInsidePlot = function (plotX, plotY, options) {
var _a;
if (options === void 0) { options = {}; }
var _b = this,
inverted = _b.inverted,
plotBox = _b.plotBox,
plotLeft = _b.plotLeft,
plotTop = _b.plotTop,
scrollablePlotBox = _b.scrollablePlotBox,
_c = (options.visiblePlotOnly &&
((_a = this.scrollablePlotArea) === null || _a === void 0 ? void 0 : _a.scrollingContainer)) || {},
_d = _c.scrollLeft,
scrollLeft = _d === void 0 ? 0 : _d,
_e = _c.scrollTop,
scrollTop = _e === void 0 ? 0 : _e,
series = options.series,
box = (options.visiblePlotOnly && scrollablePlotBox) || plotBox,
x = options.inverted ? plotY : plotX,
y = options.inverted ? plotX : plotY,
e = {
x: x,
y: y,
isInsidePlot: true,
options: options
};
if (!options.ignoreX) {
var xAxis = (series &&
(inverted && !this.polar ? series.yAxis : series.xAxis)) || {
pos: plotLeft,
len: Infinity
};
var chartX = options.paneCoordinates ?
xAxis.pos + x : plotLeft + x;
if (!(chartX >= Math.max(scrollLeft + plotLeft, xAxis.pos) &&
chartX <= Math.min(scrollLeft + plotLeft + box.width, xAxis.pos + xAxis.len))) {
e.isInsidePlot = false;
}
}
if (!options.ignoreY && e.isInsidePlot) {
var yAxis = (!inverted && options.axis &&
!options.axis.isXAxis && options.axis) || (series && (inverted ? series.xAxis : series.yAxis)) || {
pos: plotTop,
len: Infinity
};
var chartY = options.paneCoordinates ?
yAxis.pos + y : plotTop + y;
if (!(chartY >= Math.max(scrollTop + plotTop, yAxis.pos) &&
chartY <= Math.min(scrollTop + plotTop + box.height, yAxis.pos + yAxis.len))) {
e.isInsidePlot = false;
}
}
Chart_fireEvent(this, 'afterIsInsidePlot', e);
return e.isInsidePlot;
};
/**
* Redraw the chart after changes have been done to the data, axis extremes
* chart size or chart elements. All methods for updating axes, series or
* points have a parameter for redrawing the chart. This is `true` by
* default. But in many cases you want to do more than one operation on the
* chart before redrawing, for example add a number of points. In those
* cases it is a waste of resources to redraw the chart for each new point
* added. So you add the points and call `chart.redraw()` after.
*
* @function Highcharts.Chart#redraw
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* If or how to apply animation to the redraw. When `undefined`, it applies
* the animation that is set in the `chart.animation` option.
*
* @emits Highcharts.Chart#event:afterSetExtremes
* @emits Highcharts.Chart#event:beforeRedraw
* @emits Highcharts.Chart#event:predraw
* @emits Highcharts.Chart#event:redraw
* @emits Highcharts.Chart#event:render
* @emits Highcharts.Chart#event:updatedData
*/
Chart.prototype.redraw = function (animation) {
Chart_fireEvent(this, 'beforeRedraw');
var chart = this,
axes = chart.hasCartesianSeries ? chart.axes : chart.colorAxis || [],
series = chart.series,
pointer = chart.pointer,
legend = chart.legend,
legendUserOptions = chart.userOptions.legend,
renderer = chart.renderer,
isHiddenChart = renderer.isHidden(),
afterRedraw = [];
var hasDirtyStacks,
hasStackedSeries,
i,
isDirtyBox = chart.isDirtyBox,
redrawLegend = chart.isDirtyLegend,
serie;
renderer.rootFontSize = renderer.boxWrapper.getStyle('font-size');
// Handle responsive rules, not only on resize (#6130)
if (chart.setResponsive) {
chart.setResponsive(false);
}
// Set the global animation. When chart.hasRendered is not true, the
// redraw call comes from a responsive rule and animation should not
// occur.
Chart_setAnimation(chart.hasRendered ? animation : false, chart);
if (isHiddenChart) {
chart.temporaryDisplay();
}
// Adjust title layout (reflow multiline text)
chart.layOutTitles(false);
// Link stacked series
i = series.length;
while (i--) {
serie = series[i];
if (serie.options.stacking || serie.options.centerInCategory) {
hasStackedSeries = true;
if (serie.isDirty) {
hasDirtyStacks = true;
break;
}
}
}
if (hasDirtyStacks) { // Mark others as dirty
i = series.length;
while (i--) {
serie = series[i];
if (serie.options.stacking) {
serie.isDirty = true;
}
}
}
// Handle updated data in the series
series.forEach(function (serie) {
if (serie.isDirty) {
if (serie.options.legendType === 'point') {
if (typeof serie.updateTotals === 'function') {
serie.updateTotals();
}
redrawLegend = true;
}
else if (legendUserOptions &&
(!!legendUserOptions.labelFormatter ||
legendUserOptions.labelFormat)) {
redrawLegend = true; // #2165
}
}
if (serie.isDirtyData) {
Chart_fireEvent(serie, 'updatedData');
}
});
// Handle added or removed series
if (redrawLegend && legend && legend.options.enabled) {
// Draw legend graphics
legend.render();
chart.isDirtyLegend = false;
}
// Reset stacks
if (hasStackedSeries) {
chart.getStacks();
}
// Set axes scales
axes.forEach(function (axis) {
axis.updateNames();
axis.setScale();
});
chart.getMargins(); // #3098
// If one axis is dirty, all axes must be redrawn (#792, #2169)
axes.forEach(function (axis) {
if (axis.isDirty) {
isDirtyBox = true;
}
});
// Redraw axes
axes.forEach(function (axis) {
// Fire 'afterSetExtremes' only if extremes are set
var key = axis.min + ',' + axis.max;
if (axis.extKey !== key) { // #821, #4452
axis.extKey = key;
// Prevent a recursive call to chart.redraw() (#1119)
afterRedraw.push(function () {
Chart_fireEvent(axis, 'afterSetExtremes', Chart_extend(axis.eventArgs, axis.getExtremes())); // #747, #751
delete axis.eventArgs;
});
}
if (isDirtyBox || hasStackedSeries) {
axis.redraw();
}
});
// The plot areas size has changed
if (isDirtyBox) {
chart.drawChartBox();
}
// Fire an event before redrawing series, used by the boost module to
// clear previous series renderings.
Chart_fireEvent(chart, 'predraw');
// Redraw affected series
series.forEach(function (serie) {
if ((isDirtyBox || serie.isDirty) && serie.visible) {
serie.redraw();
}
// Set it here, otherwise we will have unlimited 'updatedData' calls
// for a hidden series after setData(). Fixes #6012
serie.isDirtyData = false;
});
// Move tooltip or reset
if (pointer) {
pointer.reset(true);
}
// Redraw if canvas
renderer.draw();
// Fire the events
Chart_fireEvent(chart, 'redraw');
Chart_fireEvent(chart, 'render');
if (isHiddenChart) {
chart.temporaryDisplay(true);
}
// Fire callbacks that are put on hold until after the redraw
afterRedraw.forEach(function (callback) {
callback.call();
});
};
/**
* Get an axis, series or point object by `id` as given in the configuration
* options. Returns `undefined` if no item is found.
*
* @sample highcharts/plotoptions/series-id/
* Get series by id
*
* @function Highcharts.Chart#get
*
* @param {string} id
* The id as given in the configuration options.
*
* @return {Highcharts.Axis|Highcharts.Series|Highcharts.Point|undefined}
* The retrieved item.
*/
Chart.prototype.get = function (id) {
var series = this.series;
/**
* @private
*/
function itemById(item) {
return (item.id === id ||
(item.options && item.options.id === id));
}
var ret =
// Search axes
Chart_find(this.axes,
itemById) ||
// Search series
Chart_find(this.series,
itemById);
// Search points
for (var i = 0; !ret && i < series.length; i++) {
ret = Chart_find(series[i].points || [], itemById);
}
return ret;
};
/**
* Create the Axis instances based on the config options.
*
* @private
* @function Highcharts.Chart#createAxes
* @emits Highcharts.Chart#event:afterCreateAxes
* @emits Highcharts.Chart#event:createAxes
*/
Chart.prototype.createAxes = function () {
var options = this.userOptions;
Chart_fireEvent(this, 'createAxes');
for (var _i = 0, _a = ['xAxis', 'yAxis']; _i < _a.length; _i++) {
var coll = _a[_i];
var arr = options[coll] = Chart_splat(options[coll] || {});
for (var _b = 0, arr_1 = arr; _b < arr_1.length; _b++) {
var axisOptions = arr_1[_b];
// eslint-disable-next-line no-new
new Axis_Axis(this, axisOptions, coll);
}
}
Chart_fireEvent(this, 'afterCreateAxes');
};
/**
* Returns an array of all currently selected points in the chart. Points
* can be selected by clicking or programmatically by the
* {@link Highcharts.Point#select}
* function.
*
* @sample highcharts/plotoptions/series-allowpointselect-line/
* Get selected points
* @sample highcharts/members/point-select-lasso/
* Lasso selection
* @sample highcharts/chart/events-selection-points/
* Rectangle selection
*
* @function Highcharts.Chart#getSelectedPoints
*
* @return {Array<Highcharts.Point>}
* The currently selected points.
*/
Chart.prototype.getSelectedPoints = function () {
return this.series.reduce(function (acc, series) {
// For one-to-one points inspect series.data in order to retrieve
// points outside the visible range (#6445). For grouped data,
// inspect the generated series.points.
series.getPointsCollection()
.forEach(function (point) {
if (Chart_pick(point.selectedStaging, point.selected)) {
acc.push(point);
}
});
return acc;
}, []);
};
/**
* Returns an array of all currently selected series in the chart. Series
* can be selected either programmatically by the
* {@link Highcharts.Series#select}
* function or by checking the checkbox next to the legend item if
* [series.showCheckBox](https://api.highcharts.com/highcharts/plotOptions.series.showCheckbox)
* is true.
*
* @sample highcharts/members/chart-getselectedseries/
* Get selected series
*
* @function Highcharts.Chart#getSelectedSeries
*
* @return {Array<Highcharts.Series>}
* The currently selected series.
*/
Chart.prototype.getSelectedSeries = function () {
return this.series.filter(function (s) { return s.selected; });
};
/**
* Set a new title or subtitle for the chart.
*
* @sample highcharts/members/chart-settitle/
* Set title text and styles
*
* @function Highcharts.Chart#setTitle
*
* @param {Highcharts.TitleOptions} [titleOptions]
* New title options. The title text itself is set by the
* `titleOptions.text` property.
*
* @param {Highcharts.SubtitleOptions} [subtitleOptions]
* New subtitle options. The subtitle text itself is set by the
* `subtitleOptions.text` property.
*
* @param {boolean} [redraw]
* Whether to redraw the chart or wait for a later call to
* `chart.redraw()`.
*/
Chart.prototype.setTitle = function (titleOptions, subtitleOptions, redraw) {
this.applyDescription('title', titleOptions);
this.applyDescription('subtitle', subtitleOptions);
// The initial call also adds the caption. On update, chart.update will
// relay to Chart.setCaption.
this.applyDescription('caption', void 0);
this.layOutTitles(redraw);
};
/**
* Apply a title, subtitle or caption for the chart
*
* @private
* @function Highcharts.Chart#applyDescription
* @param key {string}
* Either title, subtitle or caption
* @param {Highcharts.TitleOptions|Highcharts.SubtitleOptions|Highcharts.CaptionOptions|undefined} explicitOptions
* The options to set, will be merged with default options.
*/
Chart.prototype.applyDescription = function (key, explicitOptions) {
var _a;
var chart = this;
// Merge default options with explicit options
var options = this.options[key] = Chart_merge(this.options[key],
explicitOptions);
var elem = this[key];
if (elem && explicitOptions) {
this[key] = elem = elem.destroy(); // Remove old
}
if (options && !elem) {
elem = this.renderer.text(options.text, 0, 0, options.useHTML)
.attr({
align: options.align,
'class': 'highcharts-' + key,
zIndex: options.zIndex || 4
})
.css({
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
})
.add();
// Update methods, relay to `applyDescription`
elem.update = function (updateOptions, redraw) {
chart.applyDescription(key, updateOptions);
chart.layOutTitles(redraw);
};
// Presentational
if (!this.styledMode) {
elem.css(Chart_extend(key === 'title' ? {
// #2944
fontSize: this.options.isStock ? '1em' : '1.2em'
} : {}, options.style));
}
// Get unwrapped text length and reset
elem.textPxLength = elem.getBBox().width;
elem.css({ whiteSpace: (_a = options.style) === null || _a === void 0 ? void 0 : _a.whiteSpace });
/**
* The chart title. The title has an `update` method that allows
* modifying the options directly or indirectly via
* `chart.update`.
*
* @sample highcharts/members/title-update/
* Updating titles
*
* @name Highcharts.Chart#title
* @type {Highcharts.TitleObject}
*/
/**
* The chart subtitle. The subtitle has an `update` method that
* allows modifying the options directly or indirectly via
* `chart.update`.
*
* @name Highcharts.Chart#subtitle
* @type {Highcharts.SubtitleObject}
*/
this[key] = elem;
}
};
/**
* Internal function to lay out the chart title, subtitle and caption, and
* cache the full offset height for use in `getMargins`. The result is
* stored in `this.titleOffset`.
*
* @private
* @function Highcharts.Chart#layOutTitles
*
* @param {boolean} [redraw=true]
* @emits Highcharts.Chart#event:afterLayOutTitles
*/
Chart.prototype.layOutTitles = function (redraw) {
var _this = this;
var _a,
_b,
_c,
_d;
if (redraw === void 0) { redraw = true; }
var titleOffset = [0, 0, 0],
_e = this,
options = _e.options,
renderer = _e.renderer,
spacingBox = _e.spacingBox;
// Lay out the title, subtitle and caption respectively
['title', 'subtitle', 'caption'].forEach(function (key) {
var _a;
var desc = _this[key],
descOptions = _this.options[key],
alignTo = Chart_merge(spacingBox),
textPxLength = (desc === null || desc === void 0 ? void 0 : desc.textPxLength) || 0;
if (desc && descOptions) {
// Provide a hook for the exporting button to shift the title
Chart_fireEvent(_this, 'layOutTitle', { alignTo: alignTo, key: key, textPxLength: textPxLength });
var fontMetrics = renderer.fontMetrics(desc), baseline = fontMetrics.b, lineHeight = fontMetrics.h, verticalAlign = descOptions.verticalAlign || 'top', topAligned = verticalAlign === 'top',
// Use minScale only for top-aligned titles. It is not
// likely that we will need scaling for other positions, but
// if it is requested, we need to adjust the vertical
// position to the scale.
minScale = topAligned && descOptions.minScale || 1, offset = key === 'title' ?
topAligned ? -3 : 0 :
// Floating subtitle (#6574)
topAligned ? titleOffset[0] + 2 : 0, uncappedScale = Math.min(alignTo.width / textPxLength, 1), scale = Math.max(minScale, uncappedScale), alignAttr = Chart_merge({
y: verticalAlign === 'bottom' ?
baseline :
offset + baseline
}, {
align: key === 'title' ?
// Title defaults to center for short titles,
// left for word-wrapped titles
(uncappedScale < minScale ? 'left' : 'center') :
// Subtitle defaults to the title.align
(_a = _this.title) === null || _a === void 0 ? void 0 : _a.alignValue
}, descOptions), width = descOptions.width || ((uncappedScale > minScale ?
// One line
_this.chartWidth :
// Allow word wrap
alignTo.width) / scale);
// No animation when switching alignment
if (desc.alignValue !== alignAttr.align) {
desc.placed = false;
}
// Set the width and read the height
var height = Math.round(desc
.css({ width: "" + width + "px" })
// Skip the cache for HTML (#3481, #11666)
.getBBox(descOptions.useHTML).height);
alignAttr.height = height;
// Perform scaling and alignment
desc
.align(alignAttr, false, alignTo)
.attr({
align: alignAttr.align,
scaleX: scale,
scaleY: scale,
'transform-origin': "" + (alignTo.x +
textPxLength *
scale *
Chart_getAlignFactor(alignAttr.align)) + " ".concat(lineHeight)
});
// Adjust the rendered title offset
if (!descOptions.floating) {
var offset_1 = height * (
// When scaling down the title, preserve the offset as
// long as it's only one line, but scale down the offset
// if the title wraps to multiple lines.
height < lineHeight * 1.2 ? 1 : scale);
if (verticalAlign === 'top') {
titleOffset[0] = Math.ceil(titleOffset[0] + offset_1);
}
else if (verticalAlign === 'bottom') {
titleOffset[2] = Math.ceil(titleOffset[2] + offset_1);
}
}
}
}, this);
// Handle title.margin and caption.margin
if (titleOffset[0] &&
(((_a = options.title) === null || _a === void 0 ? void 0 : _a.verticalAlign) || 'top') === 'top') {
titleOffset[0] += ((_b = options.title) === null || _b === void 0 ? void 0 : _b.margin) || 0;
}
if (titleOffset[2] &&
((_c = options.caption) === null || _c === void 0 ? void 0 : _c.verticalAlign) === 'bottom') {
titleOffset[2] += ((_d = options.caption) === null || _d === void 0 ? void 0 : _d.margin) || 0;
}
var requiresDirtyBox = (!this.titleOffset ||
this.titleOffset.join(',') !== titleOffset.join(','));
// Used in getMargins
this.titleOffset = titleOffset;
Chart_fireEvent(this, 'afterLayOutTitles');
if (!this.isDirtyBox && requiresDirtyBox) {
this.isDirtyBox = this.isDirtyLegend = requiresDirtyBox;
// Redraw if necessary (#2719, #2744)
if (this.hasRendered && redraw && this.isDirtyBox) {
this.redraw();
}
}
};
/**
* Internal function to get the available size of the container element
*
* @private
* @function Highcharts.Chart#getContainerBox
*/
Chart.prototype.getContainerBox = function () {
var _this = this;
// Temporarily hide support divs from a11y and others, #21888
var nonContainers = [].map.call(this.renderTo.children,
function (child) {
if (child !== _this.container) {
var display = child.style.display;
child.style.display = 'none';
return [child, display];
}
}), box = {
width: Chart_getStyle(this.renderTo, 'width', true) || 0,
height: (Chart_getStyle(this.renderTo, 'height', true) || 0)
};
// Restore the non-containers
nonContainers.filter(Boolean).forEach(function (_a) {
var div = _a[0],
display = _a[1];
div.style.display = display;
});
return box;
};
/**
* Internal function to get the chart width and height according to options
* and container size. Sets {@link Chart.chartWidth} and
* {@link Chart.chartHeight}.
*
* @private
* @function Highcharts.Chart#getChartSize
*/
Chart.prototype.getChartSize = function () {
var _a;
var chart = this,
optionsChart = chart.options.chart,
widthOption = optionsChart.width,
heightOption = optionsChart.height,
containerBox = chart.getContainerBox(),
enableDefaultHeight = containerBox.height <= 1 ||
( // #21510, prevent infinite reflow
!((_a = chart.renderTo.parentElement) === null || _a === void 0 ? void 0 : _a.style.height) &&
chart.renderTo.style.height === '100%');
/**
* The current pixel width of the chart.
*
* @name Highcharts.Chart#chartWidth
* @type {number}
*/
chart.chartWidth = Math.max(// #1393
0, widthOption || containerBox.width || 600 // #1460
);
/**
* The current pixel height of the chart.
*
* @name Highcharts.Chart#chartHeight
* @type {number}
*/
chart.chartHeight = Math.max(0, Chart_relativeLength(heightOption, chart.chartWidth) ||
(enableDefaultHeight ? 400 : containerBox.height));
chart.containerBox = containerBox;
};
/**
* If the renderTo element has no offsetWidth, most likely one or more of
* its parents are hidden. Loop up the DOM tree to temporarily display the
* parents, then save the original display properties, and when the true
* size is retrieved, reset them. Used on first render and on redraws.
*
* @private
* @function Highcharts.Chart#temporaryDisplay
*
* @param {boolean} [revert]
* Revert to the saved original styles.
*/
Chart.prototype.temporaryDisplay = function (revert) {
var node = this.renderTo,
tempStyle;
if (!revert) {
while (node && node.style) {
// When rendering to a detached node, it needs to be temporarily
// attached in order to read styling and bounding boxes (#5783,
// #7024).
if (!Chart_doc.body.contains(node) && !node.parentNode) {
node.hcOrigDetached = true;
Chart_doc.body.appendChild(node);
}
if (Chart_getStyle(node, 'display', false) === 'none' ||
node.hcOricDetached) {
node.hcOrigStyle = {
display: node.style.display,
height: node.style.height,
overflow: node.style.overflow
};
tempStyle = {
display: 'block',
overflow: 'hidden'
};
if (node !== this.renderTo) {
tempStyle.height = 0;
}
Chart_css(node, tempStyle);
// If it still doesn't have an offset width after setting
// display to block, it probably has an !important priority
// #2631, 6803
if (!node.offsetWidth) {
node.style.setProperty('display', 'block', 'important');
}
}
node = node.parentNode;
if (node === Chart_doc.body) {
break;
}
}
}
else {
while (node && node.style) {
if (node.hcOrigStyle) {
Chart_css(node, node.hcOrigStyle);
delete node.hcOrigStyle;
}
if (node.hcOrigDetached) {
Chart_doc.body.removeChild(node);
node.hcOrigDetached = false;
}
node = node.parentNode;
}
}
};
/**
* Set the {@link Chart.container|chart container's} class name, in
* addition to `highcharts-container`.
*
* @function Highcharts.Chart#setClassName
*
* @param {string} [className]
* The additional class name.
*/
Chart.prototype.setClassName = function (className) {
this.container.className = 'highcharts-container ' + (className || '');
};
/**
* Get the containing element, determine the size and create the inner
* container div to hold the chart.
*
* @private
* @function Highcharts.Chart#afterGetContainer
* @emits Highcharts.Chart#event:afterGetContainer
*/
Chart.prototype.getContainer = function () {
var _a;
var chart = this,
options = chart.options,
optionsChart = options.chart,
indexAttrName = 'data-highcharts-chart',
containerId = Chart_uniqueKey(),
renderTo = chart.renderTo;
var containerStyle;
// If the container already holds a chart, destroy it. The check for
// hasRendered is there because web pages that are saved to disk from
// the browser, will preserve the data-highcharts-chart attribute and
// the SVG contents, but not an interactive chart. So in this case,
// charts[oldChartIndex] will point to the wrong chart if any (#2609).
var oldChartIndex = Chart_pInt(Chart_attr(renderTo,
indexAttrName));
if (Chart_isNumber(oldChartIndex) &&
Chart_charts[oldChartIndex] &&
Chart_charts[oldChartIndex].hasRendered) {
Chart_charts[oldChartIndex].destroy();
}
// Make a reference to the chart from the div
Chart_attr(renderTo, indexAttrName, chart.index);
// Remove previous chart
renderTo.innerHTML = HTML_AST.emptyHTML;
// If the container doesn't have an offsetWidth, it has or is a child of
// a node that has display:none. We need to temporarily move it out to a
// visible state to determine the size, else the legend and tooltips
// won't render properly. The skipClone option is used in sparklines as
// a micro optimization, saving about 1-2 ms each chart.
if (!optionsChart.skipClone && !renderTo.offsetWidth) {
chart.temporaryDisplay();
}
// Get the width and height
chart.getChartSize();
var chartHeight = chart.chartHeight;
var chartWidth = chart.chartWidth;
// Allow table cells and flex-boxes to shrink without the chart blocking
// them out (#6427)
Chart_css(renderTo, { overflow: 'hidden' });
// Create the inner container
if (!chart.styledMode) {
containerStyle = Chart_extend({
position: 'relative',
// Needed for context menu (avoidscrollbars) and content
// overflow in IE
overflow: 'hidden',
width: chartWidth + 'px',
height: chartHeight + 'px',
textAlign: 'left',
lineHeight: 'normal', // #427
zIndex: 0, // #1072
'-webkit-tap-highlight-color': 'rgba(0,0,0,0)',
userSelect: 'none', // #13503
'touch-action': 'manipulation',
outline: 'none',
padding: '0px'
}, optionsChart.style || {});
}
/**
* The containing HTML element of the chart. The container is
* dynamically inserted into the element given as the `renderTo`
* parameter in the {@link Highcharts#chart} constructor.
*
* @name Highcharts.Chart#container
* @type {Highcharts.HTMLDOMElement}
*/
var container = Chart_createElement('div', {
id: containerId
},
containerStyle,
renderTo);
chart.container = container;
// Adjust width if setting height affected it (#20334)
chart.getChartSize();
if (chartWidth !== chart.chartWidth) {
chartWidth = chart.chartWidth;
if (!chart.styledMode) {
Chart_css(container, {
width: Chart_pick((_a = optionsChart.style) === null || _a === void 0 ? void 0 : _a.width, chartWidth + 'px')
});
}
}
chart.containerBox = chart.getContainerBox();
// Cache the cursor (#1650)
chart._cursor = container.style.cursor;
// Initialize the renderer
var Renderer = optionsChart.renderer || !Chart_svg ?
Renderer_RendererRegistry.getRendererType(optionsChart.renderer) :
SVG_SVGRenderer;
/**
* The renderer instance of the chart. Each chart instance has only one
* associated renderer.
*
* @name Highcharts.Chart#renderer
* @type {Highcharts.SVGRenderer}
*/
chart.renderer = new Renderer(container, chartWidth, chartHeight, void 0, optionsChart.forExport, options.exporting && options.exporting.allowHTML, chart.styledMode);
// Set the initial animation from the options
Chart_setAnimation(void 0, chart);
chart.setClassName(optionsChart.className);
if (!chart.styledMode) {
chart.renderer.setStyle(optionsChart.style);
}
else {
// Initialize definitions
for (var key in options.defs) { // eslint-disable-line guard-for-in
this.renderer.definition(options.defs[key]);
}
}
// Add a reference to the charts index
chart.renderer.chartIndex = chart.index;
Chart_fireEvent(this, 'afterGetContainer');
};
/**
* Calculate margins by rendering axis labels in a preliminary position.
* Title, subtitle and legend have already been rendered at this stage, but
* will be moved into their final positions.
*
* @private
* @function Highcharts.Chart#getMargins
* @emits Highcharts.Chart#event:getMargins
*/
Chart.prototype.getMargins = function (skipAxes) {
var _a = this,
spacing = _a.spacing,
margin = _a.margin,
titleOffset = _a.titleOffset;
this.resetMargins();
// Adjust for title and subtitle
if (titleOffset[0] && !Chart_defined(margin[0])) {
this.plotTop = Math.max(this.plotTop, titleOffset[0] + spacing[0]);
}
if (titleOffset[2] && !Chart_defined(margin[2])) {
this.marginBottom = Math.max(this.marginBottom, titleOffset[2] + spacing[2]);
}
// Adjust for legend
if (this.legend && this.legend.display) {
this.legend.adjustMargins(margin, spacing);
}
Chart_fireEvent(this, 'getMargins');
if (!skipAxes) {
this.getAxisMargins();
}
};
/**
* @private
* @function Highcharts.Chart#getAxisMargins
*/
Chart.prototype.getAxisMargins = function () {
var chart = this,
// [top, right, bottom, left]
axisOffset = chart.axisOffset = [0, 0, 0, 0],
colorAxis = chart.colorAxis,
margin = chart.margin,
getOffset = function (axes) {
axes.forEach(function (axis) {
if (axis.visible) {
axis.getOffset();
}
});
};
// Pre-render axes to get labels offset width
if (chart.hasCartesianSeries) {
getOffset(chart.axes);
}
else if (colorAxis && colorAxis.length) {
getOffset(colorAxis);
}
// Add the axis offsets
Chart_marginNames.forEach(function (m, side) {
if (!Chart_defined(margin[side])) {
chart[m] += axisOffset[side];
}
});
chart.setChartSize();
};
/**
* Return the current options of the chart, but only those that differ from
* default options. Items that can be either an object or an array of
* objects, like `series`, `xAxis` and `yAxis`, are always returned as
* array.
*
* @sample highcharts/members/chart-getoptions
*
* @function Highcharts.Chart#getOptions
*
* @since 11.1.0
*/
Chart.prototype.getOptions = function () {
return Chart_diffObjects(this.userOptions, Chart_defaultOptions);
};
/**
* Reflows the chart to its container. By default, the Resize Observer is
* attached to the chart's div which allows to reflows the chart
* automatically to its container, as per the
* [chart.reflow](https://api.highcharts.com/highcharts/chart.reflow)
* option.
*
* @sample highcharts/chart/events-container/
* Pop up and reflow
*
* @function Highcharts.Chart#reflow
*
* @param {global.Event} [e]
* Event arguments. Used primarily when the function is called
* internally as a response to window resize.
*/
Chart.prototype.reflow = function (e) {
var _a;
var chart = this,
oldBox = chart.containerBox,
containerBox = chart.getContainerBox();
(_a = chart.pointer) === null || _a === void 0 ? true : delete _a.chartPosition;
// Width and height checks for display:none. Target is doc in Opera
// and win in Firefox, Chrome and IE9.
if (!chart.isPrinting &&
!chart.isResizing &&
oldBox &&
// When fired by resize observer inside hidden container
containerBox.width) {
if (containerBox.width !== oldBox.width ||
containerBox.height !== oldBox.height) {
Core_Utilities.clearTimeout(chart.reflowTimeout);
// When called from window.resize, e is set, else it's called
// directly (#2224)
chart.reflowTimeout = Chart_syncTimeout(function () {
// Set size, it may have been destroyed in the meantime
// (#1257)
if (chart.container) {
chart.setSize(void 0, void 0, false);
}
}, e ? 100 : 0);
}
chart.containerBox = containerBox;
}
};
/**
* Toggle the event handlers necessary for auto resizing, depending on the
* `chart.reflow` option.
*
* @private
* @function Highcharts.Chart#setReflow
*/
Chart.prototype.setReflow = function () {
var chart = this;
var runReflow = function (e) {
var _a;
if (((_a = chart.options) === null || _a === void 0 ? void 0 : _a.chart.reflow) && chart.hasLoaded) {
chart.reflow(e);
}
};
if (typeof ResizeObserver === 'function') {
(new ResizeObserver(runReflow)).observe(chart.renderTo);
// Fallback for more legacy browser versions.
}
else {
var unbind = Chart_addEvent(Chart_win, 'resize',
runReflow);
Chart_addEvent(this, 'destroy', unbind);
}
};
/**
* Resize the chart to a given width and height. In order to set the width
* only, the height argument may be skipped. To set the height only, pass
* `undefined` for the width.
*
* @sample highcharts/members/chart-setsize-button/
* Test resizing from buttons
* @sample highcharts/members/chart-setsize-jquery-resizable/
* Add a jQuery UI resizable
* @sample stock/members/chart-setsize/
* Highcharts Stock with UI resizable
*
* @function Highcharts.Chart#setSize
*
* @param {number|null} [width]
* The new pixel width of the chart. Since v4.2.6, the argument can
* be `undefined` in order to preserve the current value (when
* setting height only), or `null` to adapt to the width of the
* containing element.
*
* @param {number|null} [height]
* The new pixel height of the chart. Since v4.2.6, the argument can
* be `undefined` in order to preserve the current value, or `null`
* in order to adapt to the height of the containing element.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether and how to apply animation. When `undefined`, it applies
* the animation that is set in the `chart.animation` option.
*
*
* @emits Highcharts.Chart#event:endResize
* @emits Highcharts.Chart#event:resize
*/
Chart.prototype.setSize = function (width, height, animation) {
var chart = this,
renderer = chart.renderer;
// Handle the isResizing counter
chart.isResizing += 1;
// Set the animation for the current process
Chart_setAnimation(animation, chart);
var globalAnimation = renderer.globalAnimation;
chart.oldChartHeight = chart.chartHeight;
chart.oldChartWidth = chart.chartWidth;
if (typeof width !== 'undefined') {
chart.options.chart.width = width;
}
if (typeof height !== 'undefined') {
chart.options.chart.height = height;
}
chart.getChartSize();
var chartWidth = chart.chartWidth,
chartHeight = chart.chartHeight,
_a = chart.scrollablePixelsX,
scrollablePixelsX = _a === void 0 ? 0 : _a,
_b = chart.scrollablePixelsY,
scrollablePixelsY = _b === void 0 ? 0 : _b;
// Avoid expensive redrawing if the computed size didn't change
if (chart.isDirtyBox ||
chartWidth !== chart.oldChartWidth ||
chartHeight !== chart.oldChartHeight) {
// Resize the container with the global animation applied if enabled
// (#2503)
if (!chart.styledMode) {
(globalAnimation ? Chart_animate : Chart_css)(chart.container, {
width: "" + (chartWidth + scrollablePixelsX) + "px",
height: "" + (chartHeight + scrollablePixelsY) + "px"
}, globalAnimation);
}
chart.setChartSize(true);
renderer.setSize(chartWidth, chartHeight, globalAnimation);
// Handle axes
chart.axes.forEach(function (axis) {
axis.isDirty = true;
axis.setScale();
});
chart.isDirtyLegend = true; // Force legend redraw
chart.isDirtyBox = true; // Force redraw of plot and chart border
chart.layOutTitles(); // #2857
chart.getMargins();
chart.redraw(globalAnimation);
chart.oldChartHeight = void 0;
Chart_fireEvent(chart, 'resize');
// Fire endResize and set isResizing back. If animation is disabled,
// fire without delay, but in a new thread to avoid triggering the
// resize observer (#19027).
setTimeout(function () {
if (chart) {
Chart_fireEvent(chart, 'endResize');
}
}, Chart_animObject(globalAnimation).duration);
}
// Handle resizing counter even if we've re-rendered or not (#20548).
chart.isResizing -= 1;
};
/**
* Set the public chart properties. This is done before and after the
* pre-render to determine margin sizes.
*
* @private
* @function Highcharts.Chart#setChartSize
* @emits Highcharts.Chart#event:afterSetChartSize
*/
Chart.prototype.setChartSize = function (skipAxes) {
var chart = this,
chartHeight = chart.chartHeight,
chartWidth = chart.chartWidth,
inverted = chart.inverted,
spacing = chart.spacing,
renderer = chart.renderer,
clipOffset = chart.clipOffset,
clipRoundFunc = Math[inverted ? 'floor' : 'round'];
var plotLeft,
plotTop,
plotWidth,
plotHeight;
/**
* The current left position of the plot area in pixels.
*
* @name Highcharts.Chart#plotLeft
* @type {number}
*/
chart.plotLeft = plotLeft = Math.round(chart.plotLeft);
/**
* The current top position of the plot area in pixels.
*
* @name Highcharts.Chart#plotTop
* @type {number}
*/
chart.plotTop = plotTop = Math.round(chart.plotTop);
/**
* The current width of the plot area in pixels.
*
* @name Highcharts.Chart#plotWidth
* @type {number}
*/
chart.plotWidth = plotWidth = Math.max(0, Math.round(chartWidth - plotLeft - chart.marginRight));
/**
* The current height of the plot area in pixels.
*
* @name Highcharts.Chart#plotHeight
* @type {number}
*/
chart.plotHeight = plotHeight = Math.max(0, Math.round(chartHeight - plotTop - chart.marginBottom));
chart.plotSizeX = inverted ? plotHeight : plotWidth;
chart.plotSizeY = inverted ? plotWidth : plotHeight;
// Set boxes used for alignment
chart.spacingBox = renderer.spacingBox = {
x: spacing[3],
y: spacing[0],
width: chartWidth - spacing[3] - spacing[1],
height: chartHeight - spacing[0] - spacing[2]
};
chart.plotBox = renderer.plotBox = {
x: plotLeft,
y: plotTop,
width: plotWidth,
height: plotHeight
};
// Compute the clipping box
if (clipOffset) {
chart.clipBox = {
x: clipRoundFunc(clipOffset[3]),
y: clipRoundFunc(clipOffset[0]),
width: clipRoundFunc(chart.plotSizeX - clipOffset[1] - clipOffset[3]),
height: clipRoundFunc(chart.plotSizeY - clipOffset[0] - clipOffset[2])
};
}
if (!skipAxes) {
chart.axes.forEach(function (axis) {
axis.setAxisSize();
axis.setAxisTranslation();
});
renderer.alignElements();
}
Chart_fireEvent(chart, 'afterSetChartSize', { skipAxes: skipAxes });
};
/**
* Initial margins before auto size margins are applied.
*
* @private
* @function Highcharts.Chart#resetMargins
*/
Chart.prototype.resetMargins = function () {
Chart_fireEvent(this, 'resetMargins');
var chart = this,
chartOptions = chart.options.chart,
plotBorderWidth = chartOptions.plotBorderWidth || 0,
halfWidth = plotBorderWidth / 2;
// Create margin and spacing array
['margin', 'spacing'].forEach(function splashArrays(target) {
var value = chartOptions[target],
values = Chart_isObject(value) ? value : [value,
value,
value,
value];
[
'Top',
'Right',
'Bottom',
'Left'
].forEach(function (sideName, side) {
chart[target][side] = Chart_pick(chartOptions[target + sideName], values[side]);
});
});
// Set margin names like chart.plotTop, chart.plotLeft,
// chart.marginRight, chart.marginBottom.
Chart_marginNames.forEach(function (m, side) {
chart[m] = Chart_pick(chart.margin[side], chart.spacing[side]);
});
chart.axisOffset = [0, 0, 0, 0]; // Top, right, bottom, left
chart.clipOffset = [
halfWidth,
halfWidth,
halfWidth,
halfWidth
];
chart.plotBorderWidth = plotBorderWidth;
};
/**
* Internal function to draw or redraw the borders and backgrounds for chart
* and plot area.
*
* @private
* @function Highcharts.Chart#drawChartBox
* @emits Highcharts.Chart#event:afterDrawChartBox
*/
Chart.prototype.drawChartBox = function () {
var chart = this,
optionsChart = chart.options.chart,
renderer = chart.renderer,
chartWidth = chart.chartWidth,
chartHeight = chart.chartHeight,
styledMode = chart.styledMode,
plotBGImage = chart.plotBGImage,
chartBackgroundColor = optionsChart.backgroundColor,
plotBackgroundColor = optionsChart.plotBackgroundColor,
plotBackgroundImage = optionsChart.plotBackgroundImage,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth,
plotHeight = chart.plotHeight,
plotBox = chart.plotBox,
clipRect = chart.clipRect,
clipBox = chart.clipBox;
var chartBackground = chart.chartBackground,
plotBackground = chart.plotBackground,
plotBorder = chart.plotBorder,
chartBorderWidth,
mgn,
bgAttr,
verb = 'animate';
// Chart area
if (!chartBackground) {
chart.chartBackground = chartBackground = renderer.rect()
.addClass('highcharts-background')
.add();
verb = 'attr';
}
if (!styledMode) {
// Presentational
chartBorderWidth = optionsChart.borderWidth || 0;
mgn = chartBorderWidth + (optionsChart.shadow ? 8 : 0);
bgAttr = {
fill: chartBackgroundColor || 'none'
};
if (chartBorderWidth || chartBackground['stroke-width']) { // #980
bgAttr.stroke = optionsChart.borderColor;
bgAttr['stroke-width'] = chartBorderWidth;
}
chartBackground
.attr(bgAttr)
.shadow(optionsChart.shadow);
}
else {
chartBorderWidth = mgn = chartBackground.strokeWidth();
}
chartBackground[verb]({
x: mgn / 2,
y: mgn / 2,
width: chartWidth - mgn - chartBorderWidth % 2,
height: chartHeight - mgn - chartBorderWidth % 2,
r: optionsChart.borderRadius
});
// Plot background
verb = 'animate';
if (!plotBackground) {
verb = 'attr';
chart.plotBackground = plotBackground = renderer.rect()
.addClass('highcharts-plot-background')
.add();
}
plotBackground[verb](plotBox);
if (!styledMode) {
// Presentational attributes for the background
plotBackground
.attr({
fill: plotBackgroundColor || 'none'
})
.shadow(optionsChart.plotShadow);
// Create the background image
if (plotBackgroundImage) {
if (!plotBGImage) {
chart.plotBGImage = renderer.image(plotBackgroundImage, plotLeft, plotTop, plotWidth, plotHeight).add();
}
else {
if (plotBackgroundImage !== plotBGImage.attr('href')) {
plotBGImage.attr('href', plotBackgroundImage);
}
plotBGImage.animate(plotBox);
}
}
}
// Plot clip
if (!clipRect) {
chart.clipRect = renderer.clipRect(clipBox);
}
else {
clipRect.animate({
width: clipBox.width,
height: clipBox.height
});
}
// Plot area border
verb = 'animate';
if (!plotBorder) {
verb = 'attr';
chart.plotBorder = plotBorder = renderer.rect()
.addClass('highcharts-plot-border')
.attr({
zIndex: 1 // Above the grid
})
.add();
}
if (!styledMode) {
// Presentational
plotBorder.attr({
stroke: optionsChart.plotBorderColor,
'stroke-width': optionsChart.plotBorderWidth || 0,
fill: 'none'
});
}
plotBorder[verb](plotBorder.crisp({
x: plotLeft,
y: plotTop,
width: plotWidth,
height: plotHeight
}, -plotBorder.strokeWidth())); // #3282 plotBorder should be negative;
// reset
chart.isDirtyBox = false;
Chart_fireEvent(this, 'afterDrawChartBox');
};
/**
* Detect whether a certain chart property is needed based on inspecting its
* options and series. This mainly applies to the chart.inverted property,
* and in extensions to the chart.angular and chart.polar properties.
*
* @private
* @function Highcharts.Chart#propFromSeries
*/
Chart.prototype.propFromSeries = function () {
var chart = this,
optionsChart = chart.options.chart,
seriesOptions = chart.options.series;
var i,
klass,
value;
/**
* The flag is set to `true` if a series of the chart is inverted.
*
* @name Highcharts.Chart#inverted
* @type {boolean|undefined}
*/
['inverted', 'angular', 'polar'].forEach(function (key) {
// The default series type's class
klass = Chart_seriesTypes[optionsChart.type];
// Get the value from available chart-wide properties
value =
// It is set in the options:
optionsChart[key] ||
// The default series class:
(klass && klass.prototype[key]);
// Requires it
// 4. Check if any the chart's series require it
i = seriesOptions && seriesOptions.length;
while (!value && i--) {
klass = Chart_seriesTypes[seriesOptions[i].type];
if (klass && klass.prototype[key]) {
value = true;
}
}
// Set the chart property
chart[key] = value;
});
};
/**
* Internal function to link two or more series together, based on the
* `linkedTo` option. This is done from `Chart.render`, and after
* `Chart.addSeries` and `Series.remove`.
*
* @private
* @function Highcharts.Chart#linkSeries
* @emits Highcharts.Chart#event:afterLinkSeries
*/
Chart.prototype.linkSeries = function (isUpdating) {
var chart = this,
chartSeries = chart.series;
// Reset links
chartSeries.forEach(function (series) {
series.linkedSeries.length = 0;
});
// Apply new links
chartSeries.forEach(function (series) {
var linkedTo = series.options.linkedTo;
if (Chart_isString(linkedTo)) {
var linkedParent = void 0;
if (linkedTo === ':previous') {
linkedParent = chart.series[series.index - 1];
}
else {
linkedParent = chart.get(linkedTo);
}
// #3341 avoid mutual linking
if (linkedParent &&
linkedParent.linkedParent !== series) {
linkedParent.linkedSeries.push(series);
/**
* The parent series of the current series, if the current
* series has a [linkedTo](https://api.highcharts.com/highcharts/series.line.linkedTo)
* setting.
*
* @name Highcharts.Series#linkedParent
* @type {Highcharts.Series}
* @readonly
*/
series.linkedParent = linkedParent;
if (linkedParent.enabledDataSorting) {
series.setDataSortingOptions();
}
series.visible = Chart_pick(series.options.visible, linkedParent.options.visible, series.visible); // #3879
}
}
});
Chart_fireEvent(this, 'afterLinkSeries', { isUpdating: isUpdating });
};
/**
* Render series for the chart.
*
* @private
* @function Highcharts.Chart#renderSeries
*/
Chart.prototype.renderSeries = function () {
this.series.forEach(function (serie) {
serie.translate();
serie.render();
});
};
/**
* Render all graphics for the chart. Runs internally on initialization.
*
* @private
* @function Highcharts.Chart#render
*/
Chart.prototype.render = function () {
var _a;
var chart = this,
axes = chart.axes,
colorAxis = chart.colorAxis,
renderer = chart.renderer,
axisLayoutRuns = chart.options.chart.axisLayoutRuns || 2,
renderAxes = function (axes) {
axes.forEach(function (axis) {
if (axis.visible) {
axis.render();
}
});
};
var expectedSpace = 0, // Correction for X axis labels
// If the plot area size has changed significantly, calculate tick
// positions again
redoHorizontal = true,
redoVertical,
run = 0;
// Title
chart.setTitle();
// Fire an event before the margins are computed. This is where the
// legend is assigned.
Chart_fireEvent(chart, 'beforeMargins');
// Get stacks
(_a = chart.getStacks) === null || _a === void 0 ? void 0 : _a.call(chart);
// Get chart margins
chart.getMargins(true);
chart.setChartSize();
for (var _i = 0, axes_1 = axes; _i < axes_1.length; _i++) {
var axis = axes_1[_i];
var options = axis.options,
labels = options.labels;
if (chart.hasCartesianSeries && // #20948
axis.horiz &&
axis.visible &&
labels.enabled &&
axis.series.length &&
axis.coll !== 'colorAxis' &&
!chart.polar) {
expectedSpace = options.tickLength;
axis.createGroups();
// Calculate expected space based on dummy tick
var mockTick = new Axis_Tick(axis, 0, '', true), label = mockTick.createLabel('x', labels);
mockTick.destroy();
if (label &&
Chart_pick(labels.reserveSpace, !Chart_isNumber(options.crossing))) {
expectedSpace = label.getBBox().height +
labels.distance +
Math.max(options.offset || 0, 0);
}
if (expectedSpace) {
label === null || label === void 0 ? void 0 : label.destroy();
break;
}
}
}
// Use Math.max to prevent negative plotHeight
chart.plotHeight = Math.max(chart.plotHeight - expectedSpace, 0);
while ((redoHorizontal || redoVertical || axisLayoutRuns > 1) &&
run < axisLayoutRuns // #19794
) {
var tempWidth = chart.plotWidth,
tempHeight = chart.plotHeight;
for (var _b = 0, axes_2 = axes; _b < axes_2.length; _b++) {
var axis = axes_2[_b];
if (run === 0) {
// Get margins by pre-rendering axes
axis.setScale();
}
else if ((axis.horiz && redoHorizontal) ||
(!axis.horiz && redoVertical)) {
// Update to reflect the new margins
axis.setTickInterval(true);
}
}
if (run === 0) {
chart.getAxisMargins();
}
else {
// Check again for new, rotated or moved labels
chart.getMargins();
}
redoHorizontal = (tempWidth / chart.plotWidth) > (run ? 1 : 1.1);
redoVertical = (tempHeight / chart.plotHeight) > (run ? 1 : 1.05);
run++;
}
// Draw the borders and backgrounds
chart.drawChartBox();
// Axes
if (chart.hasCartesianSeries) {
renderAxes(axes);
}
else if (colorAxis && colorAxis.length) {
renderAxes(colorAxis);
}
// The series
if (!chart.seriesGroup) {
chart.seriesGroup = renderer.g('series-group')
.attr({ zIndex: 3 })
.shadow(chart.options.chart.seriesGroupShadow)
.add();
}
chart.renderSeries();
// Credits
chart.addCredits();
// Handle responsiveness
if (chart.setResponsive) {
chart.setResponsive();
}
// Set flag
chart.hasRendered = true;
};
/**
* Set a new credits label for the chart.
*
* @sample highcharts/credits/credits-update/
* Add and update credits
*
* @function Highcharts.Chart#addCredits
*
* @param {Highcharts.CreditsOptions} [credits]
* A configuration object for the new credits.
*/
Chart.prototype.addCredits = function (credits) {
var chart = this,
creds = Chart_merge(true,
this.options.credits,
credits);
if (creds.enabled && !this.credits) {
/**
* The chart's credits label. The label has an `update` method that
* allows setting new options as per the
* [credits options set](https://api.highcharts.com/highcharts/credits).
*
* @name Highcharts.Chart#credits
* @type {Highcharts.SVGElement}
*/
this.credits = this.renderer.text(creds.text + (this.mapCredits || ''), 0, 0)
.addClass('highcharts-credits')
.on('click', function () {
if (creds.href) {
Chart_win.location.href = creds.href;
}
})
.attr({
align: creds.position.align,
zIndex: 8
});
if (!chart.styledMode) {
this.credits.css(creds.style);
}
this.credits
.add()
.align(creds.position);
// Dynamically update
this.credits.update = function (options) {
chart.credits = chart.credits.destroy();
chart.addCredits(options);
};
}
};
/**
* Remove the chart and purge memory. This method is called internally
* before adding a second chart into the same container, as well as on
* window unload to prevent leaks.
*
* @sample highcharts/members/chart-destroy/
* Destroy the chart from a button
* @sample stock/members/chart-destroy/
* Destroy with Highcharts Stock
*
* @function Highcharts.Chart#destroy
*
* @emits Highcharts.Chart#event:destroy
*/
Chart.prototype.destroy = function () {
var chart = this,
axes = chart.axes,
series = chart.series,
container = chart.container,
parentNode = container && container.parentNode;
var i;
// Fire the chart.destroy event
Chart_fireEvent(chart, 'destroy');
// Delete the chart from charts lookup array
if (chart.renderer.forExport) {
Chart_erase(Chart_charts, chart); // #6569
}
else {
Chart_charts[chart.index] = void 0;
}
Core_Globals.chartCount--;
chart.renderTo.removeAttribute('data-highcharts-chart');
// Remove events
Chart_removeEvent(chart);
// ==== Destroy collections:
// Destroy axes
i = axes.length;
while (i--) {
axes[i] = axes[i].destroy();
}
// Destroy scroller & scroller series before destroying base series
if (this.scroller && this.scroller.destroy) {
this.scroller.destroy();
}
// Destroy each series
i = series.length;
while (i--) {
series[i] = series[i].destroy();
}
// ==== Destroy chart properties:
[
'title', 'subtitle', 'chartBackground', 'plotBackground',
'plotBGImage', 'plotBorder', 'seriesGroup', 'clipRect', 'credits',
'pointer', 'rangeSelector', 'legend', 'resetZoomButton', 'tooltip',
'renderer'
].forEach(function (name) {
var prop = chart[name];
if (prop && prop.destroy) {
chart[name] = prop.destroy();
}
});
// Remove container and all SVG, check container as it can break in IE
// when destroyed before finished loading
if (container) {
container.innerHTML = HTML_AST.emptyHTML;
Chart_removeEvent(container);
if (parentNode) {
Chart_discardElement(container);
}
}
// Clean it all up
Chart_objectEach(chart, function (val, key) {
delete chart[key];
});
};
/**
* Prepare for first rendering after all data are loaded.
*
* @private
* @function Highcharts.Chart#firstRender
* @emits Highcharts.Chart#event:beforeRender
*/
Chart.prototype.firstRender = function () {
var _a;
var chart = this,
options = chart.options;
// Create the container
chart.getContainer();
chart.resetMargins();
chart.setChartSize();
// Set the common chart properties (mainly invert) from the given series
chart.propFromSeries();
// Get axes
chart.createAxes();
// Initialize the series
var series = Chart_isArray(options.series) ? options.series : [];
options.series = []; // Avoid mutation
series.forEach(
// #9680
function (serieOptions) {
chart.initSeries(serieOptions);
});
chart.linkSeries();
chart.setSortedData();
// Run an event after axes and series are initialized, but before
// render. At this stage, the series data is indexed and cached in the
// xData and yData arrays, so we can access those before rendering. Used
// in Highcharts Stock.
Chart_fireEvent(chart, 'beforeRender');
chart.render();
(_a = chart.pointer) === null || _a === void 0 ? void 0 : _a.getChartPosition(); // #14973
// Fire the load event if there are no external images
if (!chart.renderer.imgCount && !chart.hasLoaded) {
chart.onload();
}
// If the chart was rendered outside the top container, put it back in
// (#3679)
chart.temporaryDisplay(true);
};
/**
* Internal function that runs on chart load, async if any images are loaded
* in the chart. Runs the callbacks and triggers the `load` and `render`
* events.
*
* @private
* @function Highcharts.Chart#onload
* @emits Highcharts.Chart#event:load
* @emits Highcharts.Chart#event:render
*/
Chart.prototype.onload = function () {
// Run callbacks, first the ones registered by modules, then user's one
this.callbacks.concat([this.callback]).forEach(function (fn) {
// Chart destroyed in its own callback (#3600)
if (fn && typeof this.index !== 'undefined') {
fn.apply(this, [this]);
}
}, this);
Chart_fireEvent(this, 'load');
Chart_fireEvent(this, 'render');
// Set up auto resize, check for not destroyed (#6068)
if (Chart_defined(this.index)) {
this.setReflow();
}
this.warnIfA11yModuleNotLoaded();
// Don't run again
this.hasLoaded = true;
};
/**
* Emit console warning if the a11y module is not loaded.
* @private
*/
Chart.prototype.warnIfA11yModuleNotLoaded = function () {
var _a = this,
options = _a.options,
title = _a.title;
if (options && !this.accessibility) {
// Make chart behave as an image with the title as alt text
this.renderer.boxWrapper.attr({
role: 'img',
'aria-label': ((title && title.element.textContent) || ''
// #17753, < is not allowed in SVG attributes
).replace(/</g, '<')
});
if (!(options.accessibility && options.accessibility.enabled === false)) {
Chart_error('Highcharts warning: Consider including the ' +
'"accessibility.js" module to make your chart more ' +
'usable for people with disabilities. Set the ' +
'"accessibility.enabled" option to false to remove this ' +
'warning. See https://www.highcharts.com/docs/accessibility/accessibility-module.', false, this);
}
}
};
/**
* Add a series to the chart after render time. Note that this method should
* never be used when adding data synchronously at chart render time, as it
* adds expense to the calculations and rendering. When adding data at the
* same time as the chart is initialized, add the series as a configuration
* option instead. With multiple axes, the `offset` is dynamically adjusted.
*
* @sample highcharts/members/chart-addseries/
* Add a series from a button
* @sample stock/members/chart-addseries/
* Add a series in Highcharts Stock
*
* @function Highcharts.Chart#addSeries
*
* @param {Highcharts.SeriesOptionsType} options
* The config options for the series.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after adding.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether to apply animation, and optionally animation
* configuration. When `undefined`, it applies the animation that is
* set in the `chart.animation` option.
*
* @return {Highcharts.Series}
* The newly created series object.
*
* @emits Highcharts.Chart#event:addSeries
* @emits Highcharts.Chart#event:afterAddSeries
*/
Chart.prototype.addSeries = function (options, redraw, animation) {
var chart = this;
var series;
if (options) { // <- not necessary
redraw = Chart_pick(redraw, true); // Defaults to true
Chart_fireEvent(chart, 'addSeries', { options: options }, function () {
series = chart.initSeries(options);
chart.isDirtyLegend = true;
chart.linkSeries();
if (series.enabledDataSorting) {
// We need to call `setData` after `linkSeries`
series.setData(options.data, false);
}
Chart_fireEvent(chart, 'afterAddSeries', { series: series });
if (redraw) {
chart.redraw(animation);
}
});
}
return series;
};
/**
* Add an axis to the chart after render time. Note that this method should
* never be used when adding data synchronously at chart render time, as it
* adds expense to the calculations and rendering. When adding data at the
* same time as the chart is initialized, add the axis as a configuration
* option instead.
*
* @sample highcharts/members/chart-addaxis/
* Add and remove axes
*
* @function Highcharts.Chart#addAxis
*
* @param {Highcharts.AxisOptions} options
* The axis options.
*
* @param {boolean} [isX=false]
* Whether it is an X axis or a value axis.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after adding.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether and how to apply animation in the redraw. When
* `undefined`, it applies the animation that is set in the
* `chart.animation` option.
*
* @return {Highcharts.Axis}
* The newly generated Axis object.
*/
Chart.prototype.addAxis = function (options, isX, redraw, animation) {
return this.createAxis(isX ? 'xAxis' : 'yAxis', { axis: options, redraw: redraw, animation: animation });
};
/**
* Add a color axis to the chart after render time. Note that this method
* should never be used when adding data synchronously at chart render time,
* as it adds expense to the calculations and rendering. When adding data at
* the same time as the chart is initialized, add the axis as a
* configuration option instead.
*
* @sample highcharts/members/chart-addaxis/
* Add and remove axes
*
* @function Highcharts.Chart#addColorAxis
*
* @param {Highcharts.ColorAxisOptions} options
* The axis options.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after adding.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether and how to apply animation in the redraw. When
* `undefined`, it applies the animation that is set in the
* `chart.animation` option.
*
* @return {Highcharts.Axis}
* The newly generated Axis object.
*/
Chart.prototype.addColorAxis = function (options, redraw, animation) {
return this.createAxis('colorAxis', { axis: options, redraw: redraw, animation: animation });
};
/**
* Factory for creating different axis types.
*
* @private
* @function Highcharts.Chart#createAxis
*
* @param {string} coll
* An axis type.
*
* @param {...Array<*>} arguments
* All arguments for the constructor.
*
* @return {Highcharts.Axis}
* The newly generated Axis object.
*/
Chart.prototype.createAxis = function (coll, options) {
var axis = new Axis_Axis(this,
options.axis,
coll);
if (Chart_pick(options.redraw, true)) {
this.redraw(options.animation);
}
return axis;
};
/**
* Dim the chart and show a loading text or symbol. Options for the loading
* screen are defined in {@link
* https://api.highcharts.com/highcharts/loading|the loading options}.
*
* @sample highcharts/members/chart-hideloading/
* Show and hide loading from a button
* @sample highcharts/members/chart-showloading/
* Apply different text labels
* @sample stock/members/chart-show-hide-loading/
* Toggle loading in Highcharts Stock
*
* @function Highcharts.Chart#showLoading
*
* @param {string} [str]
* An optional text to show in the loading label instead of the
* default one. The default text is set in
* [lang.loading](https://api.highcharts.com/highcharts/lang.loading).
*/
Chart.prototype.showLoading = function (str) {
var chart = this,
options = chart.options,
loadingOptions = options.loading,
setLoadingSize = function () {
if (loadingDiv) {
Chart_css(loadingDiv, {
left: chart.plotLeft + 'px',
top: chart.plotTop + 'px',
width: chart.plotWidth + 'px',
height: chart.plotHeight + 'px'
});
}
};
var loadingDiv = chart.loadingDiv,
loadingSpan = chart.loadingSpan;
// Create the layer at the first call
if (!loadingDiv) {
chart.loadingDiv = loadingDiv = Chart_createElement('div', {
className: 'highcharts-loading highcharts-loading-hidden'
}, null, chart.container);
}
if (!loadingSpan) {
chart.loadingSpan = loadingSpan = Chart_createElement('span', { className: 'highcharts-loading-inner' }, null, loadingDiv);
Chart_addEvent(chart, 'redraw', setLoadingSize); // #1080
}
loadingDiv.className = 'highcharts-loading';
// Update text
HTML_AST.setElementHTML(loadingSpan, Chart_pick(str, options.lang.loading, ''));
if (!chart.styledMode) {
// Update visuals
Chart_css(loadingDiv, Chart_extend(loadingOptions.style, {
zIndex: 10
}));
Chart_css(loadingSpan, loadingOptions.labelStyle);
// Show it
if (!chart.loadingShown) {
Chart_css(loadingDiv, {
opacity: 0,
display: ''
});
Chart_animate(loadingDiv, {
opacity: loadingOptions.style.opacity || 0.5
}, {
duration: loadingOptions.showDuration || 0
});
}
}
chart.loadingShown = true;
setLoadingSize();
};
/**
* Hide the loading layer.
*
* @see Highcharts.Chart#showLoading
*
* @sample highcharts/members/chart-hideloading/
* Show and hide loading from a button
* @sample stock/members/chart-show-hide-loading/
* Toggle loading in Highcharts Stock
*
* @function Highcharts.Chart#hideLoading
*/
Chart.prototype.hideLoading = function () {
var options = this.options,
loadingDiv = this.loadingDiv;
if (loadingDiv) {
loadingDiv.className =
'highcharts-loading highcharts-loading-hidden';
if (!this.styledMode) {
Chart_animate(loadingDiv, {
opacity: 0
}, {
duration: options.loading.hideDuration || 100,
complete: function () {
Chart_css(loadingDiv, { display: 'none' });
}
});
}
}
this.loadingShown = false;
};
/**
* A generic function to update any element of the chart. Elements can be
* enabled and disabled, moved, re-styled, re-formatted etc.
*
* A special case is configuration objects that take arrays, for example
* [xAxis](https://api.highcharts.com/highcharts/xAxis),
* [yAxis](https://api.highcharts.com/highcharts/yAxis) or
* [series](https://api.highcharts.com/highcharts/series). For these
* collections, an `id` option is used to map the new option set to an
* existing object. If an existing object of the same id is not found, the
* corresponding item is updated. So for example, running `chart.update`
* with a series item without an id, will cause the existing chart's series
* with the same index in the series array to be updated. When the
* `oneToOne` parameter is true, `chart.update` will also take care of
* adding and removing items from the collection. Read more under the
* parameter description below.
*
* Note that when changing series data, `chart.update` may mutate the passed
* data options.
*
* See also the
* [responsive option set](https://api.highcharts.com/highcharts/responsive).
* Switching between `responsive.rules` basically runs `chart.update` under
* the hood.
*
* @sample highcharts/members/chart-update/
* Update chart geometry
*
* @function Highcharts.Chart#update
*
* @param {Highcharts.Options} options
* A configuration object for the new chart options.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart.
*
* @param {boolean} [oneToOne=false]
* When `true`, the `series`, `xAxis`, `yAxis` and `annotations`
* collections will be updated one to one, and items will be either
* added or removed to match the new updated options. For example,
* if the chart has two series and we call `chart.update` with a
* configuration containing three series, one will be added. If we
* call `chart.update` with one series, one will be removed. Setting
* an empty `series` array will remove all series, but leaving out
* the`series` property will leave all series untouched. If the
* series have id's, the new series options will be matched by id,
* and the remaining ones removed.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Whether to apply animation, and optionally animation
* configuration. When `undefined`, it applies the animation that is
* set in the `chart.animation` option.
*
* @emits Highcharts.Chart#event:update
* @emits Highcharts.Chart#event:afterUpdate
*/
Chart.prototype.update = function (options, redraw, oneToOne, animation) {
var chart = this,
adders = {
credits: 'addCredits',
title: 'setTitle',
subtitle: 'setSubtitle',
caption: 'setCaption'
},
isResponsiveOptions = options.isResponsiveOptions,
itemsForRemoval = [];
var updateAllAxes,
updateAllSeries,
runSetSize;
Chart_fireEvent(chart, 'update', { options: options });
// If there are responsive rules in action, undo the responsive rules
// before we apply the updated options and replay the responsive rules
// on top from the chart.redraw function (#9617).
if (!isResponsiveOptions) {
chart.setResponsive(false, true);
}
options = Chart_diffObjects(options, chart.options);
chart.userOptions = Chart_merge(chart.userOptions, options);
// If the top-level chart option is present, some special updates are
// required
var optionsChart = options.chart;
if (optionsChart) {
Chart_merge(true, chart.options.chart, optionsChart);
// Add support for deprecated zooming options like zoomType, #17861
this.setZoomOptions();
// Setter function
if ('className' in optionsChart) {
chart.setClassName(optionsChart.className);
}
if ('inverted' in optionsChart ||
'polar' in optionsChart ||
'type' in optionsChart) {
// Parse options.chart.inverted and options.chart.polar together
// with the available series.
chart.propFromSeries();
updateAllAxes = true;
}
if ('alignTicks' in optionsChart) { // #6452
updateAllAxes = true;
}
if ('events' in optionsChart) {
// Chart event handlers
Chart_registerEventOptions(this, optionsChart);
}
Chart_objectEach(optionsChart, function (val, key) {
if (chart.propsRequireUpdateSeries.indexOf('chart.' + key) !==
-1) {
updateAllSeries = true;
}
// Only dirty box
if (chart.propsRequireDirtyBox.indexOf(key) !== -1) {
chart.isDirtyBox = true;
}
// Chart setSize
if (chart.propsRequireReflow.indexOf(key) !== -1) {
chart.isDirtyBox = true;
if (!isResponsiveOptions) {
runSetSize = true;
}
}
});
if (!chart.styledMode && optionsChart.style) {
chart.renderer.setStyle(chart.options.chart.style || {});
}
}
// Moved up, because tooltip needs updated plotOptions (#6218)
if (!chart.styledMode && options.colors) {
this.options.colors = options.colors;
}
// Some option structures correspond one-to-one to chart objects that
// have update methods, for example
// options.credits => chart.credits
// options.legend => chart.legend
// options.title => chart.title
// options.tooltip => chart.tooltip
// options.subtitle => chart.subtitle
// options.mapNavigation => chart.mapNavigation
// options.navigator => chart.navigator
// options.scrollbar => chart.scrollbar
Chart_objectEach(options, function (val, key) {
if (chart[key] &&
typeof chart[key].update === 'function') {
chart[key].update(val, false);
// If a one-to-one object does not exist, look for an adder function
}
else if (typeof chart[adders[key]] === 'function') {
chart[adders[key]](val);
// Else, just merge the options. For nodes like loading, noData,
// plotOptions
}
else if (key !== 'colors' &&
chart.collectionsWithUpdate.indexOf(key) === -1) {
Chart_merge(true, chart.options[key], options[key]);
}
if (key !== 'chart' &&
chart.propsRequireUpdateSeries.indexOf(key) !== -1) {
updateAllSeries = true;
}
});
// Setters for collections. For axes and series, each item is referred
// by an id. If the id is not found, it defaults to the corresponding
// item in the collection, so setting one series without an id, will
// update the first series in the chart. Setting two series without
// an id will update the first and the second respectively (#6019)
// chart.update and responsive.
this.collectionsWithUpdate.forEach(function (coll) {
if (options[coll]) {
Chart_splat(options[coll]).forEach(function (newOptions, i) {
var hasId = Chart_defined(newOptions.id);
var item;
// Match by id
if (hasId) {
item = chart.get(newOptions.id);
}
// No match by id found, match by index instead
if (!item && chart[coll]) {
item = chart[coll][Chart_pick(newOptions.index, i)];
// Check if we grabbed an item with an existing but
// different id (#13541). Check that the item in this
// position is not internal (navigator).
if (item && ((hasId && Chart_defined(item.options.id)) ||
item.options.isInternal)) {
item = void 0;
}
}
if (item && item.coll === coll) {
item.update(newOptions, false);
if (oneToOne) {
item.touched = true;
}
}
// If oneToOne and no matching item is found, add one
if (!item && oneToOne && chart.collectionsWithInit[coll]) {
chart.collectionsWithInit[coll][0].apply(chart,
// [newOptions, ...extraArguments, redraw=false]
[
newOptions
].concat(
// Not all initializers require extra args
chart.collectionsWithInit[coll][1] || []).concat([
false
])).touched = true;
}
});
// Add items for removal
if (oneToOne) {
chart[coll].forEach(function (item) {
if (!item.touched && !item.options.isInternal) {
itemsForRemoval.push(item);
}
else {
delete item.touched;
}
});
}
}
});
itemsForRemoval.forEach(function (item) {
if (item.chart && item.remove) { // #9097, avoid removing twice
item.remove(false);
}
});
if (updateAllAxes) {
chart.axes.forEach(function (axis) {
axis.update({}, false);
});
}
// Certain options require the whole series structure to be thrown away
// and rebuilt
if (updateAllSeries) {
chart.getSeriesOrderByLinks().forEach(function (series) {
// Avoid removed navigator series
if (series.chart) {
series.update({}, false);
}
}, this);
}
// Update size. Redraw is forced.
var newWidth = optionsChart && optionsChart.width;
var newHeight = optionsChart && (Chart_isString(optionsChart.height) ?
Chart_relativeLength(optionsChart.height,
newWidth || chart.chartWidth) :
optionsChart.height);
if (
// In this case, run chart.setSize with newWidth and newHeight which
// are undefined, only for reflowing chart elements because margin
// or spacing has been set (#8190)
runSetSize ||
// In this case, the size is actually set
(Chart_isNumber(newWidth) && newWidth !== chart.chartWidth) ||
(Chart_isNumber(newHeight) && newHeight !== chart.chartHeight)) {
chart.setSize(newWidth, newHeight, animation);
}
else if (Chart_pick(redraw, true)) {
chart.redraw(animation);
}
Chart_fireEvent(chart, 'afterUpdate', {
options: options,
redraw: redraw,
animation: animation
});
};
/**
* Shortcut to set the subtitle options. This can also be done from {@link
* Chart#update} or {@link Chart#setTitle}.
*
* @function Highcharts.Chart#setSubtitle
*
* @param {Highcharts.SubtitleOptions} options
* New subtitle options. The subtitle text itself is set by the
* `options.text` property.
*/
Chart.prototype.setSubtitle = function (options, redraw) {
this.applyDescription('subtitle', options);
this.layOutTitles(redraw);
};
/**
* Set the caption options. This can also be done from {@link
* Chart#update}.
*
* @function Highcharts.Chart#setCaption
*
* @param {Highcharts.CaptionOptions} options
* New caption options. The caption text itself is set by the
* `options.text` property.
*/
Chart.prototype.setCaption = function (options, redraw) {
this.applyDescription('caption', options);
this.layOutTitles(redraw);
};
/**
* Display the zoom button, so users can reset zoom to the default view
* settings.
*
* @function Highcharts.Chart#showResetZoom
*
* @emits Highcharts.Chart#event:afterShowResetZoom
* @emits Highcharts.Chart#event:beforeShowResetZoom
*/
Chart.prototype.showResetZoom = function () {
var chart = this,
lang = Chart_defaultOptions.lang,
btnOptions = chart.zooming.resetButton,
theme = btnOptions.theme,
alignTo = (btnOptions.relativeTo === 'chart' ||
btnOptions.relativeTo === 'spacingBox' ?
null :
'plotBox');
/**
* @private
*/
function zoomOut() {
chart.zoomOut();
}
Chart_fireEvent(this, 'beforeShowResetZoom', null, function () {
chart.resetZoomButton = chart.renderer
.button(lang.resetZoom, null, null, zoomOut, theme)
.attr({
align: btnOptions.position.align,
title: lang.resetZoomTitle
})
.addClass('highcharts-reset-zoom')
.add()
.align(btnOptions.position, false, alignTo);
});
Chart_fireEvent(this, 'afterShowResetZoom');
};
/**
* Zoom the chart out after a user has zoomed in. See also
* [Axis.setExtremes](/class-reference/Highcharts.Axis#setExtremes).
*
* @function Highcharts.Chart#zoomOut
*
* @emits Highcharts.Chart#event:selection
*/
Chart.prototype.zoomOut = function () {
var _this = this;
Chart_fireEvent(this, 'selection', { resetSelection: true }, function () { return _this.transform({ reset: true, trigger: 'zoom' }); });
};
/**
* Pan the chart by dragging the mouse across the pane. This function is
* called on mouse move, and the distance to pan is computed from chartX
* compared to the first chartX position in the dragging operation.
*
* @private
* @function Highcharts.Chart#pan
* @param {Highcharts.PointerEventObject} event
* @param {string} panning
*/
Chart.prototype.pan = function (event, panning) {
var chart = this,
panningOptions = (typeof panning === 'object' ?
panning :
{
enabled: panning,
type: 'x'
}),
type = panningOptions.type,
axes = type && chart[{
x: 'xAxis',
xy: 'axes',
y: 'yAxis'
}[type]]
.filter(function (axis) {
return axis.options.panningEnabled && !axis.options.isInternal;
}), chartOptions = chart.options.chart;
if (chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.panning) {
chartOptions.panning = panningOptions;
}
Chart_fireEvent(this, 'pan', { originalEvent: event }, function () {
chart.transform({
axes: axes,
event: event,
to: {
x: event.chartX - (chart.mouseDownX || 0),
y: event.chartY - (chart.mouseDownY || 0)
},
trigger: 'pan'
});
Chart_css(chart.container, { cursor: 'move' });
});
};
/**
* Pan and scale the chart. Used internally by mouse-pan, touch-pan,
* touch-zoom, and mousewheel zoom.
*
* The main positioning logic is created around two imaginary boxes. What is
* currently within the `from` rectangle, should be transformed to fill up
* the `to` rectangle.
* - In a mouse zoom, the `from` rectangle is the selection, while the `to`
* rectangle is the full plot area.
* - In a touch zoom, the `from` rectangle is made up of the last two-finger
* touch, while the `to`` rectangle is the current touch.
* - In a mousewheel zoom, the `to` rectangle is a 10x10 px square,
* while the `to` rectangle reflects the scale around that.
*
* @private
* @function Highcharts.Chart#transform
*/
Chart.prototype.transform = function (params) {
var _a;
var _this = this;
var _b,
_c,
_d;
var _e = params.axes,
axes = _e === void 0 ? this.axes : _e,
event = params.event,
_f = params.from,
from = _f === void 0 ? {} : _f,
reset = params.reset,
selection = params.selection,
_g = params.to,
to = _g === void 0 ? {} : _g,
trigger = params.trigger,
_h = this,
inverted = _h.inverted,
time = _h.time;
var hasZoomed = false,
displayButton,
isAnyAxisPanning;
// Remove active points for shared tooltip
(_b = this.hoverPoints) === null || _b === void 0 ? void 0 : _b.forEach(function (point) { return point.setState(); });
for (var _i = 0, axes_3 = axes; _i < axes_3.length; _i++) {
var axis = axes_3[_i];
var horiz = axis.horiz, len = axis.len, _j = axis.minPointOffset, minPointOffset = _j === void 0 ? 0 : _j, options = axis.options, reversed = axis.reversed, wh = horiz ? 'width' : 'height', xy = horiz ? 'x' : 'y', toLength = Chart_pick(to[wh], axis.len), fromLength = Chart_pick(from[wh], axis.len),
// If fingers pinched very close on this axis, treat as pan
scale = Math.abs(toLength) < 10 ?
1 :
toLength / fromLength, fromCenter = (from[xy] || 0) + fromLength / 2 - axis.pos, toCenter = ((_c = to[xy]) !== null && _c !== void 0 ? _c : axis.pos) +
toLength / 2 - axis.pos, move = fromCenter - toCenter / scale, pointRangeDirection = (reversed && !inverted) ||
(!reversed && inverted) ?
-1 :
1, minPx = move;
// Zooming in multiple panes, zoom only in the pane that receives
// the input
if (!reset && (fromCenter < 0 || fromCenter > axis.len)) {
continue;
}
var newMin = axis.toValue(minPx,
true) +
// Don't apply offset for selection (#20784)
(selection || axis.isOrdinal ?
0 : minPointOffset * pointRangeDirection),
newMax = axis.toValue(minPx + len / scale,
true) -
(
// Don't apply offset for selection (#20784)
selection || axis.isOrdinal ?
0 :
((minPointOffset * pointRangeDirection) ||
// Polar zoom tests failed when this was not
// commented:
// (axis.isXAxis && axis.pointRangePadding) ||
0)),
allExtremes = axis.allExtremes;
if (newMin > newMax) {
_a = [newMax, newMin], newMin = _a[0], newMax = _a[1];
}
// General calculations of the full data extremes. It is calculated
// on the first call to transform, then reused for subsequent
// touch/pan calls. (#11315).
if (scale === 1 &&
!reset &&
axis.coll === 'yAxis' &&
!allExtremes) {
for (var _k = 0, _l = axis.series; _k < _l.length; _k++) {
var series = _l[_k];
var seriesExtremes = series.getExtremes(series.getProcessedData(true).modified
.getColumn('y') || [],
true);
allExtremes !== null && allExtremes !== void 0 ? allExtremes : (allExtremes = {
dataMin: Number.MAX_VALUE,
dataMax: -Number.MAX_VALUE
});
if (Chart_isNumber(seriesExtremes.dataMin) &&
Chart_isNumber(seriesExtremes.dataMax)) {
allExtremes.dataMin = Math.min(seriesExtremes.dataMin, allExtremes.dataMin);
allExtremes.dataMax = Math.max(seriesExtremes.dataMax, allExtremes.dataMax);
}
}
axis.allExtremes = allExtremes;
}
var _m = Chart_extend(axis.getExtremes(), allExtremes || {}), dataMin = _m.dataMin, dataMax = _m.dataMax, min = _m.min, max = _m.max, optionsMin = time.parse(options.min), optionsMax = time.parse(options.max),
// For boosted chart where data extremes are skipped
safeDataMin = dataMin !== null && dataMin !== void 0 ? dataMin : optionsMin, safeDataMax = dataMax !== null && dataMax !== void 0 ? dataMax : optionsMax, range = newMax - newMin, padRange = axis.categories ? 0 : Math.min(range, safeDataMax - safeDataMin), paddedMin = safeDataMin - padRange * (Chart_defined(optionsMin) ? 0 : options.minPadding), paddedMax = safeDataMax + padRange * (Chart_defined(optionsMax) ? 0 : options.maxPadding),
// We're allowed to zoom outside the data extremes if we're
// dealing with a bubble chart, if we're panning, or if we're
// pinching or mousewheeling in.
allowZoomOutside = axis.allowZoomOutside ||
scale === 1 ||
(trigger !== 'zoom' && scale > 1),
// Calculate the floor and the ceiling
floor = Math.min(optionsMin !== null && optionsMin !== void 0 ? optionsMin : paddedMin, paddedMin, allowZoomOutside ? min : paddedMin), ceiling = Math.max(optionsMax !== null && optionsMax !== void 0 ? optionsMax : paddedMax, paddedMax, allowZoomOutside ? max : paddedMax);
// It is not necessary to calculate extremes on ordinal axis,
// because they are already calculated, so we don't want to override
// them.
if (!axis.isOrdinal ||
axis.options.overscroll || // #21316
scale !== 1 ||
reset) {
// If the new range spills over, either to the min or max,
// adjust it.
if (newMin < floor) {
newMin = floor;
if (scale >= 1) {
newMax = newMin + range;
}
}
if (newMax > ceiling) {
newMax = ceiling;
if (scale >= 1) {
newMin = newMax - range;
}
}
// Set new extremes if they are actually new
if (reset || (axis.series.length &&
(newMin !== min || newMax !== max) &&
newMin >= floor &&
newMax <= ceiling)) {
if (selection) {
selection[axis.coll].push({
axis: axis,
min: newMin,
max: newMax
});
}
else {
// Temporarily flag the axis as `isPanning` in order to
// disallow certain axis padding options that would make
// panning/zooming hard. Reset and redraw after the
// operation has finished.
axis.isPanning = trigger !== 'zoom';
if (axis.isPanning) {
isAnyAxisPanning = true; // #21319
}
axis.setExtremes(reset ? void 0 : newMin, reset ? void 0 : newMax, false, false, { move: move, trigger: trigger, scale: scale });
if (!reset &&
(newMin > floor || newMax < ceiling) &&
trigger !== 'mousewheel') {
displayButton = true;
}
}
hasZoomed = true;
}
if (event) {
this[horiz ? 'mouseDownX' : 'mouseDownY'] =
event[horiz ? 'chartX' : 'chartY'];
}
}
}
if (hasZoomed) {
if (selection) {
Chart_fireEvent(this, 'selection', selection,
// Run transform again, this time without the selection data
// so that the transform is applied.
function () {
delete params.selection;
params.trigger = 'zoom';
_this.transform(params);
});
}
else {
// Show or hide the Reset zoom button, but not while panning
if (displayButton &&
!isAnyAxisPanning &&
!this.resetZoomButton) {
this.showResetZoom();
}
else if (!displayButton && this.resetZoomButton) {
this.resetZoomButton = this.resetZoomButton.destroy();
}
this.redraw(trigger === 'zoom' &&
((_d = this.options.chart.animation) !== null && _d !== void 0 ? _d : this.pointCount < 100));
}
}
return hasZoomed;
};
return Chart;
}());
Chart_extend(Chart.prototype, {
// Hook for adding callbacks in modules
callbacks: [],
/**
* These collections (arrays) implement `Chart.addSomething` method used in
* chart.update() to create new object in the collection. Equivalent for
* deleting is resolved by simple `Something.remove()`.
*
* Note: We need to define these references after initializers are bound to
* chart's prototype.
*
* @private
*/
collectionsWithInit: {
// CollectionName: [ initializingMethod, [extraArguments] ]
xAxis: [Chart.prototype.addAxis, [true]],
yAxis: [Chart.prototype.addAxis, [false]],
series: [Chart.prototype.addSeries]
},
/**
* These collections (arrays) implement update() methods with support for
* one-to-one option.
* @private
*/
collectionsWithUpdate: [
'xAxis',
'yAxis',
'series'
],
/**
* These properties cause isDirtyBox to be set to true when updating. Can be
* extended from plugins.
* @private
*/
propsRequireDirtyBox: [
'backgroundColor',
'borderColor',
'borderWidth',
'borderRadius',
'plotBackgroundColor',
'plotBackgroundImage',
'plotBorderColor',
'plotBorderWidth',
'plotShadow',
'shadow'
],
/**
* These properties require a full reflow of chart elements, best
* implemented through running `Chart.setSize` internally (#8190).
* @private
*/
propsRequireReflow: [
'margin',
'marginTop',
'marginRight',
'marginBottom',
'marginLeft',
'spacing',
'spacingTop',
'spacingRight',
'spacingBottom',
'spacingLeft'
],
/**
* These properties cause all series to be updated when updating. Can be
* extended from plugins.
* @private
*/
propsRequireUpdateSeries: [
'chart.inverted',
'chart.polar',
'chart.ignoreHiddenSeries',
'chart.type',
'colors',
'plotOptions',
'time',
'tooltip'
]
});
/* *
*
* Default Export
*
* */
/* harmony default export */ var Chart_Chart = (Chart);
/* *
*
* API Declarations
*
* */
/**
* Callback for chart constructors.
*
* @callback Highcharts.ChartCallbackFunction
*
* @param {Highcharts.Chart} chart
* Created chart.
*/
/**
* Format a number and return a string based on input settings.
*
* @callback Highcharts.NumberFormatterCallbackFunction
*
* @param {number} number
* The input number to format.
*
* @param {number} decimals
* The amount of decimals. A value of -1 preserves the amount in the
* input number.
*
* @param {string} [decimalPoint]
* The decimal point, defaults to the one given in the lang options, or
* a dot.
*
* @param {string} [thousandsSep]
* The thousands separator, defaults to the one given in the lang
* options, or a space character.
*
* @return {string} The formatted number.
*/
/**
* The chart title. The title has an `update` method that allows modifying the
* options directly or indirectly via `chart.update`.
*
* @interface Highcharts.TitleObject
* @extends Highcharts.SVGElement
*/ /**
* Modify options for the title.
*
* @function Highcharts.TitleObject#update
*
* @param {Highcharts.TitleOptions} titleOptions
* Options to modify.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the title is altered. If doing more
* operations on the chart, it is a good idea to set redraw to false and
* call {@link Chart#redraw} after.
*/
/**
* The chart subtitle. The subtitle has an `update` method that
* allows modifying the options directly or indirectly via
* `chart.update`.
*
* @interface Highcharts.SubtitleObject
* @extends Highcharts.SVGElement
*/ /**
* Modify options for the subtitle.
*
* @function Highcharts.SubtitleObject#update
*
* @param {Highcharts.SubtitleOptions} subtitleOptions
* Options to modify.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the subtitle is altered. If doing
* more operations on the chart, it is a good idea to set redraw to false
* and call {@link Chart#redraw} after.
*/
/**
* The chart caption. The caption has an `update` method that
* allows modifying the options directly or indirectly via
* `chart.update`.
*
* @interface Highcharts.CaptionObject
* @extends Highcharts.SVGElement
*/ /**
* Modify options for the caption.
*
* @function Highcharts.CaptionObject#update
*
* @param {Highcharts.CaptionOptions} captionOptions
* Options to modify.
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart after the caption is altered. If doing
* more operations on the chart, it is a good idea to set redraw to false
* and call {@link Chart#redraw} after.
*/
/**
* @interface Highcharts.ChartIsInsideOptionsObject
*/ /**
* @name Highcharts.ChartIsInsideOptionsObject#axis
* @type {Highcharts.Axis|undefined}
*/ /**
* @name Highcharts.ChartIsInsideOptionsObject#ignoreX
* @type {boolean|undefined}
*/ /**
* @name Highcharts.ChartIsInsideOptionsObject#ignoreY
* @type {boolean|undefined}
*/ /**
* @name Highcharts.ChartIsInsideOptionsObject#inverted
* @type {boolean|undefined}
*/ /**
* @name Highcharts.ChartIsInsideOptionsObject#paneCoordinates
* @type {boolean|undefined}
*/ /**
* @name Highcharts.ChartIsInsideOptionsObject#series
* @type {Highcharts.Series|undefined}
*/ /**
* @name Highcharts.ChartIsInsideOptionsObject#visiblePlotOnly
* @type {boolean|undefined}
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Extensions/ScrollablePlotArea.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* Highcharts feature to make the Y axis stay fixed when scrolling the chart
* horizontally on mobile devices. Supports left and right side axes.
*/
var ScrollablePlotArea_stop = AnimationUtilities.stop;
var ScrollablePlotArea_composed = Core_Globals.composed;
var ScrollablePlotArea_addEvent = Core_Utilities.addEvent, ScrollablePlotArea_createElement = Core_Utilities.createElement, ScrollablePlotArea_css = Core_Utilities.css, ScrollablePlotArea_defined = Core_Utilities.defined, ScrollablePlotArea_erase = Core_Utilities.erase, ScrollablePlotArea_merge = Core_Utilities.merge, ScrollablePlotArea_pushUnique = Core_Utilities.pushUnique;
/* *
*
* Functions
*
* */
/** @private */
function onChartRender() {
var scrollablePlotArea = this.scrollablePlotArea;
if ((this.scrollablePixelsX || this.scrollablePixelsY) &&
!scrollablePlotArea) {
this.scrollablePlotArea = scrollablePlotArea = new ScrollablePlotArea(this);
}
scrollablePlotArea === null || scrollablePlotArea === void 0 ? void 0 : scrollablePlotArea.applyFixed();
}
/** @private */
function markDirty() {
if (this.chart.scrollablePlotArea) {
this.chart.scrollablePlotArea.isDirty = true;
}
}
var ScrollablePlotArea = /** @class */ (function () {
function ScrollablePlotArea(chart) {
var _a,
_b;
var chartOptions = chart.options.chart,
Renderer = Renderer_RendererRegistry.getRendererType(),
scrollableOptions = chartOptions.scrollablePlotArea || {},
moveFixedElements = this.moveFixedElements.bind(this),
styles = {
WebkitOverflowScrolling: 'touch',
overflowX: 'hidden',
overflowY: 'hidden'
};
if (chart.scrollablePixelsX) {
styles.overflowX = 'auto';
}
if (chart.scrollablePixelsY) {
styles.overflowY = 'auto';
}
this.chart = chart;
// Insert a container with relative position that scrolling and fixed
// container renders to (#10555)
var parentDiv = this.parentDiv = ScrollablePlotArea_createElement('div', {
className: 'highcharts-scrolling-parent'
}, {
position: 'relative'
},
chart.renderTo),
// Add the necessary divs to provide scrolling
scrollingContainer = this.scrollingContainer = ScrollablePlotArea_createElement('div', {
'className': 'highcharts-scrolling'
},
styles,
parentDiv),
innerContainer = this.innerContainer = ScrollablePlotArea_createElement('div', {
'className': 'highcharts-inner-container'
},
void 0,
scrollingContainer),
fixedDiv = this.fixedDiv = ScrollablePlotArea_createElement('div', {
className: 'highcharts-fixed'
}, {
position: 'absolute',
overflow: 'hidden',
pointerEvents: 'none',
zIndex: (((_a = chartOptions.style) === null || _a === void 0 ? void 0 : _a.zIndex) || 0) + 2,
top: 0
},
void 0,
true),
fixedRenderer = this.fixedRenderer = new Renderer(fixedDiv,
chart.chartWidth,
chart.chartHeight,
chartOptions.style);
// Mask
this.mask = fixedRenderer
.path()
.attr({
fill: chartOptions.backgroundColor || '#fff',
'fill-opacity': (_b = scrollableOptions.opacity) !== null && _b !== void 0 ? _b : 0.85,
zIndex: -1
})
.addClass('highcharts-scrollable-mask')
.add();
scrollingContainer.parentNode.insertBefore(fixedDiv, scrollingContainer);
ScrollablePlotArea_css(chart.renderTo, { overflow: 'visible' });
ScrollablePlotArea_addEvent(chart, 'afterShowResetZoom', moveFixedElements);
ScrollablePlotArea_addEvent(chart, 'afterApplyDrilldown', moveFixedElements);
ScrollablePlotArea_addEvent(chart, 'afterLayOutTitles', moveFixedElements);
// On scroll, reset the chart position because it applies to the
// scrolled container
var lastHoverPoint;
ScrollablePlotArea_addEvent(scrollingContainer, 'scroll', function () {
var pointer = chart.pointer,
hoverPoint = chart.hoverPoint;
if (pointer) {
delete pointer.chartPosition;
if (hoverPoint) {
lastHoverPoint = hoverPoint;
}
pointer.runPointActions(void 0, lastHoverPoint, true);
}
});
// Now move the container inside
innerContainer.appendChild(chart.container);
}
ScrollablePlotArea.compose = function (AxisClass, ChartClass, SeriesClass) {
var _this = this;
if (ScrollablePlotArea_pushUnique(ScrollablePlotArea_composed, this.compose)) {
ScrollablePlotArea_addEvent(AxisClass, 'afterInit', markDirty);
ScrollablePlotArea_addEvent(ChartClass, 'afterSetChartSize', function (e) {
return _this.afterSetSize(e.target, e);
});
ScrollablePlotArea_addEvent(ChartClass, 'render', onChartRender);
ScrollablePlotArea_addEvent(SeriesClass, 'show', markDirty);
}
};
ScrollablePlotArea.afterSetSize = function (chart, e) {
var _a = chart.options.chart.scrollablePlotArea || {},
minWidth = _a.minWidth,
minHeight = _a.minHeight,
clipBox = chart.clipBox,
plotBox = chart.plotBox,
inverted = chart.inverted,
renderer = chart.renderer;
var scrollablePixelsX,
scrollablePixelsY,
recalculateHoriz;
if (!renderer.forExport) {
// The amount of pixels to scroll, the difference between chart
// width and scrollable width
if (minWidth) {
chart.scrollablePixelsX = scrollablePixelsX = Math.max(0, minWidth - chart.chartWidth);
if (scrollablePixelsX) {
chart.scrollablePlotBox = ScrollablePlotArea_merge(chart.plotBox);
plotBox.width = chart.plotWidth += scrollablePixelsX;
clipBox[inverted ? 'height' : 'width'] += scrollablePixelsX;
recalculateHoriz = true;
}
// Currently we can only do either X or Y
}
else if (minHeight) {
chart.scrollablePixelsY = scrollablePixelsY = Math.max(0, minHeight - chart.chartHeight);
if (ScrollablePlotArea_defined(scrollablePixelsY)) {
chart.scrollablePlotBox = ScrollablePlotArea_merge(chart.plotBox);
plotBox.height = chart.plotHeight += scrollablePixelsY;
clipBox[inverted ? 'width' : 'height'] += scrollablePixelsY;
recalculateHoriz = false;
}
}
if (ScrollablePlotArea_defined(recalculateHoriz) && !e.skipAxes) {
for (var _i = 0, _b = chart.axes; _i < _b.length; _i++) {
var axis = _b[_i];
// Apply the corrected plot size to the axes of the other
// orientation than the scrolling direction
if (axis.horiz === recalculateHoriz ||
// Or parallel axes
(chart.hasParallelCoordinates && axis.coll === 'yAxis')) {
axis.setAxisSize();
axis.setAxisTranslation();
}
}
}
}
};
ScrollablePlotArea.prototype.applyFixed = function () {
var _a;
var _b = this,
chart = _b.chart,
fixedRenderer = _b.fixedRenderer,
isDirty = _b.isDirty,
scrollingContainer = _b.scrollingContainer,
axisOffset = chart.axisOffset,
chartWidth = chart.chartWidth,
chartHeight = chart.chartHeight,
container = chart.container,
plotHeight = chart.plotHeight,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth,
_c = chart.scrollablePixelsX,
scrollablePixelsX = _c === void 0 ? 0 : _c,
_d = chart.scrollablePixelsY,
scrollablePixelsY = _d === void 0 ? 0 : _d,
chartOptions = chart.options.chart,
scrollableOptions = chartOptions.scrollablePlotArea || {},
_e = scrollableOptions.scrollPositionX,
scrollPositionX = _e === void 0 ? 0 : _e,
_f = scrollableOptions.scrollPositionY,
scrollPositionY = _f === void 0 ? 0 : _f,
scrollableWidth = chartWidth + scrollablePixelsX,
scrollableHeight = chartHeight + scrollablePixelsY;
// Set the size of the fixed renderer to the visible width
fixedRenderer.setSize(chartWidth, chartHeight);
if (isDirty !== null && isDirty !== void 0 ? isDirty : true) {
this.isDirty = false;
this.moveFixedElements();
}
// Increase the size of the scrollable renderer and background
ScrollablePlotArea_stop(chart.container);
ScrollablePlotArea_css(container, {
width: "" + scrollableWidth + "px",
height: "" + scrollableHeight + "px"
});
chart.renderer.boxWrapper.attr({
width: scrollableWidth,
height: scrollableHeight,
viewBox: [0, 0, scrollableWidth, scrollableHeight].join(' ')
});
(_a = chart.chartBackground) === null || _a === void 0 ? void 0 : _a.attr({
width: scrollableWidth,
height: scrollableHeight
});
ScrollablePlotArea_css(scrollingContainer, {
width: "" + chartWidth + "px",
height: "" + chartHeight + "px"
});
// Set scroll position the first time (this.isDirty was undefined at
// the top of this function)
if (!ScrollablePlotArea_defined(isDirty)) {
scrollingContainer.scrollLeft = scrollablePixelsX * scrollPositionX;
scrollingContainer.scrollTop = scrollablePixelsY * scrollPositionY;
}
// Mask behind the left and right side
var maskTop = plotTop - axisOffset[0] - 1,
maskLeft = plotLeft - axisOffset[3] - 1,
maskBottom = plotTop + plotHeight + axisOffset[2] + 1,
maskRight = plotLeft + plotWidth + axisOffset[1] + 1,
maskPlotRight = plotLeft + plotWidth - scrollablePixelsX,
maskPlotBottom = plotTop + plotHeight - scrollablePixelsY;
var d = [['M', 0, 0]];
if (scrollablePixelsX) {
d = [
// Left side
['M', 0, maskTop],
['L', plotLeft - 1, maskTop],
['L', plotLeft - 1, maskBottom],
['L', 0, maskBottom],
['Z'],
// Right side
['M', maskPlotRight, maskTop],
['L', chartWidth, maskTop],
['L', chartWidth, maskBottom],
['L', maskPlotRight, maskBottom],
['Z']
];
}
else if (scrollablePixelsY) {
d = [
// Top side
['M', maskLeft, 0],
['L', maskLeft, plotTop - 1],
['L', maskRight, plotTop - 1],
['L', maskRight, 0],
['Z'],
// Bottom side
['M', maskLeft, maskPlotBottom],
['L', maskLeft, chartHeight],
['L', maskRight, chartHeight],
['L', maskRight, maskPlotBottom],
['Z']
];
}
if (chart.redrawTrigger !== 'adjustHeight') {
this.mask.attr({ d: d });
}
};
/**
* These elements are moved over to the fixed renderer and stay fixed when
* the user scrolls the chart
* @private
*/
ScrollablePlotArea.prototype.moveFixedElements = function () {
var _a = this.chart,
container = _a.container,
inverted = _a.inverted,
scrollablePixelsX = _a.scrollablePixelsX,
scrollablePixelsY = _a.scrollablePixelsY,
fixedRenderer = this.fixedRenderer,
fixedSelectors = ScrollablePlotArea.fixedSelectors;
var axisClass;
if (scrollablePixelsX && !inverted) {
axisClass = '.highcharts-yaxis';
}
else if (scrollablePixelsX && inverted) {
axisClass = '.highcharts-xaxis';
}
else if (scrollablePixelsY && !inverted) {
axisClass = '.highcharts-xaxis';
}
else if (scrollablePixelsY && inverted) {
axisClass = '.highcharts-yaxis';
}
if (axisClass && !(this.chart.hasParallelCoordinates &&
axisClass === '.highcharts-yaxis')) {
// Add if not added yet
for (var _i = 0, _b = [
"" + axisClass + ":not(.highcharts-radial-axis)",
"" + axisClass + "-labels:not(.highcharts-radial-axis-labels)"
]; _i < _b.length; _i++) {
var className = _b[_i];
ScrollablePlotArea_pushUnique(fixedSelectors, className);
}
}
else {
// Clear all axis related selectors
for (var _c = 0, _d = [
'.highcharts-xaxis',
'.highcharts-yaxis'
]; _c < _d.length; _c++) {
var classBase = _d[_c];
for (var _e = 0, _f = [
"" + classBase + ":not(.highcharts-radial-axis)",
"" + classBase + "-labels:not(.highcharts-radial-axis-labels)"
]; _e < _f.length; _e++) {
var className = _f[_e];
ScrollablePlotArea_erase(fixedSelectors, className);
}
}
}
for (var _g = 0, fixedSelectors_1 = fixedSelectors; _g < fixedSelectors_1.length; _g++) {
var className = fixedSelectors_1[_g];
[].forEach.call(container.querySelectorAll(className), function (elem) {
(elem.namespaceURI === fixedRenderer.SVG_NS ?
fixedRenderer.box :
fixedRenderer.box.parentNode).appendChild(elem);
elem.style.pointerEvents = 'auto';
});
}
};
ScrollablePlotArea.fixedSelectors = [
'.highcharts-breadcrumbs-group',
'.highcharts-contextbutton',
'.highcharts-caption',
'.highcharts-credits',
'.highcharts-drillup-button',
'.highcharts-legend',
'.highcharts-legend-checkbox',
'.highcharts-navigator-series',
'.highcharts-navigator-xaxis',
'.highcharts-navigator-yaxis',
'.highcharts-navigator',
'.highcharts-range-selector-group',
'.highcharts-reset-zoom',
'.highcharts-scrollbar',
'.highcharts-subtitle',
'.highcharts-title'
];
return ScrollablePlotArea;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Extensions_ScrollablePlotArea = (ScrollablePlotArea);
/* *
*
* API Declarations
*
* */
/**
* Options for a scrollable plot area. This feature provides a minimum size for
* the plot area of the chart. If the size gets smaller than this, typically
* on mobile devices, a native browser scrollbar is presented. This scrollbar
* provides smooth scrolling for the contents of the plot area, whereas the
* title, legend and unaffected axes are fixed.
*
* Since v7.1.2, a scrollable plot area can be defined for either horizontal or
* vertical scrolling, depending on whether the `minWidth` or `minHeight`
* option is set.
*
* @sample highcharts/chart/scrollable-plotarea
* Scrollable plot area
* @sample highcharts/chart/scrollable-plotarea-vertical
* Vertically scrollable plot area
* @sample {gantt} gantt/chart/scrollable-plotarea-vertical
* Gantt chart with vertically scrollable plot area
*
* @since 6.1.0
* @product highcharts gantt
* @apioption chart.scrollablePlotArea
*/
/**
* The minimum height for the plot area. If it gets smaller than this, the plot
* area will become scrollable.
*
* @type {number}
* @since 7.1.2
* @apioption chart.scrollablePlotArea.minHeight
*/
/**
* The minimum width for the plot area. If it gets smaller than this, the plot
* area will become scrollable.
*
* @type {number}
* @since 6.1.0
* @apioption chart.scrollablePlotArea.minWidth
*/
/**
* The initial scrolling position of the scrollable plot area. Ranges from 0 to
* 1, where 0 aligns the plot area to the left and 1 aligns it to the right.
* Typically we would use 1 if the chart has right aligned Y axes.
*
* @type {number}
* @since 6.1.0
* @apioption chart.scrollablePlotArea.scrollPositionX
*/
/**
* The initial scrolling position of the scrollable plot area. Ranges from 0 to
* 1, where 0 aligns the plot area to the top and 1 aligns it to the bottom.
*
* @type {number}
* @since 7.1.2
* @apioption chart.scrollablePlotArea.scrollPositionY
*/
/**
* The opacity of mask applied on one of the sides of the plot
* area.
*
* @sample {highcharts} highcharts/chart/scrollable-plotarea-opacity
* Disabled opacity for the mask
*
* @type {number}
* @default 0.85
* @since 7.1.1
* @apioption chart.scrollablePlotArea.opacity
*/
(''); // Keep doclets above in transpiled file
;// ./code/es5/es-modules/Core/Axis/Stacking/StackItem.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var StackItem_format = Core_Templating.format;
var StackItem_Series = Series_SeriesRegistry.series;
var StackItem_destroyObjectProperties = Core_Utilities.destroyObjectProperties, StackItem_fireEvent = Core_Utilities.fireEvent, StackItem_getAlignFactor = Core_Utilities.getAlignFactor, StackItem_isNumber = Core_Utilities.isNumber, StackItem_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/**
* The class for stacks. Each stack, on a specific X value and either negative
* or positive, has its own stack item.
* @private
*/
var StackItem = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function StackItem(axis, options, negativeValue, x, stackOption) {
var inverted = axis.chart.inverted,
reversed = axis.reversed;
this.axis = axis;
// The stack goes to the left either if the stack has negative value
// or when axis is reversed. XOR operator.
var isNegative = (this.isNegative = !!negativeValue !== !!reversed);
// Save the options to be able to style the label
this.options = options = options || {};
// Save the x value to be able to position the label later
this.x = x;
// Initialize total value
this.total = null;
this.cumulative = null;
// This will keep each points' extremes stored by series.index and point
// index
this.points = {};
this.hasValidPoints = false;
// Save the stack option on the series configuration object,
// and whether to treat it as percent
this.stack = stackOption;
this.leftCliff = 0;
this.rightCliff = 0;
// The align options and text align varies on whether the stack is
// negative and if the chart is inverted or not.
// First test the user supplied value, then use the dynamic.
this.alignOptions = {
align: options.align ||
(inverted ? (isNegative ? 'left' : 'right') : 'center'),
verticalAlign: options.verticalAlign ||
(inverted ? 'middle' : isNegative ? 'bottom' : 'top'),
y: options.y,
x: options.x
};
this.textAlign =
options.textAlign ||
(inverted ? (!isNegative ? 'left' : 'right') : 'center');
}
/* *
*
* Functions
*
* */
/**
* @private
*/
StackItem.prototype.destroy = function () {
StackItem_destroyObjectProperties(this, this.axis);
};
/**
* Renders the stack total label and adds it to the stack label group.
* @private
*/
StackItem.prototype.render = function (group) {
var chart = this.axis.chart,
options = this.options,
formatOption = options.format,
// Format the text in the label.
str = formatOption ?
StackItem_format(formatOption,
this,
chart) :
options.formatter.call(this);
// Change the text to reflect the new total and set visibility to hidden
// in case the series is hidden
if (this.label) {
this.label.attr({ text: str, visibility: 'hidden' });
}
else {
// Create new label
this.label = chart.renderer.label(str, null, void 0, options.shape, void 0, void 0, options.useHTML, false, 'stack-labels');
var attr = {
r: options.borderRadius || 0,
text: str,
// Set default padding to 5 as it is in datalabels #12308
padding: StackItem_pick(options.padding, 5),
visibility: 'hidden' // Hidden until setOffset is called
};
if (!chart.styledMode) {
attr.fill = options.backgroundColor;
attr.stroke = options.borderColor;
attr['stroke-width'] = options.borderWidth;
this.label.css(options.style || {});
}
this.label.attr(attr);
if (!this.label.added) {
this.label.add(group); // Add to the labels-group
}
}
// Rank it higher than data labels (#8742)
this.label.labelrank = chart.plotSizeY;
StackItem_fireEvent(this, 'afterRender');
};
/**
* Sets the offset that the stack has from the x value and repositions the
* label.
* @private
*/
StackItem.prototype.setOffset = function (xOffset, width, boxBottom, boxTop, defaultX, xAxis) {
var _a = this,
alignOptions = _a.alignOptions,
axis = _a.axis,
label = _a.label,
options = _a.options,
textAlign = _a.textAlign,
chart = axis.chart,
stackBox = this.getStackBox({
xOffset: xOffset,
width: width,
boxBottom: boxBottom,
boxTop: boxTop,
defaultX: defaultX,
xAxis: xAxis
}),
verticalAlign = alignOptions.verticalAlign;
if (label && stackBox) {
var labelBox = label.getBBox(void 0, 0),
padding = label.padding;
var isJustify = StackItem_pick(options.overflow, 'justify') === 'justify',
visible = void 0;
// Reset alignOptions property after justify #12337
alignOptions.x = options.x || 0;
alignOptions.y = options.y || 0;
// Calculate the adjusted Stack position, to take into consideration
// The size if the labelBox and vertical alignment as
// well as the text alignment. It's need to be done to work with
// default SVGLabel.align/justify methods.
var _b = this.adjustStackPosition({
labelBox: labelBox,
verticalAlign: verticalAlign,
textAlign: textAlign
}),
x = _b.x,
y = _b.y;
stackBox.x -= x;
stackBox.y -= y;
// Align the label to the adjusted box.
label.align(alignOptions, false, stackBox);
// Check if label is inside the plotArea #12294
visible = chart.isInsidePlot(label.alignAttr.x + alignOptions.x + x, label.alignAttr.y + alignOptions.y + y);
if (!visible) {
isJustify = false;
}
if (isJustify) {
// Justify stackLabel into the alignBox
StackItem_Series.prototype.justifyDataLabel.call(axis, label, alignOptions, label.alignAttr, labelBox, stackBox);
}
// Add attr to avoid the default animation of justifyDataLabel.
// Also add correct rotation with its rotation origin. #15129
label.attr({
x: label.alignAttr.x,
y: label.alignAttr.y,
rotation: options.rotation,
rotationOriginX: labelBox.width *
StackItem_getAlignFactor(options.textAlign || 'center'),
rotationOriginY: labelBox.height / 2
});
// Check if the dataLabel should be visible.
if (StackItem_pick(!isJustify && options.crop, true)) {
visible =
StackItem_isNumber(label.x) &&
StackItem_isNumber(label.y) &&
chart.isInsidePlot(label.x - padding + (label.width || 0), label.y) &&
chart.isInsidePlot(label.x + padding, label.y);
}
label[visible ? 'show' : 'hide']();
}
StackItem_fireEvent(this, 'afterSetOffset', { xOffset: xOffset, width: width });
};
/**
* Adjust the stack BBox position, to take into consideration the alignment
* of the dataLabel. This is necessary to make the stackDataLabel work with
* core methods like `SVGLabel.adjust` and `Series.justifyDataLabel`.
* @param AdjustStackPositionProps
* @return {{x: number, y: number}} Adjusted BBox position of the stack.
*/
StackItem.prototype.adjustStackPosition = function (_a) {
var labelBox = _a.labelBox,
verticalAlign = _a.verticalAlign,
textAlign = _a.textAlign;
return {
x: labelBox.width / 2 +
(labelBox.width / 2) * (2 * StackItem_getAlignFactor(textAlign) - 1),
y: (labelBox.height / 2) * 2 * (1 - StackItem_getAlignFactor(verticalAlign))
};
};
/**
* Get the bbox of the stack.
* @private
* @function Highcharts.StackItem#getStackBox
* @return {BBoxObject} The x, y, height, width of the stack.
*/
StackItem.prototype.getStackBox = function (stackBoxProps) {
var stackItem = this,
axis = this.axis,
chart = axis.chart,
boxTop = stackBoxProps.boxTop,
defaultX = stackBoxProps.defaultX,
xOffset = stackBoxProps.xOffset,
width = stackBoxProps.width,
boxBottom = stackBoxProps.boxBottom,
totalStackValue = axis.stacking.usePercentage ?
100 :
StackItem_pick(boxTop,
this.total, 0),
y = axis.toPixels(totalStackValue),
xAxis = stackBoxProps.xAxis || chart.xAxis[0],
x = StackItem_pick(defaultX,
xAxis.translate(this.x)) + xOffset,
yZero = axis.toPixels(boxBottom ||
(StackItem_isNumber(axis.min) &&
axis.logarithmic &&
axis.logarithmic.lin2log(axis.min)) ||
0),
height = Math.abs(y - yZero),
inverted = chart.inverted,
neg = stackItem.isNegative;
return inverted ?
{
x: (neg ? y : y - height) - chart.plotLeft,
y: xAxis.height - x - width + xAxis.top - chart.plotTop,
width: height,
height: width
} : {
x: x + xAxis.transB - chart.plotLeft,
y: (neg ? y - height : y) - chart.plotTop,
width: width,
height: height
};
};
return StackItem;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Stacking_StackItem = (StackItem);
/* *
*
* API Declarations
*
* */
/**
* Stack of data points
*
* @product highcharts
*
* @interface Highcharts.StackItemObject
*/ /**
* Alignment settings
* @name Highcharts.StackItemObject#alignOptions
* @type {Highcharts.AlignObject}
*/ /**
* Related axis
* @name Highcharts.StackItemObject#axis
* @type {Highcharts.Axis}
*/ /**
* Cumulative value of the stacked data points
* @name Highcharts.StackItemObject#cumulative
* @type {number}
*/ /**
* True if on the negative side
* @name Highcharts.StackItemObject#isNegative
* @type {boolean}
*/ /**
* Related SVG element
* @name Highcharts.StackItemObject#label
* @type {Highcharts.SVGElement}
*/ /**
* Related stack options
* @name Highcharts.StackItemObject#options
* @type {Highcharts.YAxisStackLabelsOptions}
*/ /**
* Total value of the stacked data points
* @name Highcharts.StackItemObject#total
* @type {number}
*/ /**
* Shared x value of the stack
* @name Highcharts.StackItemObject#x
* @type {number}
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Axis/Stacking/StackingAxis.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var StackingAxis_getDeferredAnimation = AnimationUtilities.getDeferredAnimation;
var seriesProto = Series_SeriesRegistry.series.prototype;
var StackingAxis_addEvent = Core_Utilities.addEvent, StackingAxis_correctFloat = Core_Utilities.correctFloat, StackingAxis_defined = Core_Utilities.defined, StackingAxis_destroyObjectProperties = Core_Utilities.destroyObjectProperties, StackingAxis_fireEvent = Core_Utilities.fireEvent, StackingAxis_isNumber = Core_Utilities.isNumber, StackingAxis_objectEach = Core_Utilities.objectEach, StackingAxis_pick = Core_Utilities.pick;
/* *
*
* Functions
*
* */
/**
* Generate stacks for each series and calculate stacks total values
*
* @private
* @function Highcharts.Chart#getStacks
*/
function chartGetStacks() {
var chart = this,
inverted = chart.inverted;
// Reset stacks for each axis
chart.axes.forEach(function (axis) {
if (axis.stacking && axis.stacking.stacks && axis.hasVisibleSeries) {
axis.stacking.oldStacks = axis.stacking.stacks;
}
});
chart.series.forEach(function (series) {
var xAxisOptions = series.xAxis && series.xAxis.options || {};
if (series.options.stacking && series.reserveSpace()) {
series.stackKey = [
series.type,
StackingAxis_pick(series.options.stack, ''),
inverted ? xAxisOptions.top : xAxisOptions.left,
inverted ? xAxisOptions.height : xAxisOptions.width
].join(',');
}
});
}
/**
* @private
*/
function onAxisDestroy() {
var _a;
var stacking = this.stacking;
if (stacking) {
var stacks_1 = stacking.stacks;
// Destroy each stack total
StackingAxis_objectEach(stacks_1, function (stack, stackKey) {
StackingAxis_destroyObjectProperties(stack);
delete stacks_1[stackKey];
});
(_a = stacking.stackTotalGroup) === null || _a === void 0 ? void 0 : _a.destroy();
}
}
/**
* @private
*/
function onAxisInit() {
if (!this.stacking) {
this.stacking = new AxisAdditions(this);
}
}
/**
* Get stack indicator, according to it's x-value, to determine points with the
* same x-value
*
* @private
* @function Highcharts.Series#getStackIndicator
*/
function seriesGetStackIndicator(stackIndicator, x, index, key) {
// Update stack indicator, when:
// first point in a stack || x changed || stack type (negative vs positive)
// changed:
if (!StackingAxis_defined(stackIndicator) ||
stackIndicator.x !== x ||
(key && stackIndicator.stackKey !== key)) {
stackIndicator = {
x: x,
index: 0,
key: key,
stackKey: key
};
}
else {
stackIndicator.index++;
}
stackIndicator.key = [index, x, stackIndicator.index].join(',');
return stackIndicator;
}
/**
* Iterate over all stacks and compute the absolute values to percent
*
* @private
* @function Highcharts.Series#modifyStacks
*/
function seriesModifyStacks() {
var series = this, yAxis = series.yAxis, stackKey = series.stackKey || '', stacks = yAxis.stacking.stacks, processedXData = series.getColumn('x', true), stacking = series.options.stacking, stacker = series[stacking + 'Stacker'];
var stackIndicator;
if (stacker) { // Modifier function exists (Series.percentStacker etc.)
[stackKey, '-' + stackKey].forEach(function (key) {
var _a;
var i = processedXData.length,
x,
stackItem,
pointExtremes;
while (i--) {
x = processedXData[i];
stackIndicator = series.getStackIndicator(stackIndicator, x, series.index, key);
stackItem = (_a = stacks[key]) === null || _a === void 0 ? void 0 : _a[x];
pointExtremes = stackItem === null || stackItem === void 0 ? void 0 : stackItem.points[stackIndicator.key || ''];
if (pointExtremes) {
stacker.call(series, pointExtremes, stackItem, i);
}
}
});
}
}
/**
* Modifier function for percent stacks. Blows up the stack to 100%.
*
* @private
* @function Highcharts.Series#percentStacker
*/
function seriesPercentStacker(pointExtremes, stack, i) {
var totalFactor = stack.total ? 100 / stack.total : 0;
// Y bottom value
pointExtremes[0] = StackingAxis_correctFloat(pointExtremes[0] * totalFactor);
// Y value
pointExtremes[1] = StackingAxis_correctFloat(pointExtremes[1] * totalFactor);
this.stackedYData[i] = pointExtremes[1];
}
/**
* Set grouped points in a stack-like object. When `centerInCategory` is true,
* and `stacking` is not enabled, we need a pseudo (horizontal) stack in order
* to handle grouping of points within the same category.
*
* @private
* @function Highcharts.Series#setGroupedPoints
* @return {void}
*/
function seriesSetGroupedPoints(axis) {
// Only series types supporting centerInCategory need to do this. That also
// applies to resetting (#20221).
if (this.is('column') || this.is('columnrange')) {
if (this.options.centerInCategory &&
// With only one series, we don't need to consider centerInCategory
this.chart.series.length > 1) {
seriesProto.setStackedPoints.call(this, axis, 'group');
// After updating, if we now have proper stacks, we must delete the
// group pseudo stacks (#14980)
}
else {
axis.stacking.resetStacks();
}
}
}
/**
* Adds series' points value to corresponding stack
*
* @private
* @function Highcharts.Series#setStackedPoints
*/
function seriesSetStackedPoints(axis, stackingParam) {
var _a,
_b;
var type = stackingParam || this.options.stacking;
if (!type ||
!this.reserveSpace() ||
// Group stacks (centerInCategory) belong on the x-axis, other stacks on
// the y-axis.
({ group: 'xAxis' }[type] || 'yAxis') !== axis.coll) {
return;
}
var series = this, xData = series.getColumn('x', true), yData = series.getColumn(series.pointValKey || 'y', true), stackedYData = [], yDataLength = yData.length, seriesOptions = series.options, threshold = seriesOptions.threshold || 0, stackThreshold = seriesOptions.startFromThreshold ? threshold : 0, stackOption = seriesOptions.stack, stackKey = stackingParam ?
"" + series.type + ",".concat(type) : (series.stackKey || ''), negKey = '-' + stackKey, negStacks = series.negStacks, stacking = axis.stacking, stacks = stacking.stacks, oldStacks = stacking.oldStacks;
var stackIndicator,
isNegative,
stack,
other,
key,
pointKey,
i;
stacking.stacksTouched += 1;
// Loop over the non-null y values and read them into a local array
for (i = 0; i < yDataLength; i++) {
var x = xData[i] || 0,
y = yData[i],
yNumber = StackingAxis_isNumber(y) && y || 0;
stackIndicator = series.getStackIndicator(stackIndicator, x, series.index);
pointKey = stackIndicator.key || '';
// Read stacked values into a stack based on the x value,
// the sign of y and the stack key. Stacking is also handled for null
// values (#739)
isNegative = negStacks && yNumber < (stackThreshold ? 0 : threshold);
key = isNegative ? negKey : stackKey;
// Create empty object for this stack if it doesn't exist yet
if (!stacks[key]) {
stacks[key] = {};
}
// Initialize StackItem for this x
if (!stacks[key][x]) {
if ((_a = oldStacks[key]) === null || _a === void 0 ? void 0 : _a[x]) {
stacks[key][x] = oldStacks[key][x];
stacks[key][x].total = null;
}
else {
stacks[key][x] = new Stacking_StackItem(axis, axis.options.stackLabels, !!isNegative, x, stackOption);
}
}
// If the StackItem doesn't exist, create it first
stack = stacks[key][x];
if (y !== null) {
stack.points[pointKey] = stack.points[series.index] = [
StackingAxis_pick(stack.cumulative, stackThreshold)
];
// Record the base of the stack
if (!StackingAxis_defined(stack.cumulative)) {
stack.base = pointKey;
}
stack.touched = stacking.stacksTouched;
// In area charts, if there are multiple points on the same X value,
// let the area fill the full span of those points
if (stackIndicator.index > 0 && series.singleStacks === false) {
stack.points[pointKey][0] = stack.points[series.index + ',' + x + ',0'][0];
}
// When updating to null, reset the point stack (#7493)
}
else {
delete stack.points[pointKey];
delete stack.points[series.index];
}
// Add value to the stack total
var total = stack.total || 0;
if (type === 'percent') {
// Percent stacked column, totals are the same for the positive and
// negative stacks
other = isNegative ? stackKey : negKey;
if (negStacks && ((_b = stacks[other]) === null || _b === void 0 ? void 0 : _b[x])) {
other = stacks[other][x];
total = other.total = Math.max(other.total || 0, total) +
Math.abs(yNumber);
// Percent stacked areas
}
else {
total = StackingAxis_correctFloat(total + Math.abs(yNumber));
}
}
else if (type === 'group') {
// In this stack, the total is the number of valid points
if (StackingAxis_isNumber(y)) {
total++;
}
}
else {
total = StackingAxis_correctFloat(total + yNumber);
}
if (type === 'group') {
// This point's index within the stack, pushed to stack.points[1]
stack.cumulative = (total || 1) - 1;
}
else {
stack.cumulative = StackingAxis_correctFloat(StackingAxis_pick(stack.cumulative, stackThreshold) + yNumber);
}
stack.total = total;
if (y !== null) {
stack.points[pointKey].push(stack.cumulative);
stackedYData[i] = stack.cumulative;
stack.hasValidPoints = true;
}
}
if (type === 'percent') {
stacking.usePercentage = true;
}
if (type !== 'group') {
this.stackedYData = stackedYData; // To be used in getExtremes
}
// Reset old stacks
stacking.oldStacks = {};
}
/* *
*
* Classes
*
* */
/**
* Adds stacking support to axes.
* @private
* @class
*/
var AxisAdditions = /** @class */ (function () {
/* *
*
* Constructors
*
* */
function AxisAdditions(axis) {
this.oldStacks = {};
this.stacks = {};
this.stacksTouched = 0;
this.axis = axis;
}
/* *
*
* Functions
*
* */
/**
* Build the stacks from top down
* @private
*/
AxisAdditions.prototype.buildStacks = function () {
var stacking = this,
axis = stacking.axis,
axisSeries = axis.series,
isXAxis = axis.coll === 'xAxis',
reversedStacks = axis.options.reversedStacks,
len = axisSeries.length;
var actualSeries,
i;
this.resetStacks();
stacking.usePercentage = false;
i = len;
while (i--) {
actualSeries = axisSeries[reversedStacks ? i : len - i - 1];
if (isXAxis) {
actualSeries.setGroupedPoints(axis);
}
actualSeries.setStackedPoints(axis);
}
// Loop up again to compute percent and stream stack
if (!isXAxis) {
for (i = 0; i < len; i++) {
axisSeries[i].modifyStacks();
}
}
StackingAxis_fireEvent(axis, 'afterBuildStacks');
};
/**
* @private
*/
AxisAdditions.prototype.cleanStacks = function () {
if (this.oldStacks) {
this.stacks = this.oldStacks;
// Reset stacks
StackingAxis_objectEach(this.stacks, function (type) {
StackingAxis_objectEach(type, function (stack) {
stack.cumulative = stack.total;
});
});
}
};
/**
* Set all the stacks to initial states and destroy unused ones.
* @private
*/
AxisAdditions.prototype.resetStacks = function () {
var _this = this;
StackingAxis_objectEach(this.stacks, function (type) {
StackingAxis_objectEach(type, function (stack, x) {
// Clean up memory after point deletion (#1044, #4320)
if (StackingAxis_isNumber(stack.touched) &&
stack.touched < _this.stacksTouched) {
stack.destroy();
delete type[x];
// Reset stacks
}
else {
stack.total = null;
stack.cumulative = null;
}
});
});
};
/**
* @private
*/
AxisAdditions.prototype.renderStackTotals = function () {
var _a;
var stacking = this,
axis = stacking.axis,
chart = axis.chart,
renderer = chart.renderer,
stacks = stacking.stacks,
stackLabelsAnim = (_a = axis.options.stackLabels) === null || _a === void 0 ? void 0 : _a.animation,
animationConfig = StackingAxis_getDeferredAnimation(chart,
stackLabelsAnim || false),
stackTotalGroup = stacking.stackTotalGroup = (stacking.stackTotalGroup ||
renderer
.g('stack-labels')
.attr({
zIndex: 6,
opacity: 0
})
.add());
// The plotLeft/Top will change when y axis gets wider so we need to
// translate the stackTotalGroup at every render call. See bug #506
// and #516
stackTotalGroup.translate(chart.plotLeft, chart.plotTop);
// Render each stack total
StackingAxis_objectEach(stacks, function (type) {
StackingAxis_objectEach(type, function (stack) {
stack.render(stackTotalGroup);
});
});
stackTotalGroup.animate({
opacity: 1
}, animationConfig);
};
return AxisAdditions;
}());
/* *
*
* Composition
*
* */
var StackingAxis;
(function (StackingAxis) {
/* *
*
* Functions
*
* */
/**
* Extends axis with stacking support.
* @private
*/
function compose(AxisClass, ChartClass, SeriesClass) {
var chartProto = ChartClass.prototype,
seriesProto = SeriesClass.prototype;
if (!chartProto.getStacks) {
StackingAxis_addEvent(AxisClass, 'init', onAxisInit);
StackingAxis_addEvent(AxisClass, 'destroy', onAxisDestroy);
chartProto.getStacks = chartGetStacks;
seriesProto.getStackIndicator = seriesGetStackIndicator;
seriesProto.modifyStacks = seriesModifyStacks;
seriesProto.percentStacker = seriesPercentStacker;
seriesProto.setGroupedPoints = seriesSetGroupedPoints;
seriesProto.setStackedPoints = seriesSetStackedPoints;
}
}
StackingAxis.compose = compose;
})(StackingAxis || (StackingAxis = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Stacking_StackingAxis = (StackingAxis);
;// ./code/es5/es-modules/Series/Line/LineSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var LineSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var LineSeries_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var LineSeries_defined = Core_Utilities.defined, LineSeries_merge = Core_Utilities.merge, LineSeries_isObject = Core_Utilities.isObject;
/* *
*
* Class
*
* */
/**
* The line series is the base type and is therefor the series base prototype.
*
* @private
*/
var LineSeries = /** @class */ (function (_super) {
LineSeries_extends(LineSeries, _super);
function LineSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/**
* Draw the graph. Called internally when rendering line-like series
* types. The first time it generates the `series.graph` item and
* optionally other series-wide items like `series.area` for area
* charts. On subsequent calls these items are updated with new
* positions and attributes.
*
* @function Highcharts.Series#drawGraph
*/
LineSeries.prototype.drawGraph = function () {
var _this = this;
var options = this.options,
graphPath = (this.gappedPath || this.getGraphPath).call(this),
styledMode = this.chart.styledMode;
// Draw the graph
LineSeries_spreadArray([this], this.zones, true).forEach(function (owner, i) {
var attribs,
graph = owner.graph;
var verb = graph ? 'animate' : 'attr',
dashStyle = owner.dashStyle ||
options.dashStyle;
if (graph) {
graph.endX = _this.preventGraphAnimation ?
null :
graphPath.xMap;
graph.animate({ d: graphPath });
}
else if (graphPath.length) { // #1487
/**
* SVG element of line-based charts. Can be used for styling
* purposes. If zones are configured, this element will be
* hidden and replaced by multiple zone lines, accessible
* via `series.zones[i].graph`.
*
* @name Highcharts.Series#graph
* @type {Highcharts.SVGElement|undefined}
*/
owner.graph = graph = _this.chart.renderer
.path(graphPath)
.addClass('highcharts-graph' +
(i ? " highcharts-zone-graph-".concat(i - 1, " ") : ' ') +
((i && owner.className) || ''))
.attr({ zIndex: 1 }) // #1069
.add(_this.group);
}
if (graph && !styledMode) {
attribs = {
'stroke': ((!i && options.lineColor) || // Series only
owner.color ||
_this.color ||
"#cccccc" /* Palette.neutralColor20 */),
'stroke-width': options.lineWidth || 0,
// Polygon series use filled graph
'fill': (_this.fillGraph && _this.color) || 'none'
};
// Apply dash style
if (dashStyle) {
attribs.dashstyle = dashStyle;
// The reason for the `else if` is that linecaps don't mix well
// with dashstyle. The gaps get partially filled by the
// linecap.
}
else if (options.linecap !== 'square') {
attribs['stroke-linecap'] =
attribs['stroke-linejoin'] = 'round';
}
graph[verb](attribs)
// Add shadow to normal series as well as zones
.shadow(options.shadow &&
// If shadow is defined, call function with
// `filterUnits: 'userSpaceOnUse'` to avoid known
// SVG filter bug (#19093)
LineSeries_merge({ filterUnits: 'userSpaceOnUse' }, LineSeries_isObject(options.shadow) ? options.shadow : {}));
}
// Helpers for animation
if (graph) {
graph.startX = graphPath.xMap;
graph.isArea = graphPath.isArea; // For arearange animation
}
});
};
// eslint-disable-next-line valid-jsdoc
/**
* Get the graph path.
*
* @private
*/
LineSeries.prototype.getGraphPath = function (points, nullsAsZeroes, connectCliffs) {
var series = this,
options = series.options,
graphPath = [],
xMap = [];
var gap,
step = options.step;
points = points || series.points;
// Bottom of a stack is reversed
var reversed = points.reversed;
if (reversed) {
points.reverse();
}
// Reverse the steps (#5004)
step = {
right: 1,
center: 2
}[step] || (step && 3);
if (step && reversed) {
step = 4 - step;
}
// Remove invalid points, especially in spline (#5015)
points = this.getValidPoints(points, false, !(options.connectNulls && !nullsAsZeroes && !connectCliffs));
// Build the line
points.forEach(function (point, i) {
var plotX = point.plotX,
plotY = point.plotY,
lastPoint = points[i - 1],
isNull = point.isNull || typeof plotY !== 'number';
// The path to this point from the previous
var pathToPoint;
if ((point.leftCliff || (lastPoint && lastPoint.rightCliff)) &&
!connectCliffs) {
gap = true; // ... and continue
}
// Line series, nullsAsZeroes is not handled
if (isNull && !LineSeries_defined(nullsAsZeroes) && i > 0) {
gap = !options.connectNulls;
// Area series, nullsAsZeroes is set
}
else if (isNull && !nullsAsZeroes) {
gap = true;
}
else {
if (i === 0 || gap) {
pathToPoint = [[
'M',
point.plotX,
point.plotY
]];
// Generate the spline as defined in the SplineSeries object
}
else if (series.getPointSpline) {
pathToPoint = [series.getPointSpline(points, point, i)];
}
else if (step) {
if (step === 1) { // Right
pathToPoint = [[
'L',
lastPoint.plotX,
plotY
]];
}
else if (step === 2) { // Center
pathToPoint = [[
'L',
(lastPoint.plotX + plotX) / 2,
lastPoint.plotY
], [
'L',
(lastPoint.plotX + plotX) / 2,
plotY
]];
}
else {
pathToPoint = [[
'L',
plotX,
lastPoint.plotY
]];
}
pathToPoint.push([
'L',
plotX,
plotY
]);
}
else {
// Normal line to next point
pathToPoint = [[
'L',
plotX,
plotY
]];
}
// Prepare for animation. When step is enabled, there are
// two path nodes for each x value.
xMap.push(point.x);
if (step) {
xMap.push(point.x);
if (step === 2) { // Step = center (#8073)
xMap.push(point.x);
}
}
graphPath.push.apply(graphPath, pathToPoint);
gap = false;
}
});
graphPath.xMap = xMap;
series.graphPath = graphPath;
return graphPath;
};
/* *
*
* Static Functions
*
* */
LineSeries.defaultOptions = LineSeries_merge(Series_Series.defaultOptions,
/**
* General options for all series types.
*
* @optionparent plotOptions.series
*/
{
legendSymbol: 'lineMarker'
});
return LineSeries;
}(Series_Series));
Series_SeriesRegistry.registerSeriesType('line', LineSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Line_LineSeries = ((/* unused pure expression or super */ null && (LineSeries)));
/* *
*
* API Options
*
* */
/**
* A line series displays information as a series of data points connected by
* straight line segments.
*
* @sample {highcharts} highcharts/demo/line-chart/
* Line chart
* @sample {highstock} stock/demo/basic-line/
* Line chart
*
* @extends plotOptions.series
* @product highcharts highstock
* @apioption plotOptions.line
*/
/**
* The SVG value used for the `stroke-linecap` and `stroke-linejoin`
* of a line graph. Round means that lines are rounded in the ends and
* bends.
*
* @type {Highcharts.SeriesLinecapValue}
* @default round
* @since 3.0.7
* @apioption plotOptions.line.linecap
*/
/**
* A `line` series. If the [type](#series.line.type) option is not
* specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.line
* @excluding dataParser,dataURL
* @product highcharts highstock
* @apioption series.line
*/
/**
* An array of data points for the series. For the `line` series type,
* points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` and `pointInterval` given in the series options. If the axis
* has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `x,y`. If the first value is a string, it is applied as the name of the
* point, and the `x` value is inferred.
* ```js
* data: [
* [0, 1],
* [1, 2],
* [2, 8]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.line.turboThreshold),
* this option is not available.
* ```js
* data: [{
* x: 1,
* y: 9,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 6,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* **Note:** In TypeScript you have to extend `PointOptionsObject` with an
* additional declaration to allow custom data types:
* ```ts
* declare module `highcharts` {
* interface PointOptionsObject {
* custom: Record<string, (boolean|number|string)>;
* }
* }
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @declare Highcharts.PointOptionsObject
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
* @apioption series.line.data
*/
/**
* An additional, individual class name for the data point's graphic
* representation. Changes to a point's color will also be reflected in a
* chart's legend and tooltip.
*
* @sample {highcharts} highcharts/css/point-series-classname
* Series and point class name
*
* @type {string}
* @since 5.0.0
* @product highcharts gantt
* @apioption series.line.data.className
*/
/**
* Individual color for the point. By default the color is pulled from
* the global `colors` array.
*
* In styled mode, the `color` option doesn't take effect. Instead, use
* `colorIndex`.
*
* @sample {highcharts} highcharts/point/color/
* Mark the highest point
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock gantt
* @apioption series.line.data.color
*/
/**
* A specific color index to use for the point, so its graphic representations
* are given the class name `highcharts-color-{n}`. In styled mode this will
* change the color of the graphic. In non-styled mode, the color is set by the
* `fill` attribute, so the change in class name won't have a visual effect by
* default.
*
* Since v11, CSS variables on the form `--highcharts-color-{n}` make changing
* the color scheme very convenient.
*
* @sample {highcharts} highcharts/css/colorindex/
* Series and point color index
*
* @type {number}
* @since 5.0.0
* @product highcharts gantt
* @apioption series.line.data.colorIndex
*/
/**
* A reserved subspace to store options and values for customized functionality.
* Here you can add additional data for your own event callbacks and formatter
* callbacks.
*
* @sample {highcharts} highcharts/point/custom/
* Point and series with custom data
*
* @type {Highcharts.Dictionary<*>}
* @apioption series.line.data.custom
*/
/**
* Individual data label for each point. The options are the same as
* the ones for [plotOptions.series.dataLabels](
* #plotOptions.series.dataLabels).
*
* @sample highcharts/point/datalabels/
* Show a label for the last value
*
* @type {*|Array<*>}
* @declare Highcharts.DataLabelsOptions
* @extends plotOptions.line.dataLabels
* @product highcharts highstock gantt
* @apioption series.line.data.dataLabels
*/
/**
* A description of the point to add to the screen reader information
* about the point.
*
* @type {string}
* @since 5.0.0
* @requires modules/accessibility
* @apioption series.line.data.description
*/
/**
* An id for the point. This can be used after render time to get a
* pointer to the point object through `chart.get()`.
*
* @sample {highcharts} highcharts/point/id/
* Remove an id'd point
*
* @type {string}
* @since 1.2.0
* @product highcharts highstock gantt
* @apioption series.line.data.id
*/
/**
* The rank for this point's data label in case of collision. If two
* data labels are about to overlap, only the one with the highest `labelrank`
* will be drawn.
*
* @type {number}
* @apioption series.line.data.labelrank
*/
/**
* The name of the point as shown in the legend, tooltip, dataLabels, etc.
*
* @see [xAxis.uniqueNames](#xAxis.uniqueNames)
*
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Point names
*
* @type {string}
* @apioption series.line.data.name
*/
/**
* Whether the data point is selected initially.
*
* @type {boolean}
* @default false
* @product highcharts highstock gantt
* @apioption series.line.data.selected
*/
/**
* The x value of the point.
*
* For datetime axes, a number value is the timestamp in milliseconds since
* 1970, while a date string is parsed according to the [current time zone]
* (https://api.highcharts.com/highcharts/time.timezone) of the
* chart. Date strings are supported since v12.
*
* @type {number|string}
* @product highcharts highstock
* @apioption series.line.data.x
*/
/**
* The y value of the point.
*
* @type {number|null}
* @product highcharts highstock
* @apioption series.line.data.y
*/
/**
* The individual point events.
*
* @extends plotOptions.series.point.events
* @product highcharts highstock gantt
* @apioption series.line.data.events
*/
/**
* Options for the point markers of line-like series.
*
* @declare Highcharts.PointMarkerOptionsObject
* @extends plotOptions.series.marker
* @product highcharts highstock
* @apioption series.line.data.marker
*/
''; // Include precedent doclets in transpiled
;// ./code/es5/es-modules/Series/Area/AreaSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* The area series type.
*
* @sample {highcharts} highcharts/demo/area-chart/
* Area chart
* @sample {highstock} stock/demo/area/
* Area chart
*
* @extends plotOptions.line
* @excluding useOhlcData
* @product highcharts highstock
* @optionparent plotOptions.area
*/
var AreaSeriesDefaults = {
/**
* @see [fillColor](#plotOptions.area.fillColor)
* @see [fillOpacity](#plotOptions.area.fillOpacity)
*
* @apioption plotOptions.area.color
*/
/**
* Fill color or gradient for the area. When `undefined`, the series'
* `color` is used with the series' `fillOpacity`.
*
* In styled mode, the fill color can be set with the `.highcharts-area`
* class name.
*
* @see [color](#plotOptions.area.color)
* @see [fillOpacity](#plotOptions.area.fillOpacity)
*
* @sample {highcharts} highcharts/plotoptions/area-fillcolor-default/
* Undefined by default
* @sample {highcharts} highcharts/plotoptions/area-fillcolor-gradient/
* Gradient
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock
* @apioption plotOptions.area.fillColor
*/
/**
* Fill opacity for the area. When you set an explicit `fillColor`,
* the `fillOpacity` is not applied. Instead, you should define the
* opacity in the `fillColor` with an rgba color definition. The
* `fillOpacity` setting, also the default setting, overrides the alpha
* component of the `color` setting.
*
* In styled mode, the fill opacity can be set with the
* `.highcharts-area` class name.
*
* @see [color](#plotOptions.area.color)
* @see [fillColor](#plotOptions.area.fillColor)
*
* @sample {highcharts} highcharts/plotoptions/area-fillopacity/
* Automatic fill color and fill opacity of 0.1
*
* @type {number}
* @default {highcharts} 0.75
* @default {highstock} 0.75
* @product highcharts highstock
* @apioption plotOptions.area.fillOpacity
*/
/**
* A separate color for the graph line. By default the line takes the
* `color` of the series, but the lineColor setting allows setting a
* separate color for the line without altering the `fillColor`.
*
* In styled mode, the line stroke can be set with the
* `.highcharts-graph` class name.
*
* @sample {highcharts} highcharts/plotoptions/area-linecolor/
* Dark gray line
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock
* @apioption plotOptions.area.lineColor
*/
/**
* A separate color for the negative part of the area. Note that `zones`
* takes precedence over the negative fill color.
*
* In styled mode, a negative color is set with the
* `.highcharts-negative` class name.
*
* @see [negativeColor](#plotOptions.area.negativeColor)
*
* @sample {highcharts} highcharts/css/series-negative-color/
* Negative color in styled mode
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 3.0
* @product highcharts
* @apioption plotOptions.area.negativeFillColor
*/
/**
* Whether the whole area or just the line should respond to mouseover
* tooltips and other mouse or touch events.
*
* @sample {highcharts|highstock} highcharts/plotoptions/area-trackbyarea/
* Display the tooltip when the area is hovered
*
* @type {boolean}
* @default false
* @since 1.1.6
* @product highcharts highstock
* @apioption plotOptions.area.trackByArea
*/
/**
* The Y axis value to serve as the base for the area, for
* distinguishing between values above and below a threshold. The area
* between the graph and the threshold is filled.
*
* * If a number is given, the Y axis will scale to the threshold.
* * If `null`, the scaling behaves like a line series with fill between
* the graph and the Y axis minimum.
* * If `Infinity` or `-Infinity`, the area between the graph and the
* corresponding Y axis extreme is filled (since v6.1.0).
*
* @sample {highcharts} highcharts/plotoptions/area-threshold/
* A threshold of 100
* @sample {highcharts} highcharts/plotoptions/area-threshold-infinity/
* A threshold of Infinity
*
* @type {number|null}
* @since 2.0
* @product highcharts highstock
*/
threshold: 0,
legendSymbol: 'areaMarker'
};
/**
* A `area` series. If the [type](#series.area.type) option is not
* specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.area
* @excluding dataParser, dataURL, useOhlcData
* @product highcharts highstock
* @apioption series.area
*/
/**
* @see [fillColor](#series.area.fillColor)
* @see [fillOpacity](#series.area.fillOpacity)
*
* @apioption series.area.color
*/
/**
* An array of data points for the series. For the `area` series type,
* points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` * and `pointInterval` given in the series options. If the
* axis has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `x,y`. If the first value is a string, it is applied as the name of the
* point, and the `x` value is inferred.
* ```js
* data: [
* [0, 9],
* [1, 7],
* [2, 6]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.area.turboThreshold), this option is not
* available.
* ```js
* data: [{
* x: 1,
* y: 9,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 6,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
* @extends series.line.data
* @product highcharts highstock
* @apioption series.area.data
*/
/**
* @see [color](#series.area.color)
* @see [fillOpacity](#series.area.fillOpacity)
*
* @apioption series.area.fillColor
*/
/**
* @see [color](#series.area.color)
* @see [fillColor](#series.area.fillColor)
*
* @default {highcharts} 0.75
* @default {highstock} 0.75
* @apioption series.area.fillOpacity
*/
''; // Adds doclets above to transpiled
/* *
*
* Default Export
*
* */
/* harmony default export */ var Area_AreaSeriesDefaults = (AreaSeriesDefaults);
;// ./code/es5/es-modules/Series/Area/AreaSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var AreaSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var AreaSeries_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var AreaSeries_LineSeries = Series_SeriesRegistry.seriesTypes.line;
var AreaSeries_extend = Core_Utilities.extend, AreaSeries_merge = Core_Utilities.merge, AreaSeries_objectEach = Core_Utilities.objectEach, AreaSeries_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/**
* Area series type.
*
* @private
* @class
* @name AreaSeries
*
* @augments LineSeries
*/
var AreaSeries = /** @class */ (function (_super) {
AreaSeries_extends(AreaSeries, _super);
function AreaSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Draw the graph and the underlying area. This method calls the Series
* base function and adds the area. The areaPath is calculated in the
* getSegmentPath method called from Series.prototype.drawGraph.
* @private
*/
AreaSeries.prototype.drawGraph = function () {
var _this = this;
// Define or reset areaPath
this.areaPath = [];
// Call the base method
_super.prototype.drawGraph.apply(this);
// Define local variables
var _a = this,
areaPath = _a.areaPath,
options = _a.options;
AreaSeries_spreadArray([this], this.zones, true).forEach(function (owner, i) {
var _a;
var attribs = {},
fillColor = owner.fillColor || options.fillColor;
var area = owner.area;
var verb = area ? 'animate' : 'attr';
// Create or update the area
if (area) { // Update
area.endX = _this.preventGraphAnimation ?
null :
areaPath.xMap;
area.animate({ d: areaPath });
}
else { // Create
attribs.zIndex = 0; // #1069
/**
* SVG element of area-based charts. Can be used for styling
* purposes. If zones are configured, this element will be
* hidden and replaced by multiple zone areas, accessible
* via `series.zones[i].area`.
*
* @name Highcharts.Series#area
* @type {Highcharts.SVGElement|undefined}
*/
area = owner.area = _this.chart.renderer
.path(areaPath)
.addClass('highcharts-area' +
(i ? " highcharts-zone-area-".concat(i - 1, " ") : ' ') +
((i && owner.className) || ''))
.add(_this.group);
area.isArea = true;
}
if (!_this.chart.styledMode) {
// If there is fillColor defined for the area, set it.
// Otherwise, we set it to the zone/series color and add
// fill-opacity (#18939).
attribs.fill = fillColor || owner.color || _this.color;
attribs['fill-opacity'] = fillColor ?
1 : ((_a = options.fillOpacity) !== null && _a !== void 0 ? _a : 0.75);
// Allow clicking through the area if sticky tracking is true
// (#18744)
area.css({
pointerEvents: _this.stickyTracking ? 'none' : 'auto'
});
}
area[verb](attribs);
area.startX = areaPath.xMap;
area.shiftUnit = options.step ? 2 : 1;
});
};
/**
* @private
*/
AreaSeries.prototype.getGraphPath = function (points) {
var getGraphPath = AreaSeries_LineSeries.prototype.getGraphPath, options = this.options, stacking = options.stacking, yAxis = this.yAxis, bottomPoints = [], graphPoints = [], seriesIndex = this.index, stacks = yAxis.stacking.stacks[this.stackKey], threshold = options.threshold, translatedThreshold = Math.round(// #10909
yAxis.getThreshold(options.threshold)), connectNulls = AreaSeries_pick(// #10574
options.connectNulls, stacking === 'percent'),
// To display null points in underlying stacked series, this
// series graph must be broken, and the area also fall down to
// fill the gap left by the null point. #2069
addDummyPoints = function (i, otherI, side) {
var point = points[i], stackedValues = stacking &&
stacks[point.x].points[seriesIndex], nullVal = point[side + 'Null'] || 0, cliffVal = point[side + 'Cliff'] || 0;
var top,
bottom,
isNull = true;
if (cliffVal || nullVal) {
top = (nullVal ?
stackedValues[0] :
stackedValues[1]) + cliffVal;
bottom = stackedValues[0] + cliffVal;
isNull = !!nullVal;
}
else if (!stacking &&
points[otherI] &&
points[otherI].isNull) {
top = bottom = threshold;
}
// Add to the top and bottom line of the area
if (typeof top !== 'undefined') {
graphPoints.push({
plotX: plotX,
plotY: top === null ?
translatedThreshold :
yAxis.getThreshold(top),
isNull: isNull,
isCliff: true
});
bottomPoints.push({
plotX: plotX,
plotY: bottom === null ?
translatedThreshold :
yAxis.getThreshold(bottom),
doCurve: false // #1041, gaps in areaspline areas
});
}
};
var plotX,
isNull,
yBottom;
// Find what points to use
points = points || this.points;
// Fill in missing points
if (stacking) {
points = this.getStackPoints(points);
}
for (var i = 0, iEnd = points.length; i < iEnd; ++i) {
// Reset after series.update of stacking property (#12033)
if (!stacking) {
points[i].leftCliff = points[i].rightCliff =
points[i].leftNull = points[i].rightNull = void 0;
}
isNull = points[i].isNull;
plotX = AreaSeries_pick(points[i].rectPlotX, points[i].plotX);
yBottom = stacking ?
AreaSeries_pick(points[i].yBottom, translatedThreshold) :
translatedThreshold;
if (!isNull || connectNulls) {
if (!connectNulls) {
addDummyPoints(i, i - 1, 'left');
}
// Skip null point when stacking is false and connectNulls
// true
if (!(isNull && !stacking && connectNulls)) {
graphPoints.push(points[i]);
bottomPoints.push({
x: i,
plotX: plotX,
plotY: yBottom
});
}
if (!connectNulls) {
addDummyPoints(i, i + 1, 'right');
}
}
}
var topPath = getGraphPath.call(this,
graphPoints,
true,
true);
bottomPoints.reversed = true;
var bottomPath = getGraphPath.call(this,
bottomPoints,
true,
true);
var firstBottomPoint = bottomPath[0];
if (firstBottomPoint && firstBottomPoint[0] === 'M') {
bottomPath[0] = ['L', firstBottomPoint[1], firstBottomPoint[2]];
}
var areaPath = topPath.concat(bottomPath);
if (areaPath.length) {
areaPath.push(['Z']);
}
// TODO: don't set leftCliff and rightCliff when connectNulls?
var graphPath = getGraphPath
.call(this,
graphPoints,
false,
connectNulls);
if (this.chart.series.length > 1 &&
stacking &&
graphPoints.some(function (point) { return point.isCliff; })) {
areaPath.hasStackedCliffs = graphPath.hasStackedCliffs = true;
}
areaPath.xMap = topPath.xMap;
this.areaPath = areaPath;
return graphPath;
};
/**
* Return an array of stacked points, where null and missing points are
* replaced by dummy points in order for gaps to be drawn correctly in
* stacks.
* @private
*/
AreaSeries.prototype.getStackPoints = function (points) {
var series = this,
segment = [],
keys = [],
xAxis = this.xAxis,
yAxis = this.yAxis,
stack = yAxis.stacking.stacks[this.stackKey],
pointMap = {},
yAxisSeries = yAxis.series,
seriesLength = yAxisSeries.length,
upOrDown = yAxis.options.reversedStacks ? 1 : -1,
seriesIndex = yAxisSeries.indexOf(series);
points = points || this.points;
if (this.options.stacking) {
for (var i = 0; i < points.length; i++) {
// Reset after point update (#7326)
points[i].leftNull = points[i].rightNull = void 0;
// Create a map where we can quickly look up the points by
// their X values.
pointMap[points[i].x] = points[i];
}
// Sort the keys (#1651)
AreaSeries_objectEach(stack, function (stackX, x) {
// Nulled after switching between
// grouping and not (#1651, #2336)
if (stackX.total !== null) {
keys.push(x);
}
});
keys.sort(function (a, b) {
return a - b;
});
var visibleSeries_1 = yAxisSeries.map(function (s) { return s.visible; });
keys.forEach(function (x, idx) {
var y = 0,
stackPoint,
stackedValues;
if (pointMap[x] && !pointMap[x].isNull) {
segment.push(pointMap[x]);
// Find left and right cliff. -1 goes left, 1 goes
// right.
[-1, 1].forEach(function (direction) {
var nullName = direction === 1 ?
'rightNull' :
'leftNull',
cliffName = direction === 1 ?
'rightCliff' :
'leftCliff',
otherStack = stack[keys[idx + direction]];
var cliff = 0;
// If there is a stack next to this one,
// to the left or to the right...
if (otherStack) {
var i = seriesIndex;
// Can go either up or down,
// depending on reversedStacks
while (i >= 0 && i < seriesLength) {
var si = yAxisSeries[i].index;
stackPoint = otherStack.points[si];
if (!stackPoint) {
// If the next point in this series is
// missing, mark the point with
// point.leftNull or point.rightNull = true.
if (si === series.index) {
pointMap[x][nullName] = true;
// If there are missing points in the next
// stack in any of the series below this
// one, we need to subtract the missing
// values and add a hiatus to the left or
// right.
}
else if (visibleSeries_1[i]) {
stackedValues = stack[x].points[si];
if (stackedValues) {
cliff -= (stackedValues[1] -
stackedValues[0]);
}
}
}
// When reversedStacks is true, loop up,
// else loop down
i += upOrDown;
}
}
pointMap[x][cliffName] = cliff;
});
// There is no point for this X value in this series, so we
// insert a dummy point in order for the areas to be drawn
// correctly.
}
else {
// Loop down the stack to find the series below this
// one that has a value (#1991)
var i = seriesIndex;
while (i >= 0 && i < seriesLength) {
var si = yAxisSeries[i].index;
stackPoint = stack[x].points[si];
if (stackPoint) {
y = stackPoint[1];
break;
}
// When reversedStacks is true, loop up, else loop
// down
i += upOrDown;
}
y = AreaSeries_pick(y, 0);
y = yAxis.translate(// #6272
y, 0, 1, 0, 1);
segment.push({
isNull: true,
plotX: xAxis.translate(// #6272
x, 0, 0, 0, 1),
x: x,
plotY: y,
yBottom: y
});
}
});
}
return segment;
};
/* *
*
* Static Properties
*
* */
AreaSeries.defaultOptions = AreaSeries_merge(AreaSeries_LineSeries.defaultOptions, Area_AreaSeriesDefaults);
return AreaSeries;
}(AreaSeries_LineSeries));
AreaSeries_extend(AreaSeries.prototype, {
singleStacks: false
});
Series_SeriesRegistry.registerSeriesType('area', AreaSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Area_AreaSeries = ((/* unused pure expression or super */ null && (AreaSeries)));
;// ./code/es5/es-modules/Series/Spline/SplineSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var SplineSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var SplineSeries_LineSeries = Series_SeriesRegistry.seriesTypes.line;
var SplineSeries_merge = Core_Utilities.merge, SplineSeries_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/**
* Spline series type.
*
* @private
*/
var SplineSeries = /** @class */ (function (_super) {
SplineSeries_extends(SplineSeries, _super);
function SplineSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Get the spline segment from a given point's previous neighbour to the
* given point.
*
* @private
* @function Highcharts.seriesTypes.spline#getPointSpline
*/
SplineSeries.prototype.getPointSpline = function (points, point, i) {
var
// 1 means control points midway between points, 2 means 1/3
// from the point, 3 is 1/4 etc
smoothing = 1.5, denom = smoothing + 1, plotX = point.plotX || 0, plotY = point.plotY || 0, lastPoint = points[i - 1], nextPoint = points[i + 1];
var leftContX,
leftContY,
rightContX,
rightContY;
/**
* @private
*/
function doCurve(otherPoint) {
return otherPoint &&
!otherPoint.isNull &&
otherPoint.doCurve !== false &&
// #6387, area splines next to null:
!point.isCliff;
}
// Find control points
if (doCurve(lastPoint) && doCurve(nextPoint)) {
var lastX = lastPoint.plotX || 0,
lastY = lastPoint.plotY || 0,
nextX = nextPoint.plotX || 0,
nextY = nextPoint.plotY || 0;
var correction = 0;
leftContX = (smoothing * plotX + lastX) / denom;
leftContY = (smoothing * plotY + lastY) / denom;
rightContX = (smoothing * plotX + nextX) / denom;
rightContY = (smoothing * plotY + nextY) / denom;
// Have the two control points make a straight line through main
// point
if (rightContX !== leftContX) { // #5016, division by zero
correction = (((rightContY - leftContY) *
(rightContX - plotX)) /
(rightContX - leftContX) + plotY - rightContY);
}
leftContY += correction;
rightContY += correction;
// To prevent false extremes, check that control points are
// between neighbouring points' y values
if (leftContY > lastY && leftContY > plotY) {
leftContY = Math.max(lastY, plotY);
// Mirror of left control point
rightContY = 2 * plotY - leftContY;
}
else if (leftContY < lastY && leftContY < plotY) {
leftContY = Math.min(lastY, plotY);
rightContY = 2 * plotY - leftContY;
}
if (rightContY > nextY && rightContY > plotY) {
rightContY = Math.max(nextY, plotY);
leftContY = 2 * plotY - rightContY;
}
else if (rightContY < nextY && rightContY < plotY) {
rightContY = Math.min(nextY, plotY);
leftContY = 2 * plotY - rightContY;
}
// Record for drawing in next point
point.rightContX = rightContX;
point.rightContY = rightContY;
// Visualize control points for debugging
/*
if (leftContX) {
this.chart.renderer
.circle(
leftContX + this.chart.plotLeft,
leftContY + this.chart.plotTop,
2
)
.attr({
stroke: 'red',
'stroke-width': 2,
fill: 'none',
zIndex: 9
})
.add();
this.chart.renderer
.path([['M', leftContX + this.chart.plotLeft,
leftContY + this.chart.plotTop
], ['L', plotX + this.chart.plotLeft,
plotY + this.chart.plotTop
]])
.attr({
stroke: 'red',
'stroke-width': 2,
zIndex: 9
})
.add();
}
if (rightContX) {
this.chart.renderer
.circle(
rightContX + this.chart.plotLeft,
rightContY + this.chart.plotTop,
2
)
.attr({
stroke: 'green',
'stroke-width': 2,
fill: 'none',
zIndex: 9
})
.add();
this.chart.renderer
.path([[
'M', rightContX + this.chart.plotLeft,
rightContY + this.chart.plotTop
], [
'L', plotX + this.chart.plotLeft,
plotY + this.chart.plotTop
]])
.attr({
stroke: 'green',
'stroke-width': 2,
zIndex: 9
})
.add();
}
// */
point.controlPoints = {
low: [leftContX, leftContY],
high: [rightContX, rightContY]
};
}
var ret = [
'C',
SplineSeries_pick(lastPoint.rightContX,
lastPoint.plotX, 0),
SplineSeries_pick(lastPoint.rightContY,
lastPoint.plotY, 0),
SplineSeries_pick(leftContX,
plotX, 0),
SplineSeries_pick(leftContY,
plotY, 0),
plotX,
plotY
];
// Reset for updating series later
lastPoint.rightContX = lastPoint.rightContY = void 0;
return ret;
};
/* *
*
* Static Properties
*
* */
/**
* A spline series is a special type of line series, where the segments
* between the data points are smoothed.
*
* @sample {highcharts} highcharts/demo/spline-irregular-time/
* Spline chart
* @sample {highstock} stock/demo/spline/
* Spline chart
*
* @extends plotOptions.series
* @excluding step, boostThreshold, boostBlending
* @product highcharts highstock
* @optionparent plotOptions.spline
*/
SplineSeries.defaultOptions = SplineSeries_merge(SplineSeries_LineSeries.defaultOptions);
return SplineSeries;
}(SplineSeries_LineSeries));
Series_SeriesRegistry.registerSeriesType('spline', SplineSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Spline_SplineSeries = (SplineSeries);
/* *
*
* API Options
*
* */
/**
* A `spline` series. If the [type](#series.spline.type) option is
* not specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.spline
* @excluding dataParser, dataURL, step, boostThreshold, boostBlending
* @product highcharts highstock
* @apioption series.spline
*/
/**
* An array of data points for the series. For the `spline` series type,
* points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` and `pointInterval` given in the series options. If the axis
* has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `x,y`. If the first value is a string, it is applied as the name of the
* point, and the `x` value is inferred.
* ```js
* data: [
* [0, 9],
* [1, 2],
* [2, 8]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.spline.turboThreshold),
* this option is not available.
* ```js
* data: [{
* x: 1,
* y: 9,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 0,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
* @extends series.line.data
* @product highcharts highstock
* @apioption series.spline.data
*/
''; // Adds doclets above intro transpiled
;// ./code/es5/es-modules/Series/AreaSpline/AreaSplineSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var AreaSplineSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var _a = Series_SeriesRegistry.seriesTypes, AreaSplineSeries_AreaSeries = _a.area, areaProto = _a.area.prototype;
var AreaSplineSeries_extend = Core_Utilities.extend, AreaSplineSeries_merge = Core_Utilities.merge;
/* *
*
* Class
*
* */
/**
* AreaSpline series type.
*
* @private
* @class
* @name Highcharts.seriesTypes.areaspline
*
* @augments Highcharts.Series
*/
var AreaSplineSeries = /** @class */ (function (_super) {
AreaSplineSeries_extends(AreaSplineSeries, _super);
function AreaSplineSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Static Properties
*
* */
AreaSplineSeries.defaultOptions = AreaSplineSeries_merge(Spline_SplineSeries.defaultOptions, AreaSplineSeries_AreaSeries.defaultOptions);
return AreaSplineSeries;
}(Spline_SplineSeries));
AreaSplineSeries_extend(AreaSplineSeries.prototype, {
getGraphPath: areaProto.getGraphPath,
getStackPoints: areaProto.getStackPoints,
drawGraph: areaProto.drawGraph
});
Series_SeriesRegistry.registerSeriesType('areaspline', AreaSplineSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var AreaSpline_AreaSplineSeries = ((/* unused pure expression or super */ null && (AreaSplineSeries)));
/* *
*
* API Options
*
* */
/**
* The area spline series is an area series where the graph between the
* points is smoothed into a spline.
*
* @sample {highcharts} highcharts/demo/areaspline/
* Area spline chart
* @sample {highstock} stock/demo/areaspline/
* Area spline chart
*
* @extends plotOptions.area
* @excluding step, boostThreshold, boostBlending
* @product highcharts highstock
* @apioption plotOptions.areaspline
*/
/**
* @see [fillColor](#plotOptions.areaspline.fillColor)
* @see [fillOpacity](#plotOptions.areaspline.fillOpacity)
*
* @apioption plotOptions.areaspline.color
*/
/**
* @see [color](#plotOptions.areaspline.color)
* @see [fillOpacity](#plotOptions.areaspline.fillOpacity)
*
* @apioption plotOptions.areaspline.fillColor
*/
/**
* @see [color](#plotOptions.areaspline.color)
* @see [fillColor](#plotOptions.areaspline.fillColor)
*
* @default 0.75
* @apioption plotOptions.areaspline.fillOpacity
*/
/**
* A `areaspline` series. If the [type](#series.areaspline.type) option
* is not specified, it is inherited from [chart.type](#chart.type).
*
*
* @extends series,plotOptions.areaspline
* @excluding dataParser, dataURL, step, boostThreshold, boostBlending
* @product highcharts highstock
* @apioption series.areaspline
*/
/**
* @see [fillColor](#series.areaspline.fillColor)
* @see [fillOpacity](#series.areaspline.fillOpacity)
*
* @apioption series.areaspline.color
*/
/**
* An array of data points for the series. For the `areaspline` series
* type, points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` and `pointInterval` given in the series options. If the axis
* has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `x,y`. If the first value is a string, it is applied as the name of the
* point, and the `x` value is inferred.
* ```js
* data: [
* [0, 10],
* [1, 9],
* [2, 3]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.areaspline.turboThreshold), this option is not
* available.
* ```js
* data: [{
* x: 1,
* y: 4,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 4,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
* @extends series.line.data
* @product highcharts highstock
* @apioption series.areaspline.data
*/
/**
* @see [color](#series.areaspline.color)
* @see [fillOpacity](#series.areaspline.fillOpacity)
*
* @apioption series.areaspline.fillColor
*/
/**
* @see [color](#series.areaspline.color)
* @see [fillColor](#series.areaspline.fillColor)
*
* @default 0.75
* @apioption series.areaspline.fillOpacity
*/
''; // Adds doclets above into transpiled
;// ./code/es5/es-modules/Series/Column/ColumnSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* Column series display one column per value along an X axis.
*
* @sample {highcharts} highcharts/demo/column-basic/
* Column chart
* @sample {highstock} stock/demo/column/
* Column chart
*
* @extends plotOptions.line
* @excluding connectEnds, connectNulls, gapSize, gapUnit, linecap,
* lineWidth, marker, step, useOhlcData
* @product highcharts highstock
* @optionparent plotOptions.column
*/
var ColumnSeriesDefaults = {
/**
* The corner radius of the border surrounding each column or bar. A number
* signifies pixels. A percentage string, like for example `50%`, signifies
* a relative size. For columns this is relative to the column width, for
* pies it is relative to the radius and the inner radius.
*
* @sample {highcharts} highcharts/plotoptions/column-borderradius/
* Rounded columns
* @sample highcharts/plotoptions/series-border-radius
* Column and pie with rounded border
*
* @type {number|string|Highcharts.BorderRadiusOptionsObject}
* @product highcharts highstock gantt
*/
borderRadius: 3,
/**
* When using automatic point colors pulled from the global
* [colors](colors) or series-specific
* [plotOptions.column.colors](series.colors) collections, this option
* determines whether the chart should receive one color per series or
* one color per point.
*
* In styled mode, the `colors` or `series.colors` arrays are not
* supported, and instead this option gives the points individual color
* class names on the form `highcharts-color-{n}`.
*
* @see [series colors](#plotOptions.column.colors)
*
* @sample {highcharts} highcharts/plotoptions/column-colorbypoint-false/
* False by default
* @sample {highcharts} highcharts/plotoptions/column-colorbypoint-true/
* True
*
* @type {boolean}
* @default false
* @since 2.0
* @product highcharts highstock gantt
* @apioption plotOptions.column.colorByPoint
*/
/**
* A series specific or series type specific color set to apply instead
* of the global [colors](#colors) when [colorByPoint](
* #plotOptions.column.colorByPoint) is true.
*
* @type {Array<Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject>}
* @since 3.0
* @product highcharts highstock gantt
* @apioption plotOptions.column.colors
*/
/**
* When `true`, the columns will center in the category, ignoring null
* or missing points. When `false`, space will be reserved for null or
* missing points.
*
* @sample {highcharts} highcharts/series-column/centerincategory/
* Center in category
* @sample {highcharts} highcharts/series/stack-centerincategory/
* Center in category, stacked and grouped
*
* @since 8.0.1
* @product highcharts highstock gantt
*/
centerInCategory: false,
/**
* Padding between each value groups, in x axis units.
*
* @sample {highcharts} highcharts/plotoptions/column-grouppadding-default/
* 0.2 by default
* @sample {highcharts} highcharts/plotoptions/column-grouppadding-none/
* No group padding - all columns are evenly spaced
*
* @product highcharts highstock gantt
*/
groupPadding: 0.2,
/**
* Whether to group non-stacked columns or to let them render
* independent of each other. Non-grouped columns will be laid out
* individually and overlap each other.
*
* @sample {highcharts} highcharts/plotoptions/column-grouping-false/
* Grouping disabled
* @sample {highstock} highcharts/plotoptions/column-grouping-false/
* Grouping disabled
*
* @type {boolean}
* @default true
* @since 2.3.0
* @product highcharts highstock gantt
* @apioption plotOptions.column.grouping
*/
/** @ignore-option */
marker: null, // Point options are specified in the base options
/**
* The maximum allowed pixel width for a column, translated to the
* height of a bar in a bar chart. This prevents the columns from
* becoming too wide when there is a small number of points in the
* chart.
*
* @see [pointWidth](#plotOptions.column.pointWidth)
*
* @sample {highcharts} highcharts/plotoptions/column-maxpointwidth-20/
* Limited to 50
* @sample {highstock} highcharts/plotoptions/column-maxpointwidth-20/
* Limited to 50
*
* @type {number}
* @since 4.1.8
* @product highcharts highstock gantt
* @apioption plotOptions.column.maxPointWidth
*/
/**
* Padding between each column or bar, in x axis units.
*
* @sample {highcharts} highcharts/plotoptions/column-pointpadding-default/
* 0.1 by default
* @sample {highcharts} highcharts/plotoptions/column-pointpadding-025/
* 0.25
* @sample {highcharts} highcharts/plotoptions/column-pointpadding-none/
* 0 for tightly packed columns
*
* @product highcharts highstock gantt
*/
pointPadding: 0.1,
/**
* A pixel value specifying a fixed width for each column or bar point.
* When set to `undefined`, the width is calculated from the
* `pointPadding` and `groupPadding`. The width effects the dimension
* that is not based on the point value. For column series it is the
* horizontal length and for bar series it is the vertical length.
*
* @see [maxPointWidth](#plotOptions.column.maxPointWidth)
*
* @sample {highcharts} highcharts/plotoptions/column-pointwidth-20/
* 20px wide columns regardless of chart width or the amount of
* data points
*
* @type {number}
* @since 1.2.5
* @product highcharts highstock gantt
* @apioption plotOptions.column.pointWidth
*/
/**
* A pixel value specifying a fixed width for the column or bar.
* Overrides pointWidth on the series.
*
* @see [series.pointWidth](#plotOptions.column.pointWidth)
*
* @type {number}
* @default undefined
* @since 7.0.0
* @product highcharts highstock gantt
* @apioption series.column.data.pointWidth
*/
/**
* The minimal height for a column or width for a bar. By default,
* 0 values are not shown. To visualize a 0 (or close to zero) point,
* set the minimal point length to a pixel value like 3\. In stacked
* column charts, minPointLength might not be respected for tightly
* packed values.
*
* @sample {highcharts} highcharts/plotoptions/column-minpointlength/
* Zero base value
* @sample {highcharts} highcharts/plotoptions/column-minpointlength-pos-and-neg/
* Positive and negative close to zero values
*
* @product highcharts highstock gantt
*/
minPointLength: 0,
/**
* When the series contains less points than the crop threshold, all
* points are drawn, event if the points fall outside the visible plot
* area at the current zoom. The advantage of drawing all points
* (including markers and columns), is that animation is performed on
* updates. On the other hand, when the series contains more points than
* the crop threshold, the series data is cropped to only contain points
* that fall within the plot area. The advantage of cropping away
* invisible points is to increase performance on large series.
*
* @product highcharts highstock gantt
*/
cropThreshold: 50,
/**
* The X axis range that each point is valid for. This determines the
* width of the column. On a categorized axis, the range will be 1
* by default (one category unit). On linear and datetime axes, the
* range will be computed as the distance between the two closest data
* points.
*
* The default `null` means it is computed automatically, but this
* option can be used to override the automatic value.
*
* This option is set by default to 1 if data sorting is enabled.
*
* @sample {highcharts} highcharts/plotoptions/column-pointrange/
* Set the point range to one day on a data set with one week
* between the points
*
* @type {number|null}
* @since 2.3
* @product highcharts highstock gantt
*/
pointRange: null,
states: {
/**
* Options for the hovered point. These settings override the normal
* state options when a point is moused over or touched.
*
* @extends plotOptions.series.states.hover
* @excluding halo, lineWidth, lineWidthPlus, marker
* @product highcharts highstock gantt
*/
hover: {
/** @ignore-option */
halo: false,
/**
* A specific border color for the hovered point. Defaults to
* inherit the normal state border color.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts gantt
* @apioption plotOptions.column.states.hover.borderColor
*/
/**
* A specific color for the hovered point.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts gantt
* @apioption plotOptions.column.states.hover.color
*/
/**
* How much to brighten the point on interaction. Requires the
* main color to be defined in hex or rgb(a) format.
*
* In styled mode, the hover brightening is by default replaced
* with a fill-opacity set in the `.highcharts-point:hover`
* rule.
*
* @sample {highcharts} highcharts/plotoptions/column-states-hover-brightness/
* Brighten by 0.5
*
* @product highcharts highstock gantt
*/
brightness: 0.1
},
/**
* Options for the selected point. These settings override the
* normal state options when a point is selected.
*
* @extends plotOptions.series.states.select
* @excluding halo, lineWidth, lineWidthPlus, marker
* @product highcharts highstock gantt
*/
select: {
/**
* A specific color for the selected point.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default #cccccc
* @product highcharts highstock gantt
*/
color: "#cccccc" /* Palette.neutralColor20 */,
/**
* A specific border color for the selected point.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default #000000
* @product highcharts highstock gantt
*/
borderColor: "#000000" /* Palette.neutralColor100 */
}
},
dataLabels: {
align: void 0,
verticalAlign: void 0,
/**
* The y position offset of the label relative to the point in
* pixels.
*
* @type {number}
*/
y: void 0
},
// False doesn't work well: https://jsfiddle.net/highcharts/hz8fopan/14/
/** @ignore-option */
startFromThreshold: true,
stickyTracking: false,
tooltip: {
distance: 6
},
/**
* The Y axis value to serve as the base for the columns, for
* distinguishing between values above and below a threshold. If `null`,
* the columns extend from the padding Y axis minimum.
*
* @type {number|null}
* @since 2.0
* @product highcharts
*/
threshold: 0,
/**
* The width of the border surrounding each column or bar. Defaults to
* `1` when there is room for a border, but to `0` when the columns are
* so dense that a border would cover the next column.
*
* In styled mode, the stroke width can be set with the
* `.highcharts-point` rule.
*
* @sample {highcharts} highcharts/plotoptions/column-borderwidth/
* 2px black border
*
* @type {number}
* @default undefined
* @product highcharts highstock gantt
* @apioption plotOptions.column.borderWidth
*/
/**
* The color of the border surrounding each column or bar.
*
* In styled mode, the border stroke can be set with the
* `.highcharts-point` rule.
*
* @sample {highcharts} highcharts/plotoptions/column-bordercolor/
* Dark gray border
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default #ffffff
* @product highcharts highstock gantt
*/
borderColor: "#ffffff" /* Palette.backgroundColor */
};
/**
* A `column` series. If the [type](#series.column.type) option is
* not specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.column
* @excluding connectNulls, dataParser, dataURL, gapSize, gapUnit, linecap,
* lineWidth, marker, connectEnds, step
* @product highcharts highstock
* @apioption series.column
*/
/**
* An array of data points for the series. For the `column` series type,
* points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` and `pointInterval` given in the series options. If the axis
* has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `x,y`. If the first value is a string, it is applied as the name of the
* point, and the `x` value is inferred.
* ```js
* data: [
* [0, 6],
* [1, 2],
* [2, 6]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.column.turboThreshold), this option is not
* available.
* ```js
* data: [{
* x: 1,
* y: 9,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 6,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
* @extends series.line.data
* @excluding marker
* @product highcharts highstock
* @apioption series.column.data
*/
/**
* The color of the border surrounding the column or bar.
*
* In styled mode, the border stroke can be set with the `.highcharts-point`
* rule.
*
* @sample {highcharts} highcharts/plotoptions/column-bordercolor/
* Dark gray border
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock
* @apioption series.column.data.borderColor
*/
/**
* The width of the border surrounding the column or bar.
*
* In styled mode, the stroke width can be set with the `.highcharts-point`
* rule.
*
* @sample {highcharts} highcharts/plotoptions/column-borderwidth/
* 2px black border
*
* @type {number}
* @product highcharts highstock
* @apioption series.column.data.borderWidth
*/
/**
* A name for the dash style to use for the column or bar. Overrides
* dashStyle on the series.
*
* In styled mode, the stroke dash-array can be set with the same classes as
* listed under [data.color](#series.column.data.color).
*
* @see [series.pointWidth](#plotOptions.column.dashStyle)
*
* @type {Highcharts.DashStyleValue}
* @apioption series.column.data.dashStyle
*/
/**
* A pixel value specifying a fixed width for the column or bar. Overrides
* pointWidth on the series. The width effects the dimension that is not based
* on the point value.
*
* @see [series.pointWidth](#plotOptions.column.pointWidth)
*
* @type {number}
* @apioption series.column.data.pointWidth
*/
/**
* @excluding halo, lineWidth, lineWidthPlus, marker
* @product highcharts highstock
* @apioption series.column.states.hover
*/
/**
* @excluding halo, lineWidth, lineWidthPlus, marker
* @product highcharts highstock
* @apioption series.column.states.select
*/
''; // Keeps doclets above in JS file
/* *
*
* Default Export
*
* */
/* harmony default export */ var Column_ColumnSeriesDefaults = (ColumnSeriesDefaults);
;// ./code/es5/es-modules/Series/Column/ColumnSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var ColumnSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var ColumnSeries_animObject = AnimationUtilities.animObject;
var ColumnSeries_color = Color_Color.parse;
var ColumnSeries_noop = Core_Globals.noop;
var ColumnSeries_clamp = Core_Utilities.clamp, ColumnSeries_crisp = Core_Utilities.crisp, ColumnSeries_defined = Core_Utilities.defined, ColumnSeries_extend = Core_Utilities.extend, ColumnSeries_fireEvent = Core_Utilities.fireEvent, ColumnSeries_isArray = Core_Utilities.isArray, ColumnSeries_isNumber = Core_Utilities.isNumber, ColumnSeries_merge = Core_Utilities.merge, ColumnSeries_pick = Core_Utilities.pick, ColumnSeries_objectEach = Core_Utilities.objectEach;
/* *
*
* Class
*
* */
/**
* The column series type.
*
* @private
* @class
* @name Highcharts.seriesTypes.column
*
* @augments Highcharts.Series
*/
var ColumnSeries = /** @class */ (function (_super) {
ColumnSeries_extends(ColumnSeries, _super);
function ColumnSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Animate the column heights one by one from zero.
*
* @private
* @function Highcharts.seriesTypes.column#animate
*
* @param {boolean} init
* Whether to initialize the animation or run it
*/
ColumnSeries.prototype.animate = function (init) {
var series = this,
yAxis = this.yAxis,
yAxisPos = yAxis.pos,
reversed = yAxis.reversed,
options = series.options,
_a = this.chart,
clipOffset = _a.clipOffset,
inverted = _a.inverted,
attr = {},
translateProp = inverted ?
'translateX' :
'translateY';
var translateStart,
translatedThreshold;
if (init && clipOffset) {
attr.scaleY = 0.001;
translatedThreshold = ColumnSeries_clamp(yAxis.toPixels(options.threshold || 0), yAxisPos, yAxisPos + yAxis.len);
if (inverted) {
// Make sure the columns don't cover the axis line during
// entrance animation
translatedThreshold += reversed ?
-Math.floor(clipOffset[0]) :
Math.ceil(clipOffset[2]);
attr.translateX = translatedThreshold - yAxis.len;
}
else {
// Make sure the columns don't cover the axis line during
// entrance animation
translatedThreshold += reversed ?
Math.ceil(clipOffset[0]) :
-Math.floor(clipOffset[2]);
attr.translateY = translatedThreshold;
}
// Apply final clipping (used in Highcharts Stock) (#7083)
// animation is done by scaleY, so clipping is for panes
if (series.clipBox) {
series.setClip();
}
series.group.attr(attr);
}
else { // Run the animation
translateStart = Number(series.group.attr(translateProp));
series.group.animate({ scaleY: 1 }, ColumnSeries_extend(ColumnSeries_animObject(series.options.animation), {
// Do the scale synchronously to ensure smooth
// updating (#5030, #7228)
step: function (val, fx) {
if (series.group) {
attr[translateProp] = translateStart +
fx.pos * (yAxisPos - translateStart);
series.group.attr(attr);
}
}
}));
}
};
/**
* Initialize the series. Extends the basic Series.init method by
* marking other series of the same type as dirty.
*
* @private
* @function Highcharts.seriesTypes.column#init
*/
ColumnSeries.prototype.init = function (chart,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
options) {
_super.prototype.init.apply(this, arguments);
var series = this;
chart = series.chart;
// If the series is added dynamically, force redraw of other
// series affected by a new column
if (chart.hasRendered) {
chart.series.forEach(function (otherSeries) {
if (otherSeries.type === series.type) {
otherSeries.isDirty = true;
}
});
}
};
/**
* Return the width and x offset of the columns adjusted for grouping,
* groupPadding, pointPadding, pointWidth etc.
*
* @private
* @function Highcharts.seriesTypes.column#getColumnMetrics
*/
ColumnSeries.prototype.getColumnMetrics = function () {
var _a,
_b;
var series = this,
options = series.options,
xAxis = series.xAxis,
yAxis = series.yAxis,
reversedStacks = xAxis.options.reversedStacks,
// Keep backward compatibility: reversed xAxis had reversed
// stacks
reverseStacks = (xAxis.reversed && !reversedStacks) ||
(!xAxis.reversed && reversedStacks),
stackGroups = {};
var stackKey,
columnCount = 0;
// Get the total number of column type series. This is called on
// every series. Consider moving this logic to a chart.orderStacks()
// function and call it on init, addSeries and removeSeries
if (options.grouping === false) {
columnCount = 1;
}
else {
series.chart.series.forEach(function (otherSeries) {
var otherYAxis = otherSeries.yAxis,
otherOptions = otherSeries.options;
var columnIndex;
if (otherSeries.type === series.type &&
otherSeries.reserveSpace() &&
yAxis.len === otherYAxis.len &&
yAxis.pos === otherYAxis.pos) { // #642, #2086
if (otherOptions.stacking &&
otherOptions.stacking !== 'group') {
stackKey = otherSeries.stackKey;
if (typeof stackGroups[stackKey] ===
'undefined') {
stackGroups[stackKey] = columnCount++;
}
columnIndex = stackGroups[stackKey];
}
else if (otherOptions.grouping !== false) { // #1162
columnIndex = columnCount++;
}
otherSeries.columnIndex = columnIndex;
}
});
}
var categoryWidth = Math.min(Math.abs(xAxis.transA) * ((!((_a = xAxis.brokenAxis) === null || _a === void 0 ? void 0 : _a.hasBreaks) && ((_b = xAxis.ordinal) === null || _b === void 0 ? void 0 : _b.slope)) ||
options.pointRange ||
xAxis.closestPointRange ||
xAxis.tickInterval ||
1), // #2610
xAxis.len // #1535
), groupPadding = categoryWidth * options.groupPadding, groupWidth = categoryWidth - 2 * groupPadding, pointOffsetWidth = groupWidth / (columnCount || 1), pointWidth = Math.min(options.maxPointWidth || xAxis.len, ColumnSeries_pick(options.pointWidth, pointOffsetWidth * (1 - 2 * options.pointPadding))), pointPadding = (pointOffsetWidth - pointWidth) / 2,
// #1251, #3737
colIndex = (series.columnIndex || 0) + (reverseStacks ? 1 : 0), pointXOffset = pointPadding +
(groupPadding +
colIndex * pointOffsetWidth -
(categoryWidth / 2)) * (reverseStacks ? -1 : 1);
// Save it for reading in linked series (Error bars particularly)
series.columnMetrics = {
width: pointWidth,
offset: pointXOffset,
paddedWidth: pointOffsetWidth,
columnCount: columnCount
};
return series.columnMetrics;
};
/**
* Make the columns crisp. The edges are rounded to the nearest full
* pixel.
*
* @private
* @function Highcharts.seriesTypes.column#crispCol
*/
ColumnSeries.prototype.crispCol = function (x, y, width, height) {
var borderWidth = this.borderWidth,
inverted = this.chart.inverted,
bottom = ColumnSeries_crisp(y + height,
borderWidth,
inverted);
// Vertical
y = ColumnSeries_crisp(y, borderWidth, inverted);
height = bottom - y;
// Horizontal. We need to first compute the exact right edge, then
// round it and compute the width from there.
if (this.options.crisp) {
var right = ColumnSeries_crisp(x + width,
borderWidth);
x = ColumnSeries_crisp(x, borderWidth);
width = right - x;
}
return { x: x, y: y, width: width, height: height };
};
/**
* Adjust for missing columns, according to the `centerInCategory`
* option. Missing columns are either single points or stacks where the
* point or points are either missing or null.
*
* @private
* @function Highcharts.seriesTypes.column#adjustForMissingColumns
* @param {number} x
* The x coordinate of the column, left side
*
* @param {number} pointWidth
* The pointWidth, already computed upstream
*
* @param {Highcharts.ColumnPoint} point
* The point instance
*
* @param {Highcharts.ColumnMetricsObject} metrics
* The series-wide column metrics
*
* @return {number}
* The adjusted x position, or the original if not adjusted
*/
ColumnSeries.prototype.adjustForMissingColumns = function (x, pointWidth, point, metrics) {
var _this = this;
var _a;
if (!point.isNull && metrics.columnCount > 1) {
var visibleSeries_1 = this.xAxis.series
.filter(function (s) { return s.visible; })
.map(function (s) { return s.index; });
var indexInCategory_1 = 0,
totalInCategory_1 = 0;
// Loop over all the stacks on the Y axis. When stacking is enabled,
// these are real point stacks. When stacking is not enabled, but
// `centerInCategory` is true, there is one stack handling the
// grouping of points in each category. This is done in the
// `setGroupedPoints` function.
ColumnSeries_objectEach((_a = this.xAxis.stacking) === null || _a === void 0 ? void 0 : _a.stacks, function (stack) {
var _a;
var points = typeof point.x === 'number' ?
(_a = stack[point.x.toString()]) === null || _a === void 0 ? void 0 : _a.points :
void 0,
pointValues = points === null || points === void 0 ? void 0 : points[_this.index],
yStackMap = {};
// Look for the index
if (points && ColumnSeries_isArray(pointValues)) {
var baseIndex_1 = _this.index;
// If there are multiple points with the same X then
// gather all series in category, and assign index
var seriesIndexes = Object
.keys(points)
.filter(function (pointKey) {
// Filter out duplicate X's
return !pointKey.match(',') &&
// Filter out null points
points[pointKey] &&
points[pointKey].length > 1;
})
.map(parseFloat)
.filter(function (index) {
return visibleSeries_1.indexOf(index) !== -1;
})
// When the series `stack` option is defined, assign
// all subsequent column of the same stack to the
// same index as the base column of the stack, then
// filter out the original series index so that
// `seriesIndexes` is shortened to the amount of
// stacks, not the amount of series (#20550).
.filter(function (index) {
var otherOptions = _this.chart.series[index]
.options,
yStack = otherOptions.stacking &&
otherOptions.stack;
if (ColumnSeries_defined(yStack)) {
if (ColumnSeries_isNumber(yStackMap[yStack])) {
if (baseIndex_1 === index) {
baseIndex_1 = yStackMap[yStack];
}
return false;
}
yStackMap[yStack] = index;
}
return true;
})
.sort(function (a, b) { return b - a; });
indexInCategory_1 = seriesIndexes.indexOf(baseIndex_1);
totalInCategory_1 = seriesIndexes.length;
}
});
indexInCategory_1 = this.xAxis.reversed ?
totalInCategory_1 - 1 - indexInCategory_1 : indexInCategory_1;
// Compute the adjusted x position
var boxWidth = (totalInCategory_1 - 1) * metrics.paddedWidth +
pointWidth;
x = (point.plotX || 0) + boxWidth / 2 - pointWidth -
indexInCategory_1 * metrics.paddedWidth;
}
return x;
};
/**
* Translate each point to the plot area coordinate system and find
* shape positions
*
* @private
* @function Highcharts.seriesTypes.column#translate
*/
ColumnSeries.prototype.translate = function () {
var series = this,
chart = series.chart,
options = series.options,
dense = series.dense =
series.closestPointRange * series.xAxis.transA < 2,
borderWidth = series.borderWidth = ColumnSeries_pick(options.borderWidth,
dense ? 0 : 1 // #3635
),
xAxis = series.xAxis,
yAxis = series.yAxis,
threshold = options.threshold,
minPointLength = ColumnSeries_pick(options.minPointLength, 5),
metrics = series.getColumnMetrics(),
seriesPointWidth = metrics.width,
seriesXOffset = series.pointXOffset = metrics.offset,
dataMin = series.dataMin,
dataMax = series.dataMax,
translatedThreshold = series.translatedThreshold =
yAxis.getThreshold(threshold);
// Postprocessed for border width
var seriesBarW = series.barW =
Math.max(seriesPointWidth, 1 + 2 * borderWidth);
// When the pointPadding is 0, we want the columns to be packed
// tightly, so we allow individual columns to have individual sizes.
// When pointPadding is greater, we strive for equal-width columns
// (#2694).
if (options.pointPadding && options.crisp) {
seriesBarW = Math.ceil(seriesBarW);
}
Series_Series.prototype.translate.apply(series);
// Record the new values
series.points.forEach(function (point) {
var yBottom = ColumnSeries_pick(point.yBottom,
translatedThreshold),
safeDistance = 999 + Math.abs(yBottom),
plotX = point.plotX || 0,
// Don't draw too far outside plot area (#1303, #2241,
// #4264)
plotY = ColumnSeries_clamp(point.plotY, -safeDistance,
yAxis.len + safeDistance);
var up,
barY = Math.min(plotY,
yBottom),
barH = Math.max(plotY,
yBottom) - barY,
pointWidth = seriesPointWidth,
barX = plotX + seriesXOffset,
barW = seriesBarW;
// Handle options.minPointLength
if (minPointLength && Math.abs(barH) < minPointLength) {
barH = minPointLength;
up = (!yAxis.reversed && !point.negative) ||
(yAxis.reversed && point.negative);
// Reverse zeros if there's no positive value in the series
// in visible range (#7046)
if (ColumnSeries_isNumber(threshold) &&
ColumnSeries_isNumber(dataMax) &&
point.y === threshold &&
dataMax <= threshold &&
// And if there's room for it (#7311)
(yAxis.min || 0) < threshold &&
// If all points are the same value (i.e zero) not draw
// as negative points (#10646), but only if there's room
// for it (#14876)
(dataMin !== dataMax || (yAxis.max || 0) <= threshold)) {
up = !up;
point.negative = !point.negative;
}
// If stacked...
barY = (Math.abs(barY - translatedThreshold) > minPointLength ?
// ...keep position
yBottom - minPointLength :
// #1485, #4051
translatedThreshold -
(up ? minPointLength : 0));
}
// Handle point.options.pointWidth
// @todo Handle grouping/stacking too. Calculate offset properly
if (ColumnSeries_defined(point.options.pointWidth)) {
pointWidth = barW =
Math.ceil(point.options.pointWidth);
barX -= Math.round((pointWidth - seriesPointWidth) / 2);
}
// Adjust for null or missing points
if (options.centerInCategory) {
barX = series.adjustForMissingColumns(barX, pointWidth, point, metrics);
}
// Cache for access in polar
point.barX = barX;
point.pointWidth = pointWidth;
// Fix the tooltip on center of grouped columns (#1216, #424,
// #3648)
point.tooltipPos = chart.inverted ?
[
ColumnSeries_clamp(yAxis.len + yAxis.pos - chart.plotLeft - plotY, yAxis.pos - chart.plotLeft, yAxis.len + yAxis.pos - chart.plotLeft),
xAxis.len + xAxis.pos - chart.plotTop - barX - barW / 2,
barH
] :
[
xAxis.left - chart.plotLeft + barX + barW / 2,
ColumnSeries_clamp(plotY + yAxis.pos -
chart.plotTop, yAxis.pos - chart.plotTop, yAxis.len + yAxis.pos - chart.plotTop),
barH
];
// Register shape type and arguments to be used in drawPoints. Allow
// `shapeType` defined on `pointClass` level.
point.shapeType = series.pointClass.prototype.shapeType ||
'roundedRect';
point.shapeArgs = series.crispCol(barX,
// #3169, drilldown from null must have a position to work from.
// #6585, dataLabel should be placed on xAxis, not floating in
// the middle of the chart.
point.isNull ? translatedThreshold : barY, barW, point.isNull ? 0 : barH);
});
// Fire a specific event after column translate. We could instead apply
// all the column logic in an `afterTranslate` event handler, but there
// are so many other series types that use the column translation, that
// it is more convenient to have a specific event for it.
ColumnSeries_fireEvent(this, 'afterColumnTranslate');
};
/**
* Columns have no graph
*
* @private
* @function Highcharts.seriesTypes.column#drawGraph
*/
ColumnSeries.prototype.drawGraph = function () {
this.group[this.dense ? 'addClass' : 'removeClass']('highcharts-dense-data');
};
/**
* Get presentational attributes
*
* @private
* @function Highcharts.seriesTypes.column#pointAttribs
*/
ColumnSeries.prototype.pointAttribs = function (point, state) {
var options = this.options, p2o = this.pointAttrToOptions || {}, strokeOption = p2o.stroke || 'borderColor', strokeWidthOption = p2o['stroke-width'] || 'borderWidth';
var stateOptions,
zone,
brightness,
fill = (point && point.color) || this.color,
// Set to fill when borderColor null:
stroke = ((point && point[strokeOption]) ||
options[strokeOption] ||
fill),
dashstyle = (point && point.options.dashStyle) || options.dashStyle,
strokeWidth = (point && point[strokeWidthOption]) ||
options[strokeWidthOption] ||
this[strokeWidthOption] || 0,
opacity = ColumnSeries_pick(point && point.opacity,
options.opacity, 1);
// Handle zone colors
if (point && this.zones.length) {
zone = point.getZone();
// When zones are present, don't use point.color (#4267).
// Changed order (#6527), added support for colorAxis (#10670)
fill = (point.options.color ||
(zone && (zone.color || point.nonZonedColor)) ||
this.color);
if (zone) {
stroke = zone.borderColor || stroke;
dashstyle = zone.dashStyle || dashstyle;
strokeWidth = zone.borderWidth || strokeWidth;
}
}
// Select or hover states
if (state && point) {
stateOptions = ColumnSeries_merge(options.states[state],
// #6401
point.options.states &&
point.options.states[state] ||
{});
brightness = stateOptions.brightness;
fill =
stateOptions.color || (typeof brightness !== 'undefined' &&
ColumnSeries_color(fill)
.brighten(stateOptions.brightness)
.get()) || fill;
stroke = stateOptions[strokeOption] || stroke;
strokeWidth =
stateOptions[strokeWidthOption] || strokeWidth;
dashstyle = stateOptions.dashStyle || dashstyle;
opacity = ColumnSeries_pick(stateOptions.opacity, opacity);
}
var ret = {
fill: fill,
stroke: stroke,
'stroke-width': strokeWidth,
opacity: opacity
};
if (dashstyle) {
ret.dashstyle = dashstyle;
}
return ret;
};
/**
* Draw the columns. For bars, the series.group is rotated, so the same
* coordinates apply for columns and bars. This method is inherited by
* scatter series.
*
* @private
* @function Highcharts.seriesTypes.column#drawPoints
*/
ColumnSeries.prototype.drawPoints = function (points) {
if (points === void 0) { points = this.points; }
var series = this,
chart = this.chart,
options = series.options,
renderer = chart.renderer,
animationLimit = options.animationLimit || 250;
var shapeArgs;
// Draw the columns
points.forEach(function (point) {
var plotY = point.plotY;
var graphic = point.graphic,
hasGraphic = !!graphic,
verb = graphic && chart.pointCount < animationLimit ?
'animate' : 'attr';
if (ColumnSeries_isNumber(plotY) && point.y !== null) {
shapeArgs = point.shapeArgs;
// When updating a series between 2d and 3d or cartesian and
// polar, the shape type changes.
if (graphic && point.hasNewShapeType()) {
graphic = graphic.destroy();
}
// Set starting position for point sliding animation.
if (series.enabledDataSorting) {
point.startXPos = series.xAxis.reversed ?
-(shapeArgs ? (shapeArgs.width || 0) : 0) :
series.xAxis.width;
}
if (!graphic) {
point.graphic = graphic =
renderer[point.shapeType](shapeArgs)
.add(point.group || series.group);
if (graphic &&
series.enabledDataSorting &&
chart.hasRendered &&
chart.pointCount < animationLimit) {
graphic.attr({
x: point.startXPos
});
hasGraphic = true;
verb = 'animate';
}
}
if (graphic && hasGraphic) { // Update
graphic[verb](ColumnSeries_merge(shapeArgs));
}
// Presentational
if (!chart.styledMode) {
graphic[verb](series.pointAttribs(point, (point.selected && 'select')))
.shadow(point.allowShadow !== false && options.shadow);
}
if (graphic) {
graphic.addClass(point.getClassName(), true);
graphic.attr({
visibility: point.visible ? 'inherit' : 'hidden'
});
}
}
else if (graphic) {
point.graphic = graphic.destroy(); // #1269
}
});
};
/**
* Draw the tracker for a point.
* @private
*/
ColumnSeries.prototype.drawTracker = function (points) {
if (points === void 0) { points = this.points; }
var series = this,
chart = series.chart,
pointer = chart.pointer,
onMouseOver = function (e) {
pointer === null || pointer === void 0 ? void 0 : pointer.normalize(e);
var point = pointer === null || pointer === void 0 ? void 0 : pointer.getPointFromEvent(e),
// Run point events only for points inside plot area, #21136
isInsidePlot = chart.scrollablePlotArea ?
chart.isInsidePlot(e.chartX - chart.plotLeft,
e.chartY - chart.plotTop, {
visiblePlotOnly: true
}) : true;
// Undefined on graph in scatterchart
if (pointer &&
point &&
series.options.enableMouseTracking &&
isInsidePlot) {
pointer.isDirectTouch = true;
point.onMouseOver(e);
}
};
var dataLabels;
// Add reference to the point
points.forEach(function (point) {
dataLabels = (ColumnSeries_isArray(point.dataLabels) ?
point.dataLabels :
(point.dataLabel ? [point.dataLabel] : []));
if (point.graphic) {
point.graphic.element.point = point;
}
dataLabels.forEach(function (dataLabel) {
(dataLabel.div || dataLabel.element).point = point;
});
});
// Add the event listeners, we need to do this only once
if (!series._hasTracking) {
series.trackerGroups.forEach(function (key) {
if (series[key]) {
// We don't always have dataLabelsGroup
series[key]
.addClass('highcharts-tracker')
.on('mouseover', onMouseOver)
.on('mouseout', function (e) {
pointer === null || pointer === void 0 ? void 0 : pointer.onTrackerMouseOut(e);
})
.on('touchstart', onMouseOver);
if (!chart.styledMode && series.options.cursor) {
series[key]
.css({ cursor: series.options.cursor });
}
}
});
series._hasTracking = true;
}
ColumnSeries_fireEvent(this, 'afterDrawTracker');
};
/**
* Remove this series from the chart
*
* @private
* @function Highcharts.seriesTypes.column#remove
*/
ColumnSeries.prototype.remove = function () {
var series = this,
chart = series.chart;
// Column and bar series affects other series of the same type
// as they are either stacked or grouped
if (chart.hasRendered) {
chart.series.forEach(function (otherSeries) {
if (otherSeries.type === series.type) {
otherSeries.isDirty = true;
}
});
}
Series_Series.prototype.remove.apply(series, arguments);
};
/* *
*
* Static Properties
*
* */
ColumnSeries.defaultOptions = ColumnSeries_merge(Series_Series.defaultOptions, Column_ColumnSeriesDefaults);
return ColumnSeries;
}(Series_Series));
ColumnSeries_extend(ColumnSeries.prototype, {
// When tooltip is not shared, this series (and derivatives) requires
// direct touch/hover. KD-tree does not apply.
directTouch: true,
getSymbol: ColumnSeries_noop,
// Use separate negative stacks, unlike area stacks where a negative
// point is subtracted from previous (#1910)
negStacks: true,
trackerGroups: ['group', 'dataLabelsGroup']
});
Series_SeriesRegistry.registerSeriesType('column', ColumnSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Column_ColumnSeries = (ColumnSeries);
/* *
*
* API Declarations
*
* */
/**
* Adjusted width and x offset of the columns for grouping.
*
* @private
* @interface Highcharts.ColumnMetricsObject
*/ /**
* Width of the columns.
* @name Highcharts.ColumnMetricsObject#width
* @type {number}
*/ /**
* Offset of the columns.
* @name Highcharts.ColumnMetricsObject#offset
* @type {number}
*/
''; // Detach doclets above
;// ./code/es5/es-modules/Core/Series/DataLabel.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var DataLabel_getDeferredAnimation = AnimationUtilities.getDeferredAnimation;
var DataLabel_format = Core_Templating.format;
var DataLabel_defined = Core_Utilities.defined, DataLabel_extend = Core_Utilities.extend, DataLabel_fireEvent = Core_Utilities.fireEvent, DataLabel_getAlignFactor = Core_Utilities.getAlignFactor, DataLabel_isArray = Core_Utilities.isArray, DataLabel_isString = Core_Utilities.isString, DataLabel_merge = Core_Utilities.merge, DataLabel_objectEach = Core_Utilities.objectEach, DataLabel_pick = Core_Utilities.pick, DataLabel_pInt = Core_Utilities.pInt, DataLabel_splat = Core_Utilities.splat;
/* *
*
* Composition
*
* */
var DataLabel;
(function (DataLabel) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* Check if this series has data labels, either a series-level setting, or
* individual. In case of individual point labels, this method is overridden
* to always return true.
* @private
*/
function hasDataLabels() {
return mergedDataLabelOptions(this)
.some(function (o) {
return o === null || o === void 0 ? void 0 : o.enabled;
});
}
/**
* Align each individual data label.
* @private
*/
function alignDataLabel(point, dataLabel, options, alignTo, isNew) {
var _a;
var series = this,
_b = this,
chart = _b.chart,
enabledDataSorting = _b.enabledDataSorting,
inverted = this.isCartesian && chart.inverted,
plotX = point.plotX,
plotY = point.plotY,
rotation = options.rotation || 0,
isInsidePlot = DataLabel_defined(plotX) &&
DataLabel_defined(plotY) &&
chart.isInsidePlot(plotX,
Math.round(plotY), {
inverted: inverted,
paneCoordinates: true,
series: series
}),
setStartPos = function (alignOptions) {
if (enabledDataSorting && series.xAxis && !justify) {
series.setDataLabelStartPos(point,
dataLabel,
isNew,
isInsidePlot,
alignOptions);
}
}, justify = rotation === 0 ? DataLabel_pick(options.overflow, (enabledDataSorting ? 'none' : 'justify')) === 'justify' : false;
// Math.round for rounding errors (#2683), alignTo to allow column
// labels (#2700)
var visible = this.visible &&
point.visible !== false &&
DataLabel_defined(plotX) &&
(point.series.forceDL ||
(enabledDataSorting && !justify) ||
isInsidePlot ||
(
// If the data label is inside the align box, it is enough
// that parts of the align box is inside the plot area
// (#12370). When stacking, it is always inside regardless
// of the option (#15148).
DataLabel_pick(options.inside, !!this.options.stacking) &&
alignTo &&
chart.isInsidePlot(plotX,
inverted ?
alignTo.x + 1 :
alignTo.y + alignTo.height - 1, {
inverted: inverted,
paneCoordinates: true,
series: series
})));
var pos = point.pos();
if (visible && pos) {
var bBox = dataLabel.getBBox(),
unrotatedbBox = dataLabel.getBBox(void 0, 0);
// The alignment box is a singular point
alignTo = DataLabel_extend({
x: pos[0],
y: Math.round(pos[1]),
width: 0,
height: 0
}, alignTo || {});
// Align to plot edges
if (options.alignTo === 'plotEdges' && series.isCartesian) {
alignTo[inverted ? 'x' : 'y'] = 0;
alignTo[inverted ? 'width' : 'height'] = ((_a = this.yAxis) === null || _a === void 0 ? void 0 : _a.len) || 0;
}
// Add the text size for alignment calculation
DataLabel_extend(options, {
width: bBox.width,
height: bBox.height
});
setStartPos(alignTo); // Data sorting
// Align the label to the adjusted box with for unrotated bBox due
// to rotationOrigin, which is based on unrotated label
dataLabel.align(DataLabel_merge(options, {
width: unrotatedbBox.width,
height: unrotatedbBox.height
}), false, alignTo, false);
dataLabel.alignAttr.x += DataLabel_getAlignFactor(options.align) *
(unrotatedbBox.width - bBox.width);
dataLabel.alignAttr.y += DataLabel_getAlignFactor(options.verticalAlign) *
(unrotatedbBox.height - bBox.height);
dataLabel[dataLabel.placed ? 'animate' : 'attr']({
'text-align': dataLabel.alignAttr['text-align'] || 'center',
x: dataLabel.alignAttr.x +
(bBox.width - unrotatedbBox.width) / 2,
y: dataLabel.alignAttr.y +
(bBox.height - unrotatedbBox.height) / 2,
rotationOriginX: (dataLabel.width || 0) / 2,
rotationOriginY: (dataLabel.height || 0) / 2
});
// Uncomment this block to visualize the bounding boxes used for
// determining visibility
// chart.renderer.rect(
// (dataLabel.alignAttr.x || 0) + chart.plotLeft,
// (dataLabel.alignAttr.y || 0) + chart.plotTop,
// bBox.width,
// bBox.height
// ).attr({
// stroke: 'rgba(0, 0, 0, 0.3)',
// 'stroke-width': 1,
// zIndex: 20
// }).add();
// chart.renderer.circle(
// chart.plotLeft + pick(dataLabel.alignAttr.x, 0),
// chart.plotTop + pick(dataLabel.alignAttr.y, 0),
// 2
// ).attr({
// fill: 'red',
// zIndex: 20
// }).add();
if (justify && alignTo.height >= 0) { // #8830
this.justifyDataLabel(dataLabel, options, dataLabel.alignAttr, bBox, alignTo, isNew);
}
else if (DataLabel_pick(options.crop, true)) {
var _c = dataLabel.alignAttr,
x = _c.x,
y = _c.y,
correction = 1;
// Check if the dataLabel should be visible.
visible =
chart.isInsidePlot(x, y, {
paneCoordinates: true,
series: series
}) &&
chart.isInsidePlot(x + bBox.width - correction, y + bBox.height - correction, {
paneCoordinates: true,
series: series
});
}
// When we're using a shape, make it possible with a connector or an
// arrow pointing to this point
if (options.shape && !rotation) {
dataLabel[isNew ? 'attr' : 'animate']({
anchorX: pos[0],
anchorY: pos[1]
});
}
}
// To use alignAttr property in hideOverlappingLabels
if (isNew && enabledDataSorting) {
dataLabel.placed = false;
}
// Show or hide based on the final aligned position
if (!visible && (!enabledDataSorting || justify)) {
dataLabel.hide();
dataLabel.placed = false; // Don't animate back in
}
else {
dataLabel.show();
dataLabel.placed = true; // Flag for overlapping logic
}
}
/**
* Handle the dataLabels.filter option.
* @private
*/
function applyFilter(point, options) {
var filter = options.filter;
if (filter) {
var op = filter.operator,
prop = point[filter.property],
val = filter.value;
if ((op === '>' && prop > val) ||
(op === '<' && prop < val) ||
(op === '>=' && prop >= val) ||
(op === '<=' && prop <= val) ||
(op === '==' && prop == val) || // eslint-disable-line eqeqeq
(op === '===' && prop === val) ||
(op === '!=' && prop != val) || // eslint-disable-line eqeqeq
(op === '!==' && prop !== val)) {
return true;
}
return false;
}
return true;
}
/**
* @private
*/
function compose(SeriesClass) {
var seriesProto = SeriesClass.prototype;
if (!seriesProto.initDataLabels) {
seriesProto.initDataLabels = initDataLabels;
seriesProto.initDataLabelsGroup = initDataLabelsGroup;
seriesProto.alignDataLabel = alignDataLabel;
seriesProto.drawDataLabels = drawDataLabels;
seriesProto.justifyDataLabel = justifyDataLabel;
seriesProto.setDataLabelStartPos = setDataLabelStartPos;
seriesProto.hasDataLabels = hasDataLabels;
}
}
DataLabel.compose = compose;
/**
* Create the SVGElement group for dataLabels
* @private
*/
function initDataLabelsGroup() {
return this.plotGroup('dataLabelsGroup', 'data-labels', this.hasRendered ? 'inherit' : 'hidden', // #5133, #10220
this.options.dataLabels.zIndex || 6);
}
/**
* Init the data labels with the correct animation
* @private
*/
function initDataLabels(animationConfig) {
var series = this,
hasRendered = series.hasRendered || 0;
// Create a separate group for the data labels to avoid rotation
var dataLabelsGroup = this.initDataLabelsGroup()
.attr({ opacity: +hasRendered }); // #3300
if (!hasRendered && dataLabelsGroup) {
if (series.visible) { // #2597, #3023, #3024
dataLabelsGroup.show();
}
if (series.options.animation) {
dataLabelsGroup.animate({ opacity: 1 }, animationConfig);
}
else {
dataLabelsGroup.attr({ opacity: 1 });
}
}
return dataLabelsGroup;
}
/**
* Draw the data labels
* @private
*/
function drawDataLabels(points) {
var _a;
points = points || this.points;
var series = this, chart = series.chart, seriesOptions = series.options, renderer = chart.renderer, _b = chart.options.chart, backgroundColor = _b.backgroundColor, plotBackgroundColor = _b.plotBackgroundColor, contrastColor = renderer.getContrast((DataLabel_isString(plotBackgroundColor) && plotBackgroundColor) ||
(DataLabel_isString(backgroundColor) && backgroundColor) ||
"#000000" /* Palette.neutralColor100 */), seriesDlOptions = mergedDataLabelOptions(series);
var pointOptions,
dataLabelsGroup;
// Resolve the animation
var _c = seriesDlOptions[0],
animation = _c.animation,
defer = _c.defer,
animationConfig = defer ?
DataLabel_getDeferredAnimation(chart,
animation,
series) :
{ defer: 0,
duration: 0 };
DataLabel_fireEvent(this, 'drawDataLabels');
if ((_a = series.hasDataLabels) === null || _a === void 0 ? void 0 : _a.call(series)) {
dataLabelsGroup = this.initDataLabels(animationConfig);
// Make the labels for each point
points.forEach(function (point) {
var _a,
_b;
var dataLabels = point.dataLabels || [];
// Merge in series options for the point.
// @note dataLabelAttribs (like pointAttribs) would eradicate
// the need for dlOptions, and simplify the section below.
pointOptions = DataLabel_splat(mergeArrays(seriesDlOptions,
// The dlOptions prop is used in treemaps
point.dlOptions || ((_a = point.options) === null || _a === void 0 ? void 0 : _a.dataLabels)));
// Handle each individual data label for this point
pointOptions.forEach(function (labelOptions, i) {
// Options for one datalabel
var labelEnabled = (labelOptions.enabled &&
(point.visible || point.dataLabelOnHidden) &&
// #2282, #4641, #7112, #10049
(!point.isNull || point.dataLabelOnNull) &&
applyFilter(point,
labelOptions)),
backgroundColor = labelOptions.backgroundColor,
borderColor = labelOptions.borderColor,
distance = labelOptions.distance,
_a = labelOptions.style,
style = _a === void 0 ? {} : _a;
var formatString,
labelText,
rotation,
attr = {},
dataLabel = dataLabels[i],
isNew = !dataLabel,
labelBgColor;
if (labelEnabled) {
// Create individual options structure that can be
// extended without affecting others
formatString = DataLabel_pick(labelOptions[point.formatPrefix + 'Format'], labelOptions.format);
labelText = DataLabel_defined(formatString) ?
DataLabel_format(formatString, point, chart) :
(labelOptions[point.formatPrefix + 'Formatter'] ||
labelOptions.formatter).call(point, labelOptions);
rotation = labelOptions.rotation;
if (!chart.styledMode) {
// Determine the color
style.color = DataLabel_pick(labelOptions.color, style.color, DataLabel_isString(series.color) ? series.color : void 0, "#000000" /* Palette.neutralColor100 */);
// Get automated contrast color
if (style.color === 'contrast') {
if (backgroundColor !== 'none') {
labelBgColor = backgroundColor;
}
point.contrastColor = renderer.getContrast(labelBgColor !== 'auto' && labelBgColor ||
(point.color || series.color));
style.color = (labelBgColor || // #20007
(!DataLabel_defined(distance) &&
labelOptions.inside) ||
DataLabel_pInt(distance || 0) < 0 ||
seriesOptions.stacking) ?
point.contrastColor :
contrastColor;
}
else {
delete point.contrastColor;
}
if (seriesOptions.cursor) {
style.cursor = seriesOptions.cursor;
}
}
attr = {
r: labelOptions.borderRadius || 0,
rotation: rotation,
padding: labelOptions.padding,
zIndex: 1
};
if (!chart.styledMode) {
attr.fill = backgroundColor === 'auto' ?
point.color :
backgroundColor;
attr.stroke = borderColor === 'auto' ?
point.color :
borderColor;
attr['stroke-width'] = labelOptions.borderWidth;
}
// Remove unused attributes (#947)
DataLabel_objectEach(attr, function (val, name) {
if (typeof val === 'undefined') {
delete attr[name];
}
});
}
// If the point is outside the plot area, or the label
// changes properties that we cannot change, destroy it and
// build a new one below. #678, #820.
if (dataLabel && (!labelEnabled ||
!DataLabel_defined(labelText) ||
!!dataLabel.div !== !!labelOptions.useHTML ||
(
// Change from no rotation to rotation and
// vice versa. Don't use defined() because
// rotation = 0 means also rotation = undefined
(!dataLabel.rotation ||
!labelOptions.rotation) &&
dataLabel.rotation !== labelOptions.rotation))) {
dataLabel = void 0;
isNew = true;
}
// Individual labels are disabled if the are explicitly
// disabled in the point options, or if they fall outside
// the plot area.
if (labelEnabled && DataLabel_defined(labelText)) {
if (!dataLabel) {
// Create new label element
dataLabel = renderer.label(labelText, 0, 0, labelOptions.shape, void 0, void 0, labelOptions.useHTML, void 0, 'data-label');
dataLabel.addClass(' highcharts-data-label-color-' +
point.colorIndex +
' ' + (labelOptions.className || '') +
( // #3398
labelOptions.useHTML ?
' highcharts-tracker' :
''));
}
else {
// Use old element and just update text
attr.text = labelText;
}
// Store data label options for later access
if (dataLabel) {
dataLabel.options = labelOptions;
dataLabel.attr(attr);
if (!chart.styledMode) {
// Styles must be applied before add in order to
// read text bounding box
dataLabel.css(style).shadow(labelOptions.shadow);
}
else if (style.width) {
// In styled mode with a width property set,
// the width should be applied to the
// dataLabel. (#20499). These properties affect
// layout and must be applied also in styled
// mode.
dataLabel.css({
width: style.width,
textOverflow: style.textOverflow,
whiteSpace: style.whiteSpace
});
}
DataLabel_fireEvent(dataLabel, 'beforeAddingDataLabel', { labelOptions: labelOptions, point: point });
if (!dataLabel.added) {
dataLabel.add(dataLabelsGroup);
}
// Now the data label is created and placed at 0,0,
// so we need to align it
series.alignDataLabel(point, dataLabel, labelOptions, void 0, isNew);
dataLabel.isActive = true;
if (dataLabels[i] && dataLabels[i] !== dataLabel) {
dataLabels[i].destroy();
}
dataLabels[i] = dataLabel;
}
}
});
// Destroy and remove the inactive ones
var j = dataLabels.length;
while (j--) {
// The item can be undefined if a disabled data label is
// succeeded by an enabled one (#19457)
if (!dataLabels[j] || !dataLabels[j].isActive) {
(_b = dataLabels[j]) === null || _b === void 0 ? void 0 : _b.destroy();
dataLabels.splice(j, 1);
}
else {
dataLabels[j].isActive = false;
}
}
// Write back
point.dataLabel = dataLabels[0];
point.dataLabels = dataLabels;
});
}
DataLabel_fireEvent(this, 'afterDrawDataLabels');
}
/**
* If data labels fall partly outside the plot area, align them back in, in
* a way that doesn't hide the point.
* @private
*/
function justifyDataLabel(dataLabel, options, alignAttr, bBox, alignTo, isNew) {
var chart = this.chart,
align = options.align,
verticalAlign = options.verticalAlign,
padding = dataLabel.box ? 0 : (dataLabel.padding || 0),
horizontalAxis = chart.inverted ? this.yAxis : this.xAxis,
horizontalAxisShift = horizontalAxis ?
horizontalAxis.left - chart.plotLeft : 0,
verticalAxis = chart.inverted ? this.xAxis : this.yAxis,
verticalAxisShift = verticalAxis ?
verticalAxis.top - chart.plotTop : 0;
var _a = options.x,
x = _a === void 0 ? 0 : _a,
_b = options.y,
y = _b === void 0 ? 0 : _b,
off,
justified;
// Off left
off = (alignAttr.x || 0) + padding + horizontalAxisShift;
if (off < 0) {
if (align === 'right' && x >= 0) {
options.align = 'left';
options.inside = true;
}
else {
x -= off;
}
justified = true;
}
// Off right
off = (alignAttr.x || 0) + bBox.width - padding + horizontalAxisShift;
if (off > chart.plotWidth) {
if (align === 'left' && x <= 0) {
options.align = 'right';
options.inside = true;
}
else {
x += chart.plotWidth - off;
}
justified = true;
}
// Off top
off = alignAttr.y + padding + verticalAxisShift;
if (off < 0) {
if (verticalAlign === 'bottom' && y >= 0) {
options.verticalAlign = 'top';
options.inside = true;
}
else {
y -= off;
}
justified = true;
}
// Off bottom
off = (alignAttr.y || 0) + bBox.height - padding + verticalAxisShift;
if (off > chart.plotHeight) {
if (verticalAlign === 'top' && y <= 0) {
options.verticalAlign = 'bottom';
options.inside = true;
}
else {
y += chart.plotHeight - off;
}
justified = true;
}
if (justified) {
options.x = x;
options.y = y;
dataLabel.placed = !isNew;
dataLabel.align(options, void 0, alignTo);
}
return justified;
}
/**
* Merge two objects that can be arrays. If one of them is an array, the
* other is merged into each element. If both are arrays, each element is
* merged by index. If neither are arrays, we use normal merge.
* @private
*/
function mergeArrays(one, two) {
var res = [],
i;
if (DataLabel_isArray(one) && !DataLabel_isArray(two)) {
res = one.map(function (el) {
return DataLabel_merge(el, two);
});
}
else if (DataLabel_isArray(two) && !DataLabel_isArray(one)) {
res = two.map(function (el) {
return DataLabel_merge(one, el);
});
}
else if (!DataLabel_isArray(one) && !DataLabel_isArray(two)) {
res = DataLabel_merge(one, two);
}
else if (DataLabel_isArray(one) && DataLabel_isArray(two)) {
i = Math.max(one.length, two.length);
while (i--) {
res[i] = DataLabel_merge(one[i], two[i]);
}
}
return res;
}
/**
* Merge plotOptions and series options for dataLabels.
* @private
*/
function mergedDataLabelOptions(series) {
var _a,
_b;
var plotOptions = series.chart.options.plotOptions;
return DataLabel_splat(mergeArrays(mergeArrays((_a = plotOptions === null || plotOptions === void 0 ? void 0 : plotOptions.series) === null || _a === void 0 ? void 0 : _a.dataLabels, (_b = plotOptions === null || plotOptions === void 0 ? void 0 : plotOptions[series.type]) === null || _b === void 0 ? void 0 : _b.dataLabels), series.options.dataLabels));
}
/**
* Set starting position for data label sorting animation.
* @private
*/
function setDataLabelStartPos(point, dataLabel, isNew, isInside, alignOptions) {
var chart = this.chart, inverted = chart.inverted, xAxis = this.xAxis, reversed = xAxis.reversed, labelCenter = ((inverted ? dataLabel.height : dataLabel.width) || 0) / 2, pointWidth = point.pointWidth, halfWidth = pointWidth ? pointWidth / 2 : 0;
dataLabel.startXPos = inverted ?
alignOptions.x :
(reversed ?
-labelCenter - halfWidth :
xAxis.width - labelCenter + halfWidth);
dataLabel.startYPos = inverted ?
(reversed ?
this.yAxis.height - labelCenter + halfWidth :
-labelCenter - halfWidth) : alignOptions.y;
// We need to handle visibility in case of sorting point outside plot
// area
if (!isInside) {
dataLabel
.attr({ opacity: 1 })
.animate({ opacity: 0 }, void 0, dataLabel.hide);
}
else if (dataLabel.visibility === 'hidden') {
dataLabel.show();
dataLabel
.attr({ opacity: 0 })
.animate({ opacity: 1 });
}
// Save start position on first render, but do not change position
if (!chart.hasRendered) {
return;
}
// Set start position
if (isNew) {
dataLabel.attr({ x: dataLabel.startXPos, y: dataLabel.startYPos });
}
dataLabel.placed = true;
}
})(DataLabel || (DataLabel = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Series_DataLabel = (DataLabel);
/* *
*
* API Declarations
*
* */
/**
* Callback JavaScript function to format the data label as a string. Note that
* if a `format` is defined, the format takes precedence and the formatter is
* ignored.
*
* @callback Highcharts.DataLabelsFormatterCallbackFunction
*
* @param {Highcharts.Point} this
* Data label context to format
*
* @param {Highcharts.DataLabelsOptions} options
* [API options](/highcharts/plotOptions.series.dataLabels) of the data label
*
* @return {number|string|null|undefined}
* Formatted data label text
*/
/**
* Values for handling data labels that flow outside the plot area.
*
* @typedef {"allow"|"justify"} Highcharts.DataLabelsOverflowValue
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Series/Column/ColumnDataLabel.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var ColumnDataLabel_composed = Core_Globals.composed;
var ColumnDataLabel_Series = Series_SeriesRegistry.series;
var ColumnDataLabel_merge = Core_Utilities.merge, ColumnDataLabel_pick = Core_Utilities.pick, ColumnDataLabel_pushUnique = Core_Utilities.pushUnique;
/* *
*
* Composition
*
* */
var ColumnDataLabel;
(function (ColumnDataLabel) {
/* *
*
* Functions
*
* */
/**
* Override the basic data label alignment by adjusting for the position of
* the column.
* @private
*/
function alignDataLabel(point, dataLabel, options, alignTo, isNew) {
var inverted = this.chart.inverted,
series = point.series,
xLen = (series.xAxis ? series.xAxis.len : this.chart.plotSizeX) || 0,
yLen = (series.yAxis ? series.yAxis.len : this.chart.plotSizeY) || 0,
// Data label box for alignment
dlBox = point.dlBox || point.shapeArgs,
below = ColumnDataLabel_pick(point.below, // Range series
point.plotY >
ColumnDataLabel_pick(this.translatedThreshold,
yLen)),
// Draw it inside the box?
inside = ColumnDataLabel_pick(options.inside, !!this.options.stacking);
// Align to the column itself, or the top of it
if (dlBox) { // Area range uses this method but not alignTo
alignTo = ColumnDataLabel_merge(dlBox);
// Check for specific overflow and crop conditions (#13240)
if (!(options.overflow === 'allow' && options.crop === false)) {
if (alignTo.y < 0) {
alignTo.height += alignTo.y;
alignTo.y = 0;
}
// If parts of the box overshoots outside the plot area, modify
// the box to center the label inside
var overshoot = alignTo.y + alignTo.height - yLen;
if (overshoot > 0 && overshoot < alignTo.height - 1) {
alignTo.height -= overshoot;
}
}
if (inverted) {
alignTo = {
x: yLen - alignTo.y - alignTo.height,
y: xLen - alignTo.x - alignTo.width,
width: alignTo.height,
height: alignTo.width
};
}
// Compute the alignment box
if (!inside) {
if (inverted) {
alignTo.x += below ? 0 : alignTo.width;
alignTo.width = 0;
}
else {
alignTo.y += below ? alignTo.height : 0;
alignTo.height = 0;
}
}
}
// When alignment is undefined (typically columns and bars), display the
// individual point below or above the point depending on the threshold
options.align = ColumnDataLabel_pick(options.align, !inverted || inside ? 'center' : below ? 'right' : 'left');
options.verticalAlign = ColumnDataLabel_pick(options.verticalAlign, inverted || inside ? 'middle' : below ? 'top' : 'bottom');
// Call the parent method
ColumnDataLabel_Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
// If label was justified and we have contrast, set it:
if (options.inside && point.contrastColor) {
dataLabel.css({
color: point.contrastColor
});
}
}
/** @private */
function compose(ColumnSeriesClass) {
Series_DataLabel.compose(ColumnDataLabel_Series);
if (ColumnDataLabel_pushUnique(ColumnDataLabel_composed, 'ColumnDataLabel')) {
ColumnSeriesClass.prototype.alignDataLabel = alignDataLabel;
}
}
ColumnDataLabel.compose = compose;
})(ColumnDataLabel || (ColumnDataLabel = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Column_ColumnDataLabel = (ColumnDataLabel);
;// ./code/es5/es-modules/Series/Bar/BarSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var BarSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var BarSeries_extend = Core_Utilities.extend, BarSeries_merge = Core_Utilities.merge;
/* *
*
* Class
*
* */
/**
* Bar series type.
*
* @private
* @class
* @name Highcharts.seriesTypes.bar
*
* @augments Highcharts.Series
*/
var BarSeries = /** @class */ (function (_super) {
BarSeries_extends(BarSeries, _super);
function BarSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Static Properties
*
* */
/**
* A bar series is a special type of column series where the columns are
* horizontal.
*
* @sample highcharts/demo/bar-chart/
* Bar chart
*
* @extends plotOptions.column
* @product highcharts
* @optionparent plotOptions.bar
*/
BarSeries.defaultOptions = BarSeries_merge(Column_ColumnSeries.defaultOptions, {
// Nothing here yet
});
return BarSeries;
}(Column_ColumnSeries));
BarSeries_extend(BarSeries.prototype, {
inverted: true
});
Series_SeriesRegistry.registerSeriesType('bar', BarSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Bar_BarSeries = ((/* unused pure expression or super */ null && (BarSeries)));
/* *
*
* API Options
*
* */
/**
* A `bar` series. If the [type](#series.bar.type) option is not specified,
* it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.bar
* @excluding connectNulls, dashStyle, dataParser, dataURL, gapSize, gapUnit,
* linecap, lineWidth, marker, connectEnds, step
* @product highcharts
* @apioption series.bar
*/
/**
* An array of data points for the series. For the `bar` series type,
* points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` and `pointInterval` given in the series options. If the axis
* has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `x,y`. If the first value is a string, it is applied as the name of the
* point, and the `x` value is inferred.
* ```js
* data: [
* [0, 5],
* [1, 10],
* [2, 3]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.bar.turboThreshold), this option is not
* available.
* ```js
* data: [{
* x: 1,
* y: 1,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 10,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
* @extends series.column.data
* @product highcharts
* @apioption series.bar.data
*/
/**
* @excluding halo,lineWidth,lineWidthPlus,marker
* @product highcharts highstock
* @apioption series.bar.states.hover
*/
/**
* @excluding halo,lineWidth,lineWidthPlus,marker
* @product highcharts highstock
* @apioption series.bar.states.select
*/
''; // Gets doclets above into transpiled
;// ./code/es5/es-modules/Series/Scatter/ScatterSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* A scatter plot uses cartesian coordinates to display values for two
* variables for a set of data.
*
* @sample {highcharts} highcharts/demo/scatter/
* Scatter plot
*
* @extends plotOptions.line
* @excluding cropThreshold, legendSymbolColor, pointPlacement, shadow,
* useOhlcData
* @product highcharts highstock
* @optionparent plotOptions.scatter
*/
var ScatterSeriesDefaults = {
/**
* The width of the line connecting the data points.
*
* @sample {highcharts} highcharts/plotoptions/scatter-linewidth-none/
* 0 by default
* @sample {highcharts} highcharts/plotoptions/scatter-linewidth-1/
* 1px
*
* @product highcharts highstock
*/
lineWidth: 0,
findNearestPointBy: 'xy',
/**
* Apply a jitter effect for the rendered markers. When plotting
* discrete values, a little random noise may help telling the points
* apart. The jitter setting applies a random displacement of up to `n`
* axis units in either direction. So for example on a horizontal X
* axis, setting the `jitter.x` to 0.24 will render the point in a
* random position between 0.24 units to the left and 0.24 units to the
* right of the true axis position. On a category axis, setting it to
* 0.5 will fill up the bin and make the data appear continuous.
*
* When rendered on top of a box plot or a column series, a jitter value
* of 0.24 will correspond to the underlying series' default
* [groupPadding](
* https://api.highcharts.com/highcharts/plotOptions.column.groupPadding)
* and [pointPadding](
* https://api.highcharts.com/highcharts/plotOptions.column.pointPadding)
* settings.
*
* **Note:** With boost mode enabled, the jitter effect is not supported.
*
* @sample {highcharts} highcharts/demo/scatter-jitter
* Jitter on a scatter plot
*
* @sample {highcharts} highcharts/series-scatter/jitter-boxplot
* Jittered scatter plot on top of a box plot
*
* @product highcharts highstock
* @since 7.0.2
*/
jitter: {
/**
* The maximal X offset for the random jitter effect.
*/
x: 0,
/**
* The maximal Y offset for the random jitter effect.
*/
y: 0
},
marker: {
enabled: true // Overrides auto-enabling in line series (#3647)
},
/**
* Sticky tracking of mouse events. When true, the `mouseOut` event
* on a series isn't triggered until the mouse moves over another
* series, or out of the plot area. When false, the `mouseOut` event on
* a series is triggered when the mouse leaves the area around the
* series' graph or markers. This also implies the tooltip. When
* `stickyTracking` is false and `tooltip.shared` is false, the tooltip
* will be hidden when moving the mouse between series.
*
* @type {boolean}
* @default false
* @product highcharts highstock highmaps
* @apioption plotOptions.scatter.stickyTracking
*/
/**
* A configuration object for the tooltip rendering of each single
* series. Properties are inherited from [tooltip](#tooltip).
* Overridable properties are `headerFormat`, `pointFormat`,
* `yDecimals`, `xDateFormat`, `yPrefix` and `ySuffix`. Unlike other
* series, in a scatter plot the series.name by default shows in the
* headerFormat and point.x and point.y in the pointFormat.
*
* @product highcharts highstock highmaps
*/
tooltip: {
/**
* @product highcharts highstock
*/
headerFormat: '<span style="color:{point.color}">\u25CF</span> ' +
'<span style="font-size: 0.8em"> {series.name}</span><br/>',
pointFormat: 'x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>'
}
};
/**
* A `scatter` series. If the [type](#series.scatter.type) option is
* not specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.scatter
* @excluding cropThreshold, dataParser, dataURL, useOhlcData
* @product highcharts highstock
* @apioption series.scatter
*/
/**
* An array of data points for the series. For the `scatter` series
* type, points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` and `pointInterval` given in the series options. If the axis
* has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `x,y`. If the first value is a string, it is applied as the name of the
* point, and the `x` value is inferred.
* ```js
* data: [
* [0, 0],
* [1, 8],
* [2, 9]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.scatter.turboThreshold), this option is not
* available.
* ```js
* data: [{
* x: 1,
* y: 2,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 4,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
* @extends series.line.data
* @product highcharts highstock
* @apioption series.scatter.data
*/
''; // Keeps doclets above in JS file
/* *
*
* Default Export
*
* */
/* harmony default export */ var Scatter_ScatterSeriesDefaults = (ScatterSeriesDefaults);
;// ./code/es5/es-modules/Series/Scatter/ScatterSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var ScatterSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var ScatterSeries_a = Series_SeriesRegistry.seriesTypes, ScatterSeries_ColumnSeries = ScatterSeries_a.column, ScatterSeries_LineSeries = ScatterSeries_a.line;
var ScatterSeries_addEvent = Core_Utilities.addEvent, ScatterSeries_extend = Core_Utilities.extend, ScatterSeries_merge = Core_Utilities.merge;
/* *
*
* Class
*
* */
/**
* Scatter series type.
*
* @private
*/
var ScatterSeries = /** @class */ (function (_super) {
ScatterSeries_extends(ScatterSeries, _super);
function ScatterSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Optionally add the jitter effect.
* @private
*/
ScatterSeries.prototype.applyJitter = function () {
var series = this,
jitter = this.options.jitter,
len = this.points.length;
/**
* Return a repeatable, pseudo-random number based on an integer
* seed.
* @private
*/
function unrandom(seed) {
var rand = Math.sin(seed) * 10000;
return rand - Math.floor(rand);
}
if (jitter) {
this.points.forEach(function (point, i) {
['x', 'y'].forEach(function (dim, j) {
if (jitter[dim] && !point.isNull) {
var plotProp = "plot".concat(dim.toUpperCase()), axis = series["" + dim + "Axis"], translatedJitter = jitter[dim] *
axis.transA;
if (axis && !axis.logarithmic) {
// Identify the outer bounds of the jitter range
var min = Math.max(0, (point[plotProp] || 0) - translatedJitter),
max = Math.min(axis.len, (point[plotProp] || 0) + translatedJitter);
// Find a random position within this range
point[plotProp] = min +
(max - min) * unrandom(i + j * len);
// Update clientX for the tooltip k-d-tree
if (dim === 'x') {
point.clientX = point.plotX;
}
}
}
});
});
}
};
/**
* @private
*/
ScatterSeries.prototype.drawGraph = function () {
if (this.options.lineWidth) {
_super.prototype.drawGraph.call(this);
}
else if (this.graph) {
this.graph = this.graph.destroy();
}
};
/* *
*
* Static Properties
*
* */
ScatterSeries.defaultOptions = ScatterSeries_merge(ScatterSeries_LineSeries.defaultOptions, Scatter_ScatterSeriesDefaults);
return ScatterSeries;
}(ScatterSeries_LineSeries));
ScatterSeries_extend(ScatterSeries.prototype, {
drawTracker: ScatterSeries_ColumnSeries.prototype.drawTracker,
sorted: false,
requireSorting: false,
noSharedTooltip: true,
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup']
});
/* *
*
* Events
*
* */
/* eslint-disable no-invalid-this */
ScatterSeries_addEvent(ScatterSeries, 'afterTranslate', function () {
this.applyJitter();
});
Series_SeriesRegistry.registerSeriesType('scatter', ScatterSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Scatter_ScatterSeries = ((/* unused pure expression or super */ null && (ScatterSeries)));
;// ./code/es5/es-modules/Series/CenteredUtilities.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var CenteredUtilities_deg2rad = Core_Globals.deg2rad;
var CenteredUtilities_fireEvent = Core_Utilities.fireEvent, CenteredUtilities_isNumber = Core_Utilities.isNumber, CenteredUtilities_pick = Core_Utilities.pick, CenteredUtilities_relativeLength = Core_Utilities.relativeLength;
/**
* @private
*/
var CenteredUtilities;
(function (CenteredUtilities) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Get the center of the pie based on the size and center options relative
* to the plot area. Borrowed by the polar and gauge series types.
*
* @private
* @function Highcharts.CenteredSeriesMixin.getCenter
*/
function getCenter() {
var options = this.options,
chart = this.chart,
slicingRoom = 2 * (options.slicedOffset || 0),
plotWidth = chart.plotWidth - 2 * slicingRoom,
plotHeight = chart.plotHeight - 2 * slicingRoom,
centerOption = options.center,
smallestSize = Math.min(plotWidth,
plotHeight),
thickness = options.thickness;
var handleSlicingRoom,
size = options.size,
innerSize = options.innerSize || 0,
i,
value;
if (typeof size === 'string') {
size = parseFloat(size);
}
if (typeof innerSize === 'string') {
innerSize = parseFloat(innerSize);
}
var positions = [
CenteredUtilities_pick(centerOption === null || centerOption === void 0 ? void 0 : centerOption[0], '50%'),
CenteredUtilities_pick(centerOption === null || centerOption === void 0 ? void 0 : centerOption[1], '50%'),
// Prevent from negative values
CenteredUtilities_pick(size && size < 0 ? void 0 : options.size, '100%'),
CenteredUtilities_pick(innerSize && innerSize < 0 ? void 0 : options.innerSize || 0, '0%')
];
// No need for inner size in angular (gauges) series but still required
// for pie series
if (chart.angular && !(this instanceof Series_Series)) {
positions[3] = 0;
}
for (i = 0; i < 4; ++i) {
value = positions[i];
handleSlicingRoom = i < 2 || (i === 2 && /%$/.test(value));
// I == 0: centerX, relative to width
// i == 1: centerY, relative to height
// i == 2: size, relative to smallestSize
// i == 3: innerSize, relative to size
positions[i] = CenteredUtilities_relativeLength(value, [plotWidth, plotHeight, smallestSize, positions[2]][i]) + (handleSlicingRoom ? slicingRoom : 0);
}
// Inner size cannot be larger than size (#3632)
if (positions[3] > positions[2]) {
positions[3] = positions[2];
}
// Thickness overrides innerSize, need to be less than pie size (#6647)
if (CenteredUtilities_isNumber(thickness) &&
thickness * 2 < positions[2] && thickness > 0) {
positions[3] = positions[2] - thickness * 2;
}
CenteredUtilities_fireEvent(this, 'afterGetCenter', { positions: positions });
return positions;
}
CenteredUtilities.getCenter = getCenter;
/**
* GetStartAndEndRadians - Calculates start and end angles in radians.
* Used in series types such as pie and sunburst.
*
* @private
* @function Highcharts.CenteredSeriesMixin.getStartAndEndRadians
*
* @param {number} [start]
* Start angle in degrees.
*
* @param {number} [end]
* Start angle in degrees.
*
* @return {Highcharts.RadianAngles}
* Returns an object containing start and end angles as radians.
*/
function getStartAndEndRadians(start, end) {
var startAngle = CenteredUtilities_isNumber(start) ? start : 0, // Must be a number
endAngle = ((CenteredUtilities_isNumber(end) && // Must be a number
end > startAngle && // Must be larger than the start angle
// difference must be less than 360 degrees
(end - startAngle) < 360) ?
end :
startAngle + 360),
correction = -90;
return {
start: CenteredUtilities_deg2rad * (startAngle + correction),
end: CenteredUtilities_deg2rad * (endAngle + correction)
};
}
CenteredUtilities.getStartAndEndRadians = getStartAndEndRadians;
})(CenteredUtilities || (CenteredUtilities = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Series_CenteredUtilities = (CenteredUtilities);
/* *
*
* API Declarations
*
* */
/**
* @private
* @interface Highcharts.RadianAngles
*/ /**
* @name Highcharts.RadianAngles#end
* @type {number}
*/ /**
* @name Highcharts.RadianAngles#start
* @type {number}
*/
''; // Keeps doclets above in JS file
;// ./code/es5/es-modules/Series/Pie/PiePoint.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var PiePoint_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var PiePoint_assign = (undefined && undefined.__assign) || function () {
PiePoint_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return PiePoint_assign.apply(this, arguments);
};
var PiePoint_setAnimation = AnimationUtilities.setAnimation;
var PiePoint_addEvent = Core_Utilities.addEvent, PiePoint_defined = Core_Utilities.defined, PiePoint_extend = Core_Utilities.extend, PiePoint_isNumber = Core_Utilities.isNumber, PiePoint_pick = Core_Utilities.pick, PiePoint_relativeLength = Core_Utilities.relativeLength;
/* *
*
* Class
*
* */
var PiePoint = /** @class */ (function (_super) {
PiePoint_extends(PiePoint, _super);
/**
* Initialize the pie slice.
* @private
*/
function PiePoint(series, options, x) {
var _a;
var _this = _super.call(this,
series,
options,
x) || this;
_this.half = 0;
(_a = _this.name) !== null && _a !== void 0 ? _a : (_this.name = 'Slice');
// Add event listener for select
var toggleSlice = function (e) {
_this.slice(e.type === 'select');
};
PiePoint_addEvent(_this, 'select', toggleSlice);
PiePoint_addEvent(_this, 'unselect', toggleSlice);
return _this;
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Extendable method for getting the path of the connector between the
* data label and the pie slice.
* @private
*/
PiePoint.prototype.getConnectorPath = function (dataLabel) {
var labelPosition = dataLabel.dataLabelPosition,
options = (dataLabel.options || {}),
connectorShape = options.connectorShape,
shapeFunc = (this.connectorShapes[connectorShape] || connectorShape);
return labelPosition && shapeFunc.call(this, PiePoint_assign(PiePoint_assign({}, labelPosition.computed), { alignment: labelPosition.alignment }), labelPosition.connectorPosition, options) || [];
};
/**
* @private
*/
PiePoint.prototype.getTranslate = function () {
return this.sliced && this.slicedTranslation || {
translateX: 0,
translateY: 0
};
};
/**
* @private
*/
PiePoint.prototype.haloPath = function (size) {
var shapeArgs = this.shapeArgs;
return this.sliced || !this.visible ?
[] :
this.series.chart.renderer.symbols.arc(shapeArgs.x, shapeArgs.y, shapeArgs.r + size, shapeArgs.r + size, {
// Substract 1px to ensure the background is not bleeding
// through between the halo and the slice (#7495).
innerR: shapeArgs.r - 1,
start: shapeArgs.start,
end: shapeArgs.end,
borderRadius: shapeArgs.borderRadius
});
};
/**
* Negative points are not valid (#1530, #3623, #5322)
* @private
*/
PiePoint.prototype.isValid = function () {
return PiePoint_isNumber(this.y) && this.y >= 0;
};
/**
* Toggle the visibility of a pie slice or other data point. Note that this
* method is available only for some series, like pie, treemap and sunburst.
*
* @function Highcharts.Point#setVisible
*
* @param {boolean} [vis]
* True to show the pie slice or other data point, false to hide. If
* undefined, the visibility is toggled.
*
* @param {boolean} [redraw] Whether to redraw the chart after the point is
* altered. If doing more operations on the chart, it is a good idea to set
* redraw to false and call {@link Chart#redraw|chart.redraw()} after.
*
*/
PiePoint.prototype.setVisible = function (vis, redraw) {
if (redraw === void 0) { redraw = true; }
if (vis !== this.visible) {
// If called without an argument, toggle visibility
this.update({
visible: vis !== null && vis !== void 0 ? vis : !this.visible
}, redraw, void 0, false);
}
};
/**
* Set or toggle whether the slice is cut out from the pie.
* @private
*
* @param {boolean} sliced
* When undefined, the slice state is toggled.
*
* @param {boolean} [redraw]
* Whether to redraw the chart. True by default.
*
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Animation options.
*/
PiePoint.prototype.slice = function (sliced, redraw, animation) {
var series = this.series,
chart = series.chart;
PiePoint_setAnimation(animation, chart);
// Redraw is true by default
redraw = PiePoint_pick(redraw, true);
/**
* Pie series only. Whether to display a slice offset from the
* center.
* @name Highcharts.Point#sliced
* @type {boolean|undefined}
*/
// if called without an argument, toggle
this.sliced = this.options.sliced = sliced =
PiePoint_defined(sliced) ? sliced : !this.sliced;
// Update userOptions.data
series.options.data[series.data.indexOf(this)] =
this.options;
if (this.graphic) {
this.graphic.animate(this.getTranslate());
}
};
return PiePoint;
}(Series_Point));
PiePoint_extend(PiePoint.prototype, {
connectorShapes: {
// Only one available before v7.0.0
fixedOffset: function (labelPosition, connectorPosition, options) {
var breakAt = connectorPosition.breakAt,
touchingSliceAt = connectorPosition.touchingSliceAt,
lineSegment = options.softConnector ? [
'C', // Soft break
// 1st control point (of the curve)
labelPosition.x +
// 5 gives the connector a little horizontal bend
(labelPosition.alignment === 'left' ? -5 : 5),
labelPosition.y, //
2 * breakAt.x - touchingSliceAt.x, // 2nd control point
2 * breakAt.y - touchingSliceAt.y, //
breakAt.x, // End of the curve
breakAt.y //
] : [
'L', // Pointy break
breakAt.x,
breakAt.y
];
// Assemble the path
return ([
['M', labelPosition.x, labelPosition.y],
lineSegment,
['L', touchingSliceAt.x, touchingSliceAt.y]
]);
},
straight: function (labelPosition, connectorPosition) {
var touchingSliceAt = connectorPosition.touchingSliceAt;
// Direct line to the slice
return [
['M', labelPosition.x, labelPosition.y],
['L', touchingSliceAt.x, touchingSliceAt.y]
];
},
crookedLine: function (labelPosition, connectorPosition, options) {
var _a = connectorPosition.angle,
angle = _a === void 0 ? this.angle || 0 : _a,
breakAt = connectorPosition.breakAt,
touchingSliceAt = connectorPosition.touchingSliceAt,
series = this.series,
_b = series.center,
cx = _b[0],
cy = _b[1],
diameter = _b[2],
r = diameter / 2,
_c = series.chart,
plotLeft = _c.plotLeft,
plotWidth = _c.plotWidth,
leftAligned = labelPosition.alignment === 'left',
x = labelPosition.x,
y = labelPosition.y;
var crookX = breakAt.x;
if (options.crookDistance) {
var crookDistance = PiePoint_relativeLength(// % to fraction
options.crookDistance, 1);
crookX = leftAligned ?
cx +
r +
(plotWidth + plotLeft - cx - r) * (1 - crookDistance) :
plotLeft + (cx - r) * crookDistance;
// When the crookDistance option is undefined, make the bend in the
// intersection between the radial line in the middle of the slice,
// and the extension of the label position.
}
else {
crookX = cx + (cy - y) * Math.tan(angle - Math.PI / 2);
}
var path = [['M',
x,
y]];
// The crookedLine formula doesn't make sense if the path overlaps
// the label - use straight line instead in that case
if (leftAligned ?
(crookX <= x && crookX >= breakAt.x) :
(crookX >= x && crookX <= breakAt.x)) {
path.push(['L', crookX, y]);
}
path.push(['L', breakAt.x, breakAt.y], ['L', touchingSliceAt.x, touchingSliceAt.y]);
return path;
}
}
});
/* *
*
* Default Export
*
* */
/* harmony default export */ var Pie_PiePoint = (PiePoint);
;// ./code/es5/es-modules/Series/Pie/PieSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* A pie chart is a circular graphic which is divided into slices to
* illustrate numerical proportion.
*
* @sample highcharts/demo/pie-chart/
* Pie chart
*
* @extends plotOptions.line
* @excluding animationLimit, boostThreshold, connectEnds, connectNulls,
* cropThreshold, dashStyle, dataSorting, dragDrop,
* findNearestPointBy, getExtremesFromAll, label, lineWidth,
* linkedTo, marker, negativeColor, pointInterval,
* pointIntervalUnit, pointPlacement, pointStart,
* softThreshold, stacking, step, threshold, turboThreshold,
* zoneAxis, zones, dataSorting, boostBlending
* @product highcharts highmaps
* @optionparent plotOptions.pie
*
* @private
*/
var PieSeriesDefaults = {
/**
* The corner radius of the border surrounding each slice. A number
* signifies pixels. A percentage string, like for example `50%`, signifies
* a size relative to the radius and the inner radius.
*
* @sample highcharts/plotoptions/series-border-radius
* Column and pie with rounded border
*
* @since 11.0.0
*
* @type {number|string|Highcharts.BorderRadiusOptionsObject}
*/
borderRadius: 3,
/**
* @excluding legendItemClick
* @apioption plotOptions.pie.events
*/
/**
* Fires when the checkbox next to the point name in the legend is
* clicked. One parameter, event, is passed to the function. The state
* of the checkbox is found by event.checked. The checked item is found
* by event.item. Return false to prevent the default action which is to
* toggle the select state of the series.
*
* @sample {highcharts} highcharts/plotoptions/series-events-checkboxclick/
* Alert checkbox status
*
* @type {Function}
* @since 1.2.0
* @product highcharts highmaps
* @context Highcharts.Point
* @apioption plotOptions.pie.events.checkboxClick
*/
/**
* Fires when the legend item belonging to the pie point (slice) is
* clicked. The `this` keyword refers to the point itself. One
* parameter, `event`, is passed to the function, containing common
* event information. The default action is to toggle the visibility of
* the point. This can be prevented by calling `event.preventDefault()`.
*
* **Note:** This option is deprecated in favor of
* [legend.events.itemClick](#legend.events.itemClick).
*
* @deprecated 11.4.4
* @type {Highcharts.PointLegendItemClickCallbackFunction}
* @since 1.2.0
* @product highcharts highmaps
* @apioption plotOptions.pie.point.events.legendItemClick
*/
/**
* The center of the pie chart relative to the plot area. Can be
* percentages or pixel values. The default behaviour (as of 3.0) is to
* center the pie so that all slices and data labels are within the plot
* area. As a consequence, the pie may actually jump around in a chart
* with dynamic values, as the data labels move. In that case, the
* center should be explicitly set, for example to `["50%", "50%"]`.
*
* @sample {highcharts} highcharts/plotoptions/pie-center/
* Centered at 100, 100
*
* @type {Array<(number|string|null),(number|string|null)>}
* @default [null, null]
* @product highcharts highmaps
*
* @private
*/
center: [null, null],
/**
* The color of the pie series. A pie series is represented as an empty
* circle if the total sum of its values is 0. Use this property to
* define the color of its border.
*
* In styled mode, the color can be defined by the
* [colorIndex](#plotOptions.series.colorIndex) option. Also, the series
* color can be set with the `.highcharts-series`,
* `.highcharts-color-{n}`, `.highcharts-{type}-series` or
* `.highcharts-series-{n}` class, or individual classes given by the
* `className` option.
*
* @sample {highcharts} highcharts/plotoptions/pie-emptyseries/
* Empty pie series
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default ${palette.neutralColor20}
* @apioption plotOptions.pie.color
*/
/**
* @product highcharts
*
* @private
*/
clip: false,
/**
* @ignore-option
*
* @private
*/
colorByPoint: true, // Always true for pies
/**
* A series specific or series type specific color set to use instead
* of the global [colors](#colors).
*
* @sample {highcharts} highcharts/demo/pie-monochrome/
* Set default colors for all pies
*
* @type {Array<Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject>}
* @since 3.0
* @product highcharts highmaps
* @apioption plotOptions.pie.colors
*/
/**
* @declare Highcharts.SeriesPieDataLabelsOptionsObject
* @extends plotOptions.series.dataLabels
* @excluding align, allowOverlap, inside, staggerLines, step
* @private
*/
dataLabels: {
/**
* Alignment method for data labels. Possible values are:
*
* - `plotEdges`: Each label touches the nearest vertical edge of
* the plot area.
*
* - `connectors`: Connectors have the same x position and the
* widest label of each half (left & right) touches the nearest
* vertical edge of the plot area.
*
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-alignto-connectors/
* alignTo: connectors
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-alignto-plotedges/
* alignTo: plotEdges
*
* @type {string}
* @since 7.0.0
* @product highcharts highmaps
* @apioption plotOptions.pie.dataLabels.alignTo
*/
/**
* The color of the line connecting the data label to the pie slice.
* The default color is the same as the point's color.
*
* In styled mode, the connector stroke is given in the
* `.highcharts-data-label-connector` class.
*
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorcolor/
* Blue connectors
* @sample {highcharts} highcharts/css/pie-point/
* Styled connectors
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 2.1
* @product highcharts highmaps
* @apioption plotOptions.pie.dataLabels.connectorColor
*/
/**
* The distance from the data label to the connector. Note that
* data labels also have a default `padding`, so in order for the
* connector to touch the text, the `padding` must also be 0.
*
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorpadding/
* No padding
*
* @since 2.1
* @product highcharts highmaps
*/
connectorPadding: 5,
/**
* Specifies the method that is used to generate the connector path.
* Highcharts provides 3 built-in connector shapes: `'crookedLine'`
* (default since v11), `'fixedOffset'` and `'straight'`.
*
* Users can provide their own method by passing a function instead of a
* string. Three arguments are passed to the callback:
*
* - An object that holds the information about the coordinates of the
* label (`x` & `y` properties) and how the label is located in
* relation to the pie (`alignment` property). `alignment` can by one
* of the following: `'left'` (pie on the left side of the data
* label), `'right'` (pie on the right side of the data label) or
* `'center'` (data label overlaps the pie).
*
* - An object that holds the information about the position of the
* connector. Its `touchingSliceAt` porperty tells the position of
* the place where the connector touches the slice.
*
* - Data label options
*
* The function has to return an SVG path definition in array form (see
* the example).
*
* @sample {highcharts}
* highcharts/plotoptions/pie-datalabels-connectorshape-string/
* connectorShape is a String
* @sample {highcharts}
* highcharts/plotoptions/pie-datalabels-connectorshape-function/
* connectorShape is a function
*
* @type {string|Function}
* @since 7.0.0
* @product highcharts highmaps
*/
connectorShape: 'crookedLine',
/**
* The width of the line connecting the data label to the pie slice.
*
* In styled mode, the connector stroke width is given in the
* `.highcharts-data-label-connector` class.
*
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-connectorwidth-disabled/
* Disable the connector
* @sample {highcharts} highcharts/css/pie-point/
* Styled connectors
*
* @type {number}
* @default 1
* @since 2.1
* @product highcharts highmaps
* @apioption plotOptions.pie.dataLabels.connectorWidth
*/
/**
* Works only if `connectorShape` is `'crookedLine'`. It defines how
* far from the vertical plot edge the coonnector path should be
* crooked. With the default, `undefined`, the crook is placed so that
* the horizontal line from the label intersects with the radial line
* extending through the center of the pie slice.
*
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-crookdistance/
* crookDistance set to 90%
*
* @since 7.0.0
* @product highcharts highmaps
*/
crookDistance: void 0,
/**
* The distance of the data label from the pie's edge. Negative
* numbers put the data label on top of the pie slices. Can also be
* defined as a percentage of pie's radius. Connectors are only
* shown for data labels outside the pie.
*
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-distance/
* Data labels on top of the pie
*
* @type {number|string}
* @since 2.1
* @product highcharts highmaps
*/
distance: 30,
enabled: true,
/**
* A
* [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
* for the data label. Available variables are the same as for
* `formatter`.
*
* @sample {highcharts} highcharts/plotoptions/series-datalabels-format/
* Add a unit
*
* @type {string}
* @default undefined
* @since 3.0
* @apioption plotOptions.pie.dataLabels.format
*/
// eslint-disable-next-line valid-jsdoc
/**
* Callback JavaScript function to format the data label. Note that
* if a `format` is defined, the format takes precedence and the
* formatter is ignored.
*
* @type {Highcharts.DataLabelsFormatterCallbackFunction}
* @default function () { return this.point.isNull ? void 0 : this.point.name; }
*/
formatter: function () {
return this.isNull ? void 0 : this.name;
},
/**
* Whether to render the connector as a soft arc or a line with a sharp
* break. Works only if `connectorShape` equals to `fixedOffset`.
*
* @sample {highcharts}
* highcharts/plotoptions/pie-datalabels-softconnector-true/
* Soft
* @sample {highcharts}
* highcharts/plotoptions/pie-datalabels-softconnector-false/
* Non soft
*
* @since 2.1.7
* @product highcharts highmaps
*/
softConnector: true,
/**
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-overflow
* Long labels truncated with an ellipsis
* @sample {highcharts} highcharts/plotoptions/pie-datalabels-overflow-wrap
* Long labels are wrapped
*
* @type {Highcharts.CSSObject}
* @apioption plotOptions.pie.dataLabels.style
*/
x: 0
},
/**
* If the total sum of the pie's values is 0, the series is represented
* as an empty circle . The `fillColor` option defines the color of that
* circle. Use [pie.borderWidth](#plotOptions.pie.borderWidth) to set
* the border thickness.
*
* @sample {highcharts} highcharts/plotoptions/pie-emptyseries/
* Empty pie series
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @private
*/
fillColor: void 0,
/**
* The end angle of the pie in degrees where 0 is top and 90 is right.
* Defaults to `startAngle` plus 360.
*
* @sample {highcharts} highcharts/demo/pie-semi-circle/
* Semi-circle donut
*
* @type {number}
* @since 1.3.6
* @product highcharts highmaps
* @apioption plotOptions.pie.endAngle
*/
/**
* Thickness describing the ring size for a donut type chart,
* overriding [innerSize](#plotOptions.pie.innerSize).
*
* @type {number}
* @default undefined
* @product highcharts
* @since 10.1.0
* @apioption plotOptions.pie.thickness
* @private
*/
/**
* Equivalent to [chart.ignoreHiddenSeries](#chart.ignoreHiddenSeries),
* this option tells whether the series shall be redrawn as if the
* hidden point were `null`.
*
* The default value changed from `false` to `true` with Highcharts
* 3.0.
*
* @sample {highcharts} highcharts/plotoptions/pie-ignorehiddenpoint/
* True, the hiddden point is ignored
*
* @since 2.3.0
* @product highcharts highmaps
*
* @private
*/
ignoreHiddenPoint: true,
/**
* @default true
* @extends plotOptions.series.inactiveOtherPoints
* @private
*/
inactiveOtherPoints: true,
/**
* The size of the inner diameter for the pie. A size greater than 0
* renders a donut chart. Can be a percentage or pixel value.
* Percentages are relative to the pie size. Pixel values are given as
* integers. Setting overridden by thickness.
*
*
* Note: in Highcharts < 4.1.2, the percentage was relative to the plot
* area, not the pie size.
*
* @sample {highcharts} highcharts/plotoptions/pie-innersize-80px/
* 80px inner size
* @sample {highcharts} highcharts/plotoptions/pie-innersize-50percent/
* 50% of the plot area
* @sample {highcharts} highcharts/demo/3d-pie-donut/
* 3D donut
*
* @type {number|string}
* @default 0
* @since 2.0
* @product highcharts highmaps
* @apioption plotOptions.pie.innerSize
*/
/**
* @ignore-option
*
* @private
*/
legendType: 'point',
/**
* @ignore-option
*
* @private
*/
marker: null, // Point options are specified in the base options
/**
* The minimum size for a pie in response to auto margins. The pie will
* try to shrink to make room for data labels in side the plot area,
* but only to this size.
*
* @type {number|string}
* @default 80
* @since 3.0
* @product highcharts highmaps
* @apioption plotOptions.pie.minSize
*/
/**
* The diameter of the pie relative to the plot area. Can be a
* percentage or pixel value. Pixel values are given as integers. The
* default behaviour (as of 3.0) is to scale to the plot area and give
* room for data labels within the plot area.
* [slicedOffset](#plotOptions.pie.slicedOffset) is also included in the
* default size calculation. As a consequence, the size of the pie may
* vary when points are updated and data labels more around. In that
* case it is best to set a fixed value, for example `"75%"`.
*
* @sample {highcharts} highcharts/plotoptions/pie-size/
* Smaller pie
*
* @type {number|string|null}
* @product highcharts highmaps
*
* @private
*/
size: null,
/**
* Whether to display this particular series or series type in the
* legend. Since 2.1, pies are not shown in the legend by default.
*
* @sample {highcharts} highcharts/plotoptions/series-showinlegend/
* One series in the legend, one hidden
*
* @product highcharts highmaps
*
* @private
*/
showInLegend: false,
/**
* If a point is sliced, moved out from the center, how many pixels
* should it be moved?.
*
* @sample {highcharts} highcharts/plotoptions/pie-slicedoffset-20/
* 20px offset
*
* @product highcharts highmaps
*
* @private
*/
slicedOffset: 10,
/**
* The start angle of the pie slices in degrees where 0 is top and 90
* right.
*
* @sample {highcharts} highcharts/plotoptions/pie-startangle-90/
* Start from right
*
* @type {number}
* @default 0
* @since 2.3.4
* @product highcharts highmaps
* @apioption plotOptions.pie.startAngle
*/
/**
* Sticky tracking of mouse events. When true, the `mouseOut` event
* on a series isn't triggered until the mouse moves over another
* series, or out of the plot area. When false, the `mouseOut` event on
* a series is triggered when the mouse leaves the area around the
* series' graph or markers. This also implies the tooltip. When
* `stickyTracking` is false and `tooltip.shared` is false, the tooltip
* will be hidden when moving the mouse between series.
*
* @product highcharts highmaps
*
* @private
*/
stickyTracking: false,
tooltip: {
followPointer: true
},
/**
* The color of the border surrounding each slice. When `null`, the
* border takes the same color as the slice fill. This can be used
* together with a `borderWidth` to fill drawing gaps created by
* antialiazing artefacts in borderless pies.
*
* In styled mode, the border stroke is given in the `.highcharts-point`
* class.
*
* @sample {highcharts} highcharts/plotoptions/pie-bordercolor-black/
* Black border
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default #ffffff
* @product highcharts highmaps
*
* @private
*/
borderColor: "#ffffff" /* Palette.backgroundColor */,
/**
* The width of the border surrounding each slice.
*
* When setting the border width to 0, there may be small gaps between
* the slices due to SVG antialiasing artefacts. To work around this,
* keep the border width at 0.5 or 1, but set the `borderColor` to
* `null` instead.
*
* In styled mode, the border stroke width is given in the
* `.highcharts-point` class.
*
* @sample {highcharts} highcharts/plotoptions/pie-borderwidth/
* 3px border
*
* @product highcharts highmaps
*
* @private
*/
borderWidth: 1,
/**
* @ignore-option
* @private
*/
lineWidth: void 0, // #12222
states: {
/**
* @extends plotOptions.series.states.hover
* @excluding marker, lineWidth, lineWidthPlus
* @product highcharts highmaps
*/
hover: {
/**
* How much to brighten the point on interaction. Requires the
* main color to be defined in hex or rgb(a) format.
*
* In styled mode, the hover brightness is by default replaced
* by a fill-opacity given in the `.highcharts-point-hover`
* class.
*
* @sample {highcharts} highcharts/plotoptions/pie-states-hover-brightness/
* Brightened by 0.5
*
* @product highcharts highmaps
*/
brightness: 0.1
}
}
};
/**
* A `pie` series. If the [type](#series.pie.type) option is not specified,
* it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.pie
* @excluding cropThreshold, dataParser, dataURL, linkedTo, stack, xAxis, yAxis,
* dataSorting, step, boostThreshold, boostBlending
* @product highcharts highmaps
* @apioption series.pie
*/
/**
* An array of data points for the series. For the `pie` series type,
* points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.pie.turboThreshold),
* this option is not available.
* ```js
* data: [{
* y: 1,
* name: "Point2",
* color: "#00FF00"
* }, {
* y: 7,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<number|Array<string,(number|null)>|null|*>}
* @extends series.line.data
* @excluding marker, x
* @product highcharts highmaps
* @apioption series.pie.data
*/
/**
* @type {Highcharts.SeriesPieDataLabelsOptionsObject}
* @product highcharts highmaps
* @apioption series.pie.data.dataLabels
*/
/**
* The sequential index of the data point in the legend.
*
* @type {number}
* @product highcharts highmaps
* @apioption series.pie.data.legendIndex
*/
/**
* Whether to display a slice offset from the center.
*
* @sample {highcharts} highcharts/point/sliced/
* One sliced point
*
* @type {boolean}
* @product highcharts highmaps
* @apioption series.pie.data.sliced
*/
/**
* @extends plotOptions.pie.dataLabels
* @excluding align, allowOverlap, inside, staggerLines, step
* @product highcharts highmaps
* @apioption series.pie.dataLabels
*/
/**
* @excluding legendItemClick
* @product highcharts highmaps
* @apioption series.pie.events
*/
''; // Placeholder for transpiled doclets above
/* *
*
* Default Export
*
* */
/* harmony default export */ var Pie_PieSeriesDefaults = (PieSeriesDefaults);
;// ./code/es5/es-modules/Series/Pie/PieSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var PieSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var getStartAndEndRadians = Series_CenteredUtilities.getStartAndEndRadians;
var PieSeries_noop = Core_Globals.noop;
var PieSeries_clamp = Core_Utilities.clamp, PieSeries_extend = Core_Utilities.extend, PieSeries_fireEvent = Core_Utilities.fireEvent, PieSeries_merge = Core_Utilities.merge, PieSeries_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/**
* Pie series type.
*
* @private
* @class
* @name Highcharts.seriesTypes.pie
*
* @augments Highcharts.Series
*/
var PieSeries = /** @class */ (function (_super) {
PieSeries_extends(PieSeries, _super);
function PieSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* Animates the pies in.
* @private
*/
PieSeries.prototype.animate = function (init) {
var series = this,
points = series.points,
startAngleRad = series.startAngleRad;
if (!init) {
points.forEach(function (point) {
var graphic = point.graphic,
args = point.shapeArgs;
if (graphic && args) {
// Start values
graphic.attr({
// Animate from inner radius (#779)
r: PieSeries_pick(point.startR, (series.center && series.center[3] / 2)),
start: startAngleRad,
end: startAngleRad
});
// Animate
graphic.animate({
r: args.r,
start: args.start,
end: args.end
}, series.options.animation);
}
});
}
};
/**
* Called internally to draw auxiliary graph in pie-like series in
* situtation when the default graph is not sufficient enough to present
* the data well. Auxiliary graph is saved in the same object as
* regular graph.
* @private
*/
PieSeries.prototype.drawEmpty = function () {
var start = this.startAngleRad,
end = this.endAngleRad,
options = this.options;
var centerX,
centerY;
// Draw auxiliary graph if there're no visible points.
if (this.total === 0 && this.center) {
centerX = this.center[0];
centerY = this.center[1];
if (!this.graph) {
this.graph = this.chart.renderer
.arc(centerX, centerY, this.center[1] / 2, 0, start, end)
.addClass('highcharts-empty-series')
.add(this.group);
}
this.graph.attr({
d: SVG_Symbols.arc(centerX, centerY, this.center[2] / 2, 0, {
start: start,
end: end,
innerR: this.center[3] / 2
})
});
if (!this.chart.styledMode) {
this.graph.attr({
'stroke-width': options.borderWidth,
fill: options.fillColor || 'none',
stroke: options.color || "#cccccc" /* Palette.neutralColor20 */
});
}
}
else if (this.graph) { // Destroy the graph object.
this.graph = this.graph.destroy();
}
};
/**
* Slices in pie chart are initialized in DOM, but it's shapes and
* animations are normally run in `drawPoints()`.
* @private
*/
PieSeries.prototype.drawPoints = function () {
var renderer = this.chart.renderer;
this.points.forEach(function (point) {
// When updating a series between 2d and 3d or cartesian and
// polar, the shape type changes.
if (point.graphic && point.hasNewShapeType()) {
point.graphic = point.graphic.destroy();
}
if (!point.graphic) {
point.graphic = renderer[point.shapeType](point.shapeArgs)
.add(point.series.group);
point.delayedRendering = true;
}
});
};
/**
* Extend the generatePoints method by adding total and percentage
* properties to each point
* @private
*/
PieSeries.prototype.generatePoints = function () {
_super.prototype.generatePoints.call(this);
this.updateTotals();
};
/**
* Utility for getting the x value from a given y, used for anticollision
* logic in data labels.
* @private
*/
PieSeries.prototype.getX = function (y, left, point, dataLabel) {
var center = this.center,
// Variable pie has individual radius
radius = this.radii ?
this.radii[point.index] || 0 :
center[2] / 2,
labelPosition = dataLabel.dataLabelPosition,
distance = (labelPosition === null || labelPosition === void 0 ? void 0 : labelPosition.distance) || 0;
var angle = Math.asin(PieSeries_clamp((y - center[1]) / (radius + distance), -1, 1));
var x = center[0] +
(left ? -1 : 1) *
(Math.cos(angle) * (radius + distance)) +
(distance > 0 ?
(left ? -1 : 1) * (dataLabel.padding || 0) :
0);
return x;
};
/**
* Define hasData function for non-cartesian series. Returns true if the
* series has points at all.
* @private
*/
PieSeries.prototype.hasData = function () {
return !!this.dataTable.rowCount;
};
/**
* Draw the data points
* @private
*/
PieSeries.prototype.redrawPoints = function () {
var series = this,
chart = series.chart;
var groupTranslation,
graphic,
pointAttr,
shapeArgs;
this.drawEmpty();
// Apply the drop-shadow to the group because otherwise each element
// would cast a shadow on others
if (series.group && !chart.styledMode) {
series.group.shadow(series.options.shadow);
}
// Draw the slices
series.points.forEach(function (point) {
var animateTo = {};
graphic = point.graphic;
if (!point.isNull && graphic) {
shapeArgs = point.shapeArgs;
// If the point is sliced, use special translation, else use
// plot area translation
groupTranslation = point.getTranslate();
if (!chart.styledMode) {
pointAttr = series.pointAttribs(point, (point.selected && 'select'));
}
// Draw the slice
if (!point.delayedRendering) {
graphic
.setRadialReference(series.center);
if (!chart.styledMode) {
PieSeries_merge(true, animateTo, pointAttr);
}
PieSeries_merge(true, animateTo, shapeArgs, groupTranslation);
graphic.animate(animateTo);
}
else {
graphic
.setRadialReference(series.center)
.attr(shapeArgs)
.attr(groupTranslation);
if (!chart.styledMode) {
graphic
.attr(pointAttr)
.attr({ 'stroke-linejoin': 'round' });
}
point.delayedRendering = false;
}
graphic
.attr({
visibility: point.visible ? 'inherit' : 'hidden'
});
graphic.addClass(point.getClassName(), true);
}
else if (graphic) {
point.graphic = graphic.destroy();
}
});
};
/**
* Utility for sorting data labels.
* @private
*/
PieSeries.prototype.sortByAngle = function (points, sign) {
points.sort(function (a, b) {
return ((typeof a.angle !== 'undefined') &&
(b.angle - a.angle) * sign);
});
};
/**
* Do translation for pie slices
* @private
*/
PieSeries.prototype.translate = function (positions) {
PieSeries_fireEvent(this, 'translate');
this.generatePoints();
var series = this,
precision = 1000, // Issue #172
options = series.options,
slicedOffset = options.slicedOffset,
radians = getStartAndEndRadians(options.startAngle,
options.endAngle),
startAngleRad = series.startAngleRad = radians.start,
endAngleRad = series.endAngleRad = radians.end,
circ = endAngleRad - startAngleRad, // 2 * Math.PI,
points = series.points,
ignoreHiddenPoint = options.ignoreHiddenPoint,
len = points.length;
var start,
end,
angle,
// The x component of the radius vector for a given point
radiusX,
radiusY,
i,
point,
cumulative = 0;
// Get positions - either an integer or a percentage string must be
// given. If positions are passed as a parameter, we're in a
// recursive loop for adjusting space for data labels.
if (!positions) {
/**
* The series center position, read only. This applies only to
* circular chart types like pie and sunburst. It is an array of
* `[centerX, centerY, diameter, innerDiameter]`.
*
* @name Highcharts.Series#center
* @type {Array<number>}
*/
series.center = positions = series.getCenter();
}
// Calculate the geometry for each point
for (i = 0; i < len; i++) {
point = points[i];
// Set start and end angle
start = startAngleRad + (cumulative * circ);
if (point.isValid() &&
(!ignoreHiddenPoint || point.visible)) {
cumulative += point.percentage / 100;
}
end = startAngleRad + (cumulative * circ);
// Set the shape
var shapeArgs = {
x: positions[0],
y: positions[1],
r: positions[2] / 2,
innerR: positions[3] / 2,
start: Math.round(start * precision) / precision,
end: Math.round(end * precision) / precision
};
point.shapeType = 'arc';
point.shapeArgs = shapeArgs;
// The angle must stay within -90 and 270 (#2645)
angle = (end + start) / 2;
if (angle > 1.5 * Math.PI) {
angle -= 2 * Math.PI;
}
else if (angle < -Math.PI / 2) {
angle += 2 * Math.PI;
}
// Center for the sliced out slice
point.slicedTranslation = {
translateX: Math.round(Math.cos(angle) * slicedOffset),
translateY: Math.round(Math.sin(angle) * slicedOffset)
};
// Set the anchor point for tooltips
radiusX = Math.cos(angle) * positions[2] / 2;
radiusY = Math.sin(angle) * positions[2] / 2;
point.tooltipPos = [
positions[0] + radiusX * 0.7,
positions[1] + radiusY * 0.7
];
point.half = angle < -Math.PI / 2 || angle > Math.PI / 2 ?
1 :
0;
point.angle = angle;
}
PieSeries_fireEvent(series, 'afterTranslate');
};
/**
* Recompute total chart sum and update percentages of points.
* @private
*/
PieSeries.prototype.updateTotals = function () {
var points = this.points,
len = points.length,
ignoreHiddenPoint = this.options.ignoreHiddenPoint;
var i,
point,
total = 0;
// Get the total sum
for (i = 0; i < len; i++) {
point = points[i];
if (point.isValid() &&
(!ignoreHiddenPoint || point.visible)) {
total += point.y;
}
}
this.total = total;
// Set each point's properties
for (i = 0; i < len; i++) {
point = points[i];
point.percentage =
(total > 0 && (point.visible || !ignoreHiddenPoint)) ?
point.y / total * 100 :
0;
point.total = total;
}
};
/* *
*
* Static Properties
*
* */
PieSeries.defaultOptions = PieSeries_merge(Series_Series.defaultOptions, Pie_PieSeriesDefaults);
return PieSeries;
}(Series_Series));
PieSeries_extend(PieSeries.prototype, {
axisTypes: [],
directTouch: true,
drawGraph: void 0,
drawTracker: Column_ColumnSeries.prototype.drawTracker,
getCenter: Series_CenteredUtilities.getCenter,
getSymbol: PieSeries_noop,
invertible: false,
isCartesian: false,
noSharedTooltip: true,
pointAttribs: Column_ColumnSeries.prototype.pointAttribs,
pointClass: Pie_PiePoint,
requireSorting: false,
searchPoint: PieSeries_noop,
trackerGroups: ['group', 'dataLabelsGroup']
});
Series_SeriesRegistry.registerSeriesType('pie', PieSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Pie_PieSeries = ((/* unused pure expression or super */ null && (PieSeries)));
;// ./code/es5/es-modules/Series/Pie/PieDataLabel.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var PieDataLabel_composed = Core_Globals.composed, PieDataLabel_noop = Core_Globals.noop;
var PieDataLabel_distribute = Renderer_RendererUtilities.distribute;
var PieDataLabel_Series = Series_SeriesRegistry.series;
var PieDataLabel_arrayMax = Core_Utilities.arrayMax, PieDataLabel_clamp = Core_Utilities.clamp, PieDataLabel_defined = Core_Utilities.defined, PieDataLabel_pick = Core_Utilities.pick, PieDataLabel_pushUnique = Core_Utilities.pushUnique, PieDataLabel_relativeLength = Core_Utilities.relativeLength;
/* *
*
* Composition
*
* */
var PieDataLabel_ColumnDataLabel;
(function (ColumnDataLabel) {
/* *
*
* Constants
*
* */
var dataLabelPositioners = {
// Based on the value computed in Highcharts' distribute algorithm.
radialDistributionY: function (point,
dataLabel) {
var _a;
return (((_a = dataLabel.dataLabelPosition) === null || _a === void 0 ? void 0 : _a.top) || 0) +
point.distributeBox.pos;
},
// Get the x - use the natural x position for labels near the top and
// bottom, to prevent the top and botton slice connectors from touching
// each other on either side. Based on the value computed in Highcharts'
// distribute algorithm.
radialDistributionX: function (series, point, y, naturalY, dataLabel) {
var pos = dataLabel.dataLabelPosition;
return series.getX(y < ((pos === null || pos === void 0 ? void 0 : pos.top) || 0) + 2 || y > ((pos === null || pos === void 0 ? void 0 : pos.bottom) || 0) - 2 ?
naturalY :
y, point.half, point, dataLabel);
},
// The dataLabels.distance determines the x position of the label
justify: function (point, dataLabel, radius, seriesCenter) {
var _a;
return seriesCenter[0] + (point.half ? -1 : 1) *
(radius + (((_a = dataLabel.dataLabelPosition) === null || _a === void 0 ? void 0 : _a.distance) || 0));
},
// Left edges of the left-half labels touch the left edge of the plot
// area. Right edges of the right-half labels touch the right edge of
// the plot area.
alignToPlotEdges: function (dataLabel, half, plotWidth, plotLeft) {
var dataLabelWidth = dataLabel.getBBox().width;
return half ? dataLabelWidth + plotLeft :
plotWidth - dataLabelWidth - plotLeft;
},
// Connectors of each side end in the same x position. Labels are
// aligned to them. Left edge of the widest left-half label touches the
// left edge of the plot area. Right edge of the widest right-half label
// touches the right edge of the plot area.
alignToConnectors: function (points, half, plotWidth, plotLeft) {
var maxDataLabelWidth = 0,
dataLabelWidth;
// Find widest data label
points.forEach(function (point) {
dataLabelWidth = point.dataLabel.getBBox().width;
if (dataLabelWidth > maxDataLabelWidth) {
maxDataLabelWidth = dataLabelWidth;
}
});
return half ? maxDataLabelWidth + plotLeft :
plotWidth - maxDataLabelWidth - plotLeft;
}
};
/* *
*
* Functions
*
* */
/** @private */
function compose(PieSeriesClass) {
Series_DataLabel.compose(PieDataLabel_Series);
if (PieDataLabel_pushUnique(PieDataLabel_composed, 'PieDataLabel')) {
var pieProto = PieSeriesClass.prototype;
pieProto.dataLabelPositioners = dataLabelPositioners;
pieProto.alignDataLabel = PieDataLabel_noop;
pieProto.drawDataLabels = drawDataLabels;
pieProto.getDataLabelPosition = getDataLabelPosition;
pieProto.placeDataLabels = placeDataLabels;
pieProto.verifyDataLabelOverflow = verifyDataLabelOverflow;
}
}
ColumnDataLabel.compose = compose;
/** @private */
function getDataLabelPosition(point, distance) {
var halfPI = Math.PI / 2,
_a = point.shapeArgs || {},
_b = _a.start,
start = _b === void 0 ? 0 : _b,
_c = _a.end,
end = _c === void 0 ? 0 : _c;
var angle = point.angle || 0;
// If a large slice is crossing the lowest point, prefer rendering it 45
// degrees out at either lower right or lower left. That's where there's
// most likely to be space available and avoid text being truncated
// (#22100). Technically this logic should also apply to the top point,
// but that is more of an edge case since the default start angle is at
// the top.
if (distance > 0 &&
// Crossing the bottom
start < halfPI && end > halfPI &&
// Angle within the bottom quadrant
angle > halfPI / 2 && angle < halfPI * 1.5) {
angle = angle <= halfPI ?
Math.max(halfPI / 2, (start + halfPI) / 2) :
Math.min(halfPI * 1.5, (halfPI + end) / 2);
}
var _d = this, center = _d.center, options = _d.options, r = center[2] / 2, cosAngle = Math.cos(angle), sinAngle = Math.sin(angle), x = center[0] + cosAngle * r, y = center[1] + sinAngle * r, finalConnectorOffset = Math.min((options.slicedOffset || 0) + (options.borderWidth || 0), distance / 5); // #1678
return {
natural: {
// Initial position of the data label - it's utilized for
// finding the final position for the label
x: x + cosAngle * distance,
y: y + sinAngle * distance
},
computed: {
// Used for generating connector path - initialized later in
// drawDataLabels function x: undefined, y: undefined
},
// Left - pie on the left side of the data label
// Right - pie on the right side of the data label
// Center - data label overlaps the pie
alignment: distance < 0 ? 'center' : point.half ? 'right' : 'left',
connectorPosition: {
angle: angle,
breakAt: {
x: x + cosAngle * finalConnectorOffset,
y: y + sinAngle * finalConnectorOffset
},
touchingSliceAt: {
x: x,
y: y
}
},
distance: distance
};
}
/**
* Override the base drawDataLabels method by pie specific functionality
* @private
*/
function drawDataLabels() {
var _this = this;
var _a;
var series = this, points = series.points, chart = series.chart, plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, plotLeft = chart.plotLeft, maxWidth = Math.round(chart.chartWidth / 3), seriesCenter = series.center, radius = seriesCenter[2] / 2, centerY = seriesCenter[1], halves = [
[], // Right
[] // Left
], overflow = [0, 0, 0, 0], // Top, right, bottom, left
dataLabelPositioners = series.dataLabelPositioners;
var connector,
dataLabelWidth,
labelHeight,
maxLabelDistance = 0;
// Get out if not enabled
if (!series.visible || !((_a = series.hasDataLabels) === null || _a === void 0 ? void 0 : _a.call(series))) {
return;
}
// Reset all labels that have been shortened
points.forEach(function (point) {
(point.dataLabels || []).forEach(function (dataLabel) {
if (dataLabel.shortened) {
dataLabel
.attr({
width: 'auto'
}).css({
width: 'auto',
textOverflow: 'clip'
});
dataLabel.shortened = false;
}
});
});
// Run parent method
PieDataLabel_Series.prototype.drawDataLabels.apply(series);
points.forEach(function (point) {
(point.dataLabels || []).forEach(function (dataLabel, i) {
var _a;
var r = seriesCenter[2] / 2,
dataLabelOptions = dataLabel.options,
distance = PieDataLabel_relativeLength((dataLabelOptions === null || dataLabelOptions === void 0 ? void 0 : dataLabelOptions.distance) || 0,
r);
// Arrange points for collision detection
if (i === 0) {
halves[point.half].push(point);
}
// Avoid long labels squeezing the pie size too far down
if (!PieDataLabel_defined((_a = dataLabelOptions === null || dataLabelOptions === void 0 ? void 0 : dataLabelOptions.style) === null || _a === void 0 ? void 0 : _a.width)) {
if (dataLabel.getBBox().width > maxWidth) {
dataLabel.css({
// Use a fraction of the maxWidth to avoid wrapping
// close to the end of the string.
width: Math.round(maxWidth * 0.7) + 'px'
});
dataLabel.shortened = true;
}
}
dataLabel.dataLabelPosition = _this.getDataLabelPosition(point, distance);
maxLabelDistance = Math.max(maxLabelDistance, distance);
});
});
/* Loop over the points in each half, starting from the top and bottom
* of the pie to detect overlapping labels.
*/
halves.forEach(function (points, halfIdx) {
var length = points.length,
positions = [];
var top,
bottom,
size = 0,
distributionLength;
if (!length) {
return;
}
// Sort by angle
series.sortByAngle(points, halfIdx - 0.5);
// Only do anti-collision when we have dataLabels outside the pie
// and have connectors. (#856)
if (maxLabelDistance > 0) {
top = Math.max(0, centerY - radius - maxLabelDistance);
bottom = Math.min(centerY + radius + maxLabelDistance, chart.plotHeight);
points.forEach(function (point) {
// Check if specific points' label is outside the pie
(point.dataLabels || []).forEach(function (dataLabel) {
var _a;
var labelPosition = dataLabel.dataLabelPosition;
if (labelPosition &&
labelPosition.distance > 0) {
// The point.top depends on point.labelDistance
// value. Used for calculation of y value in getX
// method
labelPosition.top = Math.max(0, centerY - radius - labelPosition.distance);
labelPosition.bottom = Math.min(centerY + radius + labelPosition.distance, chart.plotHeight);
size = dataLabel.getBBox().height || 21;
dataLabel.lineHeight = chart.renderer.fontMetrics(dataLabel.text || dataLabel).h + 2 * dataLabel.padding;
point.distributeBox = {
target: ((((_a = dataLabel.dataLabelPosition) === null || _a === void 0 ? void 0 : _a.natural.y) || 0) -
labelPosition.top +
dataLabel.lineHeight / 2),
size: size,
rank: point.y
};
positions.push(point.distributeBox);
}
});
});
distributionLength = bottom + size - top;
PieDataLabel_distribute(positions, distributionLength, distributionLength / 5);
// Uncomment this to visualize the boxes
/*
points.forEach((point): void => {
const box = point.distributeBox;
point.dlBox?.destroy();
if (box?.pos) {
point.dlBox = chart.renderer.rect(
chart.plotLeft + this.center[0] + (
halfIdx ?
-this.center[2] / 2 - 100 :
this.center[2] / 2
),
chart.plotTop + box.pos,
100,
box.size
)
.attr({
stroke: 'silver',
'stroke-width': 1
})
.add();
}
});
// */
}
// Now the used slots are sorted, fill them up sequentially
points.forEach(function (point) {
(point.dataLabels || []).forEach(function (dataLabel) {
var dataLabelOptions = (dataLabel.options || {}),
distributeBox = point.distributeBox,
labelPosition = dataLabel.dataLabelPosition,
naturalY = (labelPosition === null || labelPosition === void 0 ? void 0 : labelPosition.natural.y) || 0,
connectorPadding = dataLabelOptions
.connectorPadding || 0,
lineHeight = dataLabel.lineHeight || 21,
bBox = dataLabel.getBBox(),
topOffset = (lineHeight - bBox.height) / 2;
var x = 0,
y = naturalY,
visibility = 'inherit';
if (labelPosition) {
if (positions &&
PieDataLabel_defined(distributeBox) &&
labelPosition.distance > 0) {
if (typeof distributeBox.pos === 'undefined') {
visibility = 'hidden';
}
else {
labelHeight = distributeBox.size;
// Find label's y position
y = dataLabelPositioners
.radialDistributionY(point, dataLabel);
}
}
// Find label's x position. The justify option is
// undocumented in the API - preserve support for it
if (dataLabelOptions.justify) {
x = dataLabelPositioners.justify(point, dataLabel, radius, seriesCenter);
}
else {
switch (dataLabelOptions.alignTo) {
case 'connectors':
x = dataLabelPositioners.alignToConnectors(points, halfIdx, plotWidth, plotLeft);
break;
case 'plotEdges':
x = dataLabelPositioners.alignToPlotEdges(dataLabel, halfIdx, plotWidth, plotLeft);
break;
default:
x = dataLabelPositioners.radialDistributionX(series, point, y - topOffset, naturalY, dataLabel);
}
}
// Record the placement and visibility
labelPosition.attribs = {
visibility: visibility,
align: labelPosition.alignment
};
labelPosition.posAttribs = {
x: x +
(dataLabelOptions.x || 0) + // (#12985)
({
left: connectorPadding,
right: -connectorPadding
}[labelPosition.alignment] || 0),
y: y +
(dataLabelOptions.y || 0) - // (#12985)
// Vertically center
lineHeight / 2
};
labelPosition.computed.x = x;
labelPosition.computed.y = y - topOffset;
// Detect overflowing data labels
if (PieDataLabel_pick(dataLabelOptions.crop, true)) {
dataLabelWidth = dataLabel.getBBox().width;
var sideOverflow = void 0;
// Overflow left
if (x - dataLabelWidth < connectorPadding &&
halfIdx === 1 // Left half
) {
sideOverflow = Math.round(dataLabelWidth - x + connectorPadding);
overflow[3] = Math.max(sideOverflow, overflow[3]);
// Overflow right
}
else if (x + dataLabelWidth >
plotWidth - connectorPadding &&
halfIdx === 0 // Right half
) {
sideOverflow = Math.round(x +
dataLabelWidth -
plotWidth +
connectorPadding);
overflow[1] = Math.max(sideOverflow, overflow[1]);
}
// Overflow top
if (y - labelHeight / 2 < 0) {
overflow[0] = Math.max(Math.round(-y + labelHeight / 2), overflow[0]);
// Overflow left
}
else if (y + labelHeight / 2 > plotHeight) {
overflow[2] = Math.max(Math.round(y + labelHeight / 2 - plotHeight), overflow[2]);
}
labelPosition.sideOverflow = sideOverflow;
}
}
}); // For each data label of the point
}); // For each point
}); // For each half
// Do not apply the final placement and draw the connectors until we
// have verified that labels are not spilling over.
if (PieDataLabel_arrayMax(overflow) === 0 ||
this.verifyDataLabelOverflow(overflow)) {
// Place the labels in the final position
this.placeDataLabels();
this.points.forEach(function (point) {
(point.dataLabels || []).forEach(function (dataLabel) {
var _a;
// #8864: every connector can have individual options
var _b = (dataLabel.options || {}),
connectorColor = _b.connectorColor,
_c = _b.connectorWidth,
connectorWidth = _c === void 0 ? 1 : _c,
labelPosition = dataLabel.dataLabelPosition;
// Draw the connector
if (connectorWidth) {
var isNew = void 0;
connector = dataLabel.connector;
if (labelPosition && labelPosition.distance > 0) {
isNew = !connector;
if (!connector) {
dataLabel.connector = connector = chart.renderer
.path()
.addClass('highcharts-data-label-connector ' +
' highcharts-color-' +
point.colorIndex +
(point.className ?
' ' + point.className :
''))
.add(series.dataLabelsGroup);
}
if (!chart.styledMode) {
connector.attr({
'stroke-width': connectorWidth,
'stroke': (connectorColor ||
point.color ||
"#666666" /* Palette.neutralColor60 */)
});
}
connector[isNew ? 'attr' : 'animate']({
d: point.getConnectorPath(dataLabel)
});
connector.attr({
visibility: (_a = labelPosition.attribs) === null || _a === void 0 ? void 0 : _a.visibility
});
}
else if (connector) {
dataLabel.connector = connector.destroy();
}
}
});
});
}
}
/**
* Perform the final placement of the data labels after we have verified
* that they fall within the plot area.
* @private
*/
function placeDataLabels() {
this.points.forEach(function (point) {
(point.dataLabels || []).forEach(function (dataLabel) {
var _a;
var labelPosition = dataLabel.dataLabelPosition;
if (labelPosition) {
// Shorten data labels with ellipsis if they still overflow
// after the pie has reached minSize (#223).
if (labelPosition.sideOverflow) {
dataLabel.css({
width: (Math.max(dataLabel.getBBox().width -
labelPosition.sideOverflow, 0)) + 'px',
textOverflow: ((((_a = dataLabel.options) === null || _a === void 0 ? void 0 : _a.style) || {})
.textOverflow ||
'ellipsis')
});
dataLabel.shortened = true;
}
dataLabel.attr(labelPosition.attribs);
dataLabel[dataLabel.moved ? 'animate' : 'attr'](labelPosition.posAttribs);
dataLabel.moved = true;
}
else if (dataLabel) {
dataLabel.attr({ y: -9999 });
}
});
// Clear for update
delete point.distributeBox;
}, this);
}
/**
* Verify whether the data labels are allowed to draw, or we should run more
* translation and data label positioning to keep them inside the plot area.
* Returns true when data labels are ready to draw.
* @private
*/
function verifyDataLabelOverflow(overflow) {
var center = this.center,
options = this.options,
centerOption = options.center,
minSize = options.minSize || 80;
var newSize = minSize,
// If a size is set, return true and don't try to shrink the pie
// to fit the labels.
ret = options.size !== null;
if (!ret) {
// Handle horizontal size and center
if (centerOption[0] !== null) { // Fixed center
newSize = Math.max(center[2] -
Math.max(overflow[1], overflow[3]), minSize);
}
else { // Auto center
newSize = Math.max(
// Horizontal overflow
center[2] - overflow[1] - overflow[3], minSize);
// Horizontal center
center[0] += (overflow[3] - overflow[1]) / 2;
}
// Handle vertical size and center
if (centerOption[1] !== null) { // Fixed center
newSize = PieDataLabel_clamp(newSize, minSize, center[2] - Math.max(overflow[0], overflow[2]));
}
else { // Auto center
newSize = PieDataLabel_clamp(newSize, minSize,
// Vertical overflow
center[2] - overflow[0] - overflow[2]);
// Vertical center
center[1] += (overflow[0] - overflow[2]) / 2;
}
// If the size must be decreased, we need to run translate and
// drawDataLabels again
if (newSize < center[2]) {
center[2] = newSize;
center[3] = Math.min(// #3632
options.thickness ?
Math.max(0, newSize - options.thickness * 2) :
Math.max(0, PieDataLabel_relativeLength(options.innerSize || 0, newSize)), newSize); // #6647
this.translate(center);
if (this.drawDataLabels) {
this.drawDataLabels();
}
// Else, return true to indicate that the pie and its labels is
// within the plot area
}
else {
ret = true;
}
}
return ret;
}
})(PieDataLabel_ColumnDataLabel || (PieDataLabel_ColumnDataLabel = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var PieDataLabel = (PieDataLabel_ColumnDataLabel);
;// ./code/es5/es-modules/Core/Geometry/GeometryUtilities.js
/* *
*
* (c) 2010-2024 Highsoft AS
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Namespace
*
* */
var GeometryUtilities;
(function (GeometryUtilities) {
/* *
*
* Functions
*
* */
/**
* Calculates the center between a list of points.
*
* @private
*
* @param {Array<Highcharts.PositionObject>} points
* A list of points to calculate the center of.
*
* @return {Highcharts.PositionObject}
* Calculated center
*/
function getCenterOfPoints(points) {
var sum = points.reduce(function (sum,
point) {
sum.x += point.x;
sum.y += point.y;
return sum;
}, { x: 0, y: 0 });
return {
x: sum.x / points.length,
y: sum.y / points.length
};
}
GeometryUtilities.getCenterOfPoints = getCenterOfPoints;
/**
* Calculates the distance between two points based on their x and y
* coordinates.
*
* @private
*
* @param {Highcharts.PositionObject} p1
* The x and y coordinates of the first point.
*
* @param {Highcharts.PositionObject} p2
* The x and y coordinates of the second point.
*
* @return {number}
* Returns the distance between the points.
*/
function getDistanceBetweenPoints(p1, p2) {
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
GeometryUtilities.getDistanceBetweenPoints = getDistanceBetweenPoints;
/**
* Calculates the angle between two points.
* @todo add unit tests.
* @private
* @param {Highcharts.PositionObject} p1 The first point.
* @param {Highcharts.PositionObject} p2 The second point.
* @return {number} Returns the angle in radians.
*/
function getAngleBetweenPoints(p1, p2) {
return Math.atan2(p2.x - p1.x, p2.y - p1.y);
}
GeometryUtilities.getAngleBetweenPoints = getAngleBetweenPoints;
/**
* Test for point in polygon. Polygon defined as array of [x,y] points.
* @private
* @param {PositionObject} point The point potentially within a polygon.
* @param {Array<Array<number>>} polygon The polygon potentially containing the point.
*/
function pointInPolygon(_a, polygon) {
var x = _a.x,
y = _a.y;
var len = polygon.length;
var i,
j,
inside = false;
for (i = 0, j = len - 1; i < len; j = i++) {
var _b = polygon[i],
x1 = _b[0],
y1 = _b[1],
_c = polygon[j],
x2 = _c[0],
y2 = _c[1];
if (y1 > y !== y2 > y &&
(x < (x2 - x1) *
(y - y1) /
(y2 - y1) +
x1)) {
inside = !inside;
}
}
return inside;
}
GeometryUtilities.pointInPolygon = pointInPolygon;
})(GeometryUtilities || (GeometryUtilities = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Geometry_GeometryUtilities = (GeometryUtilities);
;// ./code/es5/es-modules/Extensions/OverlappingDataLabels.js
/* *
*
* Highcharts module to hide overlapping data labels.
* This module is included in Highcharts.
*
* (c) 2009-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var pointInPolygon = Geometry_GeometryUtilities.pointInPolygon;
var OverlappingDataLabels_addEvent = Core_Utilities.addEvent, OverlappingDataLabels_fireEvent = Core_Utilities.fireEvent, OverlappingDataLabels_objectEach = Core_Utilities.objectEach, OverlappingDataLabels_pick = Core_Utilities.pick;
/* *
*
* Functions
*
* */
/**
* Hide overlapping labels. Labels are moved and faded in and out on zoom to
* provide a smooth visual impression.
*
* @requires modules/overlapping-datalabels
*
* @private
* @function Highcharts.Chart#hideOverlappingLabels
* @param {Array<Highcharts.SVGElement>} labels
* Rendered data labels
*/
function chartHideOverlappingLabels(labels) {
var chart = this,
len = labels.length,
isIntersectRect = function (box1,
box2) { return !(box2.x >= box1.x + box1.width ||
box2.x + box2.width <= box1.x ||
box2.y >= box1.y + box1.height ||
box2.y + box2.height <= box1.y); },
isPolygonOverlap = function (box1Poly,
box2Poly) {
for (var _i = 0,
box1Poly_1 = box1Poly; _i < box1Poly_1.length; _i++) {
var p = box1Poly_1[_i];
if (pointInPolygon({ x: p[0], y: p[1] }, box2Poly)) {
return true;
}
}
return false;
};
/**
* Get the box with its position inside the chart, as opposed to getBBox
* that only reports the position relative to the parent.
*/
function getAbsoluteBox(label) {
var _a,
_b;
if (label && (!label.alignAttr || label.placed)) {
var padding = label.box ? 0 : (label.padding || 0),
pos = label.alignAttr || {
x: label.attr('x'),
y: label.attr('y')
},
bBox = label.getBBox();
label.width = bBox.width;
label.height = bBox.height;
return {
x: pos.x + (((_a = label.parentGroup) === null || _a === void 0 ? void 0 : _a.translateX) || 0) + padding,
y: pos.y + (((_b = label.parentGroup) === null || _b === void 0 ? void 0 : _b.translateY) || 0) + padding,
width: (label.width || 0) - 2 * padding,
height: (label.height || 0) - 2 * padding,
polygon: bBox === null || bBox === void 0 ? void 0 : bBox.polygon
};
}
}
var label,
label1,
label2,
box1,
box2,
isLabelAffected = false;
for (var i = 0; i < len; i++) {
label = labels[i];
if (label) {
// Mark with initial opacity
label.oldOpacity = label.opacity;
label.newOpacity = 1;
label.absoluteBox = getAbsoluteBox(label);
}
}
// Prevent a situation in a gradually rising slope, that each label will
// hide the previous one because the previous one always has lower rank.
labels.sort(function (a, b) { return (b.labelrank || 0) - (a.labelrank || 0); });
// Detect overlapping labels
for (var i = 0; i < len; ++i) {
label1 = labels[i];
box1 = label1 && label1.absoluteBox;
var box1Poly = box1 === null || box1 === void 0 ? void 0 : box1.polygon;
for (var j = i + 1; j < len; ++j) {
label2 = labels[j];
box2 = label2 && label2.absoluteBox;
var toHide = false;
if (box1 &&
box2 &&
label1 !== label2 && // #6465, polar chart with connectEnds
label1.newOpacity !== 0 &&
label2.newOpacity !== 0 &&
// #15863 dataLabels are no longer hidden by translation
label1.visibility !== 'hidden' &&
label2.visibility !== 'hidden') {
var box2Poly = box2.polygon;
// If labels have polygons, only evaluate
// based on polygons
if (box1Poly &&
box2Poly &&
box1Poly !== box2Poly) {
if (isPolygonOverlap(box1Poly, box2Poly)) {
toHide = true;
}
// If there are no polygons, evaluate rectangles coliding
}
else if (isIntersectRect(box1, box2)) {
toHide = true;
}
if (toHide) {
var overlappingLabel = (label1.labelrank < label2.labelrank ?
label1 :
label2),
labelText = overlappingLabel.text;
overlappingLabel.newOpacity = 0;
if (labelText === null || labelText === void 0 ? void 0 : labelText.element.querySelector('textPath')) {
labelText.hide();
}
}
}
}
}
// Hide or show
for (var _i = 0, labels_1 = labels; _i < labels_1.length; _i++) {
var label_1 = labels_1[_i];
if (hideOrShow(label_1, chart)) {
isLabelAffected = true;
}
}
if (isLabelAffected) {
OverlappingDataLabels_fireEvent(chart, 'afterHideAllOverlappingLabels');
}
}
/** @private */
function compose(ChartClass) {
var chartProto = ChartClass.prototype;
if (!chartProto.hideOverlappingLabels) {
chartProto.hideOverlappingLabels = chartHideOverlappingLabels;
OverlappingDataLabels_addEvent(ChartClass, 'render', OverlappingDataLabels_onChartRender);
}
}
/**
* Hide or show labels based on opacity.
*
* @private
* @function hideOrShow
* @param {Highcharts.SVGElement} label
* The label.
* @param {Highcharts.Chart} chart
* The chart that contains the label.
* @return {boolean}
* Whether label is affected
*/
function hideOrShow(label, chart) {
var complete,
newOpacity,
isLabelAffected = false;
if (label) {
newOpacity = label.newOpacity;
if (label.oldOpacity !== newOpacity) {
// Toggle data labels
if (label.hasClass('highcharts-data-label')) {
// Make sure the label is completely hidden to avoid catching
// clicks (#4362)
label[newOpacity ? 'removeClass' : 'addClass']('highcharts-data-label-hidden');
complete = function () {
if (!chart.styledMode) {
label.css({
pointerEvents: newOpacity ? 'auto' : 'none'
});
}
};
isLabelAffected = true;
// Animate or set the opacity
label[label.isOld ? 'animate' : 'attr']({ opacity: newOpacity }, void 0, complete);
OverlappingDataLabels_fireEvent(chart, 'afterHideOverlappingLabel');
// Toggle other labels, tick labels
}
else {
label.attr({
opacity: newOpacity
});
}
}
label.isOld = true;
}
return isLabelAffected;
}
/**
* Collect potential overlapping data labels. Stack labels probably don't need
* to be considered because they are usually accompanied by data labels that lie
* inside the columns.
* @private
*/
function OverlappingDataLabels_onChartRender() {
var _a;
var chart = this;
var labels = [];
// Consider external label collectors
for (var _i = 0, _b = (chart.labelCollectors || []); _i < _b.length; _i++) {
var collector = _b[_i];
labels = labels.concat(collector());
}
for (var _c = 0, _d = (chart.yAxis || []); _c < _d.length; _c++) {
var yAxis = _d[_c];
if (yAxis.stacking &&
yAxis.options.stackLabels &&
!yAxis.options.stackLabels.allowOverlap) {
OverlappingDataLabels_objectEach(yAxis.stacking.stacks, function (stack) {
OverlappingDataLabels_objectEach(stack, function (stackItem) {
if (stackItem.label) {
labels.push(stackItem.label);
}
});
});
}
}
for (var _e = 0, _f = (chart.series || []); _e < _f.length; _e++) {
var series = _f[_e];
if (series.visible && ((_a = series.hasDataLabels) === null || _a === void 0 ? void 0 : _a.call(series))) { // #3866
var push = function (points) {
var _loop_1 = function (point) {
if (point.visible) {
(point.dataLabels || []).forEach(function (label) {
var _a,
_b;
var options = label.options || {};
label.labelrank = OverlappingDataLabels_pick(options.labelrank, point.labelrank, (_a = point.shapeArgs) === null || _a === void 0 ? void 0 : _a.height); // #4118
// Allow overlap if the option is explicitly true
if (
// #13449
(_b = options.allowOverlap) !== null && _b !== void 0 ? _b :
// Pie labels outside have a separate placement
// logic, skip the overlap logic
Number(options.distance) > 0) {
label.oldOpacity = label.opacity;
label.newOpacity = 1;
hideOrShow(label, chart);
// Do not allow overlap
}
else {
labels.push(label);
}
});
}
};
for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
var point = points_1[_i];
_loop_1(point);
}
};
push(series.nodes || []);
push(series.points);
}
}
this.hideOverlappingLabels(labels);
}
/* *
*
* Default Export
*
* */
var OverlappingDataLabels = {
compose: compose
};
/* harmony default export */ var Extensions_OverlappingDataLabels = (OverlappingDataLabels);
;// ./code/es5/es-modules/Extensions/BorderRadius.js
/* *
*
* Highcharts Border Radius module
*
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var BorderRadius_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var BorderRadius_defaultOptions = Defaults.defaultOptions;
var BorderRadius_noop = Core_Globals.noop;
var BorderRadius_addEvent = Core_Utilities.addEvent, BorderRadius_extend = Core_Utilities.extend, BorderRadius_isObject = Core_Utilities.isObject, BorderRadius_merge = Core_Utilities.merge, BorderRadius_relativeLength = Core_Utilities.relativeLength;
/* *
*
* Constants
*
* */
var defaultBorderRadiusOptions = {
radius: 0,
scope: 'stack',
where: void 0
};
/* *
*
* Variables
*
* */
var oldArc = BorderRadius_noop;
var oldRoundedRect = BorderRadius_noop;
/* *
*
* Functions
*
* */
/**
* @private
*/
function applyBorderRadius(path, i, r) {
var a = path[i];
var b = path[i + 1];
if (b[0] === 'Z') {
b = path[0];
}
var line,
arc,
fromLineToArc;
// From straight line to arc
if ((a[0] === 'M' || a[0] === 'L') && b[0] === 'A') {
line = a;
arc = b;
fromLineToArc = true;
// From arc to straight line
}
else if (a[0] === 'A' && (b[0] === 'M' || b[0] === 'L')) {
line = b;
arc = a;
}
if (line && arc && arc.params) {
var bigR = arc[1],
// In our use cases, outer pie slice arcs are clockwise and inner
// arcs (donut/sunburst etc) are anti-clockwise
clockwise = arc[5], params = arc.params, start = params.start, end = params.end, cx = params.cx, cy = params.cy;
// Some geometric constants
var relativeR = clockwise ? (bigR - r) : (bigR + r),
// The angle, on the big arc, that the border radius arc takes up
angleOfBorderRadius = relativeR ? Math.asin(r / relativeR) : 0,
angleOffset = clockwise ?
angleOfBorderRadius :
-angleOfBorderRadius,
// The distance along the radius of the big arc to the starting
// point of the small border radius arc
distanceBigCenterToStartArc = (Math.cos(angleOfBorderRadius) *
relativeR);
// From line to arc
if (fromLineToArc) {
// Update the cache
params.start = start + angleOffset;
// First move to the start position at the radial line. We want to
// start one borderRadius closer to the center.
line[1] = cx + distanceBigCenterToStartArc * Math.cos(start);
line[2] = cy + distanceBigCenterToStartArc * Math.sin(start);
// Now draw an arc towards the point where the small circle touches
// the great circle.
path.splice(i + 1, 0, [
'A',
r,
r,
0, // Slanting,
0, // Long arc
1, // Clockwise
cx + bigR * Math.cos(params.start),
cy + bigR * Math.sin(params.start)
]);
// From arc to line
}
else {
// Update the cache
params.end = end - angleOffset;
// End the big arc a bit earlier
arc[6] = cx + bigR * Math.cos(params.end);
arc[7] = cy + bigR * Math.sin(params.end);
// Draw a small arc towards a point on the end angle, but one
// borderRadius closer to the center relative to the perimeter.
path.splice(i + 1, 0, [
'A',
r,
r,
0,
0,
1,
cx + distanceBigCenterToStartArc * Math.cos(end),
cy + distanceBigCenterToStartArc * Math.sin(end)
]);
}
// Long or short arc must be reconsidered because we have modified the
// start and end points
arc[4] = Math.abs(params.end - params.start) < Math.PI ? 0 : 1;
}
}
/**
* Extend arc with borderRadius.
* @private
*/
function BorderRadius_arc(x, y, w, h, options) {
if (options === void 0) { options = {}; }
var path = oldArc(x,
y,
w,
h,
options),
_a = options.innerR,
innerR = _a === void 0 ? 0 : _a,
_b = options.r,
r = _b === void 0 ? w : _b,
_c = options.start,
start = _c === void 0 ? 0 : _c,
_d = options.end,
end = _d === void 0 ? 0 : _d;
if (options.open || !options.borderRadius) {
return path;
}
var alpha = end - start,
sinHalfAlpha = Math.sin(alpha / 2),
borderRadius = Math.max(Math.min(BorderRadius_relativeLength(options.borderRadius || 0,
r - innerR),
// Cap to half the sector radius
(r - innerR) / 2,
// For smaller pie slices, cap to the largest small circle that
// can be fitted within the sector
(r * sinHalfAlpha) / (1 + sinHalfAlpha)), 0),
// For the inner radius, we need an extra cap because the inner arc
// is shorter than the outer arc
innerBorderRadius = Math.min(borderRadius, 2 * (alpha / Math.PI) * innerR);
// Apply turn-by-turn border radius. Start at the end since we're
// splicing in arc segments.
var i = path.length - 1;
while (i--) {
applyBorderRadius(path, i, i > 1 ? innerBorderRadius : borderRadius);
}
return path;
}
/** @private */
function seriesOnAfterColumnTranslate() {
var _a,
_b;
if (this.options.borderRadius &&
!(this.chart.is3d && this.chart.is3d())) {
var _c = this,
options = _c.options,
yAxis = _c.yAxis,
percent = options.stacking === 'percent',
seriesDefault = (_b = (_a = BorderRadius_defaultOptions.plotOptions) === null || _a === void 0 ? void 0 : _a[this.type]) === null || _b === void 0 ? void 0 : _b.borderRadius,
borderRadius = optionsToObject(options.borderRadius,
BorderRadius_isObject(seriesDefault) ? seriesDefault : {}),
reversed = yAxis.options.reversed;
for (var _i = 0, _d = this.points; _i < _d.length; _i++) {
var point = _d[_i];
var shapeArgs = point.shapeArgs;
if (point.shapeType === 'roundedRect' && shapeArgs) {
var _e = shapeArgs.width,
width = _e === void 0 ? 0 : _e,
_f = shapeArgs.height,
height = _f === void 0 ? 0 : _f,
_g = shapeArgs.y,
y = _g === void 0 ? 0 : _g;
var brBoxY = y,
brBoxHeight = height;
// It would be nice to refactor StackItem.getStackBox/
// setOffset so that we could get a reliable box out of
// it. Currently it is close if we remove the label
// offset, but we still need to run crispCol and also
// flip it if inverted, so atm it is simpler to do it
// like the below.
if (borderRadius.scope === 'stack' &&
point.stackTotal) {
var stackEnd = yAxis.translate(percent ? 100 : point.stackTotal,
false,
true,
false,
true),
stackThreshold = yAxis.translate(options.threshold || 0,
false,
true,
false,
true),
box = this.crispCol(0,
Math.min(stackEnd,
stackThreshold), 0,
Math.abs(stackEnd - stackThreshold));
brBoxY = box.y;
brBoxHeight = box.height;
}
var flip = (point.negative ? -1 : 1) *
(reversed ? -1 : 1) === -1;
// Handle the where option
var where = borderRadius.where;
// Waterfall, hanging columns should have rounding on
// all sides
if (!where &&
this.is('waterfall') &&
Math.abs((point.yBottom || 0) -
(this.translatedThreshold || 0)) > this.borderWidth) {
where = 'all';
}
if (!where) {
where = 'end';
}
// Get the radius
var r = Math.min(BorderRadius_relativeLength(borderRadius.radius,
width),
width / 2,
// Cap to the height, but not if where is `end`
where === 'all' ? height / 2 : Infinity) || 0;
// If the `where` option is 'end', cut off the
// rectangles by making the border-radius box one r
// greater, so that the imaginary radius falls outside
// the rectangle.
if (where === 'end') {
if (flip) {
brBoxY -= r;
brBoxHeight += r;
}
else {
brBoxHeight += r;
}
}
BorderRadius_extend(shapeArgs, { brBoxHeight: brBoxHeight, brBoxY: brBoxY, r: r });
}
}
}
}
/** @private */
function BorderRadius_compose(SeriesClass, SVGElementClass, SVGRendererClass) {
var PieSeriesClass = SeriesClass.types.pie;
if (!SVGElementClass.symbolCustomAttribs.includes('borderRadius')) {
var symbols = SVGRendererClass.prototype.symbols;
BorderRadius_addEvent(SeriesClass, 'afterColumnTranslate', seriesOnAfterColumnTranslate, {
// After columnrange and polar column modifications
order: 9
});
BorderRadius_addEvent(PieSeriesClass, 'afterTranslate', pieSeriesOnAfterTranslate);
SVGElementClass.symbolCustomAttribs.push('borderRadius', 'brBoxHeight', 'brBoxY');
oldArc = symbols.arc;
oldRoundedRect = symbols.roundedRect;
symbols.arc = BorderRadius_arc;
symbols.roundedRect = BorderRadius_roundedRect;
}
}
/** @private */
function optionsToObject(options, seriesBROptions) {
if (!BorderRadius_isObject(options)) {
options = { radius: options || 0 };
}
return BorderRadius_merge(defaultBorderRadiusOptions, seriesBROptions, options);
}
/** @private */
function pieSeriesOnAfterTranslate() {
var borderRadius = optionsToObject(this.options.borderRadius);
for (var _i = 0, _a = this.points; _i < _a.length; _i++) {
var point = _a[_i];
var shapeArgs = point.shapeArgs;
if (shapeArgs) {
shapeArgs.borderRadius = BorderRadius_relativeLength(borderRadius.radius, (shapeArgs.r || 0) - ((shapeArgs.innerR) || 0));
}
}
}
/**
* Extend roundedRect with individual cutting through rOffset.
* @private
*/
function BorderRadius_roundedRect(x, y, width, height, options) {
if (options === void 0) { options = {}; }
var path = oldRoundedRect(x,
y,
width,
height,
options),
_a = options.r,
r = _a === void 0 ? 0 : _a,
_b = options.brBoxHeight,
brBoxHeight = _b === void 0 ? height : _b,
_c = options.brBoxY,
brBoxY = _c === void 0 ? y : _c,
brOffsetTop = y - brBoxY,
brOffsetBtm = (brBoxY + brBoxHeight) - (y + height),
// When the distance to the border-radius box is greater than the r
// itself, it means no border radius. The -0.1 accounts for float
// rounding errors.
rTop = (brOffsetTop - r) > -0.1 ? 0 : r,
rBtm = (brOffsetBtm - r) > -0.1 ? 0 : r,
cutTop = Math.max(rTop && brOffsetTop, 0),
cutBtm = Math.max(rBtm && brOffsetBtm, 0);
/*
The naming of control points:
/ a -------- b \
/ \
h c
| |
| |
| |
g d
\ /
\ f -------- e /
*/
var a = [x + rTop,
y],
b = [x + width - rTop,
y],
c = [x + width,
y + rTop],
d = [
x + width,
y + height - rBtm
],
e = [
x + width - rBtm,
y + height
],
f = [x + rBtm,
y + height],
g = [x,
y + height - rBtm],
h = [x,
y + rTop];
var applyPythagoras = function (r,
altitude) { return Math.sqrt(Math.pow(r, 2) - Math.pow(altitude, 2)); };
// Inside stacks, cut off part of the top
if (cutTop) {
var base = applyPythagoras(rTop,
rTop - cutTop);
a[0] -= base;
b[0] += base;
c[1] = h[1] = y + rTop - cutTop;
}
// Column is lower than the radius. Cut off bottom inside the top
// radius.
if (height < rTop - cutTop) {
var base = applyPythagoras(rTop,
rTop - cutTop - height);
c[0] = d[0] = x + width - rTop + base;
e[0] = Math.min(c[0], e[0]);
f[0] = Math.max(d[0], f[0]);
g[0] = h[0] = x + rTop - base;
c[1] = h[1] = y + height;
}
// Inside stacks, cut off part of the bottom
if (cutBtm) {
var base = applyPythagoras(rBtm,
rBtm - cutBtm);
e[0] += base;
f[0] -= base;
d[1] = g[1] = y + height - rBtm + cutBtm;
}
// Cut off top inside the bottom radius
if (height < rBtm - cutBtm) {
var base = applyPythagoras(rBtm,
rBtm - cutBtm - height);
c[0] = d[0] = x + width - rBtm + base;
b[0] = Math.min(c[0], b[0]);
a[0] = Math.max(d[0], a[0]);
g[0] = h[0] = x + rBtm - base;
d[1] = g[1] = y;
}
// Preserve the box for data labels
path.length = 0;
path.push(BorderRadius_spreadArray(['M'], a, true), BorderRadius_spreadArray(['L'], b, true), BorderRadius_spreadArray(['A', rTop, rTop, 0, 0, 1], c, true), BorderRadius_spreadArray(['L'], d, true), BorderRadius_spreadArray(['A', rBtm, rBtm, 0, 0, 1], e, true), BorderRadius_spreadArray(['L'], f, true), BorderRadius_spreadArray(['A', rBtm, rBtm, 0, 0, 1], g, true), BorderRadius_spreadArray(['L'], h, true), BorderRadius_spreadArray(['A', rTop, rTop, 0, 0, 1], a, true), ['Z']);
return path;
}
/* *
*
* Default Export
*
* */
var BorderRadius = {
compose: BorderRadius_compose,
optionsToObject: optionsToObject
};
/* harmony default export */ var Extensions_BorderRadius = (BorderRadius);
/* *
*
* API Declarations
*
* */
/**
* Detailed options for border radius.
*
* @sample {highcharts} highcharts/plotoptions/column-borderradius/
* Rounded columns
* @sample highcharts/plotoptions/series-border-radius
* Column and pie with rounded border
*
* @interface Highcharts.BorderRadiusOptionsObject
*/ /**
* The border radius. A number signifies pixels. A percentage string, like for
* example `50%`, signifies a relative size. For columns this is relative to the
* column width, for pies it is relative to the radius and the inner radius.
*
* @name Highcharts.BorderRadiusOptionsObject#radius
* @type {string|number}
*/ /**
* The scope of the rounding for column charts. In a stacked column chart, the
* value `point` means each single point will get rounded corners. The value
* `stack` means the rounding will apply to the full stack, so that only points
* close to the top or bottom will receive rounding.
*
* @name Highcharts.BorderRadiusOptionsObject#scope
* @validvalue ["point", "stack"]
* @type {string}
*/ /**
* For column charts, where in the point or stack to apply rounding. The `end`
* value means only those corners at the point value will be rounded, leaving
* the corners at the base or threshold unrounded. This is the most intuitive
* behaviour. The `all` value means also the base will be rounded.
*
* @name Highcharts.BorderRadiusOptionsObject#where
* @validvalue ["all", "end"]
* @type {string}
* @default end
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Core/Responsive.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Responsive_diffObjects = Core_Utilities.diffObjects, Responsive_extend = Core_Utilities.extend, Responsive_find = Core_Utilities.find, Responsive_merge = Core_Utilities.merge, Responsive_pick = Core_Utilities.pick, Responsive_uniqueKey = Core_Utilities.uniqueKey;
/* *
*
* Composition
*
* */
var Responsive;
(function (Responsive) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* @private
*/
function compose(ChartClass) {
var chartProto = ChartClass.prototype;
if (!chartProto.matchResponsiveRule) {
Responsive_extend(chartProto, {
matchResponsiveRule: matchResponsiveRule,
setResponsive: setResponsive
});
}
return ChartClass;
}
Responsive.compose = compose;
/**
* Handle a single responsiveness rule.
*
* @private
* @function Highcharts.Chart#matchResponsiveRule
* @param {Highcharts.ResponsiveRulesOptions} rule
* @param {Array<string>} matches
*/
function matchResponsiveRule(rule, matches) {
var condition = rule.condition,
fn = condition.callback || function () {
return (this.chartWidth <= Responsive_pick(condition.maxWidth,
Number.MAX_VALUE) &&
this.chartHeight <= Responsive_pick(condition.maxHeight,
Number.MAX_VALUE) &&
this.chartWidth >= Responsive_pick(condition.minWidth, 0) &&
this.chartHeight >= Responsive_pick(condition.minHeight, 0));
};
if (fn.call(this)) {
matches.push(rule._id);
}
}
/**
* Update the chart based on the current chart/document size and options
* for responsiveness.
*
* @private
* @function Highcharts.Chart#setResponsive
* @param {boolean} [redraw=true]
* @param {boolean} [reset=false]
* Reset by un-applying all rules. Chart.update resets all rules before
* applying updated options.
*/
function setResponsive(redraw, reset) {
var _this = this;
var options = this.options.responsive,
currentResponsive = this.currentResponsive;
var ruleIds = [],
undoOptions;
if (!reset && options && options.rules) {
options.rules.forEach(function (rule) {
if (typeof rule._id === 'undefined') {
rule._id = Responsive_uniqueKey();
}
_this.matchResponsiveRule(rule, ruleIds /* , redraw */);
}, this);
}
// Merge matching rules
var mergedOptions = Responsive_merge.apply(void 0,
ruleIds
.map(function (ruleId) { return Responsive_find((options || {}).rules || [],
function (rule) { return (rule._id === ruleId); }); })
.map(function (rule) { return (rule && rule.chartOptions); }));
mergedOptions.isResponsiveOptions = true;
// Stringified key for the rules that currently apply.
ruleIds = (ruleIds.toString() || void 0);
var currentRuleIds = (currentResponsive && currentResponsive.ruleIds);
// Changes in what rules apply
if (ruleIds !== currentRuleIds) {
// Undo previous rules. Before we apply a new set of rules, we
// need to roll back completely to base options (#6291).
if (currentResponsive) {
this.currentResponsive = void 0;
this.updatingResponsive = true;
this.update(currentResponsive.undoOptions, redraw, true);
this.updatingResponsive = false;
}
if (ruleIds) {
// Get undo-options for matching rules. The `undoOptions``
// hold the current values before they are changed by the
// `mergedOptions`.
undoOptions = Responsive_diffObjects(mergedOptions, this.options, true, this.collectionsWithUpdate);
undoOptions.isResponsiveOptions = true;
this.currentResponsive = {
ruleIds: ruleIds,
mergedOptions: mergedOptions,
undoOptions: undoOptions
};
if (!this.updatingResponsive) {
this.update(mergedOptions, redraw, true);
}
}
else {
this.currentResponsive = void 0;
}
}
}
})(Responsive || (Responsive = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Core_Responsive = (Responsive);
/* *
*
* API Declarations
*
* */
/**
* A callback function to gain complete control on when the responsive rule
* applies.
*
* @callback Highcharts.ResponsiveCallbackFunction
*
* @param {Highcharts.Chart} this
* Chart context.
*
* @return {boolean}
* Return `true` if it applies.
*/
(''); // Keeps doclets above in JS file
/* *
*
* API Options
*
* */
/**
* Allows setting a set of rules to apply for different screen or chart
* sizes. Each rule specifies additional chart options.
*
* @sample {highstock} stock/demo/responsive/
* Stock chart
* @sample highcharts/responsive/axis/
* Axis
* @sample highcharts/responsive/legend/
* Legend
* @sample highcharts/responsive/classname/
* Class name
*
* @since 5.0.0
* @apioption responsive
*/
/**
* A set of rules for responsive settings. The rules are executed from
* the top down.
*
* @sample {highcharts} highcharts/responsive/axis/
* Axis changes
* @sample {highstock} highcharts/responsive/axis/
* Axis changes
* @sample {highmaps} highcharts/responsive/axis/
* Axis changes
*
* @type {Array<*>}
* @since 5.0.0
* @apioption responsive.rules
*/
/**
* A full set of chart options to apply as overrides to the general
* chart options. The chart options are applied when the given rule
* is active.
*
* A special case is configuration objects that take arrays, for example
* [xAxis](#xAxis), [yAxis](#yAxis) or [series](#series). For these
* collections, an `id` option is used to map the new option set to
* an existing object. If an existing object of the same id is not found,
* the item of the same index updated. So for example, setting `chartOptions`
* with two series items without an `id`, will cause the existing chart's
* two series to be updated with respective options.
*
* @sample {highstock} stock/demo/responsive/
* Stock chart
* @sample highcharts/responsive/axis/
* Axis
* @sample highcharts/responsive/legend/
* Legend
* @sample highcharts/responsive/classname/
* Class name
*
* @type {Highcharts.Options}
* @since 5.0.0
* @apioption responsive.rules.chartOptions
*/
/**
* Under which conditions the rule applies.
*
* @since 5.0.0
* @apioption responsive.rules.condition
*/
/**
* A callback function to gain complete control on when the responsive
* rule applies. Return `true` if it applies. This opens for checking
* against other metrics than the chart size, for example the document
* size or other elements.
*
* @type {Highcharts.ResponsiveCallbackFunction}
* @since 5.0.0
* @context Highcharts.Chart
* @apioption responsive.rules.condition.callback
*/
/**
* The responsive rule applies if the chart height is less than this.
*
* @type {number}
* @since 5.0.0
* @apioption responsive.rules.condition.maxHeight
*/
/**
* The responsive rule applies if the chart width is less than this.
*
* @sample highcharts/responsive/axis/
* Max width is 500
*
* @type {number}
* @since 5.0.0
* @apioption responsive.rules.condition.maxWidth
*/
/**
* The responsive rule applies if the chart height is greater than this.
*
* @type {number}
* @default 0
* @since 5.0.0
* @apioption responsive.rules.condition.minHeight
*/
/**
* The responsive rule applies if the chart width is greater than this.
*
* @type {number}
* @default 0
* @since 5.0.0
* @apioption responsive.rules.condition.minWidth
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/masters/highcharts.src.js
var G = Core_Globals;
// Classes
G.AST = HTML_AST;
G.Axis = Axis_Axis;
G.Chart = Chart_Chart;
G.Color = Color_Color;
G.DataLabel = Series_DataLabel;
G.DataTableCore = Data_DataTableCore;
G.Fx = Animation_Fx;
G.HTMLElement = HTML_HTMLElement;
G.Legend = Legend_Legend;
G.LegendSymbol = Legend_LegendSymbol;
G.OverlappingDataLabels = G.OverlappingDataLabels || Extensions_OverlappingDataLabels;
G.PlotLineOrBand = PlotLineOrBand_PlotLineOrBand;
G.Point = Series_Point;
G.Pointer = Core_Pointer;
G.RendererRegistry = Renderer_RendererRegistry;
G.Series = Series_Series;
G.SeriesRegistry = Series_SeriesRegistry;
G.StackItem = Stacking_StackItem;
G.SVGElement = SVG_SVGElement;
G.SVGRenderer = SVG_SVGRenderer;
G.Templating = Core_Templating;
G.Tick = Axis_Tick;
G.Time = Core_Time;
G.Tooltip = Core_Tooltip;
// Utilities
G.animate = AnimationUtilities.animate;
G.animObject = AnimationUtilities.animObject;
G.chart = Chart_Chart.chart;
G.color = Color_Color.parse;
G.dateFormat = Core_Templating.dateFormat;
G.defaultOptions = Defaults.defaultOptions;
G.distribute = Renderer_RendererUtilities.distribute;
G.format = Core_Templating.format;
G.getDeferredAnimation = AnimationUtilities.getDeferredAnimation;
G.getOptions = Defaults.getOptions;
G.numberFormat = Core_Templating.numberFormat;
G.seriesType = Series_SeriesRegistry.seriesType;
G.setAnimation = AnimationUtilities.setAnimation;
G.setOptions = Defaults.setOptions;
G.stop = AnimationUtilities.stop;
G.time = Defaults.defaultTime;
G.timers = Animation_Fx.timers;
// Compositions
Extensions_BorderRadius.compose(G.Series, G.SVGElement, G.SVGRenderer);
Column_ColumnDataLabel.compose(G.Series.types.column);
Series_DataLabel.compose(G.Series);
Axis_DateTimeAxis.compose(G.Axis);
HTML_HTMLElement.compose(G.SVGRenderer);
Legend_Legend.compose(G.Chart);
Axis_LogarithmicAxis.compose(G.Axis);
Extensions_OverlappingDataLabels.compose(G.Chart);
PieDataLabel.compose(G.Series.types.pie);
PlotLineOrBand_PlotLineOrBand.compose(G.Chart, G.Axis);
Core_Pointer.compose(G.Chart);
Core_Responsive.compose(G.Chart);
Extensions_ScrollablePlotArea.compose(G.Axis, G.Chart, G.Series);
Stacking_StackingAxis.compose(G.Axis, G.Chart, G.Series);
Core_Tooltip.compose(G.Pointer);
Core_Utilities.extend(G, Core_Utilities);
// Default Export
/* harmony default export */ var highcharts_src = (G);
;// ./code/es5/es-modules/Core/Axis/Color/ColorAxisComposition.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var ColorAxisComposition_color = Color_Color.parse;
var ColorAxisComposition_addEvent = Core_Utilities.addEvent, ColorAxisComposition_extend = Core_Utilities.extend, ColorAxisComposition_merge = Core_Utilities.merge, ColorAxisComposition_pick = Core_Utilities.pick, ColorAxisComposition_splat = Core_Utilities.splat;
/* *
*
* Composition
*
* */
var ColorAxisComposition;
(function (ColorAxisComposition) {
/* *
*
* Declarations
*
* */
/* *
*
* Variables
*
* */
var ColorAxisConstructor;
/* *
*
* Functions
*
* */
/**
* @private
*/
function compose(ColorAxisClass, ChartClass, FxClass, LegendClass, SeriesClass) {
var chartProto = ChartClass.prototype,
fxProto = FxClass.prototype,
seriesProto = SeriesClass.prototype;
if (!chartProto.collectionsWithUpdate.includes('colorAxis')) {
ColorAxisConstructor = ColorAxisClass;
chartProto.collectionsWithUpdate.push('colorAxis');
chartProto.collectionsWithInit.colorAxis = [
chartProto.addColorAxis
];
ColorAxisComposition_addEvent(ChartClass, 'afterCreateAxes', onChartAfterCreateAxes);
wrapChartCreateAxis(ChartClass);
fxProto.fillSetter = wrapFxFillSetter;
fxProto.strokeSetter = wrapFxStrokeSetter;
ColorAxisComposition_addEvent(LegendClass, 'afterGetAllItems', onLegendAfterGetAllItems);
ColorAxisComposition_addEvent(LegendClass, 'afterColorizeItem', onLegendAfterColorizeItem);
ColorAxisComposition_addEvent(LegendClass, 'afterUpdate', onLegendAfterUpdate);
ColorAxisComposition_extend(seriesProto, {
optionalAxis: 'colorAxis',
translateColors: seriesTranslateColors
});
ColorAxisComposition_extend(seriesProto.pointClass.prototype, {
setVisible: pointSetVisible
});
ColorAxisComposition_addEvent(SeriesClass, 'afterTranslate', onSeriesAfterTranslate, { order: 1 });
ColorAxisComposition_addEvent(SeriesClass, 'bindAxes', onSeriesBindAxes);
}
}
ColorAxisComposition.compose = compose;
/**
* Extend the chart createAxes method to also make the color axis.
* @private
*/
function onChartAfterCreateAxes() {
var _this = this;
var userOptions = this.userOptions;
this.colorAxis = [];
// If a `colorAxis` config is present in the user options (not in a
// theme), instanciate it.
if (userOptions.colorAxis) {
userOptions.colorAxis = ColorAxisComposition_splat(userOptions.colorAxis);
userOptions.colorAxis.map(function (axisOptions) { return (new ColorAxisConstructor(_this, axisOptions)); });
}
}
/**
* Add the color axis. This also removes the axis' own series to prevent
* them from showing up individually.
* @private
*/
function onLegendAfterGetAllItems(e) {
var _this = this;
var colorAxes = this.chart.colorAxis || [],
destroyItem = function (item) {
var i = e.allItems.indexOf(item);
if (i !== -1) {
// #15436
_this.destroyItem(e.allItems[i]);
e.allItems.splice(i, 1);
}
};
var colorAxisItems = [],
options,
i;
colorAxes.forEach(function (colorAxis) {
options = colorAxis.options;
if (options && options.showInLegend) {
// Data classes
if (options.dataClasses && options.visible) {
colorAxisItems = colorAxisItems.concat(colorAxis.getDataClassLegendSymbols());
// Gradient legend
}
else if (options.visible) {
// Add this axis on top
colorAxisItems.push(colorAxis);
}
// If dataClasses are defined or showInLegend option is not set
// to true, do not add color axis' series to legend.
colorAxis.series.forEach(function (series) {
if (!series.options.showInLegend || options.dataClasses) {
if (series.options.legendType === 'point') {
series.points.forEach(function (point) {
destroyItem(point);
});
}
else {
destroyItem(series);
}
}
});
}
});
i = colorAxisItems.length;
while (i--) {
e.allItems.unshift(colorAxisItems[i]);
}
}
/**
* @private
*/
function onLegendAfterColorizeItem(e) {
if (e.visible && e.item.legendColor) {
e.item.legendItem.symbol.attr({
fill: e.item.legendColor
});
}
}
/**
* Updates in the legend need to be reflected in the color axis. (#6888)
* @private
*/
function onLegendAfterUpdate(e) {
var _a;
(_a = this.chart.colorAxis) === null || _a === void 0 ? void 0 : _a.forEach(function (colorAxis) {
colorAxis.update({}, e.redraw);
});
}
/**
* Calculate and set colors for points.
* @private
*/
function onSeriesAfterTranslate() {
if (this.chart.colorAxis &&
this.chart.colorAxis.length ||
this.colorAttribs) {
this.translateColors();
}
}
/**
* Add colorAxis to series axisTypes.
* @private
*/
function onSeriesBindAxes() {
var axisTypes = this.axisTypes;
if (!axisTypes) {
this.axisTypes = ['colorAxis'];
}
else if (axisTypes.indexOf('colorAxis') === -1) {
axisTypes.push('colorAxis');
}
}
/**
* Set the visibility of a single point
* @private
* @function Highcharts.colorPointMixin.setVisible
* @param {boolean} visible
*/
function pointSetVisible(vis) {
var point = this,
method = vis ? 'show' : 'hide';
point.visible = point.options.visible = Boolean(vis);
// Show and hide associated elements
['graphic', 'dataLabel'].forEach(function (key) {
if (point[key]) {
point[key][method]();
}
});
this.series.buildKDTree(); // Rebuild kdtree #13195
}
ColorAxisComposition.pointSetVisible = pointSetVisible;
/**
* In choropleth maps, the color is a result of the value, so this needs
* translation too
* @private
* @function Highcharts.colorSeriesMixin.translateColors
*/
function seriesTranslateColors() {
var series = this,
points = this.getPointsCollection(), // #17945
nullColor = this.options.nullColor,
colorAxis = this.colorAxis,
colorKey = this.colorKey;
points.forEach(function (point) {
var value = point.getNestedProperty(colorKey),
color = point.options.color || (point.isNull || point.value === null ?
nullColor :
(colorAxis && typeof value !== 'undefined') ?
colorAxis.toColor(value,
point) :
point.color || series.color);
if (color && point.color !== color) {
point.color = color;
if (series.options.legendType === 'point' &&
point.legendItem &&
point.legendItem.label) {
series.chart.legend.colorizeItem(point, point.visible);
}
}
});
}
/**
* @private
*/
function wrapChartCreateAxis(ChartClass) {
var superCreateAxis = ChartClass.prototype.createAxis;
ChartClass.prototype.createAxis = function (type, options) {
var chart = this;
if (type !== 'colorAxis') {
return superCreateAxis.apply(chart, arguments);
}
var axis = new ColorAxisConstructor(chart,
ColorAxisComposition_merge(options.axis, {
index: chart[type].length,
isX: false
}));
chart.isDirtyLegend = true;
// Clear before 'bindAxes' (#11924)
chart.axes.forEach(function (axis) {
axis.series = [];
});
chart.series.forEach(function (series) {
series.bindAxes();
series.isDirtyData = true;
});
if (ColorAxisComposition_pick(options.redraw, true)) {
chart.redraw(options.animation);
}
return axis;
};
}
/**
* Handle animation of the color attributes directly.
* @private
*/
function wrapFxFillSetter() {
this.elem.attr('fill', ColorAxisComposition_color(this.start).tweenTo(ColorAxisComposition_color(this.end), this.pos), void 0, true);
}
/**
* Handle animation of the color attributes directly.
* @private
*/
function wrapFxStrokeSetter() {
this.elem.attr('stroke', ColorAxisComposition_color(this.start).tweenTo(ColorAxisComposition_color(this.end), this.pos), void 0, true);
}
})(ColorAxisComposition || (ColorAxisComposition = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Color_ColorAxisComposition = (ColorAxisComposition);
;// ./code/es5/es-modules/Core/Axis/Color/ColorAxisDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* A color axis for series. Visually, the color
* axis will appear as a gradient or as separate items inside the
* legend, depending on whether the axis is scalar or based on data
* classes.
*
* For supported color formats, see the
* [docs article about colors](https://www.highcharts.com/docs/chart-design-and-style/colors).
*
* A scalar color axis is represented by a gradient. The colors either
* range between the [minColor](#colorAxis.minColor) and the
* [maxColor](#colorAxis.maxColor), or for more fine grained control the
* colors can be defined in [stops](#colorAxis.stops). Often times, the
* color axis needs to be adjusted to get the right color spread for the
* data. In addition to stops, consider using a logarithmic
* [axis type](#colorAxis.type), or setting [min](#colorAxis.min) and
* [max](#colorAxis.max) to avoid the colors being determined by
* outliers.
*
* When [dataClasses](#colorAxis.dataClasses) are used, the ranges are
* subdivided into separate classes like categories based on their
* values. This can be used for ranges between two values, but also for
* a true category. However, when your data is categorized, it may be as
* convenient to add each category to a separate series.
*
* Color axis does not work with: `sankey`, `sunburst`, `dependencywheel`,
* `networkgraph`, `wordcloud`, `venn`, `gauge` and `solidgauge` series
* types.
*
* Since v7.2.0 `colorAxis` can also be an array of options objects.
*
* See [the Axis object](/class-reference/Highcharts.Axis) for
* programmatic access to the axis.
*
* @sample {highcharts} highcharts/coloraxis/custom-color-key
* Column chart with color axis
* @sample {highcharts} highcharts/coloraxis/horizontal-layout
* Horizontal layout
* @sample {highmaps} maps/coloraxis/dataclasscolor
* With data classes
* @sample {highmaps} maps/coloraxis/mincolor-maxcolor
* Min color and max color
*
* @extends xAxis
* @excluding alignTicks, allowDecimals, alternateGridColor, breaks,
* categories, crosshair, dateTimeLabelFormats, left,
* lineWidth, linkedTo, maxZoom, minRange, minTickInterval,
* offset, opposite, pane, plotBands, plotLines,
* reversedStacks, scrollbar, showEmpty, title, top,
* zoomEnabled
* @product highcharts highstock highmaps
* @type {*|Array<*>}
* @optionparent colorAxis
*/
var colorAxisDefaults = {
/**
* Whether to allow decimals on the color axis.
* @type {boolean}
* @default true
* @product highcharts highstock highmaps
* @apioption colorAxis.allowDecimals
*/
/**
* Determines how to set each data class' color if no individual
* color is set. The default value, `tween`, computes intermediate
* colors between `minColor` and `maxColor`. The other possible
* value, `category`, pulls colors from the global or chart specific
* [colors](#colors) array.
*
* @sample {highmaps} maps/coloraxis/dataclasscolor/
* Category colors
*
* @type {string}
* @default tween
* @product highcharts highstock highmaps
* @validvalue ["tween", "category"]
* @apioption colorAxis.dataClassColor
*/
/**
* An array of data classes or ranges for the choropleth map. If
* none given, the color axis is scalar and values are distributed
* as a gradient between the minimum and maximum colors.
*
* @sample {highmaps} maps/demo/data-class-ranges/
* Multiple ranges
*
* @sample {highmaps} maps/demo/data-class-two-ranges/
* Two ranges
*
* @type {Array<*>}
* @product highcharts highstock highmaps
* @apioption colorAxis.dataClasses
*/
/**
* The layout of the color axis. Can be `'horizontal'` or `'vertical'`.
* If none given, the color axis has the same layout as the legend.
*
* @sample highcharts/coloraxis/horizontal-layout/
* Horizontal color axis layout with vertical legend
*
* @type {string|undefined}
* @since 7.2.0
* @product highcharts highstock highmaps
* @apioption colorAxis.layout
*/
/**
* The color of each data class. If not set, the color is pulled
* from the global or chart-specific [colors](#colors) array. In
* styled mode, this option is ignored. Instead, use colors defined
* in CSS.
*
* @sample {highmaps} maps/demo/data-class-two-ranges/
* Explicit colors
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock highmaps
* @apioption colorAxis.dataClasses.color
*/
/**
* The start of the value range that the data class represents,
* relating to the point value.
*
* The range of each `dataClass` is closed in both ends, but can be
* overridden by the next `dataClass`.
*
* @type {number}
* @product highcharts highstock highmaps
* @apioption colorAxis.dataClasses.from
*/
/**
* The name of the data class as it appears in the legend.
* If no name is given, it is automatically created based on the
* `from` and `to` values. For full programmatic control,
* [legend.labelFormatter](#legend.labelFormatter) can be used.
* In the formatter, `this.from` and `this.to` can be accessed.
*
* @sample {highmaps} maps/coloraxis/dataclasses-name/
* Named data classes
*
* @sample {highmaps} maps/coloraxis/dataclasses-labelformatter/
* Formatted data classes
*
* @type {string}
* @product highcharts highstock highmaps
* @apioption colorAxis.dataClasses.name
*/
/**
* The end of the value range that the data class represents,
* relating to the point value.
*
* The range of each `dataClass` is closed in both ends, but can be
* overridden by the next `dataClass`.
*
* @type {number}
* @product highcharts highstock highmaps
* @apioption colorAxis.dataClasses.to
*/
/** @ignore-option */
lineWidth: 0,
/**
* Padding of the min value relative to the length of the axis. A
* padding of 0.05 will make a 100px axis 5px longer.
*
* @product highcharts highstock highmaps
*/
minPadding: 0,
/**
* The maximum value of the axis in terms of map point values. If
* `null`, the max value is automatically calculated. If the
* `endOnTick` option is true, the max value might be rounded up.
*
* @sample {highmaps} maps/coloraxis/gridlines/
* Explicit min and max to reduce the effect of outliers
*
* @type {number}
* @product highcharts highstock highmaps
* @apioption colorAxis.max
*/
/**
* The minimum value of the axis in terms of map point values. If
* `null`, the min value is automatically calculated. If the
* `startOnTick` option is true, the min value might be rounded
* down.
*
* @sample {highmaps} maps/coloraxis/gridlines/
* Explicit min and max to reduce the effect of outliers
*
* @type {number}
* @product highcharts highstock highmaps
* @apioption colorAxis.min
*/
/**
* Padding of the max value relative to the length of the axis. A
* padding of 0.05 will make a 100px axis 5px longer.
*
* @product highcharts highstock highmaps
*/
maxPadding: 0,
/**
* Color of the grid lines extending from the axis across the
* gradient.
*
* @sample {highmaps} maps/coloraxis/gridlines/
* Grid lines demonstrated
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock highmaps
*/
gridLineColor: "#ffffff" /* Palette.backgroundColor */,
/**
* The width of the grid lines extending from the axis across the
* gradient of a scalar color axis.
*
* @sample {highmaps} maps/coloraxis/gridlines/
* Grid lines demonstrated
*
* @product highcharts highstock highmaps
*/
gridLineWidth: 1,
/**
* The interval of the tick marks in axis units. When `null`, the
* tick interval is computed to approximately follow the
* `tickPixelInterval`.
*
* @type {number}
* @product highcharts highstock highmaps
* @apioption colorAxis.tickInterval
*/
/**
* If [tickInterval](#colorAxis.tickInterval) is `null` this option
* sets the approximate pixel interval of the tick marks.
*
* @product highcharts highstock highmaps
*/
tickPixelInterval: 72,
/**
* Whether to force the axis to start on a tick. Use this option
* with the `maxPadding` option to control the axis start.
*
* @product highcharts highstock highmaps
*/
startOnTick: true,
/**
* Whether to force the axis to end on a tick. Use this option with
* the [maxPadding](#colorAxis.maxPadding) option to control the
* axis end.
*
* @product highcharts highstock highmaps
*/
endOnTick: true,
/** @ignore */
offset: 0,
/**
* The triangular marker on a scalar color axis that points to the
* value of the hovered area. To disable the marker, set
* `marker: null`.
*
* @sample {highmaps} maps/coloraxis/marker/
* Black marker
*
* @declare Highcharts.PointMarkerOptionsObject
* @product highcharts highstock highmaps
*/
marker: {
/**
* Animation for the marker as it moves between values. Set to
* `false` to disable animation. Defaults to `{ duration: 50 }`.
*
* @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
* @product highcharts highstock highmaps
*/
animation: {
/** @internal */
duration: 50
},
/** @internal */
width: 0.01,
/**
* The color of the marker.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock highmaps
*/
color: "#999999" /* Palette.neutralColor40 */
},
/**
* The axis labels show the number for each tick.
*
* For more live examples on label options, see [xAxis.labels in the
* Highcharts API.](/highcharts#xAxis.labels)
*
* @extends xAxis.labels
* @product highcharts highstock highmaps
*/
labels: {
distance: 8,
/**
* How to handle overflowing labels on horizontal color axis. If set
* to `"allow"`, it will not be aligned at all. By default it
* `"justify"` labels inside the chart area. If there is room to
* move it, it will be aligned to the edge, else it will be removed.
*
* @validvalue ["allow", "justify"]
* @product highcharts highstock highmaps
*/
overflow: 'justify',
rotation: 0
},
/**
* The color to represent the minimum of the color axis. Unless
* [dataClasses](#colorAxis.dataClasses) or
* [stops](#colorAxis.stops) are set, the gradient starts at this
* value.
*
* If dataClasses are set, the color is based on minColor and
* maxColor unless a color is set for each data class, or the
* [dataClassColor](#colorAxis.dataClassColor) is set.
*
* @sample {highmaps} maps/coloraxis/mincolor-maxcolor/
* Min and max colors on scalar (gradient) axis
* @sample {highmaps} maps/coloraxis/mincolor-maxcolor-dataclasses/
* On data classes
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock highmaps
*/
minColor: "#e6e9ff" /* Palette.highlightColor10 */,
/**
* The color to represent the maximum of the color axis. Unless
* [dataClasses](#colorAxis.dataClasses) or
* [stops](#colorAxis.stops) are set, the gradient ends at this
* value.
*
* If dataClasses are set, the color is based on minColor and
* maxColor unless a color is set for each data class, or the
* [dataClassColor](#colorAxis.dataClassColor) is set.
*
* @sample {highmaps} maps/coloraxis/mincolor-maxcolor/
* Min and max colors on scalar (gradient) axis
* @sample {highmaps} maps/coloraxis/mincolor-maxcolor-dataclasses/
* On data classes
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highstock highmaps
*/
maxColor: "#0022ff" /* Palette.highlightColor100 */,
/**
* Color stops for the gradient of a scalar color axis. Use this in
* cases where a linear gradient between a `minColor` and `maxColor`
* is not sufficient. The stops is an array of tuples, where the
* first item is a float between 0 and 1 assigning the relative
* position in the gradient, and the second item is the color.
*
* @sample highcharts/coloraxis/coloraxis-stops/
* Color axis stops
* @sample highcharts/coloraxis/color-key-with-stops/
* Color axis stops with custom colorKey
* @sample {highmaps} maps/demo/heatmap/
* Heatmap with three color stops
*
* @type {Array<Array<number,Highcharts.ColorString>>}
* @product highcharts highstock highmaps
* @apioption colorAxis.stops
*/
/**
* The pixel length of the main tick marks on the color axis.
*/
tickLength: 5,
/**
* The type of interpolation to use for the color axis. Can be
* `linear` or `logarithmic`.
*
* @sample highcharts/coloraxis/logarithmic-with-emulate-negative-values/
* Logarithmic color axis with extension to emulate negative
* values
*
* @type {Highcharts.ColorAxisTypeValue}
* @default linear
* @product highcharts highstock highmaps
* @apioption colorAxis.type
*/
/**
* Whether to reverse the axis so that the highest number is closest
* to the origin. Defaults to `false` in a horizontal legend and
* `true` in a vertical legend, where the smallest value starts on
* top.
*
* @type {boolean}
* @product highcharts highstock highmaps
* @apioption colorAxis.reversed
*/
/**
* @product highcharts highstock highmaps
* @excluding afterBreaks, pointBreak, pointInBreak
* @apioption colorAxis.events
*/
/**
* Fires when the legend item belonging to the colorAxis is clicked.
* One parameter, `event`, is passed to the function.
*
* **Note:** This option is deprecated in favor of
* [legend.events.itemClick](#legend.events.itemClick).
*
* @deprecated 11.4.4
* @type {Function}
* @product highcharts highstock highmaps
* @apioption colorAxis.events.legendItemClick
*/
/**
* The width of the color axis. If it's a number, it is interpreted as
* pixels.
*
* If it's a percentage string, it is interpreted as percentages of the
* total plot width.
*
* @sample highcharts/coloraxis/width-and-height
* Percentage width and pixel height for color axis
*
* @type {number|string}
* @since 11.3.0
* @product highcharts highstock highmaps
* @apioption colorAxis.width
*/
/**
* The height of the color axis. If it's a number, it is interpreted as
* pixels.
*
* If it's a percentage string, it is interpreted as percentages of the
* total plot height.
*
* @sample highcharts/coloraxis/width-and-height
* Percentage width and pixel height for color axis
*
* @type {number|string}
* @since 11.3.0
* @product highcharts highstock highmaps
* @apioption colorAxis.height
*/
/**
* Whether to display the colorAxis in the legend.
*
* @sample highcharts/coloraxis/hidden-coloraxis-with-3d-chart/
* Hidden color axis with 3d chart
*
* @see [heatmap.showInLegend](#series.heatmap.showInLegend)
*
* @since 4.2.7
* @product highcharts highstock highmaps
*/
showInLegend: true
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var ColorAxisDefaults = (colorAxisDefaults);
;// ./code/es5/es-modules/Core/Axis/Color/ColorAxisLike.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var ColorAxisLike_color = Color_Color.parse;
var ColorAxisLike_merge = Core_Utilities.merge;
/* *
*
* Namespace
*
* */
var ColorAxisLike;
(function (ColorAxisLike) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/**
* Initialize defined data classes.
* @private
*/
function initDataClasses(userOptions) {
var axis = this,
chart = axis.chart,
legendItem = axis.legendItem = axis.legendItem || {},
options = axis.options,
userDataClasses = userOptions.dataClasses || [];
var dataClass,
dataClasses,
colorCount = chart.options.chart.colorCount,
colorCounter = 0,
colors;
axis.dataClasses = dataClasses = [];
legendItem.labels = [];
for (var i = 0, iEnd = userDataClasses.length; i < iEnd; ++i) {
dataClass = userDataClasses[i];
dataClass = ColorAxisLike_merge(dataClass);
dataClasses.push(dataClass);
if (!chart.styledMode && dataClass.color) {
continue;
}
if (options.dataClassColor === 'category') {
if (!chart.styledMode) {
colors = chart.options.colors || [];
colorCount = colors.length;
dataClass.color = colors[colorCounter];
}
dataClass.colorIndex = colorCounter;
// Loop back to zero
colorCounter++;
if (colorCounter === colorCount) {
colorCounter = 0;
}
}
else {
dataClass.color = ColorAxisLike_color(options.minColor).tweenTo(ColorAxisLike_color(options.maxColor), iEnd < 2 ? 0.5 : i / (iEnd - 1) // #3219
);
}
}
}
ColorAxisLike.initDataClasses = initDataClasses;
/**
* Create initial color stops.
* @private
*/
function initStops() {
var axis = this,
options = axis.options,
stops = axis.stops = options.stops || [
[0,
options.minColor || ''],
[1,
options.maxColor || '']
];
for (var i = 0, iEnd = stops.length; i < iEnd; ++i) {
stops[i].color = ColorAxisLike_color(stops[i][1]);
}
}
ColorAxisLike.initStops = initStops;
/**
* Normalize logarithmic values.
* @private
*/
function normalizedValue(value) {
var axis = this,
max = axis.max || 0,
min = axis.min || 0;
if (axis.logarithmic) {
value = axis.logarithmic.log2lin(value);
}
return 1 - ((max - value) /
((max - min) || 1));
}
ColorAxisLike.normalizedValue = normalizedValue;
/**
* Translate from a value to a color.
* @private
*/
function toColor(value, point) {
var axis = this;
var dataClasses = axis.dataClasses;
var stops = axis.stops;
var pos,
from,
to,
color,
dataClass,
i;
if (dataClasses) {
i = dataClasses.length;
while (i--) {
dataClass = dataClasses[i];
from = dataClass.from;
to = dataClass.to;
if ((typeof from === 'undefined' || value >= from) &&
(typeof to === 'undefined' || value <= to)) {
color = dataClass.color;
if (point) {
point.dataClass = i;
point.colorIndex = dataClass.colorIndex;
}
break;
}
}
}
else {
pos = axis.normalizedValue(value);
i = stops.length;
while (i--) {
if (pos > stops[i][0]) {
break;
}
}
from = stops[i] || stops[i + 1];
to = stops[i + 1] || from;
// The position within the gradient
pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);
color = from.color.tweenTo(to.color, pos);
}
return color;
}
ColorAxisLike.toColor = toColor;
})(ColorAxisLike || (ColorAxisLike = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Color_ColorAxisLike = (ColorAxisLike);
;// ./code/es5/es-modules/Core/Axis/Color/ColorAxis.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var ColorAxis_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var ColorAxis_defaultOptions = Defaults.defaultOptions;
var ColorAxis_Series = Series_SeriesRegistry.series;
var ColorAxis_defined = Core_Utilities.defined, ColorAxis_extend = Core_Utilities.extend, ColorAxis_fireEvent = Core_Utilities.fireEvent, ColorAxis_isArray = Core_Utilities.isArray, ColorAxis_isNumber = Core_Utilities.isNumber, ColorAxis_merge = Core_Utilities.merge, ColorAxis_pick = Core_Utilities.pick, ColorAxis_relativeLength = Core_Utilities.relativeLength;
ColorAxis_defaultOptions.colorAxis = ColorAxis_merge(ColorAxis_defaultOptions.xAxis, ColorAxisDefaults);
/* *
*
* Class
*
* */
/**
* The ColorAxis object for inclusion in gradient legends.
*
* @class
* @name Highcharts.ColorAxis
* @augments Highcharts.Axis
*
* @param {Highcharts.Chart} chart
* The related chart of the color axis.
*
* @param {Highcharts.ColorAxisOptions} userOptions
* The color axis options for initialization.
*/
var ColorAxis = /** @class */ (function (_super) {
ColorAxis_extends(ColorAxis, _super);
/* *
*
* Constructors
*
* */
/**
* @private
*/
function ColorAxis(chart, userOptions) {
var _this = _super.call(this,
chart,
userOptions) || this;
_this.coll = 'colorAxis';
_this.visible = true;
_this.init(chart, userOptions);
return _this;
}
/* *
*
* Static Functions
*
* */
ColorAxis.compose = function (ChartClass, FxClass, LegendClass, SeriesClass) {
Color_ColorAxisComposition.compose(ColorAxis, ChartClass, FxClass, LegendClass, SeriesClass);
};
/* *
*
* Functions
*
* */
/**
* Initializes the color axis.
*
* @function Highcharts.ColorAxis#init
*
* @param {Highcharts.Chart} chart
* The related chart of the color axis.
*
* @param {Highcharts.ColorAxisOptions} userOptions
* The color axis options for initialization.
*/
ColorAxis.prototype.init = function (chart, userOptions) {
var axis = this;
var legend = chart.options.legend || {},
horiz = userOptions.layout ?
userOptions.layout !== 'vertical' :
legend.layout !== 'vertical';
axis.side = userOptions.side || horiz ? 2 : 1;
axis.reversed = userOptions.reversed || !horiz;
axis.opposite = !horiz;
_super.prototype.init.call(this, chart, userOptions, 'colorAxis');
// `super.init` saves the extended user options, now replace it with the
// originals
this.userOptions = userOptions;
if (ColorAxis_isArray(chart.userOptions.colorAxis)) {
chart.userOptions.colorAxis[this.index] = userOptions;
}
// Prepare data classes
if (userOptions.dataClasses) {
axis.initDataClasses(userOptions);
}
axis.initStops();
// Override original axis properties
axis.horiz = horiz;
axis.zoomEnabled = false;
};
/**
* Returns true if the series has points at all.
*
* @function Highcharts.ColorAxis#hasData
*
* @return {boolean}
* True, if the series has points, otherwise false.
*/
ColorAxis.prototype.hasData = function () {
return !!(this.tickPositions || []).length;
};
/**
* Override so that ticks are not added in data class axes (#6914)
* @private
*/
ColorAxis.prototype.setTickPositions = function () {
if (!this.dataClasses) {
return _super.prototype.setTickPositions.call(this);
}
};
/**
* Extend the setOptions method to process extreme colors and color stops.
* @private
*/
ColorAxis.prototype.setOptions = function (userOptions) {
var options = ColorAxis_merge(ColorAxis_defaultOptions.colorAxis,
userOptions,
// Forced options
{
showEmpty: false,
title: null,
visible: this.chart.options.legend.enabled &&
userOptions.visible !== false
});
_super.prototype.setOptions.call(this, options);
this.options.crosshair = this.options.marker;
};
/**
* @private
*/
ColorAxis.prototype.setAxisSize = function () {
var _a;
var axis = this,
chart = axis.chart,
symbol = (_a = axis.legendItem) === null || _a === void 0 ? void 0 : _a.symbol;
var _b = axis.getSize(),
width = _b.width,
height = _b.height;
if (symbol) {
this.left = +symbol.attr('x');
this.top = +symbol.attr('y');
this.width = width = +symbol.attr('width');
this.height = height = +symbol.attr('height');
this.right = chart.chartWidth - this.left - width;
this.bottom = chart.chartHeight - this.top - height;
this.pos = this.horiz ? this.left : this.top;
}
// Fake length for disabled legend to avoid tick issues
// and such (#5205)
this.len = (this.horiz ? width : height) ||
ColorAxis.defaultLegendLength;
};
/**
* Override the getOffset method to add the whole axis groups inside the
* legend.
* @private
*/
ColorAxis.prototype.getOffset = function () {
var _a;
var axis = this;
var group = (_a = axis.legendItem) === null || _a === void 0 ? void 0 : _a.group;
var sideOffset = axis.chart.axisOffset[axis.side];
if (group) {
// Hook for the getOffset method to add groups to this parent
// group
axis.axisParent = group;
// Call the base
_super.prototype.getOffset.call(this);
var legend_1 = this.chart.legend;
// Adds `maxLabelLength` needed for label padding corrections done
// by `render()` and `getMargins()` (#15551).
legend_1.allItems.forEach(function (item) {
if (item instanceof ColorAxis) {
item.drawLegendSymbol(legend_1, item);
}
});
legend_1.render();
this.chart.getMargins(true);
// If not drilling down/up
if (!this.chart.series.some(function (series) {
return series.isDrilling;
})) {
axis.isDirty = true; // Flag to fire drawChartBox
}
// First time only
if (!axis.added) {
axis.added = true;
axis.labelLeft = 0;
axis.labelRight = axis.width;
}
// Reset it to avoid color axis reserving space
axis.chart.axisOffset[axis.side] = sideOffset;
}
};
/**
* Create the color gradient.
* @private
*/
ColorAxis.prototype.setLegendColor = function () {
var axis = this;
var horiz = axis.horiz;
var reversed = axis.reversed;
var one = reversed ? 1 : 0;
var zero = reversed ? 0 : 1;
var grad = horiz ? [one, 0,
zero, 0] : [0,
zero, 0,
one]; // #3190
axis.legendColor = {
linearGradient: {
x1: grad[0],
y1: grad[1],
x2: grad[2],
y2: grad[3]
},
stops: axis.stops
};
};
/**
* The color axis appears inside the legend and has its own legend symbol.
* @private
*/
ColorAxis.prototype.drawLegendSymbol = function (legend, item) {
var _a;
var axis = this,
legendItem = item.legendItem || {},
padding = legend.padding,
legendOptions = legend.options,
labelOptions = axis.options.labels,
itemDistance = ColorAxis_pick(legendOptions.itemDistance, 10),
horiz = axis.horiz,
_b = axis.getSize(),
width = _b.width,
height = _b.height,
labelPadding = ColorAxis_pick(
// @todo: This option is not documented, nor implemented when
// vertical
legendOptions.labelPadding,
horiz ? 16 : 30);
this.setLegendColor();
// Create the gradient
if (!legendItem.symbol) {
legendItem.symbol = this.chart.renderer.symbol('roundedRect')
.attr({
r: (_a = legendOptions.symbolRadius) !== null && _a !== void 0 ? _a : 3,
zIndex: 1
}).add(legendItem.group);
}
legendItem.symbol.attr({
x: 0,
y: (legend.baseline || 0) - 11,
width: width,
height: height
});
// Set how much space this legend item takes up
legendItem.labelWidth = (width +
padding +
(horiz ?
itemDistance :
ColorAxis_pick(labelOptions.x, labelOptions.distance) +
(this.maxLabelLength || 0)));
legendItem.labelHeight = height + padding + (horiz ? labelPadding : 0);
};
/**
* Fool the legend.
* @private
*/
ColorAxis.prototype.setState = function (state) {
this.series.forEach(function (series) {
series.setState(state);
});
};
/**
* @private
*/
ColorAxis.prototype.setVisible = function () {
};
/**
* @private
*/
ColorAxis.prototype.getSeriesExtremes = function () {
var axis = this;
var series = axis.series;
var colorValArray,
colorKey,
calculatedExtremes,
cSeries,
i = series.length;
this.dataMin = Infinity;
this.dataMax = -Infinity;
while (i--) { // X, y, value, other
cSeries = series[i];
colorKey = cSeries.colorKey = ColorAxis_pick(cSeries.options.colorKey, cSeries.colorKey, cSeries.pointValKey, cSeries.zoneAxis, 'y');
calculatedExtremes = cSeries[colorKey + 'Min'] &&
cSeries[colorKey + 'Max'];
// Find the first column that has values
for (var _i = 0, _a = [colorKey, 'value', 'y']; _i < _a.length; _i++) {
var key = _a[_i];
colorValArray = cSeries.getColumn(key);
if (colorValArray.length) {
break;
}
}
// If color key extremes are already calculated, use them.
if (calculatedExtremes) {
cSeries.minColorValue = cSeries[colorKey + 'Min'];
cSeries.maxColorValue = cSeries[colorKey + 'Max'];
}
else {
var cExtremes = ColorAxis_Series.prototype.getExtremes.call(cSeries,
colorValArray);
cSeries.minColorValue = cExtremes.dataMin;
cSeries.maxColorValue = cExtremes.dataMax;
}
if (ColorAxis_defined(cSeries.minColorValue) &&
ColorAxis_defined(cSeries.maxColorValue)) {
this.dataMin =
Math.min(this.dataMin, cSeries.minColorValue);
this.dataMax =
Math.max(this.dataMax, cSeries.maxColorValue);
}
if (!calculatedExtremes) {
ColorAxis_Series.prototype.applyExtremes.call(cSeries);
}
}
};
/**
* Internal function to draw a crosshair.
*
* @function Highcharts.ColorAxis#drawCrosshair
*
* @param {Highcharts.PointerEventObject} [e]
* The event arguments from the modified pointer event, extended with
* `chartX` and `chartY`
*
* @param {Highcharts.Point} [point]
* The Point object if the crosshair snaps to points.
*
* @emits Highcharts.ColorAxis#event:afterDrawCrosshair
* @emits Highcharts.ColorAxis#event:drawCrosshair
*/
ColorAxis.prototype.drawCrosshair = function (e, point) {
var axis = this,
legendItem = axis.legendItem || {},
plotX = point && point.plotX,
plotY = point && point.plotY,
axisPos = axis.pos,
axisLen = axis.len;
var crossPos;
if (point) {
crossPos = axis.toPixels(point.getNestedProperty(point.series.colorKey));
if (crossPos < axisPos) {
crossPos = axisPos - 2;
}
else if (crossPos > axisPos + axisLen) {
crossPos = axisPos + axisLen + 2;
}
point.plotX = crossPos;
point.plotY = axis.len - crossPos;
_super.prototype.drawCrosshair.call(this, e, point);
point.plotX = plotX;
point.plotY = plotY;
if (axis.cross &&
!axis.cross.addedToColorAxis &&
legendItem.group) {
axis.cross
.addClass('highcharts-coloraxis-marker')
.add(legendItem.group);
axis.cross.addedToColorAxis = true;
if (!axis.chart.styledMode &&
typeof axis.crosshair === 'object') {
axis.cross.attr({
fill: axis.crosshair.color
});
}
}
}
};
/**
* @private
*/
ColorAxis.prototype.getPlotLinePath = function (options) {
var axis = this,
left = axis.left,
pos = options.translatedValue,
top = axis.top;
// Crosshairs only
return ColorAxis_isNumber(pos) ? // `pos` can be 0 (#3969)
(axis.horiz ? [
['M', pos - 4, top - 6],
['L', pos + 4, top - 6],
['L', pos, top],
['Z']
] : [
['M', left, pos],
['L', left - 6, pos + 6],
['L', left - 6, pos - 6],
['Z']
]) :
_super.prototype.getPlotLinePath.call(this, options);
};
/**
* Updates a color axis instance with a new set of options. The options are
* merged with the existing options, so only new or altered options need to
* be specified.
*
* @function Highcharts.ColorAxis#update
*
* @param {Highcharts.ColorAxisOptions} newOptions
* The new options that will be merged in with existing options on the color
* axis.
*
* @param {boolean} [redraw]
* Whether to redraw the chart after the color axis is altered. If doing
* more operations on the chart, it is a good idea to set redraw to `false`
* and call {@link Highcharts.Chart#redraw} after.
*/
ColorAxis.prototype.update = function (newOptions, redraw) {
var axis = this,
chart = axis.chart,
legend = chart.legend;
this.series.forEach(function (series) {
// Needed for Axis.update when choropleth colors change
series.isDirtyData = true;
});
// When updating data classes, destroy old items and make sure new
// ones are created (#3207)
if (newOptions.dataClasses && legend.allItems || axis.dataClasses) {
axis.destroyItems();
}
_super.prototype.update.call(this, newOptions, redraw);
if (axis.legendItem && axis.legendItem.label) {
axis.setLegendColor();
legend.colorizeItem(this, true);
}
};
/**
* Destroy color axis legend items.
* @private
*/
ColorAxis.prototype.destroyItems = function () {
var axis = this,
chart = axis.chart,
legendItem = axis.legendItem || {};
if (legendItem.label) {
chart.legend.destroyItem(axis);
}
else if (legendItem.labels) {
for (var _i = 0, _a = legendItem.labels; _i < _a.length; _i++) {
var item = _a[_i];
chart.legend.destroyItem(item);
}
}
chart.isDirtyLegend = true;
};
// Removing the whole axis (#14283)
ColorAxis.prototype.destroy = function () {
this.chart.isDirtyLegend = true;
this.destroyItems();
_super.prototype.destroy.apply(this, [].slice.call(arguments));
};
/**
* Removes the color axis and the related legend item.
*
* @function Highcharts.ColorAxis#remove
*
* @param {boolean} [redraw=true]
* Whether to redraw the chart following the remove.
*/
ColorAxis.prototype.remove = function (redraw) {
this.destroyItems();
_super.prototype.remove.call(this, redraw);
};
/**
* Get the legend item symbols for data classes.
* @private
*/
ColorAxis.prototype.getDataClassLegendSymbols = function () {
var axis = this,
chart = axis.chart,
legendItems = (axis.legendItem &&
axis.legendItem.labels ||
[]),
legendOptions = chart.options.legend,
valueDecimals = ColorAxis_pick(legendOptions.valueDecimals, -1),
valueSuffix = ColorAxis_pick(legendOptions.valueSuffix, '');
var getPointsInDataClass = function (i) {
return axis.series.reduce(function (points,
s) {
points.push.apply(points,
s.points.filter(function (point) {
return point.dataClass === i;
}));
return points;
}, []);
};
var name;
if (!legendItems.length) {
axis.dataClasses.forEach(function (dataClass, i) {
var from = dataClass.from,
to = dataClass.to,
numberFormatter = chart.numberFormatter;
var vis = true;
// Assemble the default name. This can be overridden
// by legend.options.labelFormatter
name = '';
if (typeof from === 'undefined') {
name = '< ';
}
else if (typeof to === 'undefined') {
name = '> ';
}
if (typeof from !== 'undefined') {
name += numberFormatter(from, valueDecimals) + valueSuffix;
}
if (typeof from !== 'undefined' && typeof to !== 'undefined') {
name += ' - ';
}
if (typeof to !== 'undefined') {
name += numberFormatter(to, valueDecimals) + valueSuffix;
}
// Add a mock object to the legend items
legendItems.push(ColorAxis_extend({
chart: chart,
name: name,
options: {},
drawLegendSymbol: Legend_LegendSymbol.rectangle,
visible: true,
isDataClass: true,
// Override setState to set either normal or inactive
// state to all points in this data class
setState: function (state) {
for (var _i = 0, _a = getPointsInDataClass(i); _i < _a.length; _i++) {
var point = _a[_i];
point.setState(state);
}
},
// Override setState to show or hide all points in this
// data class
setVisible: function () {
this.visible = vis = axis.visible = !vis;
var affectedSeries = [];
for (var _i = 0, _a = getPointsInDataClass(i); _i < _a.length; _i++) {
var point = _a[_i];
point.setVisible(vis);
point.hiddenInDataClass = !vis; // #20441
if (affectedSeries.indexOf(point.series) === -1) {
affectedSeries.push(point.series);
}
}
chart.legend.colorizeItem(this, vis);
affectedSeries.forEach(function (series) {
ColorAxis_fireEvent(series, 'afterDataClassLegendClick');
});
}
}, dataClass));
});
}
return legendItems;
};
/**
* Get size of color axis symbol.
* @private
*/
ColorAxis.prototype.getSize = function () {
var axis = this,
chart = axis.chart,
horiz = axis.horiz,
_a = axis.options,
colorAxisHeight = _a.height,
colorAxisWidth = _a.width,
legendOptions = chart.options.legend,
width = ColorAxis_pick(ColorAxis_defined(colorAxisWidth) ?
ColorAxis_relativeLength(colorAxisWidth,
chart.chartWidth) : void 0,
legendOptions === null || legendOptions === void 0 ? void 0 : legendOptions.symbolWidth,
horiz ? ColorAxis.defaultLegendLength : 12),
height = ColorAxis_pick(ColorAxis_defined(colorAxisHeight) ?
ColorAxis_relativeLength(colorAxisHeight,
chart.chartHeight) : void 0,
legendOptions === null || legendOptions === void 0 ? void 0 : legendOptions.symbolHeight,
horiz ? 12 : ColorAxis.defaultLegendLength);
return {
width: width,
height: height
};
};
/* *
*
* Static Properties
*
* */
ColorAxis.defaultLegendLength = 200;
/**
* @private
*/
ColorAxis.keepProps = [
'legendItem'
];
return ColorAxis;
}(Axis_Axis));
ColorAxis_extend(ColorAxis.prototype, Color_ColorAxisLike);
/* *
*
* Registry
*
* */
// Properties to preserve after destroy, for Axis.update (#5881, #6025).
Array.prototype.push.apply(Axis_Axis.keepProps, ColorAxis.keepProps);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Color_ColorAxis = (ColorAxis);
/* *
*
* API Declarations
*
* */
/**
* Color axis types
*
* @typedef {"linear"|"logarithmic"} Highcharts.ColorAxisTypeValue
*/
''; // Detach doclet above
;// ./code/es5/es-modules/masters/modules/coloraxis.src.js
/**
* @license Highcharts JS v12.1.2 (2025-01-09)
* @module highcharts/modules/color-axis
* @requires highcharts
*
* ColorAxis module
*
* (c) 2012-2024 Pawel Potaczek
*
* License: www.highcharts.com/license
*/
var coloraxis_src_G = Core_Globals;
coloraxis_src_G.ColorAxis = coloraxis_src_G.ColorAxis || Color_ColorAxis;
coloraxis_src_G.ColorAxis.compose(coloraxis_src_G.Chart, coloraxis_src_G.Fx, coloraxis_src_G.Legend, coloraxis_src_G.Series);
/* harmony default export */ var coloraxis_src = ((/* unused pure expression or super */ null && (Highcharts)));
;// ./code/es5/es-modules/Maps/MapNavigationDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Constants
*
* */
var lang = {
zoomIn: 'Zoom in',
zoomOut: 'Zoom out'
};
/**
* The `mapNavigation` option handles buttons for navigation in addition to
* `mousewheel` and `doubleclick` handlers for map zooming.
*
* @product highmaps
* @optionparent mapNavigation
*/
var mapNavigation = {
/**
* General options for the map navigation buttons. Individual options
* can be given from the [mapNavigation.buttons](#mapNavigation.buttons)
* option set.
*
* @sample {highmaps} maps/mapnavigation/button-theme/
* Theming the navigation buttons
*/
buttonOptions: {
/**
* What box to align the buttons to. Possible values are `plotBox`
* and `spacingBox`.
*
* @type {Highcharts.ButtonRelativeToValue}
*/
alignTo: 'plotBox',
/**
* The alignment of the navigation buttons.
*
* @type {Highcharts.AlignValue}
*/
align: 'left',
/**
* The vertical alignment of the buttons. Individual alignment can
* be adjusted by each button's `y` offset.
*
* @type {Highcharts.VerticalAlignValue}
*/
verticalAlign: 'top',
/**
* The X offset of the buttons relative to its `align` setting.
*/
x: 0,
/**
* The width of the map navigation buttons.
*/
width: 18,
/**
* The pixel height of the map navigation buttons.
*/
height: 18,
/**
* Padding for the navigation buttons.
*
* @since 5.0.0
*/
padding: 5,
/**
* Text styles for the map navigation buttons.
*
* @type {Highcharts.CSSObject}
* @default {"fontSize": "1em", "fontWeight": "bold"}
*/
style: {
/** @ignore */
color: "#666666" /* Palette.neutralColor60 */,
/** @ignore */
fontSize: '1em',
/** @ignore */
fontWeight: 'bold'
},
/**
* A configuration object for the button theme. The object accepts
* SVG properties like `stroke-width`, `stroke` and `fill`. Tri-state
* button styles are supported by the `states.hover` and `states.select`
* objects.
*
* @sample {highmaps} maps/mapnavigation/button-theme/
* Themed navigation buttons
*
* @type {Highcharts.SVGAttributes}
* @default {"stroke-width": 1, "text-align": "center"}
*/
theme: {
/** @ignore */
fill: "#ffffff" /* Palette.backgroundColor */,
/** @ignore */
stroke: "#e6e6e6" /* Palette.neutralColor10 */,
/** @ignore */
'stroke-width': 1,
/** @ignore */
'text-align': 'center'
}
},
/**
* The individual buttons for the map navigation. This usually includes
* the zoom in and zoom out buttons. Properties for each button is
* inherited from
* [mapNavigation.buttonOptions](#mapNavigation.buttonOptions), while
* individual options can be overridden. But default, the `onclick`, `text`
* and `y` options are individual.
*/
buttons: {
/**
* Options for the zoom in button. Properties for the zoom in and zoom
* out buttons are inherited from
* [mapNavigation.buttonOptions](#mapNavigation.buttonOptions), while
* individual options can be overridden. By default, the `onclick`,
* `text` and `y` options are individual.
*
* @extends mapNavigation.buttonOptions
*/
zoomIn: {
// eslint-disable-next-line valid-jsdoc
/**
* Click handler for the button.
*
* @type {Function}
* @default function () { this.mapZoom(0.5); }
*/
onclick: function () {
this.mapZoom(0.5);
},
/**
* The text for the button. The tooltip (title) is a language option
* given by [lang.zoomIn](#lang.zoomIn).
*/
text: '+',
/**
* The position of the zoomIn button relative to the vertical
* alignment.
*/
y: 0
},
/**
* Options for the zoom out button. Properties for the zoom in and
* zoom out buttons are inherited from
* [mapNavigation.buttonOptions](#mapNavigation.buttonOptions), while
* individual options can be overridden. By default, the `onclick`,
* `text` and `y` options are individual.
*
* @extends mapNavigation.buttonOptions
*/
zoomOut: {
// eslint-disable-next-line valid-jsdoc
/**
* Click handler for the button.
*
* @type {Function}
* @default function () { this.mapZoom(2); }
*/
onclick: function () {
this.mapZoom(2);
},
/**
* The text for the button. The tooltip (title) is a language option
* given by [lang.zoomOut](#lang.zoomIn).
*/
text: '-',
/**
* The position of the zoomOut button relative to the vertical
* alignment.
*/
y: 28
}
},
/**
* Whether to enable navigation buttons. By default it inherits the
* [enabled](#mapNavigation.enabled) setting.
*
* @type {boolean}
* @apioption mapNavigation.enableButtons
*/
/**
* Whether to enable map navigation. The default is not to enable
* navigation, as many choropleth maps are simple and don't need it.
* Additionally, when touch zoom and mouse wheel zoom is enabled, it breaks
* the default behaviour of these interactions in the website, and the
* implementer should be aware of this.
*
* Individual interactions can be enabled separately, namely buttons,
* multitouch zoom, double click zoom, double click zoom to element and
* mouse wheel zoom.
*
* @type {boolean}
* @default false
* @apioption mapNavigation.enabled
*/
/**
* Enables zooming in on an area on double clicking in the map. By default
* it inherits the [enabled](#mapNavigation.enabled) setting.
*
* @type {boolean}
* @apioption mapNavigation.enableDoubleClickZoom
*/
/**
* Whether to zoom in on an area when that area is double clicked.
*
* @sample {highmaps} maps/mapnavigation/doubleclickzoomto/
* Enable double click zoom to
*
* @type {boolean}
* @default false
* @apioption mapNavigation.enableDoubleClickZoomTo
*/
/**
* Enables zooming by mouse wheel. By default it inherits the [enabled](
* #mapNavigation.enabled) setting.
*
* @type {boolean}
* @apioption mapNavigation.enableMouseWheelZoom
*/
/**
* Whether to enable multitouch zooming. Note that if the chart covers the
* viewport, this prevents the user from using multitouch and touchdrag on
* the web page, so you should make sure the user is not trapped inside the
* chart. By default it inherits the [enabled](#mapNavigation.enabled)
* setting.
*
* @type {boolean}
* @apioption mapNavigation.enableTouchZoom
*/
/**
* Sensitivity of mouse wheel or trackpad scrolling. 1 is no sensitivity,
* while with 2, one mouse wheel delta will zoom in 50%.
*
* @since 4.2.4
*/
mouseWheelSensitivity: 1.1
// Enabled: false,
// enableButtons: null, // inherit from enabled
// enableTouchZoom: null, // inherit from enabled
// enableDoubleClickZoom: null, // inherit from enabled
// enableDoubleClickZoomTo: false
// enableMouseWheelZoom: null, // inherit from enabled
};
/* *
*
* Default Export
*
* */
var mapNavigationDefaults = {
lang: lang,
mapNavigation: mapNavigation
};
/* harmony default export */ var MapNavigationDefaults = (mapNavigationDefaults);
;// ./code/es5/es-modules/Maps/MapPointer.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapPointer_defined = Core_Utilities.defined, MapPointer_extend = Core_Utilities.extend, MapPointer_pick = Core_Utilities.pick, MapPointer_wrap = Core_Utilities.wrap;
/* *
*
* Composition
*
* */
var MapPointer;
(function (MapPointer) {
/* *
*
* Variables
*
* */
var totalWheelDelta = 0;
var totalWheelDeltaTimer;
/* *
*
* Functions
*
* */
/**
* Extend the Pointer.
* @private
*/
function compose(PointerClass) {
var pointerProto = PointerClass.prototype;
if (!pointerProto.onContainerDblClick) {
MapPointer_extend(pointerProto, {
onContainerDblClick: onContainerDblClick,
onContainerMouseWheel: onContainerMouseWheel
});
MapPointer_wrap(pointerProto, 'normalize', wrapNormalize);
MapPointer_wrap(pointerProto, 'zoomOption', wrapZoomOption);
}
}
MapPointer.compose = compose;
/**
* The event handler for the doubleclick event.
* @private
*/
function onContainerDblClick(e) {
var chart = this.chart;
e = this.normalize(e);
if (chart.options.mapNavigation.enableDoubleClickZoomTo) {
if (chart.pointer.inClass(e.target, 'highcharts-tracker') &&
chart.hoverPoint) {
chart.hoverPoint.zoomTo();
}
}
else if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
chart.mapZoom(0.5, void 0, void 0, e.chartX, e.chartY);
}
}
/**
* The event handler for the mouse scroll event.
* @private
*/
function onContainerMouseWheel(e) {
var chart = this.chart;
e = this.normalize(e);
// Firefox uses e.deltaY or e.detail, WebKit and IE uses wheelDelta
// try wheelDelta first #15656
var delta = (MapPointer_defined(e.wheelDelta) && -e.wheelDelta / 120) ||
e.deltaY || e.detail;
// Wheel zooming on trackpads have different behaviours in Firefox vs
// WebKit. In Firefox the delta increments in steps by 1, so it is not
// distinguishable from true mouse wheel. Therefore we use this timer
// to avoid trackpad zooming going too fast and out of control. In
// WebKit however, the delta is < 1, so we simply disable animation in
// the `chart.mapZoom` call below.
if (Math.abs(delta) >= 1) {
totalWheelDelta += Math.abs(delta);
if (totalWheelDeltaTimer) {
clearTimeout(totalWheelDeltaTimer);
}
totalWheelDeltaTimer = setTimeout(function () {
totalWheelDelta = 0;
}, 50);
}
if (totalWheelDelta < 10 && chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop) && chart.mapView) {
chart.mapView.zoomBy((chart.options.mapNavigation.mouseWheelSensitivity -
1) * -delta, void 0, [e.chartX, e.chartY],
// Delta less than 1 indicates stepless/trackpad zooming, avoid
// animation delaying the zoom
Math.abs(delta) < 1 ? false : void 0);
}
}
/**
* Add lon and lat information to pointer events
* @private
*/
function wrapNormalize(proceed, e, chartPosition) {
var chart = this.chart;
e = proceed.call(this, e, chartPosition);
if (chart && chart.mapView) {
var lonLat = chart.mapView.pixelsToLonLat({
x: e.chartX - chart.plotLeft,
y: e.chartY - chart.plotTop
});
if (lonLat) {
MapPointer_extend(e, lonLat);
}
}
return e;
}
/**
* The pinchType is inferred from mapNavigation options.
* @private
*/
function wrapZoomOption(proceed) {
var mapNavigation = this.chart.options.mapNavigation;
// Pinch status
if (mapNavigation &&
MapPointer_pick(mapNavigation.enableTouchZoom, mapNavigation.enabled)) {
this.chart.zooming.pinchType = 'xy';
}
proceed.apply(this, [].slice.call(arguments, 1));
}
})(MapPointer || (MapPointer = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Maps_MapPointer = (MapPointer);
;// ./code/es5/es-modules/Maps/MapSymbols.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Variables
*
* */
var symbols;
/* *
*
* Functions
*
* */
/**
*
*/
function bottomButton(x, y, w, h, options) {
if (options) {
var r = (options === null || options === void 0 ? void 0 : options.r) || 0;
options.brBoxY = y - r;
options.brBoxHeight = h + r;
}
return symbols.roundedRect(x, y, w, h, options);
}
/**
*
*/
function MapSymbols_compose(SVGRendererClass) {
symbols = SVGRendererClass.prototype.symbols;
symbols.bottombutton = bottomButton;
symbols.topbutton = topButton;
}
/**
*
*/
function topButton(x, y, w, h, options) {
if (options) {
var r = (options === null || options === void 0 ? void 0 : options.r) || 0;
options.brBoxHeight = h + r;
}
return symbols.roundedRect(x, y, w, h, options);
}
/* *
*
* Default Export
*
* */
var MapSymbols = {
compose: MapSymbols_compose
};
/* harmony default export */ var Maps_MapSymbols = (MapSymbols);
;// ./code/es5/es-modules/Maps/MapNavigation.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapNavigation_setOptions = Defaults.setOptions;
var MapNavigation_composed = Core_Globals.composed;
var MapNavigation_addEvent = Core_Utilities.addEvent, MapNavigation_extend = Core_Utilities.extend, MapNavigation_merge = Core_Utilities.merge, MapNavigation_objectEach = Core_Utilities.objectEach, MapNavigation_pick = Core_Utilities.pick, MapNavigation_pushUnique = Core_Utilities.pushUnique;
/* *
*
* Functions
*
* */
/**
* @private
*/
function stopEvent(e) {
var _a,
_b;
if (e) {
(_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
(_b = e.stopPropagation) === null || _b === void 0 ? void 0 : _b.call(e);
e.cancelBubble = true;
}
}
/* *
*
* Class
*
* */
/**
* The MapNavigation handles buttons for navigation in addition to mousewheel
* and doubleclick handlers for chart zooming.
*
* @private
* @class
* @name MapNavigation
*
* @param {Highcharts.Chart} chart
* The Chart instance.
*/
var MapNavigation = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function MapNavigation(chart) {
this.chart = chart;
this.navButtons = [];
}
/* *
*
* Static Functions
*
* */
MapNavigation.compose = function (MapChartClass, PointerClass, SVGRendererClass) {
Maps_MapPointer.compose(PointerClass);
Maps_MapSymbols.compose(SVGRendererClass);
if (MapNavigation_pushUnique(MapNavigation_composed, 'Map.Navigation')) {
// Extend the Chart.render method to add zooming and panning
MapNavigation_addEvent(MapChartClass, 'beforeRender', function () {
// Render the plus and minus buttons. Doing this before the
// shapes makes getBBox much quicker, at least in Chrome.
this.mapNavigation = new MapNavigation(this);
this.mapNavigation.update();
});
MapNavigation_setOptions(MapNavigationDefaults);
}
};
/* *
*
* Functions
*
* */
/**
* Update the map navigation with new options. Calling this is the same as
* calling `chart.update({ mapNavigation: {} })`.
*
* @function MapNavigation#update
*
* @param {Partial<Highcharts.MapNavigationOptions>} [options]
* New options for the map navigation.
*/
MapNavigation.prototype.update = function (options) {
var _a;
var mapNav = this,
chart = mapNav.chart,
navButtons = mapNav.navButtons,
outerHandler = function (e) {
this.handler.call(chart,
e);
stopEvent(e); // Stop default click event (#4444)
};
var navOptions = chart.options.mapNavigation;
// Merge in new options in case of update, and register back to chart
// options.
if (options) {
navOptions = chart.options.mapNavigation =
MapNavigation_merge(chart.options.mapNavigation, options);
}
// Destroy buttons in case of dynamic update
while (navButtons.length) {
(_a = navButtons.pop()) === null || _a === void 0 ? void 0 : _a.destroy();
}
if (!chart.renderer.forExport &&
MapNavigation_pick(navOptions.enableButtons, navOptions.enabled)) {
if (!mapNav.navButtonsGroup) {
mapNav.navButtonsGroup = chart.renderer.g()
.attr({
zIndex: 7 // #4955, #8392, #20476
})
.add();
}
MapNavigation_objectEach(navOptions.buttons, function (buttonOptions, n) {
var _a;
buttonOptions = MapNavigation_merge(navOptions.buttonOptions, buttonOptions);
var attr = {
padding: buttonOptions.padding
};
// Presentational
if (!chart.styledMode && buttonOptions.theme) {
MapNavigation_extend(attr, buttonOptions.theme);
attr.style = MapNavigation_merge(buttonOptions.theme.style, buttonOptions.style // #3203
);
}
var text = buttonOptions.text,
_b = buttonOptions.width,
width = _b === void 0 ? 0 : _b,
_c = buttonOptions.height,
height = _c === void 0 ? 0 : _c,
_d = buttonOptions.padding,
padding = _d === void 0 ? 0 : _d;
var button = chart.renderer
.button(
// Display the text from options only if it is not plus
// or minus
(text !== '+' && text !== '-' && text) || '', 0, 0, outerHandler, attr, void 0, void 0, void 0, n === 'zoomIn' ? 'topbutton' : 'bottombutton')
.addClass('highcharts-map-navigation highcharts-' + {
zoomIn: 'zoom-in',
zoomOut: 'zoom-out'
}[n])
.attr({
width: width,
height: height,
title: chart.options.lang[n],
zIndex: 5
})
.add(mapNav.navButtonsGroup);
// Add SVG paths for the default symbols, because the text
// representation of + and - is not sharp and position is not
// easy to control.
if (text === '+' || text === '-') {
// Mysterious +1 to achieve centering
var w = width + 1,
d = [
['M',
padding + 3,
padding + height / 2],
['L',
padding + w - 3,
padding + height / 2]
];
if (text === '+') {
d.push(['M', padding + w / 2, padding + 3], ['L', padding + w / 2, padding + height - 3]);
}
chart.renderer
.path(d)
.addClass('highcharts-button-symbol')
.attr(chart.styledMode ? {} : {
stroke: (_a = buttonOptions.style) === null || _a === void 0 ? void 0 : _a.color,
'stroke-width': 3,
'stroke-linecap': 'round'
})
.add(button);
}
button.handler = buttonOptions.onclick;
// Stop double click event (#4444)
MapNavigation_addEvent(button.element, 'dblclick', stopEvent);
navButtons.push(button);
MapNavigation_extend(buttonOptions, {
width: button.width,
height: 2 * (button.height || 0)
});
if (!chart.hasLoaded) {
// Align it after the plotBox is known (#12776)
var unbind_1 = MapNavigation_addEvent(chart, 'load',
function () {
// #15406: Make sure button hasnt been destroyed
if (button.element) {
button.align(buttonOptions,
false,
buttonOptions.alignTo);
}
unbind_1();
});
}
else {
button.align(buttonOptions, false, buttonOptions.alignTo);
}
});
// Borrowed from overlapping-datalabels. Consider a shared module.
var isIntersectRect_1 = function (box1,
box2) { return !(box2.x >= box1.x + box1.width ||
box2.x + box2.width <= box1.x ||
box2.y >= box1.y + box1.height ||
box2.y + box2.height <= box1.y); };
// Check the mapNavigation buttons collision with exporting button
// and translate the mapNavigation button if they overlap.
var adjustMapNavBtn = function () {
var _a;
var expBtnBBox = (_a = chart.exportingGroup) === null || _a === void 0 ? void 0 : _a.getBBox();
if (expBtnBBox) {
var navBtnsBBox = mapNav.navButtonsGroup.getBBox();
// If buttons overlap
if (isIntersectRect_1(expBtnBBox, navBtnsBBox)) {
// Adjust the mapNav buttons' position by translating
// them above or below the exporting button
var aboveExpBtn = -navBtnsBBox.y -
navBtnsBBox.height + expBtnBBox.y - 5,
belowExpBtn = expBtnBBox.y + expBtnBBox.height -
navBtnsBBox.y + 5,
mapNavVerticalAlign = (navOptions.buttonOptions &&
navOptions.buttonOptions.verticalAlign);
// If bottom aligned and adjusting the mapNav button
// would translate it out of the plotBox, translate it
// up instead of down
mapNav.navButtonsGroup.attr({
translateY: mapNavVerticalAlign === 'bottom' ?
aboveExpBtn :
belowExpBtn
});
}
}
};
if (!chart.hasLoaded) {
// Align it after the plotBox is known (#12776) and after the
// hamburger button's position is known so they don't overlap
// (#15782)
MapNavigation_addEvent(chart, 'render', adjustMapNavBtn);
}
}
this.updateEvents(navOptions);
};
/**
* Update events, called internally from the update function. Add new event
* handlers, or unbinds events if disabled.
*
* @function MapNavigation#updateEvents
*
* @param {Partial<Highcharts.MapNavigationOptions>} options
* Options for map navigation.
*/
MapNavigation.prototype.updateEvents = function (options) {
var chart = this.chart;
// Add the double click event
if (MapNavigation_pick(options.enableDoubleClickZoom, options.enabled) ||
options.enableDoubleClickZoomTo) {
this.unbindDblClick = this.unbindDblClick || MapNavigation_addEvent(chart.container, 'dblclick', function (e) {
chart.pointer.onContainerDblClick(e);
});
}
else if (this.unbindDblClick) {
// Unbind and set unbinder to undefined
this.unbindDblClick = this.unbindDblClick();
}
// Add the mousewheel event
if (MapNavigation_pick(options.enableMouseWheelZoom, options.enabled)) {
this.unbindMouseWheel = this.unbindMouseWheel || MapNavigation_addEvent(chart.container, 'wheel', function (e) {
var _a,
_b;
// Prevent scrolling when the pointer is over the element
// with that class, for example anotation popup #12100.
if (!chart.pointer.inClass(e.target, 'highcharts-no-mousewheel')) {
var initialZoom = (_a = chart.mapView) === null || _a === void 0 ? void 0 : _a.zoom;
chart.pointer.onContainerMouseWheel(e);
// If the zoom level changed, prevent the default action
// which is to scroll the page
if (initialZoom !== ((_b = chart.mapView) === null || _b === void 0 ? void 0 : _b.zoom)) {
stopEvent(e);
}
}
return false;
});
}
else if (this.unbindMouseWheel) {
// Unbind and set unbinder to undefined
this.unbindMouseWheel = this.unbindMouseWheel();
}
};
return MapNavigation;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Maps_MapNavigation = (MapNavigation);
;// ./code/es5/es-modules/Series/ColorMapComposition.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var columnProto = Series_SeriesRegistry.seriesTypes.column.prototype;
var ColorMapComposition_addEvent = Core_Utilities.addEvent, ColorMapComposition_defined = Core_Utilities.defined;
/* *
*
* Composition
*
* */
var ColorMapComposition;
(function (ColorMapComposition) {
/* *
*
* Constants
*
* */
ColorMapComposition.pointMembers = {
dataLabelOnNull: true,
moveToTopOnHover: true,
isValid: pointIsValid
};
ColorMapComposition.seriesMembers = {
colorKey: 'value',
axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
parallelArrays: ['x', 'y', 'value'],
pointArrayMap: ['value'],
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
colorAttribs: seriesColorAttribs,
pointAttribs: columnProto.pointAttribs
};
/* *
*
* Functions
*
* */
/**
* @private
*/
function compose(SeriesClass) {
var PointClass = SeriesClass.prototype.pointClass;
ColorMapComposition_addEvent(PointClass, 'afterSetState', onPointAfterSetState);
return SeriesClass;
}
ColorMapComposition.compose = compose;
/**
* Move points to the top of the z-index order when hovered.
* @private
*/
function onPointAfterSetState(e) {
var point = this,
series = point.series,
renderer = series.chart.renderer;
if (point.moveToTopOnHover && point.graphic) {
if (!series.stateMarkerGraphic) {
// Create a `use` element and add it to the end of the group,
// which would make it appear on top of the other elements. This
// deals with z-index without reordering DOM elements (#13049).
series.stateMarkerGraphic = new SVG_SVGElement(renderer, 'use')
.css({
pointerEvents: 'none'
})
.add(point.graphic.parentGroup);
}
if ((e === null || e === void 0 ? void 0 : e.state) === 'hover') {
// Give the graphic DOM element the same id as the Point
// instance
point.graphic.attr({
id: this.id
});
series.stateMarkerGraphic.attr({
href: "" + renderer.url + "#".concat(this.id),
visibility: 'visible'
});
}
else {
series.stateMarkerGraphic.attr({
href: ''
});
}
}
}
/**
* Color points have a value option that determines whether or not it is
* a null point
* @private
*/
function pointIsValid() {
return (this.value !== null &&
this.value !== Infinity &&
this.value !== -Infinity &&
// Undefined is allowed, but NaN is not (#17279)
(this.value === void 0 || !isNaN(this.value)));
}
/**
* Get the color attributes to apply on the graphic
* @private
* @function Highcharts.colorMapSeriesMixin.colorAttribs
* @param {Highcharts.Point} point
* @return {Highcharts.SVGAttributes}
* The SVG attributes
*/
function seriesColorAttribs(point) {
var ret = {};
if (ColorMapComposition_defined(point.color) &&
(!point.state || point.state === 'normal') // #15746
) {
ret[this.colorProp || 'fill'] = point.color;
}
return ret;
}
})(ColorMapComposition || (ColorMapComposition = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Series_ColorMapComposition = (ColorMapComposition);
;// ./code/es5/es-modules/Core/Chart/MapChart.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapChart_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapChart_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var MapChart_getOptions = Defaults.getOptions;
var MapChart_isNumber = Core_Utilities.isNumber, MapChart_merge = Core_Utilities.merge, MapChart_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
/**
* Map-optimized chart. Use {@link Highcharts.Chart|Chart} for common charts.
*
* @requires modules/map
*
* @class
* @name Highcharts.MapChart
* @extends Highcharts.Chart
*/
var MapChart = /** @class */ (function (_super) {
MapChart_extends(MapChart, _super);
function MapChart() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/**
* Initializes the chart. The constructor's arguments are passed on
* directly.
*
* @function Highcharts.MapChart#init
*
* @param {Highcharts.Options} userOptions
* Custom options.
*
* @param {Function} [callback]
* Function to run when the chart has loaded and all external
* images are loaded.
*
*
* @emits Highcharts.MapChart#event:init
* @emits Highcharts.MapChart#event:afterInit
*/
MapChart.prototype.init = function (userOptions, callback) {
var defaultCreditsOptions = MapChart_getOptions().credits;
var options = MapChart_merge({
chart: {
panning: {
enabled: true,
type: 'xy'
},
type: 'map'
},
credits: {
mapText: MapChart_pick(defaultCreditsOptions.mapText, ' \u00a9 <a href="{geojson.copyrightUrl}">' +
'{geojson.copyrightShort}</a>'),
mapTextFull: MapChart_pick(defaultCreditsOptions.mapTextFull, '{geojson.copyright}')
},
mapView: {}, // Required to enable Chart.mapView
tooltip: {
followTouchMove: false
}
},
userOptions // User's options
);
_super.prototype.init.call(this, options, callback);
};
/**
* Highcharts Maps only. Zoom in or out of the map. See also
* {@link Point#zoomTo}. See {@link Chart#fromLatLonToPoint} for how to get
* the `centerX` and `centerY` parameters for a geographic location.
*
* Deprecated as of v9.3 in favor of [MapView.zoomBy](https://api.highcharts.com/class-reference/Highcharts.MapView#zoomBy).
*
* @deprecated
* @function Highcharts.Chart#mapZoom
*
* @param {number} [howMuch]
* How much to zoom the map. Values less than 1 zooms in. 0.5 zooms
* in to half the current view. 2 zooms to twice the current view. If
* omitted, the zoom is reset.
*
* @param {number} [xProjected]
* The projected x position to keep stationary when zooming, if
* available space.
*
* @param {number} [yProjected]
* The projected y position to keep stationary when zooming, if
* available space.
*
* @param {number} [chartX]
* Keep this chart position stationary if possible. This is used for
* example in `mousewheel` events, where the area under the mouse
* should be fixed as we zoom in.
*
* @param {number} [chartY]
* Keep this chart position stationary if possible.
*/
MapChart.prototype.mapZoom = function (howMuch, xProjected, yProjected, chartX, chartY) {
if (this.mapView) {
if (MapChart_isNumber(howMuch)) {
// Compliance, mapView.zoomBy uses different values
howMuch = Math.log(howMuch) / Math.log(0.5);
}
this.mapView.zoomBy(howMuch, MapChart_isNumber(xProjected) && MapChart_isNumber(yProjected) ?
this.mapView.projection.inverse([xProjected, yProjected]) :
void 0, MapChart_isNumber(chartX) && MapChart_isNumber(chartY) ?
[chartX, chartY] :
void 0);
}
};
MapChart.prototype.update = function (options) {
var _a;
// Calculate and set the recommended map view if map option is set
if (options.chart && 'map' in options.chart) {
(_a = this.mapView) === null || _a === void 0 ? void 0 : _a.recommendMapView(this, MapChart_spreadArray([
options.chart.map
], (this.options.series || []).map(function (s) { return s.mapData; }), true), true);
}
_super.prototype.update.apply(this, arguments);
};
return MapChart;
}(Chart_Chart));
/* *
*
* Class Namespace
*
* */
(function (MapChart) {
/* *
*
* Constants
*
* */
/**
* Contains all loaded map data for Highmaps.
*
* @requires modules/map
*
* @name Highcharts.maps
* @type {Record<string,*>}
*/
MapChart.maps = {};
/* *
*
* Functions
*
* */
/**
* The factory function for creating new map charts. Creates a new {@link
* Highcharts.MapChart|MapChart} object with different default options than
* the basic Chart.
*
* @requires modules/map
*
* @function Highcharts.mapChart
*
* @param {string|Highcharts.HTMLDOMElement} [renderTo]
* The DOM element to render to, or its id.
*
* @param {Highcharts.Options} options
* The chart options structure as described in the
* [options reference](https://api.highcharts.com/highstock).
*
* @param {Highcharts.ChartCallbackFunction} [callback]
* A function to execute when the chart object is finished
* rendering and all external image files (`chart.backgroundImage`,
* `chart.plotBackgroundImage` etc) are loaded. Defining a
* [chart.events.load](https://api.highcharts.com/highstock/chart.events.load)
* handler is equivalent.
*
* @return {Highcharts.MapChart}
* The chart object.
*/
function mapChart(a, b, c) {
return new MapChart(a, b, c);
}
MapChart.mapChart = mapChart;
/**
* Utility for reading SVG paths directly.
*
* @requires modules/map
*
* @function Highcharts.splitPath
*
* @param {string|Array<(string|number)>} path
* Path to split.
*
* @return {Highcharts.SVGPathArray}
* Splitted SVG path
*/
function splitPath(path) {
var arr;
if (typeof path === 'string') {
path = path
// Move letters apart
.replace(/([A-Z])/gi, ' $1 ')
// Trim
.replace(/^\s*/, '').replace(/\s*$/, '');
// Split on spaces and commas. The semicolon is bogus, designed to
// circumvent string replacement in the pre-v7 assembler that built
// specific styled mode files.
var split = path.split(/[ ,;]+/);
arr = split.map(function (item) {
if (!/[A-Z]/i.test(item)) {
return parseFloat(item);
}
return item;
});
}
else {
arr = path;
}
return SVG_SVGRenderer.prototype.pathToSegments(arr);
}
MapChart.splitPath = splitPath;
})(MapChart || (MapChart = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Chart_MapChart = (MapChart);
;// ./code/es5/es-modules/Maps/MapUtilities.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
// Compute bounds from a path element
var boundsFromPath = function (path) {
var x2 = -Number.MAX_VALUE,
x1 = Number.MAX_VALUE,
y2 = -Number.MAX_VALUE,
y1 = Number.MAX_VALUE,
validBounds;
path.forEach(function (seg) {
var x = seg[seg.length - 2],
y = seg[seg.length - 1];
if (typeof x === 'number' &&
typeof y === 'number') {
x1 = Math.min(x1, x);
x2 = Math.max(x2, x);
y1 = Math.min(y1, y);
y2 = Math.max(y2, y);
validBounds = true;
}
});
if (validBounds) {
return { x1: x1, y1: y1, x2: x2, y2: y2 };
}
};
/* *
*
* Default Export
*
* */
var MapUtilities = {
boundsFromPath: boundsFromPath
};
/* harmony default export */ var Maps_MapUtilities = (MapUtilities);
;// ./code/es5/es-modules/Series/Map/MapPoint.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapPoint_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapPoint_assign = (undefined && undefined.__assign) || function () {
MapPoint_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return MapPoint_assign.apply(this, arguments);
};
var MapPoint_boundsFromPath = Maps_MapUtilities.boundsFromPath;
var ScatterPoint = Series_SeriesRegistry.seriesTypes.scatter.prototype.pointClass;
var MapPoint_extend = Core_Utilities.extend, MapPoint_isNumber = Core_Utilities.isNumber, MapPoint_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
var MapPoint = /** @class */ (function (_super) {
MapPoint_extends(MapPoint, _super);
function MapPoint() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Static Functions
*
* */
/**
* Get the projected path based on the geometry. May also be called on
* mapData options (not point instances), hence static.
* @private
*/
MapPoint.getProjectedPath = function (point, projection) {
if (!point.projectedPath) {
if (projection && point.geometry) {
// Always true when given GeoJSON coordinates
projection.hasCoordinates = true;
point.projectedPath = projection.path(point.geometry);
// SVG path given directly in point options
}
else {
point.projectedPath = point.path;
}
}
return point.projectedPath || [];
};
/* *
*
* Functions
*
* */
/**
* Extend the Point object to split paths.
* @private
*/
MapPoint.prototype.applyOptions = function (options, x) {
var _a;
var series = this.series,
point = _super.prototype.applyOptions.call(this,
options,
x),
joinBy = series.joinBy;
if (series.mapData && series.mapMap) {
var joinKey = joinBy[1],
mapKey = _super.prototype.getNestedProperty.call(this,
joinKey),
mapPoint = typeof mapKey !== 'undefined' &&
series.mapMap[mapKey];
if (mapPoint) {
// Copy over properties; #20231 prioritize point.name
MapPoint_extend(point, MapPoint_assign(MapPoint_assign({}, mapPoint), { name: (_a = point.name) !== null && _a !== void 0 ? _a : mapPoint.name }));
}
else if (series.pointArrayMap.indexOf('value') !== -1) {
point.value = point.value || null;
}
}
return point;
};
/**
* Get the bounds in terms of projected units
* @private
*/
MapPoint.prototype.getProjectedBounds = function (projection) {
var path = MapPoint.getProjectedPath(this,
projection),
bounds = MapPoint_boundsFromPath(path),
properties = this.properties,
mapView = this.series.chart.mapView;
if (bounds) {
// Cache point bounding box for use to position data labels, bubbles
// etc
var propMiddleLon = properties && properties['hc-middle-lon'], propMiddleLat = properties && properties['hc-middle-lat'];
if (mapView && MapPoint_isNumber(propMiddleLon) && MapPoint_isNumber(propMiddleLat)) {
var projectedPoint = projection.forward([propMiddleLon,
propMiddleLat]);
bounds.midX = projectedPoint[0];
bounds.midY = projectedPoint[1];
}
else {
var propMiddleX = properties && properties['hc-middle-x'], propMiddleY = properties && properties['hc-middle-y'];
bounds.midX = (bounds.x1 + (bounds.x2 - bounds.x1) * MapPoint_pick(this.middleX, MapPoint_isNumber(propMiddleX) ? propMiddleX : 0.5));
var middleYFraction = MapPoint_pick(this.middleY,
MapPoint_isNumber(propMiddleY) ? propMiddleY : 0.5);
// No geographic geometry, only path given => flip
if (!this.geometry) {
middleYFraction = 1 - middleYFraction;
}
bounds.midY =
bounds.y2 - (bounds.y2 - bounds.y1) * middleYFraction;
}
return bounds;
}
};
/**
* Stop the fade-out
* @private
*/
MapPoint.prototype.onMouseOver = function (e) {
Core_Utilities.clearTimeout(this.colorInterval);
if (
// Valid...
(!this.isNull && this.visible) ||
// ... or interact anyway
this.series.options.nullInteraction) {
_super.prototype.onMouseOver.call(this, e);
}
else {
// #3401 Tooltip doesn't hide when hovering over null points
this.series.onMouseOut();
}
};
MapPoint.prototype.setVisible = function (vis) {
var method = vis ? 'show' : 'hide';
this.visible = this.options.visible = !!vis;
// Show and hide associated elements
if (this.dataLabel) {
this.dataLabel[method]();
}
// For invisible map points, render them as null points rather than
// fully removing them. Makes more sense for color axes with data
// classes.
if (this.graphic) {
this.graphic.attr(this.series.pointAttribs(this));
}
};
/**
* Highmaps only. Zoom in on the point using the global animation.
*
* @sample maps/members/point-zoomto/
* Zoom to points from buttons
*
* @requires modules/map
*
* @function Highcharts.Point#zoomTo
*/
MapPoint.prototype.zoomTo = function (animOptions) {
var point = this,
chart = point.series.chart,
mapView = chart.mapView;
var bounds = point.bounds;
if (mapView && bounds) {
var inset = MapPoint_isNumber(point.insetIndex) &&
mapView.insets[point.insetIndex];
if (inset) {
// If in an inset, translate the bounds to pixels ...
var px1 = inset.projectedUnitsToPixels({
x: bounds.x1,
y: bounds.y1
}),
px2 = inset.projectedUnitsToPixels({
x: bounds.x2,
y: bounds.y2
}),
// ... then back to projected units in the main mapView
proj1 = mapView.pixelsToProjectedUnits({
x: px1.x,
y: px1.y
}),
proj2 = mapView.pixelsToProjectedUnits({
x: px2.x,
y: px2.y
});
bounds = {
x1: proj1.x,
y1: proj1.y,
x2: proj2.x,
y2: proj2.y
};
}
mapView.fitToBounds(bounds, void 0, false);
point.series.isDirty = true;
chart.redraw(animOptions);
}
};
return MapPoint;
}(ScatterPoint));
MapPoint_extend(MapPoint.prototype, {
dataLabelOnNull: Series_ColorMapComposition.pointMembers.dataLabelOnNull,
moveToTopOnHover: Series_ColorMapComposition.pointMembers.moveToTopOnHover,
isValid: Series_ColorMapComposition.pointMembers.isValid
});
/* *
*
* Default Export
*
* */
/* harmony default export */ var Map_MapPoint = (MapPoint);
;// ./code/es5/es-modules/Series/Map/MapSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapSeriesDefaults_isNumber = Core_Utilities.isNumber;
/* *
*
* API Options
*
* */
/**
* The map series is used for basic choropleth maps, where each map area has
* a color based on its value.
*
* @sample maps/demo/all-maps/
* Choropleth map
*
* @extends plotOptions.scatter
* @excluding boostBlending, boostThreshold, dragDrop, cluster, marker
* @product highmaps
* @optionparent plotOptions.map
*
* @private
*/
var MapSeriesDefaults = {
/**
* Whether the MapView takes this series into account when computing the
* default zoom and center of the map.
*
* @sample maps/series/affectsmapview/
* US map with world map backdrop
*
* @since 10.0.0
*
* @private
*/
affectsMapView: true,
animation: false, // Makes the complex shapes slow
dataLabels: {
crop: false,
formatter: function () {
var numberFormatter = this.series.chart.numberFormatter;
var value = this.point.value;
return MapSeriesDefaults_isNumber(value) ?
numberFormatter(value, -1) :
(this.point.name || ''); // #20231
},
inside: true, // For the color
overflow: false,
padding: 0,
verticalAlign: 'middle'
},
/**
* The SVG value used for the `stroke-linecap` and `stroke-linejoin` of
* the map borders. Round means that borders are rounded in the ends and
* bends.
*
* @sample maps/demo/mappoint-mapmarker/
* Backdrop coastline with round linecap
*
* @type {Highcharts.SeriesLinecapValue}
* @since 10.3.3
*/
linecap: 'round',
/**
* @ignore-option
*
* @private
*/
marker: null,
/**
* The color to apply to null points.
*
* In styled mode, the null point fill is set in the
* `.highcharts-null-point` class.
*
* @sample maps/demo/all-areas-as-null/
* Null color
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*
* @private
*/
nullColor: "#f7f7f7" /* Palette.neutralColor3 */,
/**
* Whether to allow pointer interaction like tooltips and mouse events
* on null points.
*
* @type {boolean}
* @since 4.2.7
* @apioption plotOptions.map.nullInteraction
*
* @private
*/
stickyTracking: false,
tooltip: {
followPointer: true,
pointFormat: '{point.name}: {point.value}<br/>'
},
/**
* @ignore-option
*
* @private
*/
turboThreshold: 0,
/**
* Whether all areas of the map defined in `mapData` should be rendered.
* If `true`, areas which don't correspond to a data point, are rendered
* as `null` points. If `false`, those areas are skipped.
*
* @sample maps/plotoptions/series-allareas-false/
* All areas set to false
*
* @type {boolean}
* @default true
* @product highmaps
* @apioption plotOptions.series.allAreas
*
* @private
*/
allAreas: true,
/**
* The border color of the map areas.
*
* In styled mode, the border stroke is given in the `.highcharts-point`
* class.
*
* @sample {highmaps} maps/plotoptions/series-border/
* Borders demo
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default #cccccc
* @product highmaps
* @apioption plotOptions.series.borderColor
*
* @private
*/
borderColor: "#e6e6e6" /* Palette.neutralColor10 */,
/**
* The border width of each map area.
*
* In styled mode, the border stroke width is given in the
* `.highcharts-point` class.
*
* @sample maps/plotoptions/series-border/
* Borders demo
*
* @type {number}
* @default 1
* @product highmaps
* @apioption plotOptions.series.borderWidth
*
* @private
*/
borderWidth: 1,
/**
* @type {string}
* @default value
* @apioption plotOptions.map.colorKey
*/
/**
* What property to join the `mapData` to the value data. For example,
* if joinBy is "code", the mapData items with a specific code is merged
* into the data with the same code. For maps loaded from GeoJSON, the
* keys may be held in each point's `properties` object.
*
* The joinBy option can also be an array of two values, where the first
* points to a key in the `mapData`, and the second points to another
* key in the `data`.
*
* When joinBy is `null`, the map items are joined by their position in
* the array, which performs much better in maps with many data points.
* This is the recommended option if you are printing more than a
* thousand data points and have a backend that can preprocess the data
* into a parallel array of the mapData.
*
* @sample maps/plotoptions/series-border/
* Joined by "code"
* @sample maps/demo/geojson/
* GeoJSON joined by an array
* @sample maps/series/joinby-null/
* Simple data joined by null
*
* @type {string|Array<string>}
* @default hc-key
* @product highmaps
* @apioption plotOptions.series.joinBy
*
* @private
*/
joinBy: 'hc-key',
/**
* Define the z index of the series.
*
* @type {number}
* @product highmaps
* @apioption plotOptions.series.zIndex
*/
/**
* @apioption plotOptions.series.states
*
* @private
*/
states: {
/**
* @apioption plotOptions.series.states.hover
*/
hover: {
/** @ignore-option */
halo: void 0,
/**
* The color of the shape in this state.
*
* @sample maps/plotoptions/series-states-hover/
* Hover options
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highmaps
* @apioption plotOptions.series.states.hover.color
*/
/**
* The border color of the point in this state.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highmaps
* @apioption plotOptions.series.states.hover.borderColor
*/
borderColor: "#666666" /* Palette.neutralColor60 */,
/**
* The border width of the point in this state
*
* @type {number}
* @product highmaps
* @apioption plotOptions.series.states.hover.borderWidth
*/
borderWidth: 2
/**
* The relative brightness of the point when hovered, relative
* to the normal point color.
*
* @type {number}
* @product highmaps
* @default 0
* @apioption plotOptions.series.states.hover.brightness
*/
},
/**
* @apioption plotOptions.series.states.normal
*/
normal: {
/**
* @productdesc {highmaps}
* The animation adds some latency in order to reduce the effect
* of flickering when hovering in and out of for example an
* uneven coastline.
*
* @sample {highmaps} maps/plotoptions/series-states-animation-false/
* No animation of fill color
*
* @apioption plotOptions.series.states.normal.animation
*/
animation: true
},
/**
* @apioption plotOptions.series.states.select
*/
select: {
/**
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default ${palette.neutralColor20}
* @product highmaps
* @apioption plotOptions.series.states.select.color
*/
color: "#cccccc" /* Palette.neutralColor20 */
}
},
legendSymbol: 'rectangle'
};
/**
* An array of objects containing a `geometry` or `path` definition and
* optionally additional properties to join in the `data` as per the `joinBy`
* option. GeoJSON and TopoJSON structures can also be passed directly into
* `mapData`.
*
* @sample maps/demo/category-map/
* Map data and joinBy
* @sample maps/series/mapdata-multiple/
* Multiple map sources
*
* @type {Array<Highcharts.SeriesMapDataOptions>|Highcharts.GeoJSON|Highcharts.TopoJSON}
* @product highmaps
* @apioption series.mapData
*/
/**
* A `map` series. If the [type](#series.map.type) option is not specified, it
* is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.map
* @excluding dataParser, dataURL, dragDrop, marker
* @product highmaps
* @apioption series.map
*/
/**
* An array of data points for the series. For the `map` series type, points can
* be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `value` options. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond to
* `[hc-key, value]`. Example:
* ```js
* data: [
* ['us-ny', 0],
* ['us-mi', 5],
* ['us-tx', 3],
* ['us-ak', 5]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.map.turboThreshold),
* this option is not available.
* ```js
* data: [{
* value: 6,
* name: "Point2",
* color: "#00FF00"
* }, {
* value: 6,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @type {Array<number|Array<string,(number|null)>|null|*>}
* @product highmaps
* @apioption series.map.data
*/
/**
* When using automatic point colors pulled from the global
* [colors](colors) or series-specific
* [plotOptions.map.colors](series.colors) collections, this option
* determines whether the chart should receive one color per series or
* one color per point.
*
* In styled mode, the `colors` or `series.colors` arrays are not
* supported, and instead this option gives the points individual color
* class names on the form `highcharts-color-{n}`.
*
* @see [series colors](#plotOptions.map.colors)
*
* @sample {highmaps} maps/plotoptions/mapline-colorbypoint-false/
* Mapline colorByPoint set to false by default
* @sample {highmaps} maps/plotoptions/mapline-colorbypoint-true/
* Mapline colorByPoint set to true
*
* @type {boolean}
* @default false
* @since 2.0
* @product highmaps
* @apioption plotOptions.map.colorByPoint
*/
/**
* A series specific or series type specific color set to apply instead
* of the global [colors](#colors) when [colorByPoint](
* #plotOptions.map.colorByPoint) is true.
*
* @type {Array<Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject>}
* @since 3.0
* @product highmaps
* @apioption plotOptions.map.colors
*/
/**
* Individual color for the point. By default the color is either used
* to denote the value, or pulled from the global `colors` array.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highmaps
* @apioption series.map.data.color
*/
/**
* Individual data label for each point. The options are the same as
* the ones for [plotOptions.series.dataLabels](
* #plotOptions.series.dataLabels).
*
* @sample maps/series/data-datalabels/
* Disable data labels for individual areas
*
* @type {Highcharts.DataLabelsOptions}
* @product highmaps
* @apioption series.map.data.dataLabels
*/
/**
* The `id` of a series in the [drilldown.series](#drilldown.series)
* array to use for a drilldown for this point.
*
* @sample maps/demo/map-drilldown/
* Basic drilldown
*
* @type {string}
* @product highmaps
* @apioption series.map.data.drilldown
*/
/**
* For map and mapline series types, the geometry of a point.
*
* To achieve a better separation between the structure and the data,
* it is recommended to use `mapData` to define the geometry instead
* of defining it on the data points themselves.
*
* The geometry object is compatible to that of a `feature` in GeoJSON, so
* features of GeoJSON can be passed directly into the `data`, optionally
* after first filtering and processing it.
*
* For pre-projected maps (like GeoJSON maps from our
* [map collection](https://code.highcharts.com/mapdata/)), user has to specify
* coordinates in `projectedUnits` for geometry type other than `Point`,
* instead of `[longitude, latitude]`.
*
* @sample maps/series/mappoint-line-geometry/
* Map point and line geometry
* @sample maps/series/geometry-types/
* Geometry types
*
* @type {Object}
* @since 9.3.0
* @product highmaps
* @apioption series.map.data.geometry
*/
/**
* The geometry type. Can be one of `LineString`, `Polygon`, `MultiLineString`
* or `MultiPolygon`.
*
* @sample maps/series/geometry-types/
* Geometry types
*
* @declare Highcharts.MapGeometryTypeValue
* @type {string}
* @since 9.3.0
* @product highmaps
* @validvalue ["LineString", "Polygon", "MultiLineString", "MultiPolygon"]
* @apioption series.map.data.geometry.type
*/
/**
* The geometry coordinates in terms of arrays of `[longitude, latitude]`, or
* a two dimensional array of the same. The dimensionality must comply with the
* `type`.
*
* @type {Array<LonLatArray>|Array<Array<LonLatArray>>}
* @since 9.3.0
* @product highmaps
* @apioption series.map.data.geometry.coordinates
*/
/**
* An id for the point. This can be used after render time to get a
* pointer to the point object through `chart.get()`.
*
* @sample maps/series/data-id/
* Highlight a point by id
*
* @type {string}
* @product highmaps
* @apioption series.map.data.id
*/
/**
* When data labels are laid out on a map, Highmaps runs a simplified
* algorithm to detect collision. When two labels collide, the one with
* the lowest rank is hidden. By default the rank is computed from the
* area.
*
* @type {number}
* @product highmaps
* @apioption series.map.data.labelrank
*/
/**
* The relative mid point of an area, used to place the data label.
* Ranges from 0 to 1\. When `mapData` is used, middleX can be defined
* there.
*
* @type {number}
* @default 0.5
* @product highmaps
* @apioption series.map.data.middleX
*/
/**
* The relative mid point of an area, used to place the data label.
* Ranges from 0 to 1\. When `mapData` is used, middleY can be defined
* there.
*
* @type {number}
* @default 0.5
* @product highmaps
* @apioption series.map.data.middleY
*/
/**
* The name of the point as shown in the legend, tooltip, dataLabel
* etc.
*
* @sample maps/series/data-datalabels/
* Point names
*
* @type {string}
* @product highmaps
* @apioption series.map.data.name
*/
/**
* For map and mapline series types, the SVG path for the shape. For
* compatibility with old IE, not all SVG path definitions are supported,
* but M, L and C operators are safe.
*
* To achieve a better separation between the structure and the data,
* it is recommended to use `mapData` to define that paths instead
* of defining them on the data points themselves.
*
* For providing true geographical shapes based on longitude and latitude, use
* the `geometry` option instead.
*
* @sample maps/series/data-path/
* Paths defined in data
*
* @type {string}
* @product highmaps
* @apioption series.map.data.path
*/
/**
* The numeric value of the data point.
*
* @type {number|null}
* @product highmaps
* @apioption series.map.data.value
*/
/**
* Individual point events
*
* @extends plotOptions.series.point.events
* @product highmaps
* @apioption series.map.data.events
*/
/* *
*
* Default Export
*
* */
/* harmony default export */ var Map_MapSeriesDefaults = (MapSeriesDefaults);
;// ./code/es5/es-modules/Maps/MapViewDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* The `mapView` options control the initial view of the chart, and how
* projection is set up for raw geoJSON maps (beta as of v9.3).
*
* To set the view dynamically after chart generation, see
* [mapView.setView](/class-reference/Highcharts.MapView#setView).
*
* @since 9.3.0
* @product highmaps
* @optionparent mapView
*/
var MapViewDefaults = {
/**
* The center of the map in terms of longitude and latitude. For
* preprojected maps (like the GeoJSON files in Map Collection v1.x),
* the units are projected x and y units.
*
* @sample {highmaps} maps/mapview/center-zoom
* Custom view of a world map
* @sample {highmaps} maps/mapview/get-view
* Report the current view of a preprojected map
*
* @type {Highcharts.LonLatArray}
* @default [0, 0]
*/
center: [0, 0],
/**
* Fit the map to a geometry object consisting of individual points or
* polygons. This is practical for responsive maps where we want to
* focus on a specific area regardless of map size - unlike setting
* `center` and `zoom`, where the view doesn't scale with different map
* sizes.
*
* The geometry can be combined with the [padding](#mapView.padding)
* option to avoid touching the edges of the chart.
*
* @sample maps/mapview/fittogeometry
* Fitting the view to geometries
*
* @type {object}
* @since 10.3.3
*/
fitToGeometry: void 0,
/**
* Prevents the end user from zooming too far in on the map. See
* [zoom](#mapView.zoom).
*
* @sample {highmaps} maps/mapview/maxzoom
* Prevent zooming in too far
*
* @type {number|undefined}
*/
maxZoom: void 0,
/**
* The padding inside the plot area when auto fitting to the map bounds.
* A number signifies pixels, and a percentage is relative to the plot
* area size.
*
* An array sets individual padding for the sides in the order [top,
* right, bottom, left].
*
* @sample {highmaps} maps/chart/plotbackgroundcolor-color
* Visible plot area and percentage padding
* @sample {highmaps} maps/demo/mappoint-mapmarker
* Padding for individual sides
*
* @type {number|string|Array<number|string>}
*/
padding: 0,
/**
* The projection options allow applying client side projection to a map
* given in geographic coordinates, typically from TopoJSON or GeoJSON.
*
* @sample maps/demo/projection-explorer
* Projection explorer
* @sample maps/demo/topojson-projection
* Orthographic projection
* @sample maps/mapview/projection-custom-proj4js
* Custom UTM projection definition
* @sample maps/mapview/projection-custom-d3geo
* Custom Robinson projection definition
*
* @type {object}
*/
projection: {
/**
* Projection name. Built-in projections are `EqualEarth`,
* `LambertConformalConic`, `Miller`, `Orthographic` and `WebMercator`.
*
* @sample maps/demo/projection-explorer
* Projection explorer
* @sample maps/mapview/projection-custom-proj4js
* Custom UTM projection definition
* @sample maps/mapview/projection-custom-d3geo
* Custom Robinson projection definition
* @sample maps/demo/topojson-projection
* Orthographic projection
*
* @type {string}
*/
name: void 0,
/**
* The two standard parallels that define the map layout in conic
* projections, like the LambertConformalConic projection. If only
* one number is given, the second parallel will be the same as the
* first.
*
* @sample maps/mapview/projection-parallels
* LCC projection with parallels
* @sample maps/demo/projection-explorer
* Projection explorer
*
* @type {Array<number>}
*/
parallels: void 0,
/**
* Rotation of the projection in terms of degrees `[lambda, phi,
* gamma]`. When given, a three-axis spherical rotation is be applied
* to the globe prior to the projection.
*
* * `lambda` shifts the longitudes by the given value.
* * `phi` shifts the latitudes by the given value. Can be omitted.
* * `gamma` applies a _roll_. Can be omitted.
*
* @sample maps/demo/projection-explorer
* Projection explorer
* @sample maps/mapview/projection-america-centric
* America-centric world map
*/
rotation: void 0
},
/**
* The zoom level of a map. Higher zoom levels means more zoomed in. An
* increase of 1 zooms in to a quarter of the viewed area (half the
* width and height). Defaults to fitting to the map bounds.
*
* In a `WebMercator` projection, a zoom level of 0 represents
* the world in a 256x256 pixel square. This is a common concept for WMS
* tiling software.
*
* @sample {highmaps} maps/mapview/center-zoom
* Custom view of a world map
* @sample {highmaps} maps/mapview/get-view
* Report the current view of a preprojected map
*
* @type {number}
*/
zoom: void 0,
/**
* Generic options for the placement and appearance of map insets like
* non-contiguous territories.
*
* @since 10.0.0
* @product highmaps
* @optionparent mapView.insetOptions
*/
insetOptions: {
/**
* The border color of the insets.
*
* @sample maps/mapview/insetoptions-border
* Inset border options
*
* @type {Highcharts.ColorType}
*/
borderColor: "#cccccc" /* Palette.neutralColor20 */,
/**
* The pixel border width of the insets.
*
* @sample maps/mapview/insetoptions-border
* Inset border options
*/
borderWidth: 1,
/**
* The padding of the insets. Can be either a number of pixels, a
* percentage string, or an array of either. If an array is given, it
* sets the top, right, bottom, left paddings respectively.
*
* @type {number|string|Array<number|string>}
*/
padding: '10%',
/**
* What coordinate system the `field` and `borderPath` should relate to.
* If `plotBox`, they will be fixed to the plot box and responsively
* move in relation to the main map. If `mapBoundingBox`, they will be
* fixed to the map bounding box, which is constant and centered in
* different chart sizes and ratios.
*
* @validvalue ["plotBox", "mapBoundingBox"]
*/
relativeTo: 'mapBoundingBox',
/**
* The individual MapView insets, typically used for non-contiguous
* areas of a country. Each item inherits from the generic
* `insetOptions`.
*
* Some of the TopoJSON files of the [Highcharts Map
* Collection](https://code.highcharts.com/mapdata/) include a property
* called `hc-recommended-mapview`, and some of these include insets. In
* order to override the recommended inset options, an inset option with
* a matching id can be applied, and it will be merged into the embedded
* settings.
*
* @sample maps/mapview/insets-extended
* Extending the embedded insets
* @sample maps/mapview/insets-complete
* Complete inset config from scratch
*
* @extends mapView.insetOptions
* @type Array<Object>
* @product highmaps
* @apioption mapView.insets
*/
/**
* A geometry object of type `MultiLineString` defining the border path
* of the inset in terms of `units`. If undefined, a border is rendered
* around the `field` geometry. It is recommended that the `borderPath`
* partly follows the outline of the `field` in order to make pointer
* positioning consistent.
*
* @sample maps/mapview/insets-complete
* Complete inset config with `borderPath`
*
* @product highmaps
* @type {Object|undefined}
* @apioption mapView.insets.borderPath
*/
/**
* A geometry object of type `Polygon` defining where in the chart the
* inset should be rendered, in terms of `units` and relative to the
* `relativeTo` setting. If a `borderPath` is omitted, a border is
* rendered around the field. If undefined, the inset is rendered in the
* full plot area.
*
* @sample maps/mapview/insets-extended
* Border path emitted, field is rendered
*
* @product highmaps
* @type {object|undefined}
* @apioption mapView.insets.field
*/
/**
* A geometry object of type `Polygon` encircling the shapes that should
* be rendered in the inset, in terms of geographic coordinates.
* Geometries within this geometry are removed from the default map view
* and rendered in the inset.
*
* @sample maps/mapview/insets-complete
* Complete inset config with `geoBounds`
*
* @product highmaps
* @type {object}
* @apioption mapView.insets.geoBounds
*/
/**
* The id of the inset, used for internal reference.
*
* @sample maps/mapview/insets-extended
* Extending recommended insets by id
*
* @product highmaps
* @type {string}
* @apioption mapView.insets.id
*/
/**
* The projection options for the inset.
*
* @product highmaps
* @type {Object}
* @extends mapView.projection
* @apioption mapView.insets.projection
*/
/**
* What units to use for the `field` and `borderPath` geometries. If
* `percent` (default), they relate to the box given in `relativeTo`. If
* `pixels`, they are absolute values.
*
* @validvalue ["percent", "pixels"]
*/
units: 'percent'
}
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var Maps_MapViewDefaults = (MapViewDefaults);
;// ./code/es5/es-modules/Maps/GeoJSONComposition.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var GeoJSONComposition_win = Core_Globals.win;
var GeoJSONComposition_format = Core_Templating.format;
var GeoJSONComposition_error = Core_Utilities.error, GeoJSONComposition_extend = Core_Utilities.extend, GeoJSONComposition_merge = Core_Utilities.merge, GeoJSONComposition_wrap = Core_Utilities.wrap;
/* *
*
* Composition
*
* */
var GeoJSONComposition;
(function (GeoJSONComposition) {
/* *
*
* Functions
*
* */
/**
* Deprecated. Use `MapView.lonLatToProjectedUnits` instead.
*
* @deprecated
*
* @requires modules/map
*
* @function Highcharts.Chart#fromLatLonToPoint
*
* @param {Highcharts.MapLonLatObject} lonLat
* Coordinates.
*
* @return {Highcharts.ProjectedXY}
* X and Y coordinates in terms of projected values
*/
function chartFromLatLonToPoint(lonLat) {
return this.mapView && this.mapView.lonLatToProjectedUnits(lonLat);
}
/**
* Deprecated. Use `MapView.projectedUnitsToLonLat` instead.
*
* @deprecated
*
* @requires modules/map
*
* @function Highcharts.Chart#fromPointToLatLon
*
* @param {Highcharts.Point|Highcharts.ProjectedXY} point
* A `Point` instance or anything containing `x` and `y` properties
* with numeric values.
*
* @return {Highcharts.MapLonLatObject|undefined}
* An object with `lat` and `lon` properties.
*/
function chartFromPointToLatLon(point) {
return this.mapView && this.mapView.projectedUnitsToLonLat(point);
}
/**
* Highcharts Maps only. Get point from latitude and longitude using
* specified transform definition.
*
* @requires modules/map
*
* @sample maps/series/latlon-transform/
* Use specific transformation for lat/lon
*
* @function Highcharts.Chart#transformFromLatLon
*
* @param {Highcharts.MapLonLatObject} latLon
* A latitude/longitude object.
*
* @param {*} transform
* The transform definition to use as explained in the
* {@link https://www.highcharts.com/docs/maps/latlon|documentation}.
*
* @return {ProjectedXY}
* An object with `x` and `y` properties.
*/
function chartTransformFromLatLon(latLon, transform) {
/**
* Allows to manually load the proj4 library from Highcharts options
* instead of the `window`.
* In case of loading the library from a `script` tag,
* this option is not needed, it will be loaded from there by default.
*
* @type {Function}
* @product highmaps
* @apioption chart.proj4
*/
var proj4 = this.options.chart.proj4 || GeoJSONComposition_win.proj4;
if (!proj4) {
GeoJSONComposition_error(21, false, this);
return;
}
var _a = transform.jsonmarginX,
jsonmarginX = _a === void 0 ? 0 : _a,
_b = transform.jsonmarginY,
jsonmarginY = _b === void 0 ? 0 : _b,
_c = transform.jsonres,
jsonres = _c === void 0 ? 1 : _c,
_d = transform.scale,
scale = _d === void 0 ? 1 : _d,
_e = transform.xoffset,
xoffset = _e === void 0 ? 0 : _e,
_f = transform.xpan,
xpan = _f === void 0 ? 0 : _f,
_g = transform.yoffset,
yoffset = _g === void 0 ? 0 : _g,
_h = transform.ypan,
ypan = _h === void 0 ? 0 : _h;
var projected = proj4(transform.crs,
[latLon.lon,
latLon.lat]),
cosAngle = transform.cosAngle ||
(transform.rotation && Math.cos(transform.rotation)),
sinAngle = transform.sinAngle ||
(transform.rotation && Math.sin(transform.rotation)),
rotated = transform.rotation ? [
projected[0] * cosAngle + projected[1] * sinAngle,
-projected[0] * sinAngle + projected[1] * cosAngle
] : projected;
return {
x: ((rotated[0] - xoffset) * scale + xpan) * jsonres + jsonmarginX,
y: -(((yoffset - rotated[1]) * scale + ypan) * jsonres - jsonmarginY)
};
}
/**
* Highcharts Maps only. Get latLon from point using specified transform
* definition. The method returns an object with the numeric properties
* `lat` and `lon`.
*
* @requires modules/map
*
* @sample maps/series/latlon-transform/
* Use specific transformation for lat/lon
*
* @function Highcharts.Chart#transformToLatLon
*
* @param {Highcharts.Point|Highcharts.ProjectedXY} point
* A `Point` instance, or any object containing the properties `x`
* and `y` with numeric values.
*
* @param {*} transform
* The transform definition to use as explained in the
* {@link https://www.highcharts.com/docs/maps/latlon|documentation}.
*
* @return {Highcharts.MapLonLatObject|undefined}
* An object with `lat` and `lon` properties.
*/
function chartTransformToLatLon(point, transform) {
var proj4 = this.options.chart.proj4 || GeoJSONComposition_win.proj4;
if (!proj4) {
GeoJSONComposition_error(21, false, this);
return;
}
if (point.y === null) {
return;
}
var _a = transform.jsonmarginX,
jsonmarginX = _a === void 0 ? 0 : _a,
_b = transform.jsonmarginY,
jsonmarginY = _b === void 0 ? 0 : _b,
_c = transform.jsonres,
jsonres = _c === void 0 ? 1 : _c,
_d = transform.scale,
scale = _d === void 0 ? 1 : _d,
_e = transform.xoffset,
xoffset = _e === void 0 ? 0 : _e,
_f = transform.xpan,
xpan = _f === void 0 ? 0 : _f,
_g = transform.yoffset,
yoffset = _g === void 0 ? 0 : _g,
_h = transform.ypan,
ypan = _h === void 0 ? 0 : _h;
var normalized = {
x: ((point.x - jsonmarginX) / jsonres - xpan) / scale + xoffset,
y: ((point.y - jsonmarginY) / jsonres + ypan) / scale + yoffset
}, cosAngle = transform.cosAngle ||
(transform.rotation && Math.cos(transform.rotation)), sinAngle = transform.sinAngle ||
(transform.rotation && Math.sin(transform.rotation)),
// Note: Inverted sinAngle to reverse rotation direction
projected = proj4(transform.crs, 'WGS84', transform.rotation ? {
x: normalized.x * cosAngle + normalized.y * -sinAngle,
y: normalized.x * sinAngle + normalized.y * cosAngle
} : normalized);
return { lat: projected.y, lon: projected.x };
}
/** @private */
function compose(ChartClass) {
var chartProto = ChartClass.prototype;
if (!chartProto.transformFromLatLon) {
chartProto.fromLatLonToPoint = chartFromLatLonToPoint;
chartProto.fromPointToLatLon = chartFromPointToLatLon;
chartProto.transformFromLatLon = chartTransformFromLatLon;
chartProto.transformToLatLon = chartTransformToLatLon;
GeoJSONComposition_wrap(chartProto, 'addCredits', wrapChartAddCredit);
}
}
GeoJSONComposition.compose = compose;
/**
* Highcharts Maps only. Restructure a GeoJSON or TopoJSON object in
* preparation to be read directly by the
* {@link https://api.highcharts.com/highmaps/plotOptions.series.mapData|series.mapData}
* option. The object will be broken down to fit a specific Highcharts type,
* either `map`, `mapline` or `mappoint`. Meta data in GeoJSON's properties
* object will be copied directly over to {@link Point.properties} in
* Highcharts Maps.
*
* @requires modules/map
*
* @sample maps/demo/geojson/ Simple areas
* @sample maps/demo/mapline-mappoint/ Multiple types
* @sample maps/series/mapdata-multiple/ Multiple map sources
*
* @function Highcharts.geojson
*
* @param {Highcharts.GeoJSON|Highcharts.TopoJSON} json
* The GeoJSON or TopoJSON structure to parse, represented as a
* JavaScript object.
*
* @param {string} [hType=map]
* The Highcharts Maps series type to prepare for. Setting "map" will
* return GeoJSON polygons and multipolygons. Setting "mapline" will
* return GeoJSON linestrings and multilinestrings. Setting
* "mappoint" will return GeoJSON points and multipoints.
*
*
* @return {Array<*>} An object ready for the `mapData` option.
*/
function geojson(json, hType, series) {
var _a,
_b;
if (hType === void 0) { hType = 'map'; }
var mapData = [];
var geojson = json.type === 'Topology' ? topo2geo(json) : json,
features = geojson.features;
for (var i = 0, iEnd = features.length; i < iEnd; ++i) {
var feature = features[i],
geometry = feature.geometry || {},
type = geometry.type,
coordinates = geometry.coordinates,
properties = feature.properties;
var pointOptions = void 0;
if ((hType === 'map' || hType === 'mapbubble') &&
(type === 'Polygon' || type === 'MultiPolygon')) {
if (coordinates.length) {
pointOptions = { geometry: { coordinates: coordinates, type: type } };
}
}
else if (hType === 'mapline' &&
(type === 'LineString' ||
type === 'MultiLineString')) {
if (coordinates.length) {
pointOptions = { geometry: { coordinates: coordinates, type: type } };
}
}
else if (hType === 'mappoint' && type === 'Point') {
if (coordinates.length) {
pointOptions = { geometry: { coordinates: coordinates, type: type } };
}
}
if (pointOptions) {
var name_1 = properties && (properties.name || properties.NAME),
lon = properties && properties.lon,
lat = properties && properties.lat;
mapData.push(GeoJSONComposition_extend(pointOptions, {
lat: typeof lat === 'number' ? lat : void 0,
lon: typeof lon === 'number' ? lon : void 0,
name: typeof name_1 === 'string' ? name_1 : void 0,
/**
* In Highcharts Maps, when data is loaded from GeoJSON, the
* GeoJSON item's properies are copied over here.
*
* @requires modules/map
* @name Highcharts.Point#properties
* @type {*}
*/
properties: properties
}));
}
}
// Create a credits text that includes map source, to be picked up in
// Chart.addCredits
if (series && geojson.copyrightShort) {
series.chart.mapCredits = GeoJSONComposition_format((_a = series.chart.options.credits) === null || _a === void 0 ? void 0 : _a.mapText, { geojson: geojson });
series.chart.mapCreditsFull = GeoJSONComposition_format((_b = series.chart.options.credits) === null || _b === void 0 ? void 0 : _b.mapTextFull, { geojson: geojson });
}
return mapData;
}
GeoJSONComposition.geojson = geojson;
/**
* Convert a TopoJSON topology to GeoJSON. By default the first object is
* handled.
* Based on https://github.com/topojson/topojson-specification
*/
function topo2geo(topology, objectName) {
// Decode first object/feature as default
if (!objectName) {
objectName = Object.keys(topology.objects)[0];
}
var obj = topology.objects[objectName];
// Already decoded with the same title => return cache
if (obj['hc-decoded-geojson'] &&
obj['hc-decoded-geojson'].title === topology.title) {
return obj['hc-decoded-geojson'];
}
// Do the initial transform
var arcsArray = topology.arcs;
if (topology.transform) {
var arcs = topology.arcs,
_a = topology.transform,
scale = _a.scale,
translate = _a.translate;
var positionArray = void 0,
x = void 0,
y = void 0;
arcsArray = [];
for (var i = 0, iEnd = arcs.length; i < iEnd; ++i) {
var positions = arcs[i];
arcsArray.push(positionArray = []);
x = 0;
y = 0;
for (var j = 0, jEnd = positions.length; j < jEnd; ++j) {
positionArray.push([
(x += positions[j][0]) * scale[0] + translate[0],
(y += positions[j][1]) * scale[1] + translate[1]
]);
}
}
}
// Recurse down any depth of multi-dimensional arrays of arcs and insert
// the coordinates
var arcsToCoordinates = function (arcs) {
if (typeof arcs[0] === 'number') {
return arcs.reduce(function (coordinates,
arcNo,
i) {
var arc = arcNo < 0 ? arcsArray[~arcNo] : arcsArray[arcNo];
// The first point of an arc is always identical to the last
// point of the previes arc, so slice it off to save further
// processing.
if (arcNo < 0) {
arc = arc.slice(0, i === 0 ? arc.length : arc.length - 1);
arc.reverse();
}
else if (i) {
arc = arc.slice(1);
}
return coordinates.concat(arc);
}, []);
}
return arcs.map(arcsToCoordinates);
};
var geometries = obj.geometries,
features = [];
for (var i = 0, iEnd = geometries.length; i < iEnd; ++i) {
features.push({
type: 'Feature',
properties: geometries[i].properties,
geometry: {
type: geometries[i].type,
coordinates: geometries[i].coordinates ||
arcsToCoordinates(geometries[i].arcs)
}
});
}
var geojson = {
type: 'FeatureCollection',
copyright: topology.copyright,
copyrightShort: topology.copyrightShort,
copyrightUrl: topology.copyrightUrl,
features: features,
'hc-recommended-mapview': obj['hc-recommended-mapview'],
bbox: topology.bbox,
title: topology.title
};
obj['hc-decoded-geojson'] = geojson;
return geojson;
}
GeoJSONComposition.topo2geo = topo2geo;
/**
* Override addCredits to include map source by default.
* @private
*/
function wrapChartAddCredit(proceed, credits) {
credits = GeoJSONComposition_merge(true, this.options.credits, credits);
proceed.call(this, credits);
// Add full map credits to hover
if (this.credits && this.mapCreditsFull) {
this.credits.attr({
title: this.mapCreditsFull
});
}
}
})(GeoJSONComposition || (GeoJSONComposition = {}));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Maps_GeoJSONComposition = (GeoJSONComposition);
/* *
*
* API Declarations
*
* */
/**
* Represents the loose structure of a geographic JSON file.
*
* @interface Highcharts.GeoJSON
*/ /**
* Full copyright note of the geographic data.
* @name Highcharts.GeoJSON#copyright
* @type {string|undefined}
*/ /**
* Short copyright note of the geographic data suitable for watermarks.
* @name Highcharts.GeoJSON#copyrightShort
* @type {string|undefined}
*/ /**
* Additional meta information based on the coordinate reference system.
* @name Highcharts.GeoJSON#crs
* @type {Highcharts.Dictionary<any>|undefined}
*/ /**
* Data sets of geographic features.
* @name Highcharts.GeoJSON#features
* @type {Array<Highcharts.GeoJSONFeature>}
*/ /**
* Map projections and transformations to be used when calculating between
* lat/lon and chart values. Required for lat/lon support on maps. Allows
* resizing, rotating, and moving portions of a map within its projected
* coordinate system while still retaining lat/lon support. If using lat/lon
* on a portion of the map that does not match a `hitZone`, the definition with
* the key `default` is used.
* @name Highcharts.GeoJSON#hc-transform
* @type {Highcharts.Dictionary<Highcharts.GeoJSONTranslation>|undefined}
*/ /**
* Title of the geographic data.
* @name Highcharts.GeoJSON#title
* @type {string|undefined}
*/ /**
* Type of the geographic data. Type of an optimized map collection is
* `FeatureCollection`.
* @name Highcharts.GeoJSON#type
* @type {string|undefined}
*/ /**
* Version of the geographic data.
* @name Highcharts.GeoJSON#version
* @type {string|undefined}
*/
/**
* Data set of a geographic feature.
* @interface Highcharts.GeoJSONFeature
* @extends Highcharts.Dictionary<*>
*/ /**
* Data type of the geographic feature.
* @name Highcharts.GeoJSONFeature#type
* @type {string}
*/
/**
* Describes the map projection and transformations applied to a portion of
* a map.
* @interface Highcharts.GeoJSONTranslation
*/ /**
* The coordinate reference system used to generate this portion of the map.
* @name Highcharts.GeoJSONTranslation#crs
* @type {string}
*/ /**
* Define the portion of the map that this definition applies to. Defined as a
* GeoJSON polygon feature object, with `type` and `coordinates` properties.
* @name Highcharts.GeoJSONTranslation#hitZone
* @type {Highcharts.Dictionary<*>|undefined}
*/ /**
* Property for internal use for maps generated by Highsoft.
* @name Highcharts.GeoJSONTranslation#jsonmarginX
* @type {number|undefined}
*/ /**
* Property for internal use for maps generated by Highsoft.
* @name Highcharts.GeoJSONTranslation#jsonmarginY
* @type {number|undefined}
*/ /**
* Property for internal use for maps generated by Highsoft.
* @name Highcharts.GeoJSONTranslation#jsonres
* @type {number|undefined}
*/ /**
* Specifies clockwise rotation of the coordinates after the projection, but
* before scaling and panning. Defined in radians, relative to the coordinate
* system origin.
* @name Highcharts.GeoJSONTranslation#rotation
* @type {number|undefined}
*/ /**
* The scaling factor applied to the projected coordinates.
* @name Highcharts.GeoJSONTranslation#scale
* @type {number|undefined}
*/ /**
* Property for internal use for maps generated by Highsoft.
* @name Highcharts.GeoJSONTranslation#xoffset
* @type {number|undefined}
*/ /**
* X offset of projected coordinates after scaling.
* @name Highcharts.GeoJSONTranslation#xpan
* @type {number|undefined}
*/ /**
* Property for internal use for maps generated by Highsoft.
* @name Highcharts.GeoJSONTranslation#yoffset
* @type {number|undefined}
*/ /**
* Y offset of projected coordinates after scaling.
* @name Highcharts.GeoJSONTranslation#ypan
* @type {number|undefined}
*/
/**
* Result object of a map transformation.
*
* @interface Highcharts.ProjectedXY
*/ /**
* X coordinate in projected units.
* @name Highcharts.ProjectedXY#x
* @type {number}
*/ /**
* Y coordinate in projected units
* @name Highcharts.ProjectedXY#y
* @type {number}
*/
/**
* A latitude/longitude object.
*
* @interface Highcharts.MapLonLatObject
*/ /**
* The latitude.
* @name Highcharts.MapLonLatObject#lat
* @type {number}
*/ /**
* The longitude.
* @name Highcharts.MapLonLatObject#lon
* @type {number}
*/
/**
* An array of longitude, latitude.
*
* @typedef {Array<number>} Highcharts.LonLatArray
*/
/**
* An array of GeoJSON or TopoJSON objects or strings used as map data for
* series.
*
* @typedef {Array<*>|GeoJSON|TopoJSON|string} Highcharts.MapDataType
*/
/**
* A TopoJSON object, see description on the
* [project's GitHub page](https://github.com/topojson/topojson).
*
* @typedef {Object} Highcharts.TopoJSON
*/
''; // Detach doclets above
;// ./code/es5/es-modules/Core/Geometry/PolygonClip.js
/* *
*
* (c) 2010-2024 Highsoft AS
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Functions
*
* */
/**
* Simple line string clipping. Clip to bounds and insert intersection points.
* @private
*/
function clipLineString(line, boundsPolygon) {
var ret = [],
l = clipPolygon(line,
boundsPolygon,
false);
for (var i = 1; i < l.length; i++) {
// Insert gap where two intersections follow each other
if (l[i].isIntersection && l[i - 1].isIntersection) {
ret.push(l.splice(0, i));
i = 0;
}
// Push the rest
if (i === l.length - 1) {
ret.push(l);
}
}
return ret;
}
/**
* Clip a polygon to another polygon using the Sutherland/Hodgman algorithm.
* @private
*/
function clipPolygon(subjectPolygon, boundsPolygon, closed) {
if (closed === void 0) { closed = true; }
var clipEdge1 = boundsPolygon[boundsPolygon.length - 1],
clipEdge2,
prevPoint,
currentPoint,
outputList = subjectPolygon;
for (var j = 0; j < boundsPolygon.length; j++) {
var inputList = outputList;
clipEdge2 = boundsPolygon[j];
outputList = [];
prevPoint = closed ?
// Polygon, wrap around
inputList[inputList.length - 1] :
// Open line string, don't wrap
inputList[0];
for (var i = 0; i < inputList.length; i++) {
currentPoint = inputList[i];
if (isInside(clipEdge1, clipEdge2, currentPoint)) {
if (!isInside(clipEdge1, clipEdge2, prevPoint)) {
outputList.push(intersection(clipEdge1, clipEdge2, prevPoint, currentPoint));
}
outputList.push(currentPoint);
}
else if (isInside(clipEdge1, clipEdge2, prevPoint)) {
outputList.push(intersection(clipEdge1, clipEdge2, prevPoint, currentPoint));
}
prevPoint = currentPoint;
}
clipEdge1 = clipEdge2;
}
return outputList;
}
/** @private */
function isInside(clipEdge1, clipEdge2, p) {
return ((clipEdge2[0] - clipEdge1[0]) * (p[1] - clipEdge1[1]) >
(clipEdge2[1] - clipEdge1[1]) * (p[0] - clipEdge1[0]));
}
/** @private */
function intersection(clipEdge1, clipEdge2, prevPoint, currentPoint) {
var dc = [
clipEdge1[0] - clipEdge2[0],
clipEdge1[1] - clipEdge2[1]
],
dp = [
prevPoint[0] - currentPoint[0],
prevPoint[1] - currentPoint[1]
],
n1 = clipEdge1[0] * clipEdge2[1] - clipEdge1[1] * clipEdge2[0],
n2 = prevPoint[0] * currentPoint[1] - prevPoint[1] * currentPoint[0],
n3 = 1 / (dc[0] * dp[1] - dc[1] * dp[0]),
intersection = [
(n1 * dp[0] - n2 * dc[0]) * n3,
(n1 * dp[1] - n2 * dc[1]) * n3
];
intersection.isIntersection = true;
return intersection;
}
/* *
*
* Default Export
*
* */
var PolygonClip = {
clipLineString: clipLineString,
clipPolygon: clipPolygon
};
/* harmony default export */ var Geometry_PolygonClip = (PolygonClip);
;// ./code/es5/es-modules/Maps/Projections/LambertConformalConic.js
/* *
* Lambert Conformal Conic projection
* */
/* *
*
* Constants
*
* */
var sign = Math.sign ||
(function (n) { return (n === 0 ? 0 : n > 0 ? 1 : -1); }), scale = 63.78137, LambertConformalConic_deg2rad = Math.PI / 180, halfPI = Math.PI / 2, eps10 = 1e-6, tany = function (y) { return Math.tan((halfPI + y) / 2); };
/* *
*
* Class
*
* */
var LambertConformalConic = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function LambertConformalConic(options) {
var _a;
var parallels = (options.parallels || [])
.map(function (n) { return n * LambertConformalConic_deg2rad; }),
lat1 = parallels[0] || 0,
lat2 = (_a = parallels[1]) !== null && _a !== void 0 ? _a : lat1,
cosLat1 = Math.cos(lat1);
if (typeof options.projectedBounds === 'object') {
this.projectedBounds = options.projectedBounds;
}
// Apply the global variables
var n = lat1 === lat2 ?
Math.sin(lat1) :
Math.log(cosLat1 / Math.cos(lat2)) / Math.log(tany(lat2) / tany(lat1));
if (Math.abs(n) < 1e-10) {
n = (sign(n) || 1) * 1e-10;
}
this.n = n;
this.c = cosLat1 * Math.pow(tany(lat1), n) / n;
}
/* *
*
* Functions
*
* */
LambertConformalConic.prototype.forward = function (lonLat) {
var _a = this,
c = _a.c,
n = _a.n,
projectedBounds = _a.projectedBounds,
lon = lonLat[0] * LambertConformalConic_deg2rad;
var lat = lonLat[1] * LambertConformalConic_deg2rad;
if (c > 0) {
if (lat < -halfPI + eps10) {
lat = -halfPI + eps10;
}
}
else {
if (lat > halfPI - eps10) {
lat = halfPI - eps10;
}
}
var r = c / Math.pow(tany(lat),
n),
x = r * Math.sin(n * lon) * scale,
y = (c - r * Math.cos(n * lon)) * scale,
xy = [x,
y];
if (projectedBounds && (x < projectedBounds.x1 ||
x > projectedBounds.x2 ||
y < projectedBounds.y1 ||
y > projectedBounds.y2)) {
xy.outside = true;
}
return xy;
};
LambertConformalConic.prototype.inverse = function (xy) {
var _a = this, c = _a.c, n = _a.n, x = xy[0] / scale, y = xy[1] / scale, cy = c - y, rho = sign(n) * Math.sqrt(x * x + cy * cy);
var l = Math.atan2(x,
Math.abs(cy)) * sign(cy);
if (cy * n < 0) {
l -= Math.PI * sign(x) * sign(cy);
}
return [
(l / n) / LambertConformalConic_deg2rad,
(2 * Math.atan(Math.pow(c / rho, 1 / n)) - halfPI) / LambertConformalConic_deg2rad
];
};
return LambertConformalConic;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Projections_LambertConformalConic = (LambertConformalConic);
;// ./code/es5/es-modules/Maps/Projections/EqualEarth.js
/* *
*
* Equal Earth projection, an equal-area projection designed to minimize
* distortion and remain pleasing to the eye.
*
* Invented by Bojan Šavrič, Bernhard Jenny, and Tom Patterson in 2018. It is
* inspired by the widely used Robinson projection.
*
* */
/* *
*
* Constants
*
* */
var A1 = 1.340264, A2 = -0.081106, A3 = 0.000893, A4 = 0.003796, M = Math.sqrt(3) / 2.0, EqualEarth_scale = 74.03120656864502;
/* *
*
* Class
*
* */
var EqualEarth = /** @class */ (function () {
function EqualEarth() {
/* *
*
* Properties
*
* */
this.bounds = {
x1: -200.37508342789243,
x2: 200.37508342789243,
y1: -97.52595454902263,
y2: 97.52595454902263
};
}
/* *
*
* Functions
*
* */
EqualEarth.prototype.forward = function (lonLat) {
var d = Math.PI / 180,
paramLat = Math.asin(M * Math.sin(lonLat[1] * d)),
paramLatSq = paramLat * paramLat,
paramLatPow6 = paramLatSq * paramLatSq * paramLatSq;
var x = lonLat[0] * d * Math.cos(paramLat) * EqualEarth_scale /
(M * (A1 +
3 * A2 * paramLatSq +
paramLatPow6 * (7 * A3 + 9 * A4 * paramLatSq))),
y = paramLat * EqualEarth_scale * (A1 + A2 * paramLatSq + paramLatPow6 * (A3 + A4 * paramLatSq));
return [x, y];
};
EqualEarth.prototype.inverse = function (xy) {
var x = xy[0] / EqualEarth_scale, y = xy[1] / EqualEarth_scale, d = 180 / Math.PI, epsilon = 1e-9;
var paramLat = y,
paramLatSq,
paramLatPow6,
fy,
fpy,
dlat;
for (var i = 0; i < 12; ++i) {
paramLatSq = paramLat * paramLat;
paramLatPow6 = paramLatSq * paramLatSq * paramLatSq;
fy = paramLat * (A1 + A2 * paramLatSq + paramLatPow6 * (A3 + A4 * paramLatSq)) - y;
fpy = A1 + 3 * A2 * paramLatSq + paramLatPow6 * (7 * A3 + 9 * A4 * paramLatSq);
paramLat -= dlat = fy / fpy;
if (Math.abs(dlat) < epsilon) {
break;
}
}
paramLatSq = paramLat * paramLat;
paramLatPow6 = paramLatSq * paramLatSq * paramLatSq;
var lon = d * M * x * (A1 + 3 * A2 * paramLatSq + paramLatPow6 *
(7 * A3 + 9 * A4 * paramLatSq)) / Math.cos(paramLat), lat = d * Math.asin(Math.sin(paramLat) / M);
// If lons are beyond the border of a map -> resolve via break
if (Math.abs(lon) > 180) {
return [NaN, NaN];
}
return [lon, lat];
};
return EqualEarth;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Projections_EqualEarth = (EqualEarth);
;// ./code/es5/es-modules/Maps/Projections/Miller.js
/* *
* Miller projection
* */
/* *
*
* Constants
*
* */
var quarterPI = Math.PI / 4, Miller_deg2rad = Math.PI / 180, Miller_scale = 63.78137;
/* *
*
* Class
*
* */
var Miller = /** @class */ (function () {
function Miller() {
/* *
*
* Properties
*
* */
this.bounds = {
x1: -200.37508342789243,
x2: 200.37508342789243,
y1: -146.91480769173063,
y2: 146.91480769173063
};
}
/* *
*
* Functions
*
* */
Miller.prototype.forward = function (lonLat) {
return [
lonLat[0] * Miller_deg2rad * Miller_scale,
1.25 * Miller_scale * Math.log(Math.tan(quarterPI + 0.4 * lonLat[1] * Miller_deg2rad))
];
};
Miller.prototype.inverse = function (xy) {
return [
(xy[0] / Miller_scale) / Miller_deg2rad,
2.5 * (Math.atan(Math.exp(0.8 * (xy[1] / Miller_scale))) - quarterPI) / Miller_deg2rad
];
};
return Miller;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Projections_Miller = (Miller);
;// ./code/es5/es-modules/Maps/Projections/Orthographic.js
/* *
* Orthographic projection
* */
/* *
*
* Constants
*
* */
var Orthographic_deg2rad = Math.PI / 180, Orthographic_scale = 63.78460826781007;
/* *
*
* Class
*
* */
var Orthographic = /** @class */ (function () {
function Orthographic() {
/* *
*
* Properties
*
* */
this.antimeridianCutting = false;
this.bounds = {
x1: -Orthographic_scale,
x2: Orthographic_scale,
y1: -Orthographic_scale,
y2: Orthographic_scale
};
}
/* *
*
* Functions
*
* */
Orthographic.prototype.forward = function (lonLat) {
var lonDeg = lonLat[0],
latDeg = lonLat[1],
lat = latDeg * Orthographic_deg2rad,
xy = [
Math.cos(lat) * Math.sin(lonDeg * Orthographic_deg2rad) * Orthographic_scale,
Math.sin(lat) * Orthographic_scale
];
if (lonDeg < -90 || lonDeg > 90) {
xy.outside = true;
}
return xy;
};
Orthographic.prototype.inverse = function (xy) {
var x = xy[0] / Orthographic_scale, y = xy[1] / Orthographic_scale, z = Math.sqrt(x * x + y * y), c = Math.asin(z), cSin = Math.sin(c), cCos = Math.cos(c);
return [
Math.atan2(x * cSin, z * cCos) / Orthographic_deg2rad,
Math.asin(z && y * cSin / z) / Orthographic_deg2rad
];
};
return Orthographic;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Projections_Orthographic = (Orthographic);
;// ./code/es5/es-modules/Maps/Projections/WebMercator.js
/* *
* Web Mercator projection, used for most online map tile services
* */
/* *
*
* Constants
*
* */
var r = 63.78137, WebMercator_deg2rad = Math.PI / 180;
/* *
*
* Class
*
* */
var WebMercator = /** @class */ (function () {
function WebMercator() {
/* *
*
* Properties
*
* */
this.bounds = {
x1: -200.37508342789243,
x2: 200.37508342789243,
y1: -200.3750834278071,
y2: 200.3750834278071
};
this.maxLatitude = 85.0511287798; // The latitude that defines a square
}
/* *
*
* Functions
*
* */
WebMercator.prototype.forward = function (lonLat) {
var sinLat = Math.sin(lonLat[1] * WebMercator_deg2rad), xy = [
r * lonLat[0] * WebMercator_deg2rad,
r * Math.log((1 + sinLat) / (1 - sinLat)) / 2
];
if (Math.abs(lonLat[1]) > this.maxLatitude) {
xy.outside = true;
}
return xy;
};
WebMercator.prototype.inverse = function (xy) {
return [
xy[0] / (r * WebMercator_deg2rad),
(2 * Math.atan(Math.exp(xy[1] / r)) - (Math.PI / 2)) / WebMercator_deg2rad
];
};
return WebMercator;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Projections_WebMercator = (WebMercator);
;// ./code/es5/es-modules/Maps/Projections/ProjectionRegistry.js
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Imports
*
* */
/* *
*
* Constants
*
* */
var projectionRegistry = {
EqualEarth: Projections_EqualEarth,
LambertConformalConic: Projections_LambertConformalConic,
Miller: Projections_Miller,
Orthographic: Projections_Orthographic,
WebMercator: Projections_WebMercator
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var ProjectionRegistry = (projectionRegistry);
;// ./code/es5/es-modules/Maps/Projection.js
/* *
*
* (c) 2021 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var Projection_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var Projection_clipLineString = Geometry_PolygonClip.clipLineString, Projection_clipPolygon = Geometry_PolygonClip.clipPolygon;
var Projection_clamp = Core_Utilities.clamp, Projection_erase = Core_Utilities.erase;
/* *
*
* Constants
*
* */
var Projection_deg2rad = Math.PI * 2 / 360,
// Safe padding on either side of the antimeridian to avoid points being
// projected to the wrong side of the plane
floatCorrection = 0.000001;
/* *
*
* Functions
*
* */
/**
* Keep longitude within -180 and 180. This is faster than using the modulo
* operator, and preserves the distinction between -180 and 180.
* @private
*/
var wrapLon = function (lon) {
// Replacing the if's with while would increase the range, but make it prone
// to crashes on bad data
if (lon < -180) {
lon += 360;
}
if (lon > 180) {
lon -= 360;
}
return lon;
};
/**
* Calculate the haversine of an angle.
* @private
*/
var hav = function (radians) { return (1 - Math.cos(radians)) / 2; };
/**
* Calculate the haversine of an angle from two coordinates.
* @private
*/
var havFromCoords = function (point1, point2) {
var cos = Math.cos,
lat1 = point1[1] * Projection_deg2rad,
lon1 = point1[0] * Projection_deg2rad,
lat2 = point2[1] * Projection_deg2rad,
lon2 = point2[0] * Projection_deg2rad,
deltaLat = lat2 - lat1,
deltaLon = lon2 - lon1,
havFromCoords = hav(deltaLat) + cos(lat1) * cos(lat2) * hav(deltaLon);
return havFromCoords;
};
/* *
*
* Class
*
* */
var Projection = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function Projection(options) {
if (options === void 0) { options = {}; }
// Whether the chart has points, lines or polygons given as coordinates
// with positive up, as opposed to paths in the SVG plane with positive
// down.
this.hasCoordinates = false;
// Whether the chart has true projection as opposed to pre-projected geojson
// as in the legacy map collection.
this.hasGeoProjection = false;
this.maxLatitude = 90;
this.options = options;
var name = options.name,
projectedBounds = options.projectedBounds,
rotation = options.rotation;
this.rotator = rotation ? this.getRotator(rotation) : void 0;
var ProjectionDefinition = name ? Projection.registry[name] : void 0;
if (ProjectionDefinition) {
this.def = new ProjectionDefinition(options);
}
var _a = this,
def = _a.def,
rotator = _a.rotator;
if (def) {
this.maxLatitude = def.maxLatitude || 90;
this.hasGeoProjection = true;
}
if (rotator && def) {
this.forward = function (lonLat) {
return def.forward(rotator.forward(lonLat));
};
this.inverse = function (xy) {
return rotator.inverse(def.inverse(xy));
};
}
else if (def) {
this.forward = function (lonLat) { return def.forward(lonLat); };
this.inverse = function (xy) { return def.inverse(xy); };
}
else if (rotator) {
this.forward = rotator.forward;
this.inverse = rotator.inverse;
}
// Projected bounds/clipping
this.bounds = projectedBounds === 'world' ?
def && def.bounds :
projectedBounds;
}
/* *
*
* Static Functions
*
* */
/**
* Add a projection definition to the registry, accessible by its `name`.
* @private
*/
Projection.add = function (name, definition) {
Projection.registry[name] = definition;
};
/**
* Calculate the distance in meters between two given coordinates.
* @private
*/
Projection.distance = function (point1, point2) {
var atan2 = Math.atan2,
sqrt = Math.sqrt,
hav = havFromCoords(point1,
point2),
angularDistance = 2 * atan2(sqrt(hav),
sqrt(1 - hav)),
distance = angularDistance * 6371e3;
return distance;
};
/**
* Calculate the geodesic line string between two given coordinates.
* @private
*/
Projection.geodesic = function (point1, point2, inclusive, stepDistance) {
if (stepDistance === void 0) { stepDistance = 500000; }
var atan2 = Math.atan2, cos = Math.cos, sin = Math.sin, sqrt = Math.sqrt, distance = Projection.distance, lat1 = point1[1] * Projection_deg2rad, lon1 = point1[0] * Projection_deg2rad, lat2 = point2[1] * Projection_deg2rad, lon2 = point2[0] * Projection_deg2rad, cosLat1CosLon1 = cos(lat1) * cos(lon1), cosLat2CosLon2 = cos(lat2) * cos(lon2), cosLat1SinLon1 = cos(lat1) * sin(lon1), cosLat2SinLon2 = cos(lat2) * sin(lon2), sinLat1 = sin(lat1), sinLat2 = sin(lat2), pointDistance = distance(point1, point2), angDistance = pointDistance / 6371e3, sinAng = sin(angDistance), jumps = Math.round(pointDistance / stepDistance), lineString = [];
if (inclusive) {
lineString.push(point1);
}
if (jumps > 1) {
var step = 1 / jumps;
for (var fraction = step; fraction < 0.999; // Account for float errors
fraction += step) {
// Add intermediate point to lineString
var A = sin((1 - fraction) * angDistance) / sinAng, B = sin(fraction * angDistance) / sinAng, x = A * cosLat1CosLon1 + B * cosLat2CosLon2, y = A * cosLat1SinLon1 + B * cosLat2SinLon2, z = A * sinLat1 + B * sinLat2, lat3 = atan2(z, sqrt(x * x + y * y)), lon3 = atan2(y, x);
lineString.push([lon3 / Projection_deg2rad, lat3 / Projection_deg2rad]);
}
}
if (inclusive) {
lineString.push(point2);
}
return lineString;
};
Projection.insertGeodesics = function (poly) {
var i = poly.length - 1;
while (i--) {
// Distance in degrees, either in lon or lat. Avoid heavy
// calculation of true distance.
var roughDistance = Math.max(Math.abs(poly[i][0] - poly[i + 1][0]),
Math.abs(poly[i][1] - poly[i + 1][1]));
if (roughDistance > 10) {
var geodesic = Projection.geodesic(poly[i],
poly[i + 1]);
if (geodesic.length) {
poly.splice.apply(poly, Projection_spreadArray([i + 1, 0], geodesic, false));
}
}
}
};
Projection.toString = function (options) {
var _a = options || {},
name = _a.name,
rotation = _a.rotation;
return [name, rotation && rotation.join(',')].join(';');
};
/* *
*
* Functions
*
* */
Projection.prototype.lineIntersectsBounds = function (line) {
var _a = this.bounds || {},
x1 = _a.x1,
x2 = _a.x2,
y1 = _a.y1,
y2 = _a.y2;
var getIntersect = function (line,
dim,
val) {
var p1 = line[0],
p2 = line[1],
otherDim = dim ? 0 : 1;
// Check if points are on either side of the line
if (typeof val === 'number' && p1[dim] >= val !== p2[dim] >= val) {
var fraction = ((val - p1[dim]) / (p2[dim] - p1[dim])),
crossingVal = p1[otherDim] +
fraction * (p2[otherDim] - p1[otherDim]);
return dim ? [crossingVal, val] : [val, crossingVal];
}
};
var intersection,
ret = line[0];
if ((intersection = getIntersect(line, 0, x1))) {
ret = intersection;
// Assuming line[1] was originally outside, replace it with the
// intersection point so that the horizontal intersection will
// be correct.
line[1] = intersection;
}
else if ((intersection = getIntersect(line, 0, x2))) {
ret = intersection;
line[1] = intersection;
}
if ((intersection = getIntersect(line, 1, y1))) {
ret = intersection;
}
else if ((intersection = getIntersect(line, 1, y2))) {
ret = intersection;
}
return ret;
};
/**
* Take the rotation options and returns the appropriate projection
* functions.
* @private
*/
Projection.prototype.getRotator = function (rotation) {
var deltaLambda = rotation[0] * Projection_deg2rad,
deltaPhi = (rotation[1] || 0) * Projection_deg2rad,
deltaGamma = (rotation[2] || 0) * Projection_deg2rad;
var cosDeltaPhi = Math.cos(deltaPhi),
sinDeltaPhi = Math.sin(deltaPhi),
cosDeltaGamma = Math.cos(deltaGamma),
sinDeltaGamma = Math.sin(deltaGamma);
if (deltaLambda === 0 && deltaPhi === 0 && deltaGamma === 0) {
// Don't waste processing time
return;
}
return {
forward: function (lonLat) {
// Lambda (lon) rotation
var lon = lonLat[0] * Projection_deg2rad + deltaLambda;
// Phi (lat) and gamma rotation
var lat = lonLat[1] * Projection_deg2rad,
cosLat = Math.cos(lat),
x = Math.cos(lon) * cosLat,
y = Math.sin(lon) * cosLat,
sinLat = Math.sin(lat),
k = sinLat * cosDeltaPhi + x * sinDeltaPhi;
return [
Math.atan2(y * cosDeltaGamma - k * sinDeltaGamma, x * cosDeltaPhi - sinLat * sinDeltaPhi) / Projection_deg2rad,
Math.asin(k * cosDeltaGamma + y * sinDeltaGamma) / Projection_deg2rad
];
},
inverse: function (rLonLat) {
// Lambda (lon) unrotation
var lon = rLonLat[0] * Projection_deg2rad;
// Phi (lat) and gamma unrotation
var lat = rLonLat[1] * Projection_deg2rad,
cosLat = Math.cos(lat),
x = Math.cos(lon) * cosLat,
y = Math.sin(lon) * cosLat,
sinLat = Math.sin(lat),
k = sinLat * cosDeltaGamma - y * sinDeltaGamma;
return [
(Math.atan2(y * cosDeltaGamma + sinLat * sinDeltaGamma, x * cosDeltaPhi + k * sinDeltaPhi) - deltaLambda) / Projection_deg2rad,
Math.asin(k * cosDeltaPhi - x * sinDeltaPhi) / Projection_deg2rad
];
}
};
};
/**
* Project a lonlat coordinate position to xy. Dynamically overridden when
* projection is set.
* @private
*/
Projection.prototype.forward = function (lonLat) {
return lonLat;
};
/**
* Unproject an xy chart coordinate position to lonlat. Dynamically
* overridden when projection is set.
* @private
*/
Projection.prototype.inverse = function (xy) {
return xy;
};
Projection.prototype.cutOnAntimeridian = function (poly, isPolygon) {
var antimeridian = 180,
intersections = [];
var polygons = [poly];
for (var i = 0, iEnd = poly.length; i < iEnd; ++i) {
var lonLat = poly[i];
var previousLonLat = poly[i - 1];
if (!i) {
if (!isPolygon) {
continue;
}
// Else, wrap to beginning
previousLonLat = poly[poly.length - 1];
}
var lon1 = previousLonLat[0],
lon2 = lonLat[0];
if (
// Both points, after rotating for antimeridian, are on the far
// side of the Earth
(lon1 < -90 || lon1 > 90) &&
(lon2 < -90 || lon2 > 90) &&
// ... and on either side of the plane
(lon1 > 0) !== (lon2 > 0)) {
// Interpolate to the intersection latitude
var fraction = Projection_clamp((antimeridian - (lon1 + 360) % 360) /
((lon2 + 360) % 360 - (lon1 + 360) % 360), 0, 1),
lat = (previousLonLat[1] +
fraction * (lonLat[1] - previousLonLat[1]));
intersections.push({
i: i,
lat: lat,
direction: lon1 < 0 ? 1 : -1,
previousLonLat: previousLonLat,
lonLat: lonLat
});
}
}
var polarIntersection;
if (intersections.length) {
if (isPolygon) {
// Simplified use of the even-odd rule, if there is an odd
// amount of intersections between the polygon and the
// antimeridian, the pole is inside the polygon. Applies
// primarily to Antarctica.
if (intersections.length % 2 === 1) {
polarIntersection = intersections.slice().sort(function (a, b) { return Math.abs(b.lat) - Math.abs(a.lat); })[0];
Projection_erase(intersections, polarIntersection);
}
// Pull out slices of the polygon that is on the opposite side
// of the antimeridian compared to the starting point
var i = intersections.length - 2;
while (i >= 0) {
var index = intersections[i].i;
var lonPlus = wrapLon(antimeridian +
intersections[i].direction * floatCorrection);
var lonMinus = wrapLon(antimeridian -
intersections[i].direction * floatCorrection);
var slice = poly.splice.apply(poly,
Projection_spreadArray([index,
intersections[i + 1].i - index],
Projection.geodesic([lonPlus,
intersections[i].lat],
[lonPlus,
intersections[i + 1].lat],
true),
false));
// Add interpolated points close to the cut
slice.push.apply(slice, Projection.geodesic([lonMinus, intersections[i + 1].lat], [lonMinus, intersections[i].lat], true));
polygons.push(slice);
i -= 2;
}
// Insert dummy points close to the pole
if (polarIntersection) {
for (var i_1 = 0; i_1 < polygons.length; i_1++) {
var direction = polarIntersection.direction,
lat = polarIntersection.lat,
poly_1 = polygons[i_1],
indexOf = poly_1.indexOf(polarIntersection.lonLat);
if (indexOf > -1) {
var polarLatitude = (lat < 0 ? -1 : 1) *
this.maxLatitude;
var lon1 = wrapLon(antimeridian +
direction * floatCorrection);
var lon2 = wrapLon(antimeridian -
direction * floatCorrection);
var polarSegment = Projection.geodesic([lon1,
lat],
[lon1,
polarLatitude],
true);
// Circle around the pole point in order to make
// polygon clipping right. Without this, Antarctica
// would wrap the wrong way in an LLC projection
// with parallels [30, 40].
for (var lon = lon1 + 120 * direction; lon > -180 && lon < 180; lon += 120 * direction) {
polarSegment.push([lon, polarLatitude]);
}
polarSegment.push.apply(polarSegment, Projection.geodesic([lon2, polarLatitude], [lon2, polarIntersection.lat], true));
poly_1.splice.apply(poly_1, Projection_spreadArray([indexOf,
0], polarSegment, false));
break;
}
}
}
// Map lines, not closed
}
else {
var i = intersections.length;
while (i--) {
var index = intersections[i].i;
var slice = poly.splice(index,
poly.length,
// Add interpolated point close to the cut
[
wrapLon(antimeridian +
intersections[i].direction * floatCorrection),
intersections[i].lat
]);
// Add interpolated point close to the cut
slice.unshift([
wrapLon(antimeridian -
intersections[i].direction * floatCorrection),
intersections[i].lat
]);
polygons.push(slice);
}
}
}
return polygons;
};
/**
* Take a GeoJSON geometry and return a translated SVGPath.
* @private
*/
Projection.prototype.path = function (geometry) {
var _this = this;
var _a = this,
bounds = _a.bounds,
def = _a.def,
rotator = _a.rotator;
var antimeridian = 180;
var path = [];
var isPolygon = geometry.type === 'Polygon' ||
geometry.type === 'MultiPolygon';
// @todo: It doesn't really have to do with whether north is
// positive. It depends on whether the coordinates are
// pre-projected.
var hasGeoProjection = this.hasGeoProjection;
// Detect whether we need to do antimeridian cutting and clipping to
// bounds. The alternative (currently for Orthographic) is to apply a
// clip angle.
var projectingToPlane = !def || def.antimeridianCutting !== false;
// We need to rotate in a separate step before applying antimeridian
// cutting
var preclip = projectingToPlane ? rotator : void 0;
var postclip = projectingToPlane ? (def || this) : this;
var boundsPolygon;
if (bounds) {
boundsPolygon = [
[bounds.x1, bounds.y1],
[bounds.x2, bounds.y1],
[bounds.x2, bounds.y2],
[bounds.x1, bounds.y2]
];
}
var addToPath = function (polygon) {
// Create a copy of the original coordinates. The copy applies a
// correction of points close to the antimeridian in order to
// prevent the points to be projected to the wrong side of the
// plane. Float errors in topojson or in the projection may cause
// that.
var poly = polygon.map(function (lonLat) {
if (projectingToPlane) {
if (preclip) {
lonLat = preclip.forward(lonLat);
}
var lon = lonLat[0];
if (Math.abs(lon - antimeridian) < floatCorrection) {
if (lon < antimeridian) {
lon = antimeridian - floatCorrection;
}
else {
lon = antimeridian + floatCorrection;
}
}
lonLat = [lon, lonLat[1]];
}
return lonLat;
});
var polygons = [poly];
if (hasGeoProjection) {
// Insert great circles into long straight lines
Projection.insertGeodesics(poly);
if (projectingToPlane) {
polygons = _this.cutOnAntimeridian(poly, isPolygon);
}
}
polygons.forEach(function (poly) {
if (poly.length < 2) {
return;
}
var movedTo = false;
var firstValidLonLat;
var lastValidLonLat;
var gap = false;
var pushToPath = function (point) {
if (!movedTo) {
path.push(['M',
point[0],
point[1]]);
movedTo = true;
}
else {
path.push(['L', point[0], point[1]]);
}
};
var someOutside = false,
someInside = false;
var points = poly.map(function (lonLat) {
var xy = postclip.forward(lonLat);
if (xy.outside) {
someOutside = true;
}
else {
someInside = true;
}
// Mercator projects pole points to Infinity, and
// clipPolygon is not able to handle it.
if (xy[1] === Infinity) {
xy[1] = 10e9;
}
else if (xy[1] === -Infinity) {
xy[1] = -10e9;
}
return xy;
});
if (projectingToPlane) {
// Wrap around in order for pointInPolygon to work
if (isPolygon) {
points.push(points[0]);
}
if (someOutside) {
// All points are outside
if (!someInside) {
return;
}
// Some inside, some outside. Clip to the bounds.
if (boundsPolygon) {
// Polygons
if (isPolygon) {
points = Projection_clipPolygon(points, boundsPolygon);
// Linestrings
}
else if (bounds) {
Projection_clipLineString(points, boundsPolygon)
.forEach(function (points) {
movedTo = false;
points.forEach(pushToPath);
});
return;
}
}
}
points.forEach(pushToPath);
// For orthographic projection, or when a clipAngle applies
}
else {
for (var i = 0; i < points.length; i++) {
var lonLat = poly[i],
point = points[i];
if (!point.outside) {
// In order to be able to interpolate if the first
// or last point is invalid (on the far side of the
// globe in an orthographic projection), we need to
// push the first valid point to the end of the
// polygon.
if (isPolygon && !firstValidLonLat) {
firstValidLonLat = lonLat;
poly.push(lonLat);
points.push(point);
}
// When entering the first valid point after a gap
// of invalid points, typically on the far side of
// the globe in an orthographic projection.
if (gap && lastValidLonLat) {
// For areas, in an orthographic projection, the
// great circle between two visible points will
// be close to the horizon. A possible exception
// may be when the two points are on opposite
// sides of the globe. It that poses a problem,
// we may have to rewrite this to use the small
// circle related to the current lon0 and lat0.
if (isPolygon && hasGeoProjection) {
var geodesic = Projection.geodesic(lastValidLonLat,
lonLat);
geodesic.forEach(function (lonLat) {
return pushToPath(postclip.forward(lonLat));
});
// For lines, just jump over the gap
}
else {
movedTo = false;
}
}
pushToPath(point);
lastValidLonLat = lonLat;
gap = false;
}
else {
gap = true;
}
}
}
});
};
if (geometry.type === 'LineString') {
addToPath(geometry.coordinates);
}
else if (geometry.type === 'MultiLineString') {
geometry.coordinates.forEach(function (c) { return addToPath(c); });
}
else if (geometry.type === 'Polygon') {
geometry.coordinates.forEach(function (c) { return addToPath(c); });
if (path.length) {
path.push(['Z']);
}
}
else if (geometry.type === 'MultiPolygon') {
geometry.coordinates.forEach(function (polygons) {
polygons.forEach(function (c) { return addToPath(c); });
});
if (path.length) {
path.push(['Z']);
}
}
return path;
};
/* *
*
* Static Properties
*
* */
Projection.registry = ProjectionRegistry;
return Projection;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Maps_Projection = (Projection);
;// ./code/es5/es-modules/Maps/MapView.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapView_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapView_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var MapView_composed = Core_Globals.composed;
var MapView_pointInPolygon = Geometry_GeometryUtilities.pointInPolygon;
var topo2geo = Maps_GeoJSONComposition.topo2geo;
var MapView_boundsFromPath = Maps_MapUtilities.boundsFromPath;
var MapView_addEvent = Core_Utilities.addEvent, MapView_clamp = Core_Utilities.clamp, MapView_crisp = Core_Utilities.crisp, MapView_fireEvent = Core_Utilities.fireEvent, MapView_isArray = Core_Utilities.isArray, MapView_isNumber = Core_Utilities.isNumber, MapView_isObject = Core_Utilities.isObject, MapView_isString = Core_Utilities.isString, MapView_merge = Core_Utilities.merge, MapView_pick = Core_Utilities.pick, MapView_pushUnique = Core_Utilities.pushUnique, MapView_relativeLength = Core_Utilities.relativeLength;
/* *
*
* Constants
*
* */
var tileSize = 256;
/**
* The world size in terms of 10k meters in the Web Mercator projection, to
* match a 256 square tile to zoom level 0.
* @private
*/
var worldSize = 400.979322;
/* *
*
* Variables
*
* */
var maps = {};
/* *
*
* Functions
*
* */
/**
* Compute the zoom from given bounds and the size of the playing field. Used in
* two places, hence the local function.
* @private
*/
function zoomFromBounds(b, playingField) {
var width = playingField.width, height = playingField.height, scaleToField = Math.max((b.x2 - b.x1) / (width / tileSize), (b.y2 - b.y1) / (height / tileSize));
return Math.log(worldSize / scaleToField) / Math.log(2);
}
/**
* Calculate and set the recommended map view drilldown or drillup if mapData
* is set for the series.
* @private
*/
function recommendedMapViewAfterDrill(e) {
var _a,
_b;
if (e.seriesOptions.mapData) {
(_a = this.mapView) === null || _a === void 0 ? void 0 : _a.recommendMapView(this, [
this.options.chart.map,
e.seriesOptions.mapData
], (_b = this.options.drilldown) === null || _b === void 0 ? void 0 : _b.mapZooming);
}
}
/*
Const mergeCollections = <
T extends Array<AnyRecord|undefined>
>(a: T, b: T): T => {
b.forEach((newer, i): void => {
// Only merge by id supported for now. We may consider later to support
// more complex rules like those of `Chart.update` with `oneToOne`, but
// it is probably not needed. Existing insets can be disabled by
// overwriting the `geoBounds` with empty data.
if (newer && isString(newer.id)) {
const older = U.find(
a,
(aItem): boolean => (aItem && aItem.id) === newer.id
);
if (older) {
const aIndex = a.indexOf(older);
a[aIndex] = merge(older, newer);
}
}
});
return a;
};
*/
/* *
*
* Classes
*
* */
/**
* The map view handles zooming and centering on the map, and various
* client-side projection capabilities.
*
* On a chart instance of `MapChart`, the map view is available as `chart.mapView`.
*
* @class
* @name Highcharts.MapView
*
* @param {Highcharts.MapChart} chart
* The MapChart instance
* @param {Highcharts.MapViewOptions} options
* MapView options
*/
var MapView = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function MapView(chart, options) {
var _this = this;
var _a;
/* *
*
* Properties
*
* */
this.allowTransformAnimation = true;
this.eventsToUnbind = [];
this.insets = [];
this.padding = [0, 0, 0, 0];
this.recommendedMapView = {};
if (!(this instanceof MapViewInset)) {
this.recommendMapView(chart, MapView_spreadArray([
chart.options.chart.map
], (chart.options.series || []).map(function (s) { return s.mapData; }), true));
}
this.userOptions = options || {};
var o = MapView_merge(Maps_MapViewDefaults,
this.recommendedMapView,
options);
// Merge the inset collections by id, or index if id missing
var recInsets = (_a = this.recommendedMapView) === null || _a === void 0 ? void 0 : _a.insets,
optInsets = options && options.insets;
if (recInsets && optInsets) {
o.insets = MapView.mergeInsets(recInsets, optInsets);
}
this.chart = chart;
/**
* The current center of the view in terms of `[longitude, latitude]`.
* @name Highcharts.MapView#center
* @readonly
* @type {LonLatArray}
*/
this.center = o.center;
this.options = o;
this.projection = new Maps_Projection(o.projection);
// Initialize with full plot box so we don't have to check for undefined
// every time we use it
this.playingField = chart.plotBox;
/**
* The current zoom level of the view.
* @name Highcharts.MapView#zoom
* @readonly
* @type {number}
*/
this.zoom = o.zoom || 0;
this.minZoom = o.minZoom;
// Create the insets
this.createInsets();
// Initialize and respond to chart size changes
this.eventsToUnbind.push(MapView_addEvent(chart, 'afterSetChartSize', function () {
_this.playingField = _this.getField();
if (_this.minZoom === void 0 || // When initializing the chart
_this.minZoom === _this.zoom // When resizing the chart
) {
_this.fitToBounds(void 0, void 0, false);
if (
// Set zoom only when initializing the chart
// (do not overwrite when zooming in/out, #17082)
!_this.chart.hasRendered &&
MapView_isNumber(_this.userOptions.zoom)) {
_this.zoom = _this.userOptions.zoom;
}
if (_this.userOptions.center) {
MapView_merge(true, _this.center, _this.userOptions.center);
}
}
}));
this.setUpEvents();
}
/* *
*
* Static Functions
*
* */
MapView.compose = function (MapChartClass) {
if (MapView_pushUnique(MapView_composed, 'MapView')) {
maps = MapChartClass.maps;
// Initialize MapView after initialization, but before firstRender
MapView_addEvent(MapChartClass, 'afterInit', function () {
/**
* The map view handles zooming and centering on the map, and
* various client-side projection capabilities.
*
* @name Highcharts.MapChart#mapView
* @type {Highcharts.MapView|undefined}
*/
this.mapView = new MapView(this, this.options.mapView);
}, { order: 0 });
MapView_addEvent(MapChartClass, 'addSeriesAsDrilldown', recommendedMapViewAfterDrill);
MapView_addEvent(MapChartClass, 'afterDrillUp', recommendedMapViewAfterDrill);
}
};
/**
* Return the composite bounding box of a collection of bounding boxes
* @private
*/
MapView.compositeBounds = function (arrayOfBounds) {
if (arrayOfBounds.length) {
return arrayOfBounds
.slice(1)
.reduce(function (acc, cur) {
acc.x1 = Math.min(acc.x1, cur.x1);
acc.y1 = Math.min(acc.y1, cur.y1);
acc.x2 = Math.max(acc.x2, cur.x2);
acc.y2 = Math.max(acc.y2, cur.y2);
return acc;
}, MapView_merge(arrayOfBounds[0]));
}
return;
};
/**
* Merge two collections of insets by the id.
* @private
*/
MapView.mergeInsets = function (a, b) {
var toObject = function (insets) {
var ob = {};
insets.forEach(function (inset, i) {
ob[inset && inset.id || "i".concat(i)] = inset;
});
return ob;
};
var insetsObj = MapView_merge(toObject(a),
toObject(b)),
insets = Object
.keys(insetsObj)
.map(function (key) { return insetsObj[key]; });
return insets;
};
/* *
*
* Functions
*
* */
/**
* Create MapViewInset instances from insets options
* @private
*/
MapView.prototype.createInsets = function () {
var _this = this;
var options = this.options,
insets = options.insets;
if (insets) {
insets.forEach(function (item) {
var inset = new MapViewInset(_this,
MapView_merge(options.insetOptions,
item));
_this.insets.push(inset);
});
}
};
/**
* Fit the view to given bounds
*
* @function Highcharts.MapView#fitToBounds
* @param {Object} bounds
* Bounds in terms of projected units given as `{ x1, y1, x2, y2 }`.
* If not set, fit to the bounds of the current data set
* @param {number|string} [padding=0]
* Padding inside the bounds. A number signifies pixels, while a
* percentage string (like `5%`) can be used as a fraction of the
* plot area size.
* @param {boolean} [redraw=true]
* Whether to redraw the chart immediately
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* What animation to use for redraw
*/
MapView.prototype.fitToBounds = function (bounds, padding, redraw, animation) {
if (redraw === void 0) { redraw = true; }
var b = bounds || this.getProjectedBounds();
if (b) {
var pad = MapView_pick(padding,
bounds ? 0 : this.options.padding),
fullField = this.getField(false),
padArr = MapView_isArray(pad) ? pad : [pad,
pad,
pad,
pad];
this.padding = [
MapView_relativeLength(padArr[0], fullField.height),
MapView_relativeLength(padArr[1], fullField.width),
MapView_relativeLength(padArr[2], fullField.height),
MapView_relativeLength(padArr[3], fullField.width)
];
// Apply the playing field, corrected with padding
this.playingField = this.getField();
var zoom = zoomFromBounds(b,
this.playingField);
// Reset minZoom when fitting to natural bounds
if (!bounds) {
this.minZoom = zoom;
}
var center = this.projection.inverse([
(b.x2 + b.x1) / 2,
(b.y2 + b.y1) / 2
]);
this.setView(center, zoom, redraw, animation);
}
};
MapView.prototype.getField = function (padded) {
if (padded === void 0) { padded = true; }
var padding = padded ? this.padding : [0, 0, 0, 0];
return {
x: padding[3],
y: padding[0],
width: this.chart.plotWidth - padding[1] - padding[3],
height: this.chart.plotHeight - padding[0] - padding[2]
};
};
MapView.prototype.getGeoMap = function (map) {
if (MapView_isString(map)) {
if (maps[map] && maps[map].type === 'Topology') {
return topo2geo(maps[map]);
}
return maps[map];
}
if (MapView_isObject(map, true)) {
if (map.type === 'FeatureCollection') {
return map;
}
if (map.type === 'Topology') {
return topo2geo(map);
}
}
};
MapView.prototype.getMapBBox = function () {
var bounds = this.getProjectedBounds(),
scale = this.getScale();
if (bounds) {
var padding = this.padding,
p1 = this.projectedUnitsToPixels({
x: bounds.x1,
y: bounds.y2
}),
width = ((bounds.x2 - bounds.x1) * scale +
padding[1] + padding[3]),
height = ((bounds.y2 - bounds.y1) * scale +
padding[0] + padding[2]);
return {
width: width,
height: height,
x: p1.x - padding[3],
y: p1.y - padding[0]
};
}
};
MapView.prototype.getProjectedBounds = function () {
var projection = this.projection;
var allBounds = this.chart.series.reduce(function (acc,
s) {
var bounds = s.getProjectedBounds && s.getProjectedBounds();
if (bounds &&
s.options.affectsMapView !== false) {
acc.push(bounds);
}
return acc;
}, []);
// The bounds option
var fitToGeometry = this.options.fitToGeometry;
if (fitToGeometry) {
if (!this.fitToGeometryCache) {
if (fitToGeometry.type === 'MultiPoint') {
var positions = fitToGeometry.coordinates
.map(function (lonLat) {
return projection.forward(lonLat);
}), xs = positions.map(function (pos) { return pos[0]; }), ys = positions.map(function (pos) { return pos[1]; });
this.fitToGeometryCache = {
x1: Math.min.apply(0, xs),
x2: Math.max.apply(0, xs),
y1: Math.min.apply(0, ys),
y2: Math.max.apply(0, ys)
};
}
else {
this.fitToGeometryCache = MapView_boundsFromPath(projection.path(fitToGeometry));
}
}
return this.fitToGeometryCache;
}
return this.projection.bounds || MapView.compositeBounds(allBounds);
};
MapView.prototype.getScale = function () {
// A zoom of 0 means the world (360x360 degrees) fits in a 256x256 px
// tile
return (tileSize / worldSize) * Math.pow(2, this.zoom);
};
// Calculate the SVG transform to be applied to series groups
MapView.prototype.getSVGTransform = function () {
var _a = this.playingField, x = _a.x, y = _a.y, width = _a.width, height = _a.height, projectedCenter = this.projection.forward(this.center), flipFactor = this.projection.hasCoordinates ? -1 : 1, scaleX = this.getScale(), scaleY = scaleX * flipFactor, translateX = x + width / 2 - projectedCenter[0] * scaleX, translateY = y + height / 2 - projectedCenter[1] * scaleY;
return { scaleX: scaleX, scaleY: scaleY, translateX: translateX, translateY: translateY };
};
/**
* Convert map coordinates in longitude/latitude to pixels
*
* @function Highcharts.MapView#lonLatToPixels
* @since 10.0.0
* @param {Highcharts.MapLonLatObject} lonLat
* The map coordinates
* @return {Highcharts.PositionObject|undefined}
* The pixel position
*/
MapView.prototype.lonLatToPixels = function (lonLat) {
var pos = this.lonLatToProjectedUnits(lonLat);
if (pos) {
return this.projectedUnitsToPixels(pos);
}
};
/**
* Get projected units from longitude/latitude. Insets are accounted for.
* Returns an object with x and y values corresponding to positions on the
* projected plane.
*
* @requires modules/map
*
* @function Highcharts.MapView#lonLatToProjectedUnits
*
* @since 10.0.0
* @sample maps/series/latlon-to-point/ Find a point from lon/lat
*
* @param {Highcharts.MapLonLatObject} lonLat Coordinates.
*
* @return {Highcharts.ProjectedXY} X and Y coordinates in terms of
* projected values
*/
MapView.prototype.lonLatToProjectedUnits = function (lonLat) {
var chart = this.chart,
mapTransforms = chart.mapTransforms;
// Legacy, built-in transforms
if (mapTransforms) {
for (var transform in mapTransforms) {
if (Object.hasOwnProperty.call(mapTransforms, transform) &&
mapTransforms[transform].hitZone) {
var coords = chart.transformFromLatLon(lonLat,
mapTransforms[transform]);
if (coords && MapView_pointInPolygon(coords, mapTransforms[transform].hitZone.coordinates[0])) {
return coords;
}
}
}
return chart.transformFromLatLon(lonLat, mapTransforms['default'] // eslint-disable-line dot-notation
);
}
// Handle insets
for (var _i = 0, _a = this.insets; _i < _a.length; _i++) {
var inset = _a[_i];
if (inset.options.geoBounds &&
MapView_pointInPolygon({ x: lonLat.lon, y: lonLat.lat }, inset.options.geoBounds.coordinates[0])) {
var insetProjectedPoint = inset.projection.forward([lonLat.lon,
lonLat.lat]),
pxPoint = inset.projectedUnitsToPixels({ x: insetProjectedPoint[0],
y: insetProjectedPoint[1] });
return this.pixelsToProjectedUnits(pxPoint);
}
}
var point = this.projection.forward([lonLat.lon,
lonLat.lat]);
if (!point.outside) {
return { x: point[0], y: point[1] };
}
};
/**
* Calculate longitude/latitude values for a point or position. Returns an
* object with the numeric properties `lon` and `lat`.
*
* @requires modules/map
*
* @function Highcharts.MapView#projectedUnitsToLonLat
*
* @since 10.0.0
*
* @sample maps/demo/latlon-advanced/ Advanced lat/lon demo
*
* @param {Highcharts.Point|Highcharts.ProjectedXY} point
* A `Point` instance or anything containing `x` and `y` properties
* with numeric values.
*
* @return {Highcharts.MapLonLatObject|undefined} An object with `lat` and
* `lon` properties.
*/
MapView.prototype.projectedUnitsToLonLat = function (point) {
var chart = this.chart,
mapTransforms = chart.mapTransforms;
// Legacy, built-in transforms
if (mapTransforms) {
for (var transform in mapTransforms) {
if (Object.hasOwnProperty.call(mapTransforms, transform) &&
mapTransforms[transform].hitZone &&
MapView_pointInPolygon(point, mapTransforms[transform].hitZone.coordinates[0])) {
return chart.transformToLatLon(point, mapTransforms[transform]);
}
}
return chart.transformToLatLon(point, mapTransforms['default'] // eslint-disable-line dot-notation
);
}
var pxPoint = this.projectedUnitsToPixels(point);
for (var _i = 0, _a = this.insets; _i < _a.length; _i++) {
var inset = _a[_i];
if (inset.hitZone &&
MapView_pointInPolygon(pxPoint, inset.hitZone.coordinates[0])) {
var insetProjectedPoint = inset
.pixelsToProjectedUnits(pxPoint),
coordinates_1 = inset.projection.inverse([insetProjectedPoint.x,
insetProjectedPoint.y]);
return { lon: coordinates_1[0], lat: coordinates_1[1] };
}
}
var coordinates = this.projection.inverse([point.x,
point.y]);
return { lon: coordinates[0], lat: coordinates[1] };
};
/**
* Calculate and set the recommended map view based on provided map data
* from series.
*
* @requires modules/map
*
* @function Highcharts.MapView#recommendMapView
*
* @since 11.4.0
*
* @param {Highcharts.Chart} chart
* Chart object
*
* @param {Array<MapDataType | undefined>} mapDataArray
* Array of map data from all series.
*
* @param {boolean} [update=false]
* Whether to update the chart with recommended map view.
*
* @return {Highcharts.MapViewOptions|undefined} Best suitable map view.
*/
MapView.prototype.recommendMapView = function (chart, mapDataArray, update) {
var _this = this;
var _a;
if (update === void 0) { update = false; }
// Reset recommended map view
this.recommendedMapView = {};
// Handle the global map and series-level mapData
var geoMaps = mapDataArray.map(function (mapData) {
return _this.getGeoMap(mapData);
});
var allGeoBounds = [];
geoMaps.forEach(function (geoMap) {
if (geoMap) {
// Use the first geo map as main
if (!Object.keys(_this.recommendedMapView).length) {
_this.recommendedMapView =
geoMap['hc-recommended-mapview'] || {};
}
// Combine the bounding boxes of all loaded maps
if (geoMap.bbox) {
var _a = geoMap.bbox,
x1 = _a[0],
y1 = _a[1],
x2 = _a[2],
y2 = _a[3];
allGeoBounds.push({ x1: x1, y1: y1, x2: x2, y2: y2 });
}
}
});
// Get the composite bounds
var geoBounds = (allGeoBounds.length &&
MapView.compositeBounds(allGeoBounds));
// Provide a best-guess recommended projection if not set in
// the map or in user options
MapView_fireEvent(this, 'onRecommendMapView', {
geoBounds: geoBounds,
chart: chart
}, function () {
if (geoBounds &&
this.recommendedMapView) {
if (!this.recommendedMapView.projection) {
var x1 = geoBounds.x1,
y1 = geoBounds.y1,
x2 = geoBounds.x2,
y2 = geoBounds.y2;
this.recommendedMapView.projection =
(x2 - x1 > 180 && y2 - y1 > 90) ?
// Wide angle, go for the world view
{
name: 'EqualEarth',
parallels: [0, 0],
rotation: [0]
} :
// Narrower angle, use a projection better
// suited for local view
{
name: 'LambertConformalConic',
parallels: [y1, y2],
rotation: [-(x1 + x2) / 2]
};
}
if (!this.recommendedMapView.insets) {
this.recommendedMapView.insets = void 0; // Reset insets
}
}
});
// Register the main geo map (from options.chart.map) if set
this.geoMap = geoMaps[0];
if (update &&
chart.hasRendered &&
!((_a = chart.userOptions.mapView) === null || _a === void 0 ? void 0 : _a.projection) &&
this.recommendedMapView) {
this.update(this.recommendedMapView);
}
};
MapView.prototype.redraw = function (animation) {
this.chart.series.forEach(function (s) {
if (s.useMapGeometry) {
s.isDirty = true;
}
});
this.chart.redraw(animation);
};
/**
* Set the view to given center and zoom values.
* @function Highcharts.MapView#setView
* @param {Highcharts.LonLatArray|undefined} center
* The center point
* @param {number} zoom
* The zoom level
* @param {boolean} [redraw=true]
* Whether to redraw immediately
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* Animation options for the redraw
*
* @sample maps/mapview/setview
* Set the view programmatically
*/
MapView.prototype.setView = function (center, zoom, redraw, animation) {
if (redraw === void 0) { redraw = true; }
if (center) {
this.center = center;
}
if (typeof zoom === 'number') {
if (typeof this.minZoom === 'number') {
zoom = Math.max(zoom, this.minZoom);
}
if (typeof this.options.maxZoom === 'number') {
zoom = Math.min(zoom, this.options.maxZoom);
}
// Use isNumber to prevent Infinity (#17205)
if (MapView_isNumber(zoom)) {
this.zoom = zoom;
}
}
var bounds = this.getProjectedBounds();
if (bounds) {
var projectedCenter = this.projection.forward(this.center),
_a = this.playingField,
x = _a.x,
y = _a.y,
width = _a.width,
height = _a.height,
scale = this.getScale(),
bottomLeft = this.projectedUnitsToPixels({
x: bounds.x1,
y: bounds.y1
}),
topRight = this.projectedUnitsToPixels({
x: bounds.x2,
y: bounds.y2
}),
boundsCenterProjected = [
(bounds.x1 + bounds.x2) / 2,
(bounds.y1 + bounds.y2) / 2
],
isDrilling = this.chart.series.some(function (series) {
return series.isDrilling;
});
if (!isDrilling) {
// Constrain to data bounds
// Pixel coordinate system is reversed vs projected
var x1 = bottomLeft.x,
y1 = topRight.y,
x2 = topRight.x,
y2 = bottomLeft.y;
// Map smaller than plot area, center it
if (x2 - x1 < width) {
projectedCenter[0] = boundsCenterProjected[0];
// Off west
}
else if (x1 < x && x2 < x + width) {
// Adjust eastwards
projectedCenter[0] +=
Math.max(x1 - x, x2 - width - x) / scale;
// Off east
}
else if (x2 > x + width && x1 > x) {
// Adjust westwards
projectedCenter[0] +=
Math.min(x2 - width - x, x1 - x) / scale;
}
// Map smaller than plot area, center it
if (y2 - y1 < height) {
projectedCenter[1] = boundsCenterProjected[1];
// Off north
}
else if (y1 < y && y2 < y + height) {
// Adjust southwards
projectedCenter[1] -=
Math.max(y1 - y, y2 - height - y) / scale;
// Off south
}
else if (y2 > y + height && y1 > y) {
// Adjust northwards
projectedCenter[1] -=
Math.min(y2 - height - y, y1 - y) / scale;
}
this.center = this.projection.inverse(projectedCenter);
}
this.insets.forEach(function (inset) {
if (inset.options.field) {
inset.hitZone = inset.getHitZone();
inset.playingField = inset.getField();
}
});
this.render();
}
MapView_fireEvent(this, 'afterSetView');
if (redraw) {
this.redraw(animation);
}
};
/**
* Convert projected units to pixel position
*
* @function Highcharts.MapView#projectedUnitsToPixels
* @param {Highcharts.PositionObject} pos
* The position in projected units
* @return {Highcharts.PositionObject} The position in pixels
*/
MapView.prototype.projectedUnitsToPixels = function (pos) {
var scale = this.getScale(), projectedCenter = this.projection.forward(this.center), field = this.playingField, centerPxX = field.x + field.width / 2, centerPxY = field.y + field.height / 2;
var x = centerPxX - scale * (projectedCenter[0] - pos.x);
var y = centerPxY + scale * (projectedCenter[1] - pos.y);
return { x: x, y: y };
};
/**
* Convert pixel position to longitude and latitude.
*
* @function Highcharts.MapView#pixelsToLonLat
* @since 10.0.0
* @param {Highcharts.PositionObject} pos
* The position in pixels
* @return {Highcharts.MapLonLatObject|undefined}
* The map coordinates
*/
MapView.prototype.pixelsToLonLat = function (pos) {
return this.projectedUnitsToLonLat(this.pixelsToProjectedUnits(pos));
};
/**
* Convert pixel position to projected units
*
* @function Highcharts.MapView#pixelsToProjectedUnits
* @param {Highcharts.PositionObject} pos
* The position in pixels
* @return {Highcharts.PositionObject} The position in projected units
*/
MapView.prototype.pixelsToProjectedUnits = function (pos) {
var x = pos.x, y = pos.y, scale = this.getScale(), projectedCenter = this.projection.forward(this.center), field = this.playingField, centerPxX = field.x + field.width / 2, centerPxY = field.y + field.height / 2;
var projectedX = projectedCenter[0] + (x - centerPxX) / scale;
var projectedY = projectedCenter[1] - (y - centerPxY) / scale;
return { x: projectedX, y: projectedY };
};
MapView.prototype.setUpEvents = function () {
var _this = this;
var chart = this.chart;
// Set up panning and touch zoom for maps. In orthographic projections
// the globe will rotate, otherwise adjust the map center and zoom.
var mouseDownCenterProjected,
mouseDownKey,
mouseDownRotation;
var onPan = function (e) {
var _a = chart.pointer,
lastTouches = _a.lastTouches,
pinchDown = _a.pinchDown,
projection = _this.projection,
touches = e.touches;
var mouseDownX = chart.mouseDownX,
mouseDownY = chart.mouseDownY,
howMuch = 0;
if ((pinchDown === null || pinchDown === void 0 ? void 0 : pinchDown.length) === 1) {
mouseDownX = pinchDown[0].chartX;
mouseDownY = pinchDown[0].chartY;
}
else if ((pinchDown === null || pinchDown === void 0 ? void 0 : pinchDown.length) === 2) {
mouseDownX = (pinchDown[0].chartX + pinchDown[1].chartX) / 2;
mouseDownY = (pinchDown[0].chartY + pinchDown[1].chartY) / 2;
}
// How much has the distance between the fingers changed?
if ((touches === null || touches === void 0 ? void 0 : touches.length) === 2 && lastTouches) {
var startDistance = Math.sqrt(Math.pow(lastTouches[0].chartX - lastTouches[1].chartX, 2) +
Math.pow(lastTouches[0].chartY - lastTouches[1].chartY, 2)),
endDistance = Math.sqrt(Math.pow(touches[0].chartX - touches[1].chartX, 2) +
Math.pow(touches[0].chartY - touches[1].chartY, 2));
howMuch = Math.log(startDistance / endDistance) / Math.log(0.5);
}
if (MapView_isNumber(mouseDownX) && MapView_isNumber(mouseDownY)) {
var key = "" + mouseDownX + ",".concat(mouseDownY);
var _b = e.originalEvent,
chartX = _b.chartX,
chartY = _b.chartY;
if ((touches === null || touches === void 0 ? void 0 : touches.length) === 2) {
chartX = (touches[0].chartX + touches[1].chartX) / 2;
chartY = (touches[0].chartY + touches[1].chartY) / 2;
}
// Reset starting position
if (key !== mouseDownKey) {
mouseDownKey = key;
mouseDownCenterProjected = _this.projection
.forward(_this.center);
mouseDownRotation = (_this.projection.options.rotation || [0, 0]).slice();
}
// Get the natural zoom level of the projection itself when
// zoomed to view the full world
var worldBounds = projection.def && projection.def.bounds,
worldZoom = (worldBounds &&
zoomFromBounds(worldBounds,
_this.playingField)) || -Infinity;
// Panning rotates the globe
if (projection.options.name === 'Orthographic' &&
((touches === null || touches === void 0 ? void 0 : touches.length) || 0) < 2 &&
// ... but don't rotate if we're loading only a part of the
// world
(_this.minZoom || Infinity) < worldZoom * 1.3) {
// Empirical ratio where the globe rotates roughly the same
// speed as moving the pointer across the center of the
// projection
var ratio = 440 / (_this.getScale() * Math.min(chart.plotWidth,
chart.plotHeight));
if (mouseDownRotation) {
var lon = (mouseDownX - chartX) * ratio -
mouseDownRotation[0],
lat = MapView_clamp(-mouseDownRotation[1] -
(mouseDownY - chartY) * ratio, -80, 80),
zoom = _this.zoom;
_this.update({
projection: {
rotation: [-lon, -lat]
}
}, false);
_this.fitToBounds(void 0, void 0, false);
_this.zoom = zoom;
chart.redraw(false);
}
// #17925 Skip NaN values
}
else if (MapView_isNumber(chartX) && MapView_isNumber(chartY)) {
// #17238
var scale = _this.getScale(),
flipFactor = _this.projection.hasCoordinates ? 1 : -1;
var newCenter = _this.projection.inverse([
mouseDownCenterProjected[0] +
(mouseDownX - chartX) / scale,
mouseDownCenterProjected[1] -
(mouseDownY - chartY) / scale * flipFactor
]);
// #19190 Skip NaN coords
if (!isNaN(newCenter[0] + newCenter[1])) {
_this.zoomBy(howMuch, newCenter, void 0, false);
}
}
e.preventDefault();
}
};
MapView_addEvent(chart, 'pan', onPan);
MapView_addEvent(chart, 'touchpan', onPan);
// Perform the map zoom by selection
MapView_addEvent(chart, 'selection', function (evt) {
// Zoom in
if (!evt.resetSelection) {
var x = evt.x - chart.plotLeft;
var y = evt.y - chart.plotTop;
var _a = _this.pixelsToProjectedUnits({ x: x,
y: y }),
y1 = _a.y,
x1 = _a.x;
var _b = _this.pixelsToProjectedUnits({ x: x + evt.width,
y: y + evt.height }),
y2 = _b.y,
x2 = _b.x;
_this.fitToBounds({ x1: x1, y1: y1, x2: x2, y2: y2 }, void 0, true, evt.originalEvent.touches ?
// On touch zoom, don't animate, since we're already in
// transformed zoom preview
false :
// On mouse zoom, obey the chart-level animation
void 0);
// Only for mouse. Touch users can pinch out.
if (!/^touch/.test((evt.originalEvent.type))) {
chart.showResetZoom();
}
evt.preventDefault();
// Reset zoom
}
else {
_this.zoomBy();
}
});
};
MapView.prototype.render = function () {
// We need a group for the insets
if (!this.group) {
this.group = this.chart.renderer.g('map-view')
.attr({ zIndex: 4 })
.add();
}
};
/**
* Update the view with given options
*
* @function Highcharts.MapView#update
*
* @param {Partial<Highcharts.MapViewOptions>} options
* The new map view options to apply
* @param {boolean} [redraw=true]
* Whether to redraw immediately
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* The animation to apply to a the redraw
*/
MapView.prototype.update = function (options, redraw, animation) {
if (redraw === void 0) { redraw = true; }
var newProjection = options.projection,
isDirtyProjection = newProjection && ((Maps_Projection.toString(newProjection) !==
Maps_Projection.toString(this.options.projection)));
var isDirtyInsets = false;
MapView_merge(true, this.userOptions, options);
MapView_merge(true, this.options, options);
// If anything changed with the insets, destroy them all and create
// again below
if ('insets' in options) {
this.insets.forEach(function (inset) { return inset.destroy(); });
this.insets.length = 0;
isDirtyInsets = true;
}
if (isDirtyProjection || 'fitToGeometry' in options) {
delete this.fitToGeometryCache;
}
if (isDirtyProjection || isDirtyInsets) {
this.chart.series.forEach(function (series) {
var groups = series.transformGroups;
if (series.clearBounds) {
series.clearBounds();
}
series.isDirty = true;
series.isDirtyData = true;
// Destroy inset transform groups
if (isDirtyInsets && groups) {
while (groups.length > 1) {
var group = groups.pop();
if (group) {
group.destroy();
}
}
}
});
if (isDirtyProjection) {
this.projection = new Maps_Projection(this.options.projection);
}
// Create new insets
if (isDirtyInsets) {
this.createInsets();
}
// Fit to natural bounds if center/zoom are not explicitly given
if (!options.center &&
// Do not fire fitToBounds if user don't want to set zoom
Object.hasOwnProperty.call(options, 'zoom') &&
!MapView_isNumber(options.zoom)) {
this.fitToBounds(void 0, void 0, false);
}
}
if (options.center || MapView_isNumber(options.zoom)) {
this.setView(this.options.center, options.zoom, false);
}
else if ('fitToGeometry' in options) {
this.fitToBounds(void 0, void 0, false);
}
if (redraw) {
this.chart.redraw(animation);
}
};
/**
* Zoom the map view by a given number
*
* @function Highcharts.MapView#zoomBy
*
* @param {number|undefined} [howMuch]
* The amount of zoom to apply. 1 zooms in on half the current view,
* -1 zooms out. Pass `undefined` to zoom to the full bounds of the
* map.
* @param {Highcharts.LonLatArray} [coords]
* Optional map coordinates to keep fixed
* @param {Array<number>} [chartCoords]
* Optional chart coordinates to keep fixed, in pixels
* @param {boolean|Partial<Highcharts.AnimationOptionsObject>} [animation]
* The animation to apply to a the redraw
*/
MapView.prototype.zoomBy = function (howMuch, coords, chartCoords, animation) {
var chart = this.chart,
projectedCenter = this.projection.forward(this.center);
if (typeof howMuch === 'number') {
var zoom = this.zoom + howMuch;
var center = void 0,
x = void 0,
y = void 0;
// Keep chartX and chartY stationary - convert to lat and lng
if (chartCoords) {
var chartX = chartCoords[0],
chartY = chartCoords[1];
var scale = this.getScale();
var offsetX = chartX - chart.plotLeft - chart.plotWidth / 2;
var offsetY = chartY - chart.plotTop - chart.plotHeight / 2;
x = projectedCenter[0] + offsetX / scale;
y = projectedCenter[1] + offsetY / scale;
}
// Keep lon and lat stationary by adjusting the center
if (typeof x === 'number' && typeof y === 'number') {
var scale = 1 - Math.pow(2,
this.zoom) / Math.pow(2,
zoom);
var offsetX = projectedCenter[0] - x;
var offsetY = projectedCenter[1] - y;
projectedCenter[0] -= offsetX * scale;
projectedCenter[1] += offsetY * scale;
center = this.projection.inverse(projectedCenter);
}
this.setView(coords || center, zoom, void 0, animation);
// Undefined howMuch => reset zoom
}
else {
this.fitToBounds(void 0, void 0, void 0, animation);
}
};
return MapView;
}());
// Putting this in the same file due to circular dependency with MapView
var MapViewInset = /** @class */ (function (_super) {
MapView_extends(MapViewInset, _super);
/* *
*
* Constructor
*
* */
function MapViewInset(mapView, options) {
var _this = _super.call(this,
mapView.chart,
options) || this;
_this.id = options.id;
_this.mapView = mapView;
_this.options = MapView_merge({ center: [0, 0] }, mapView.options.insetOptions, options);
_this.allBounds = [];
if (_this.options.geoBounds) {
// The path in projected units in the map view's main projection.
// This is used for hit testing where the points should render.
var path = mapView.projection.path(_this.options.geoBounds);
_this.geoBoundsProjectedBox = MapView_boundsFromPath(path);
_this.geoBoundsProjectedPolygon = path.map(function (segment) { return [
segment[1] || 0,
segment[2] || 0
]; });
}
return _this;
}
/* *
*
* Functions
*
* */
/**
* Get the playing field in pixels
* @private
*/
MapViewInset.prototype.getField = function (padded) {
if (padded === void 0) { padded = true; }
var hitZone = this.hitZone;
if (hitZone) {
var padding = padded ? this.padding : [0, 0, 0, 0],
polygon = hitZone.coordinates[0],
xs = polygon.map(function (xy) { return xy[0]; }),
ys = polygon.map(function (xy) { return xy[1]; }),
x = Math.min.apply(0,
xs) + padding[3],
x2 = Math.max.apply(0,
xs) - padding[1],
y = Math.min.apply(0,
ys) + padding[0],
y2 = Math.max.apply(0,
ys) - padding[2];
if (MapView_isNumber(x) && MapView_isNumber(y)) {
return {
x: x,
y: y,
width: x2 - x,
height: y2 - y
};
}
}
// Fall back to plot area
return _super.prototype.getField.call(this, padded);
};
/**
* Get the hit zone in pixels.
* @private
*/
MapViewInset.prototype.getHitZone = function () {
var _a = this,
chart = _a.chart,
mapView = _a.mapView,
options = _a.options,
coordinates = (options.field || {}).coordinates;
if (coordinates) {
var polygon = coordinates[0];
if (options.units === 'percent') {
var relativeTo_1 = options.relativeTo === 'mapBoundingBox' &&
mapView.getMapBBox() ||
MapView_merge(chart.plotBox, { x: 0,
y: 0 });
polygon = polygon.map(function (xy) { return [
MapView_relativeLength("" + xy[0] + "%", relativeTo_1.width, relativeTo_1.x),
MapView_relativeLength("" + xy[1] + "%", relativeTo_1.height, relativeTo_1.y)
]; });
}
return {
type: 'Polygon',
coordinates: [polygon]
};
}
};
MapViewInset.prototype.getProjectedBounds = function () {
return MapView.compositeBounds(this.allBounds);
};
/**
* Determine whether a point on the main projected plane is inside the
* geoBounds of the inset.
* @private
*/
MapViewInset.prototype.isInside = function (point) {
var _a = this,
geoBoundsProjectedBox = _a.geoBoundsProjectedBox,
geoBoundsProjectedPolygon = _a.geoBoundsProjectedPolygon;
return Boolean(
// First we do a pre-pass to check whether the test point is inside
// the rectangular bounding box of the polygon. This is less
// expensive and will rule out most cases.
geoBoundsProjectedBox &&
point.x >= geoBoundsProjectedBox.x1 &&
point.x <= geoBoundsProjectedBox.x2 &&
point.y >= geoBoundsProjectedBox.y1 &&
point.y <= geoBoundsProjectedBox.y2 &&
// Next, do the more expensive check whether the point is inside the
// polygon itself.
geoBoundsProjectedPolygon &&
MapView_pointInPolygon(point, geoBoundsProjectedPolygon));
};
/**
* Render the map view inset with the border path
* @private
*/
MapViewInset.prototype.render = function () {
var _a = this,
chart = _a.chart,
mapView = _a.mapView,
options = _a.options,
borderPath = options.borderPath || options.field;
if (borderPath && mapView.group) {
var animate = true;
if (!this.border) {
this.border = chart.renderer
.path()
.addClass('highcharts-mapview-inset-border')
.add(mapView.group);
animate = false;
}
if (!chart.styledMode) {
this.border.attr({
stroke: options.borderColor,
'stroke-width': options.borderWidth
});
}
var strokeWidth_1 = this.border.strokeWidth(),
field_1 = (options.relativeTo === 'mapBoundingBox' &&
mapView.getMapBBox()) || mapView.playingField;
var d = (borderPath.coordinates || []).reduce(function (d,
lineString) {
return lineString.reduce(function (d,
point,
i) {
var x = point[0],
y = point[1];
if (options.units === 'percent') {
x = chart.plotLeft + MapView_relativeLength("" + x + "%", field_1.width, field_1.x);
y = chart.plotTop + MapView_relativeLength("" + y + "%", field_1.height, field_1.y);
}
x = MapView_crisp(x, strokeWidth_1);
y = MapView_crisp(y, strokeWidth_1);
d.push(i === 0 ? ['M', x, y] : ['L', x, y]);
return d;
}, d);
}, []);
// Apply the border path
this.border[animate ? 'animate' : 'attr']({ d: d });
}
};
MapViewInset.prototype.destroy = function () {
if (this.border) {
this.border = this.border.destroy();
}
this.eventsToUnbind.forEach(function (f) { return f(); });
};
/**
* No chart-level events for insets
* @private
*/
MapViewInset.prototype.setUpEvents = function () { };
return MapViewInset;
}(MapView));
/* *
*
* Default Export
*
* */
/* harmony default export */ var Maps_MapView = (MapView);
;// ./code/es5/es-modules/Series/Map/MapSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapSeries_spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var MapSeries_animObject = AnimationUtilities.animObject, MapSeries_stop = AnimationUtilities.stop;
var MapSeries_noop = Core_Globals.noop;
var splitPath = Chart_MapChart.splitPath;
var MapSeries_a = Series_SeriesRegistry.seriesTypes,
// Indirect dependency to keep product size low
MapSeries_ColumnSeries = MapSeries_a.column, MapSeries_ScatterSeries = MapSeries_a.scatter;
var MapSeries_extend = Core_Utilities.extend, MapSeries_find = Core_Utilities.find, MapSeries_fireEvent = Core_Utilities.fireEvent, MapSeries_getNestedProperty = Core_Utilities.getNestedProperty, MapSeries_isArray = Core_Utilities.isArray, MapSeries_defined = Core_Utilities.defined, MapSeries_isNumber = Core_Utilities.isNumber, MapSeries_isObject = Core_Utilities.isObject, MapSeries_merge = Core_Utilities.merge, MapSeries_objectEach = Core_Utilities.objectEach, MapSeries_pick = Core_Utilities.pick, MapSeries_splat = Core_Utilities.splat;
/* *
*
* Class
*
* */
/**
* @private
* @class
* @name Highcharts.seriesTypes.map
*
* @augments Highcharts.Series
*/
var MapSeries = /** @class */ (function (_super) {
MapSeries_extends(MapSeries, _super);
function MapSeries() {
/* *
*
* Static Properties
*
* */
var _this = _super !== null && _super.apply(this,
arguments) || this;
_this.processedData = [];
return _this;
}
/* *
*
* Functions
*
* */
/**
* The initial animation for the map series. By default, animation is
* disabled.
* @private
*/
MapSeries.prototype.animate = function (init) {
var _a = this,
chart = _a.chart,
group = _a.group,
animation = MapSeries_animObject(this.options.animation);
// Initialize the animation
if (init) {
// Scale down the group and place it in the center
group.attr({
translateX: chart.plotLeft + chart.plotWidth / 2,
translateY: chart.plotTop + chart.plotHeight / 2,
scaleX: 0.001, // #1499
scaleY: 0.001
});
// Run the animation
}
else {
group.animate({
translateX: chart.plotLeft,
translateY: chart.plotTop,
scaleX: 1,
scaleY: 1
}, animation);
}
};
MapSeries.prototype.clearBounds = function () {
this.points.forEach(function (point) {
delete point.bounds;
delete point.insetIndex;
delete point.projectedPath;
});
delete this.bounds;
};
/**
* Allow a quick redraw by just translating the area group. Used for zooming
* and panning in capable browsers.
* @private
*/
MapSeries.prototype.doFullTranslate = function () {
return Boolean(this.isDirtyData ||
this.chart.isResizing ||
!this.hasRendered);
};
/**
* Draw the data labels. Special for maps is the time that the data labels
* are drawn (after points), and the clipping of the dataLabelsGroup.
* @private
*/
MapSeries.prototype.drawMapDataLabels = function () {
_super.prototype.drawDataLabels.call(this);
if (this.dataLabelsGroup) {
this.dataLabelsGroup.clip(this.chart.clipRect);
}
};
/**
* Use the drawPoints method of column, that is able to handle simple
* shapeArgs. Extend it by assigning the tooltip position.
* @private
*/
MapSeries.prototype.drawPoints = function () {
var _this = this;
var series = this,
_a = this,
chart = _a.chart,
group = _a.group,
_b = _a.transformGroups,
transformGroups = _b === void 0 ? [] : _b,
mapView = chart.mapView,
renderer = chart.renderer;
if (!mapView) {
return;
}
// Set groups that handle transform during zooming and panning in order
// to preserve clipping on series.group
this.transformGroups = transformGroups;
if (!transformGroups[0]) {
transformGroups[0] = renderer.g().add(group);
}
for (var i = 0, iEnd = mapView.insets.length; i < iEnd; ++i) {
if (!transformGroups[i + 1]) {
transformGroups.push(renderer.g().add(group));
}
}
// Draw the shapes again
if (this.doFullTranslate()) {
// Individual point actions.
this.points.forEach(function (point) {
var graphic = point.graphic;
// Points should be added in the corresponding transform group
point.group = transformGroups[typeof point.insetIndex === 'number' ?
point.insetIndex + 1 :
0];
// When the point has been moved between insets after
// MapView.update
if (graphic && graphic.parentGroup !== point.group) {
graphic.add(point.group);
}
});
// Draw the points
MapSeries_ColumnSeries.prototype.drawPoints.apply(this);
// Add class names
this.points.forEach(function (point) {
var graphic = point.graphic;
if (graphic) {
var animate_1 = graphic.animate;
var className = '';
if (point.name) {
className +=
'highcharts-name-' +
point.name.replace(/ /g, '-').toLowerCase();
}
if (point.properties && point.properties['hc-key']) {
className +=
' highcharts-key-' +
point.properties['hc-key'].toString().toLowerCase();
}
if (className) {
graphic.addClass(className);
}
// In styled mode, apply point colors by CSS
if (chart.styledMode) {
graphic.css(_this.pointAttribs(point, point.selected && 'select' || void 0));
}
// If the map point is not visible and is not null (e.g.
// hidden by data classes), then the point should be
// visible, but without value
graphic.attr({
visibility: (point.visible ||
(!point.visible && !point.isNull)) ? 'inherit' : 'hidden'
});
graphic.animate = function (params, options, complete) {
var animateIn = (MapSeries_isNumber(params['stroke-width']) &&
!MapSeries_isNumber(graphic['stroke-width'])), animateOut = (MapSeries_isNumber(graphic['stroke-width']) &&
!MapSeries_isNumber(params['stroke-width']));
// When strokeWidth is animating
if (animateIn || animateOut) {
var strokeWidth = MapSeries_pick(series.getStrokeWidth(series.options), 1 // Styled mode
),
inheritedStrokeWidth = (strokeWidth /
(chart.mapView &&
chart.mapView.getScale() ||
1));
// For animating from undefined, .attr() reads the
// property as the starting point
if (animateIn) {
graphic['stroke-width'] = inheritedStrokeWidth;
}
// For animating to undefined
if (animateOut) {
params['stroke-width'] = inheritedStrokeWidth;
}
}
var ret = animate_1.call(graphic,
params,
options,
animateOut ? function () {
// Remove the attribute after finished animation
graphic.element.removeAttribute('stroke-width');
delete graphic['stroke-width'];
// Proceed
if (complete) {
complete.apply(this, arguments);
}
} : complete);
return ret;
};
}
});
}
// Apply the SVG transform
transformGroups.forEach(function (transformGroup, i) {
var view = i === 0 ? mapView : mapView.insets[i - 1],
svgTransform = view.getSVGTransform(),
strokeWidth = MapSeries_pick(_this.getStrokeWidth(_this.options), 1 // Styled mode
);
/*
Animate or move to the new zoom level. In order to prevent
flickering as the different transform components are set out of sync
(#5991), we run a fake animator attribute and set scale and
translation synchronously in the same step.
A possible improvement to the API would be to handle this in the
renderer or animation engine itself, to ensure that when we are
animating multiple properties, we make sure that each step for each
property is performed in the same step. Also, for symbols and for
transform properties, it should induce a single updateTransform and
symbolAttr call.
*/
var scale = svgTransform.scaleX,
flipFactor = svgTransform.scaleY > 0 ? 1 : -1;
var animatePoints = function (scale) {
(series.points || []).forEach(function (point) {
var graphic = point.graphic;
var strokeWidth;
if (graphic &&
graphic['stroke-width'] &&
(strokeWidth = _this.getStrokeWidth(point.options))) {
graphic.attr({
'stroke-width': strokeWidth / scale
});
}
});
};
if (renderer.globalAnimation &&
chart.hasRendered &&
mapView.allowTransformAnimation) {
var startTranslateX_1 = Number(transformGroup.attr('translateX'));
var startTranslateY_1 = Number(transformGroup.attr('translateY'));
var startScale_1 = Number(transformGroup.attr('scaleX'));
var step_1 = function (now,
fx) {
var scaleStep = startScale_1 +
(scale - startScale_1) * fx.pos;
transformGroup.attr({
translateX: (startTranslateX_1 + (svgTransform.translateX - startTranslateX_1) * fx.pos),
translateY: (startTranslateY_1 + (svgTransform.translateY - startTranslateY_1) * fx.pos),
scaleX: scaleStep,
scaleY: scaleStep * flipFactor,
'stroke-width': strokeWidth / scaleStep
});
animatePoints(scaleStep); // #18166
};
var animOptions = MapSeries_merge(MapSeries_animObject(renderer.globalAnimation)),
userStep_1 = animOptions.step;
animOptions.step = function () {
if (userStep_1) {
userStep_1.apply(this, arguments);
}
step_1.apply(this, arguments);
};
transformGroup
.attr({ animator: 0 })
.animate({ animator: 1 }, animOptions, function () {
if (typeof renderer.globalAnimation !== 'boolean' &&
renderer.globalAnimation.complete) {
// Fire complete only from this place
renderer.globalAnimation.complete({
applyDrilldown: true
});
}
MapSeries_fireEvent(this, 'mapZoomComplete');
}.bind(_this));
// When dragging or first rendering, animation is off
}
else {
MapSeries_stop(transformGroup);
transformGroup.attr(MapSeries_merge(svgTransform, { 'stroke-width': strokeWidth / scale }));
animatePoints(scale); // #18166
}
});
if (!this.isDrilling) {
this.drawMapDataLabels();
}
};
/**
* Get the bounding box of all paths in the map combined.
*
*/
MapSeries.prototype.getProjectedBounds = function () {
var _this = this;
if (!this.bounds && this.chart.mapView) {
var _a = this.chart.mapView,
insets_1 = _a.insets,
projection_1 = _a.projection,
allBounds_1 = [];
// Find the bounding box of each point
(this.points || []).forEach(function (point) {
if (point.path || point.geometry) {
// @todo Try to put these two conversions in
// MapPoint.applyOptions
if (typeof point.path === 'string') {
point.path = splitPath(point.path);
// Legacy one-dimensional array
}
else if (MapSeries_isArray(point.path) &&
point.path[0] === 'M') {
point.path = _this.chart.renderer
.pathToSegments(point.path);
}
// The first time a map point is used, analyze its box
if (!point.bounds) {
var bounds = point.getProjectedBounds(projection_1);
if (bounds) {
point.labelrank = MapSeries_pick(point.labelrank,
// Bigger shape, higher rank
((bounds.x2 - bounds.x1) *
(bounds.y2 - bounds.y1)));
var midX_1 = bounds.midX,
midY_1 = bounds.midY;
if (insets_1 && MapSeries_isNumber(midX_1) && MapSeries_isNumber(midY_1)) {
var inset = MapSeries_find(insets_1,
function (inset) { return inset.isInside({
x: midX_1,
y: midY_1
}); });
if (inset) {
// Project again, but with the inset
// projection
delete point.projectedPath;
bounds = point.getProjectedBounds(inset.projection);
if (bounds) {
inset.allBounds.push(bounds);
}
point.insetIndex = insets_1.indexOf(inset);
}
}
point.bounds = bounds;
}
}
if (point.bounds && point.insetIndex === void 0) {
allBounds_1.push(point.bounds);
}
}
});
this.bounds = Maps_MapView.compositeBounds(allBounds_1);
}
return this.bounds;
};
/**
* Return the stroke-width either from a series options or point options
* object. This function is used by both the map series where the
* `borderWidth` sets the stroke-width, and the mapline series where the
* `lineWidth` sets the stroke-width.
* @private
*/
MapSeries.prototype.getStrokeWidth = function (options) {
var pointAttrToOptions = this.pointAttrToOptions;
return options[pointAttrToOptions &&
pointAttrToOptions['stroke-width'] || 'borderWidth'];
};
/**
* Define hasData function for non-cartesian series. Returns true if the
* series has points at all.
* @private
*/
MapSeries.prototype.hasData = function () {
return !!this.dataTable.rowCount;
};
/**
* Get presentational attributes. In the maps series this runs in both
* styled and non-styled mode, because colors hold data when a colorAxis is
* used.
* @private
*/
MapSeries.prototype.pointAttribs = function (point, state) {
var _a;
var _b = point.series.chart,
mapView = _b.mapView,
styledMode = _b.styledMode;
var attr = styledMode ?
this.colorAttribs(point) :
MapSeries_ColumnSeries.prototype.pointAttribs.call(this,
point,
state);
// Individual stroke width
var pointStrokeWidth = this.getStrokeWidth(point.options);
// Handle state specific border or line width
if (state) {
var stateOptions = MapSeries_merge(this.options.states &&
this.options.states[state],
point.options.states &&
point.options.states[state] ||
{}),
stateStrokeWidth = this.getStrokeWidth(stateOptions);
if (MapSeries_defined(stateStrokeWidth)) {
pointStrokeWidth = stateStrokeWidth;
}
attr.stroke = (_a = stateOptions.borderColor) !== null && _a !== void 0 ? _a : point.color;
}
if (pointStrokeWidth && mapView) {
pointStrokeWidth /= mapView.getScale();
}
// In order for dash style to avoid being scaled, set the transformed
// stroke width on the item
var seriesStrokeWidth = this.getStrokeWidth(this.options);
if (attr.dashstyle &&
mapView &&
MapSeries_isNumber(seriesStrokeWidth)) {
pointStrokeWidth = seriesStrokeWidth / mapView.getScale();
}
// Invisible map points means that the data value is removed from the
// map, but not the map area shape itself. Instead it is rendered like a
// null point. To fully remove a map area, it should be removed from the
// mapData.
if (!point.visible) {
attr.fill = this.options.nullColor;
}
if (MapSeries_defined(pointStrokeWidth)) {
attr['stroke-width'] = pointStrokeWidth;
}
else {
delete attr['stroke-width'];
}
attr['stroke-linecap'] = attr['stroke-linejoin'] = this.options.linecap;
return attr;
};
MapSeries.prototype.updateData = function () {
// #16782
if (this.processedData) {
return false;
}
return _super.prototype.updateData.apply(this, arguments);
};
/**
* Extend setData to call processData and generatePoints immediately.
* @private
*/
MapSeries.prototype.setData = function (data, redraw, animation, updatePoints) {
if (redraw === void 0) { redraw = true; }
delete this.bounds;
_super.prototype.setData.call(this, data, false, void 0, updatePoints);
this.processData();
this.generatePoints();
if (redraw) {
this.chart.redraw(animation);
}
};
MapSeries.prototype.dataColumnKeys = function () {
// No x data for maps
return this.pointArrayMap;
};
/**
* Extend processData to join in mapData. If the allAreas option is true,
* all areas from the mapData are used, and those that don't correspond to a
* data value are given null values. The results are stored in
* `processedData` in order to avoid mutating `data`.
* @private
*/
MapSeries.prototype.processData = function () {
var options = this.options,
data = options.data,
chart = this.chart,
chartOptions = chart.options.chart,
joinBy = this.joinBy,
pointArrayMap = options.keys || this.pointArrayMap,
dataUsed = [],
mapMap = {},
mapView = this.chart.mapView,
mapDataObject = mapView && (
// Get map either from series or global
MapSeries_isObject(options.mapData,
true) ?
mapView.getGeoMap(options.mapData) : mapView.geoMap),
// Pick up transform definitions for chart
mapTransforms = chart.mapTransforms =
chartOptions.mapTransforms ||
mapDataObject && mapDataObject['hc-transform'] ||
chart.mapTransforms;
var mapPoint,
props;
// Cache cos/sin of transform rotation angle
if (mapTransforms) {
MapSeries_objectEach(mapTransforms, function (transform) {
if (transform.rotation) {
transform.cosAngle = Math.cos(transform.rotation);
transform.sinAngle = Math.sin(transform.rotation);
}
});
}
var mapData;
if (MapSeries_isArray(options.mapData)) {
mapData = options.mapData;
}
else if (mapDataObject && mapDataObject.type === 'FeatureCollection') {
this.mapTitle = mapDataObject.title;
mapData = Core_Globals.geojson(mapDataObject, this.type, this);
}
// Reset processedData
this.processedData = [];
var processedData = this.processedData;
// Pick up numeric values, add index. Convert Array point definitions to
// objects using pointArrayMap.
if (data) {
var val = void 0;
for (var i = 0, iEnd = data.length; i < iEnd; ++i) {
val = data[i];
if (MapSeries_isNumber(val)) {
processedData[i] = {
value: val
};
}
else if (MapSeries_isArray(val)) {
var ix = 0;
processedData[i] = {};
// Automatically copy first item to hc-key if there is
// an extra leading string
if (!options.keys &&
val.length > pointArrayMap.length &&
typeof val[0] === 'string') {
processedData[i]['hc-key'] = val[0];
++ix;
}
// Run through pointArrayMap and what's left of the
// point data array in parallel, copying over the values
for (var j = 0; j < pointArrayMap.length; ++j, ++ix) {
if (pointArrayMap[j] &&
typeof val[ix] !== 'undefined') {
if (pointArrayMap[j].indexOf('.') > 0) {
Map_MapPoint.prototype.setNestedProperty(processedData[i], val[ix], pointArrayMap[j]);
}
else {
processedData[i][pointArrayMap[j]] = val[ix];
}
}
}
}
else {
processedData[i] = data[i];
}
if (joinBy &&
joinBy[0] === '_i') {
processedData[i]._i = i;
}
}
}
if (mapData) {
this.mapData = mapData;
this.mapMap = {};
for (var i = 0; i < mapData.length; i++) {
mapPoint = mapData[i];
props = mapPoint.properties;
mapPoint._i = i;
// Copy the property over to root for faster access
if (joinBy[0] && props && props[joinBy[0]]) {
mapPoint[joinBy[0]] = props[joinBy[0]];
}
mapMap[mapPoint[joinBy[0]]] = mapPoint;
}
this.mapMap = mapMap;
// Registered the point codes that actually hold data
if (joinBy[1]) {
var joinKey_1 = joinBy[1];
processedData.forEach(function (pointOptions) {
var mapKey = MapSeries_getNestedProperty(joinKey_1,
pointOptions);
if (mapMap[mapKey]) {
dataUsed.push(mapMap[mapKey]);
}
});
}
if (options.allAreas) {
// Register the point codes that actually hold data
if (joinBy[1]) {
var joinKey_2 = joinBy[1];
processedData.forEach(function (pointOptions) {
dataUsed.push(MapSeries_getNestedProperty(joinKey_2, pointOptions));
});
}
// Add those map points that don't correspond to data, which
// will be drawn as null points. Searching a string is faster
// than Array.indexOf
var dataUsedString_1 = ('|' +
dataUsed
.map(function (point) {
return point && point[joinBy[0]];
})
.join('|') +
'|');
mapData.forEach(function (mapPoint) {
if (!joinBy[0] ||
dataUsedString_1.indexOf('|' +
mapPoint[joinBy[0]] +
'|') === -1) {
processedData.push(MapSeries_merge(mapPoint, { value: null }));
}
});
}
}
// The processedXData array is used by general chart logic for checking
// data length in various scanarios.
this.dataTable.rowCount = processedData.length;
return void 0;
};
/**
* Extend setOptions by picking up the joinBy option and applying it to a
* series property.
* @private
*/
MapSeries.prototype.setOptions = function (itemOptions) {
var options = _super.prototype.setOptions.call(this,
itemOptions);
var joinBy = options.joinBy;
if (options.joinBy === null) {
joinBy = '_i';
}
if (joinBy) {
this.joinBy = MapSeries_splat(joinBy);
if (!this.joinBy[1]) {
this.joinBy[1] = this.joinBy[0];
}
}
return options;
};
/**
* Add the path option for data points. Find the max value for color
* calculation.
* @private
*/
MapSeries.prototype.translate = function () {
var series = this,
doFullTranslate = series.doFullTranslate(),
mapView = this.chart.mapView,
projection = mapView && mapView.projection;
// Recalculate box on updated data
if (this.chart.hasRendered && (this.isDirtyData || !this.hasRendered)) {
this.processData();
this.generatePoints();
delete this.bounds;
if (mapView &&
!mapView.userOptions.center &&
!MapSeries_isNumber(mapView.userOptions.zoom) &&
mapView.zoom === mapView.minZoom // #18542 don't zoom out if
// map is zoomed
) {
// Not only recalculate bounds but also fit view
mapView.fitToBounds(void 0, void 0, false); // #17012
}
else {
// If center and zoom is defined in user options, get bounds but
// don't change view
this.getProjectedBounds();
}
}
if (mapView) {
var mainSvgTransform_1 = mapView.getSVGTransform();
series.points.forEach(function (point) {
var svgTransform = (MapSeries_isNumber(point.insetIndex) &&
mapView.insets[point.insetIndex].getSVGTransform()) || mainSvgTransform_1;
// Record the middle point (loosely based on centroid),
// determined by the middleX and middleY options.
if (svgTransform &&
point.bounds &&
MapSeries_isNumber(point.bounds.midX) &&
MapSeries_isNumber(point.bounds.midY)) {
point.plotX = point.bounds.midX * svgTransform.scaleX +
svgTransform.translateX;
point.plotY = point.bounds.midY * svgTransform.scaleY +
svgTransform.translateY;
}
if (doFullTranslate) {
point.shapeType = 'path';
point.shapeArgs = {
d: Map_MapPoint.getProjectedPath(point, projection)
};
}
if (!point.hiddenInDataClass) { // #20441
if (point.projectedPath && !point.projectedPath.length) {
point.setVisible(false);
}
else if (!point.visible) {
point.setVisible(true);
}
}
});
}
MapSeries_fireEvent(series, 'afterTranslate');
};
MapSeries.prototype.update = function (options) {
var _this = this;
var _a;
// Calculate and set the recommended map view after every series update
// if new mapData is set
if (options.mapData) {
(_a = this.chart.mapView) === null || _a === void 0 ? void 0 : _a.recommendMapView(this.chart, MapSeries_spreadArray([
this.chart.options.chart.map
], (this.chart.options.series || []).map(function (s, i) {
if (i === _this._i) {
return options.mapData;
}
return s.mapData;
}), true), true);
}
_super.prototype.update.apply(this, arguments);
};
MapSeries.defaultOptions = MapSeries_merge(MapSeries_ScatterSeries.defaultOptions, Map_MapSeriesDefaults);
return MapSeries;
}(MapSeries_ScatterSeries));
MapSeries_extend(MapSeries.prototype, {
type: 'map',
axisTypes: Series_ColorMapComposition.seriesMembers.axisTypes,
colorAttribs: Series_ColorMapComposition.seriesMembers.colorAttribs,
colorKey: Series_ColorMapComposition.seriesMembers.colorKey,
// When tooltip is not shared, this series (and derivatives) requires
// direct touch/hover. KD-tree does not apply.
directTouch: true,
// We need the points' bounding boxes in order to draw the data labels,
// so we skip it now and call it from drawPoints instead.
drawDataLabels: MapSeries_noop,
// No graph for the map series
drawGraph: MapSeries_noop,
forceDL: true,
getCenter: Series_CenteredUtilities.getCenter,
getExtremesFromAll: true,
getSymbol: MapSeries_noop,
isCartesian: false,
parallelArrays: Series_ColorMapComposition.seriesMembers.parallelArrays,
pointArrayMap: Series_ColorMapComposition.seriesMembers.pointArrayMap,
pointClass: Map_MapPoint,
// X axis and Y axis must have same translation slope
preserveAspectRatio: true,
searchPoint: MapSeries_noop,
trackerGroups: Series_ColorMapComposition.seriesMembers.trackerGroups,
// Get axis extremes from paths, not values
useMapGeometry: true
});
Series_ColorMapComposition.compose(MapSeries);
Series_SeriesRegistry.registerSeriesType('map', MapSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Map_MapSeries = (MapSeries);
;// ./code/es5/es-modules/Series/MapLine/MapLineSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* A mapline series is a special case of the map series where the value
* colors are applied to the strokes rather than the fills. It can also be
* used for freeform drawing, like dividers, in the map.
*
* @sample maps/demo/mapline-mappoint/
* Mapline and map-point chart
* @sample maps/demo/animated-mapline/
* Mapline with CSS keyframe animation
* @sample maps/demo/flight-routes
* Flight routes
*
* @extends plotOptions.map
* @excluding dragDrop
* @product highmaps
* @optionparent plotOptions.mapline
*/
var MapLineSeriesDefaults = {
/**
* Pixel width of the mapline line.
*
* @type {number}
* @since 10.3.3
* @product highmaps
* @default 1
* @apioption plotOptions.mapline.lineWidth
*/
lineWidth: 1,
/**
* Fill color for the map line shapes
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
fillColor: 'none',
legendSymbol: 'lineMarker'
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var MapLine_MapLineSeriesDefaults = (MapLineSeriesDefaults);
/**
* A `mapline` series. If the [type](#series.mapline.type) option is
* not specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.mapline
* @excluding dataParser, dataURL, dragDrop, marker
* @product highmaps
* @apioption series.mapline
*/
/**
* An array of data points for the series. For the `mapline` series type,
* points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values
* will be interpreted as `value` options. Example:
*
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond
* to `[hc-key, value]`. Example:
*
* ```js
* data: [
* ['us-ny', 0],
* ['us-mi', 5],
* ['us-tx', 3],
* ['us-ak', 5]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of data
* points exceeds the series' [turboThreshold](#series.map.turboThreshold),
* this option is not available.
*
* ```js
* data: [{
* value: 6,
* name: "Point2",
* color: "#00FF00"
* }, {
* value: 6,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @type {Array<number|Array<string,(number|null)>|null|*>}
* @extends series.map.data
* @excluding drilldown
* @product highmaps
* @apioption series.mapline.data
*/
/**
* Pixel width of the mapline line.
*
* @type {number}
* @since 10.2.0
* @product highmaps
* @apioption plotOptions.mapline.states.hover.lineWidth
*/
/**
* Pixel width of the mapline line.
*
* @type {number|undefined}
* @since 10.3.3
* @product highmaps
* @apioption series.mapline.data.lineWidth
*/
/**
*
* @type {number}
* @product highmaps
* @excluding borderWidth
* @apioption plotOptions.mapline.states.hover
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Series/MapLine/MapLineSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapLineSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapLineSeries_extend = Core_Utilities.extend, MapLineSeries_merge = Core_Utilities.merge;
/* *
*
* Class
*
* */
/**
* @private
* @class
* @name Highcharts.seriesTypes.mapline
*
* @augments Highcharts.Series
*/
var MapLineSeries = /** @class */ (function (_super) {
MapLineSeries_extends(MapLineSeries, _super);
function MapLineSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/**
* Get presentational attributes
* @private
* @function Highcharts.seriesTypes.mapline#pointAttribs
*/
MapLineSeries.prototype.pointAttribs = function (point, state) {
var attr = _super.prototype.pointAttribs.call(this,
point,
state);
// The difference from a map series is that the stroke takes the
// point color
attr.fill = this.options.fillColor;
return attr;
};
/* *
*
* Static Properties
*
* */
MapLineSeries.defaultOptions = MapLineSeries_merge(Map_MapSeries.defaultOptions, MapLine_MapLineSeriesDefaults);
return MapLineSeries;
}(Map_MapSeries));
MapLineSeries_extend(MapLineSeries.prototype, {
type: 'mapline',
colorProp: 'stroke',
pointAttrToOptions: {
'stroke': 'color',
'stroke-width': 'lineWidth'
}
});
Series_SeriesRegistry.registerSeriesType('mapline', MapLineSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var MapLine_MapLineSeries = ((/* unused pure expression or super */ null && (MapLineSeries)));
;// ./code/es5/es-modules/Series/MapPoint/MapPointPoint.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapPointPoint_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapPointPoint_ScatterSeries = Series_SeriesRegistry.seriesTypes.scatter;
var MapPointPoint_isNumber = Core_Utilities.isNumber;
/* *
*
* Class
*
* */
var MapPointPoint = /** @class */ (function (_super) {
MapPointPoint_extends(MapPointPoint, _super);
function MapPointPoint() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
MapPointPoint.prototype.isValid = function () {
return Boolean(this.options.geometry ||
(MapPointPoint_isNumber(this.x) && MapPointPoint_isNumber(this.y)) ||
(MapPointPoint_isNumber(this.options.lon) && MapPointPoint_isNumber(this.options.lat)));
};
return MapPointPoint;
}(MapPointPoint_ScatterSeries.prototype.pointClass));
/* *
*
* Default Export
*
* */
/* harmony default export */ var MapPoint_MapPointPoint = (MapPointPoint);
;// ./code/es5/es-modules/Series/MapPoint/MapPointSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* API Options
*
* */
/**
* A mappoint series is a special form of scatter series where the points
* can be laid out in map coordinates on top of a map.
*
* @sample maps/demo/mapline-mappoint/
* Map-line and map-point series.
* @sample maps/demo/mappoint-mapmarker
* Using the mapmarker symbol for points
* @sample maps/demo/mappoint-datalabels-mapmarker
* Using the mapmarker shape for data labels
*
* @extends plotOptions.scatter
* @product highmaps
* @optionparent plotOptions.mappoint
*/
var MapPointSeriesDefaults = {
dataLabels: {
crop: false,
defer: false,
enabled: true,
formatter: function () {
return this.point.name;
},
overflow: false,
style: {
/** @internal */
color: "#000000" /* Palette.neutralColor100 */
}
},
legendSymbol: 'lineMarker'
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var MapPoint_MapPointSeriesDefaults = (MapPointSeriesDefaults);
/* *
*
* API Options
*
* */
/**
* A `mappoint` series. If the [type](#series.mappoint.type) option
* is not specified, it is inherited from [chart.type](#chart.type).
*
*
* @extends series,plotOptions.mappoint
* @excluding dataParser, dataURL
* @product highmaps
* @apioption series.mappoint
*/
/**
* An array of data points for the series. For the `mappoint` series
* type, points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values will be
* interpreted as `y` options. The `x` values will be automatically
* calculated, either starting at 0 and incremented by 1, or from
* `pointStart` and `pointInterval` given in the series options. If the axis
* has categories, these will be used. Example:
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of arrays with 2 values. In this case, the values correspond
* to `[hc-key, value]`. Example:
*
* ```js
* data: [
* ['us-ny', 0],
* ['us-mi', 5],
* ['us-tx', 3],
* ['us-ak', 5]
* ]
* ```
*
* 3. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.mappoint.turboThreshold),
* this option is not available.
* ```js
* data: [{
* x: 1,
* y: 7,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 4,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @type {Array<number|Array<number,(number|null)>|null|*>}
* @extends series.map.data
* @excluding labelrank, middleX, middleY, path, value
* @product highmaps
* @apioption series.mappoint.data
*/
/**
* The geometry of a point.
*
* To achieve a better separation between the structure and the data,
* it is recommended to use `mapData` to define the geometry instead
* of defining it on the data points themselves.
*
* The geometry object is compatible to that of a `feature` in geoJSON, so
* features of geoJSON can be passed directly into the `data`, optionally
* after first filtering and processing it.
*
* @sample maps/series/mappoint-line-geometry/
* Map point and line geometry
*
* @type {Object}
* @since 9.3.0
* @product highmaps
* @apioption series.mappoint.data.geometry
*/
/**
* The geometry type, which in case of the `mappoint` series is always `Point`.
*
* @type {string}
* @since 9.3.0
* @product highmaps
* @validvalue ["Point"]
* @apioption series.mappoint.data.geometry.type
*/
/**
* The geometry coordinates in terms of `[longitude, latitude]`.
*
* @type {Highcharts.LonLatArray}
* @since 9.3.0
* @product highmaps
* @apioption series.mappoint.data.geometry.coordinates
*/
/**
* The latitude of the point. Must be combined with the `lon` option
* to work. Overrides `x` and `y` values.
*
* @sample {highmaps} maps/demo/mappoint-latlon/
* Point position by lat/lon
*
* @type {number}
* @since 1.1.0
* @product highmaps
* @apioption series.mappoint.data.lat
*/
/**
* The longitude of the point. Must be combined with the `lon` option
* to work. Overrides `x` and `y` values.
*
* @sample {highmaps} maps/demo/mappoint-latlon/
* Point position by lat/lon
*
* @type {number}
* @since 1.1.0
* @product highmaps
* @apioption series.mappoint.data.lon
*/
/**
* The x coordinate of the point in terms of projected units.
*
* @sample {highmaps} maps/series/mapline-mappoint-path-xy/
* Map point demo
*
* @type {number}
* @product highmaps
* @apioption series.mappoint.data.x
*/
/**
* The x coordinate of the point in terms of projected units.
*
* @sample {highmaps} maps/series/mapline-mappoint-path-xy/
* Map point demo
*
* @type {number|null}
* @product highmaps
* @apioption series.mappoint.data.y
*/
/**
* @type {number}
* @product highmaps
* @excluding borderColor, borderWidth
* @apioption plotOptions.mappoint
*/
(''); // Keeps doclets above in JS file
;// ./code/es5/es-modules/Series/MapPoint/MapPointSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapPointSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapPointSeries_noop = Core_Globals.noop;
var MapPointSeries_a = Series_SeriesRegistry.seriesTypes, MapPointSeries_MapSeries = MapPointSeries_a.map, MapPointSeries_ScatterSeries = MapPointSeries_a.scatter;
var MapPointSeries_extend = Core_Utilities.extend, MapPointSeries_fireEvent = Core_Utilities.fireEvent, MapPointSeries_isNumber = Core_Utilities.isNumber, MapPointSeries_merge = Core_Utilities.merge;
/* *
*
* Class
*
* */
/**
* @private
* @class
* @name Highcharts.seriesTypes.mappoint
*
* @augments Highcharts.Series
*/
var MapPointSeries = /** @class */ (function (_super) {
MapPointSeries_extends(MapPointSeries, _super);
function MapPointSeries() {
/* *
*
* Static Properties
*
* */
var _this = _super !== null && _super.apply(this,
arguments) || this;
_this.clearBounds = MapPointSeries_MapSeries.prototype.clearBounds;
return _this;
/* eslint-enable valid-jsdoc */
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
MapPointSeries.prototype.drawDataLabels = function () {
_super.prototype.drawDataLabels.call(this);
if (this.dataLabelsGroup) {
this.dataLabelsGroup.clip(this.chart.clipRect);
}
};
/**
* Resolve `lon`, `lat` or `geometry` options and project the resulted
* coordinates.
*
* @private
*/
MapPointSeries.prototype.projectPoint = function (pointOptions) {
var mapView = this.chart.mapView;
if (mapView) {
var geometry = pointOptions.geometry,
lon = pointOptions.lon,
lat = pointOptions.lat;
var coordinates = (geometry &&
geometry.type === 'Point' &&
geometry.coordinates);
if (MapPointSeries_isNumber(lon) && MapPointSeries_isNumber(lat)) {
coordinates = [lon, lat];
}
if (coordinates) {
return mapView.lonLatToProjectedUnits({
lon: coordinates[0],
lat: coordinates[1]
});
}
}
};
MapPointSeries.prototype.translate = function () {
var _this = this;
var mapView = this.chart.mapView;
this.generatePoints();
if (this.getProjectedBounds && this.isDirtyData) {
delete this.bounds;
this.getProjectedBounds(); // Added point needs bounds(#16598)
}
// Create map based translation
if (mapView) {
var mainSvgTransform_1 = mapView.getSVGTransform(),
hasCoordinates_1 = mapView.projection.hasCoordinates;
this.points.forEach(function (p) {
var _a = p.x,
x = _a === void 0 ? void 0 : _a,
_b = p.y,
y = _b === void 0 ? void 0 : _b;
var svgTransform = (MapPointSeries_isNumber(p.insetIndex) &&
mapView.insets[p.insetIndex].getSVGTransform()) || mainSvgTransform_1;
var xy = (_this.projectPoint(p.options) ||
(p.properties &&
_this.projectPoint(p.properties)));
var didBounds;
if (xy) {
x = xy.x;
y = xy.y;
// Map bubbles getting geometry from shape
}
else if (p.bounds) {
x = p.bounds.midX;
y = p.bounds.midY;
if (svgTransform && MapPointSeries_isNumber(x) && MapPointSeries_isNumber(y)) {
p.plotX = x * svgTransform.scaleX +
svgTransform.translateX;
p.plotY = y * svgTransform.scaleY +
svgTransform.translateY;
didBounds = true;
}
}
if (MapPointSeries_isNumber(x) && MapPointSeries_isNumber(y)) {
// Establish plotX and plotY
if (!didBounds) {
var plotCoords = mapView.projectedUnitsToPixels({ x: x,
y: y });
p.plotX = plotCoords.x;
p.plotY = hasCoordinates_1 ?
plotCoords.y :
_this.chart.plotHeight - plotCoords.y;
}
}
else {
p.y = p.plotX = p.plotY = void 0;
}
p.isInside = _this.isPointInside(p);
// Find point zone
p.zone = _this.zones.length ? p.getZone() : void 0;
});
}
MapPointSeries_fireEvent(this, 'afterTranslate');
};
MapPointSeries.defaultOptions = MapPointSeries_merge(MapPointSeries_ScatterSeries.defaultOptions, MapPoint_MapPointSeriesDefaults);
return MapPointSeries;
}(MapPointSeries_ScatterSeries));
/* *
*
* Extra
*
* */
/* *
* The mapmarker symbol
*/
var mapmarker = function (x, y, w, h, options) {
var isLegendSymbol = options && options.context === 'legend';
var anchorX,
anchorY;
if (isLegendSymbol) {
anchorX = x + w / 2;
anchorY = y + h;
// Put the pin in the anchor position (dataLabel.shape)
}
else if (options &&
typeof options.anchorX === 'number' &&
typeof options.anchorY === 'number') {
anchorX = options.anchorX;
anchorY = options.anchorY;
// Put the pin in the center and shift upwards (point.marker.symbol)
}
else {
anchorX = x + w / 2;
anchorY = y + h / 2;
y -= h;
}
var r = isLegendSymbol ? h / 3 : h / 2;
return [
['M', anchorX, anchorY],
['C', anchorX, anchorY, anchorX - r, y + r * 1.5, anchorX - r, y + r],
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
['A', r, r, 1, 1, 1, anchorX + r, y + r],
['C', anchorX + r, y + r * 1.5, anchorX, anchorY, anchorX, anchorY],
['Z']
];
};
SVG_SVGRenderer.prototype.symbols.mapmarker = mapmarker;
MapPointSeries_extend(MapPointSeries.prototype, {
type: 'mappoint',
axisTypes: ['colorAxis'],
forceDL: true,
isCartesian: false,
pointClass: MapPoint_MapPointPoint,
searchPoint: MapPointSeries_noop,
useMapGeometry: true // #16534
});
Series_SeriesRegistry.registerSeriesType('mappoint', MapPointSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var MapPoint_MapPointSeries = ((/* unused pure expression or super */ null && (MapPointSeries)));
/* *
*
* API Options
*
* */
''; // Adds doclets above to transpiled file
;// ./code/es5/es-modules/Series/Bubble/BubbleLegendDefaults.js
/* *
*
* (c) 2010-2024 Highsoft AS
*
* Author: Paweł Potaczek
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Constants
*
* */
/**
* The bubble legend is an additional element in legend which
* presents the scale of the bubble series. Individual bubble ranges
* can be defined by user or calculated from series. In the case of
* automatically calculated ranges, a 1px margin of error is
* permitted.
*
* @since 7.0.0
* @product highcharts highstock highmaps
* @requires highcharts-more
* @optionparent legend.bubbleLegend
*/
var BubbleLegendDefaults = {
/**
* The color of the ranges borders, can be also defined for an
* individual range.
*
* @sample highcharts/bubble-legend/similartoseries/
* Similar look to the bubble series
* @sample highcharts/bubble-legend/bordercolor/
* Individual bubble border color
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
borderColor: void 0,
/**
* The width of the ranges borders in pixels, can be also
* defined for an individual range.
*/
borderWidth: 2,
/**
* An additional class name to apply to the bubble legend'
* circle graphical elements. This option does not replace
* default class names of the graphical element.
*
* @sample {highcharts} highcharts/css/bubble-legend/
* Styling by CSS
*
* @type {string}
*/
className: void 0,
/**
* The main color of the bubble legend. Applies to ranges, if
* individual color is not defined.
*
* @sample highcharts/bubble-legend/similartoseries/
* Similar look to the bubble series
* @sample highcharts/bubble-legend/color/
* Individual bubble color
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
color: void 0,
/**
* An additional class name to apply to the bubble legend's
* connector graphical elements. This option does not replace
* default class names of the graphical element.
*
* @sample {highcharts} highcharts/css/bubble-legend/
* Styling by CSS
*
* @type {string}
*/
connectorClassName: void 0,
/**
* The color of the connector, can be also defined
* for an individual range.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
connectorColor: void 0,
/**
* The length of the connectors in pixels. If labels are
* centered, the distance is reduced to 0.
*
* @sample highcharts/bubble-legend/connectorandlabels/
* Increased connector length
*/
connectorDistance: 60,
/**
* The width of the connectors in pixels.
*
* @sample highcharts/bubble-legend/connectorandlabels/
* Increased connector width
*/
connectorWidth: 1,
/**
* Enable or disable the bubble legend.
*/
enabled: false,
/**
* Options for the bubble legend labels.
*/
labels: {
/**
* An additional class name to apply to the bubble legend
* label graphical elements. This option does not replace
* default class names of the graphical element.
*
* @sample {highcharts} highcharts/css/bubble-legend/
* Styling by CSS
*
* @type {string}
*/
className: void 0,
/**
* Whether to allow data labels to overlap.
*/
allowOverlap: false,
/**
* A format string for the bubble legend labels. Available
* variables are the same as for `formatter`.
*
* @sample highcharts/bubble-legend/format/
* Add a unit
*
* @type {string}
*/
format: '',
/**
* Available `this` properties are:
*
* - `this.value`: The bubble value.
*
* - `this.radius`: The radius of the bubble range.
*
* - `this.center`: The center y position of the range.
*
* @type {Highcharts.FormatterCallbackFunction<Highcharts.BubbleLegendFormatterContextObject>}
*/
formatter: void 0,
/**
* The alignment of the labels compared to the bubble
* legend. Can be one of `left`, `center` or `right`.
*
* @sample highcharts/bubble-legend/connectorandlabels/
* Labels on left
*
* @type {Highcharts.AlignValue}
*/
align: 'right',
/**
* CSS styles for the labels.
*
* @type {Highcharts.CSSObject}
*/
style: {
/** @ignore-option */
fontSize: '0.9em',
/** @ignore-option */
color: "#000000" /* Palette.neutralColor100 */
},
/**
* The x position offset of the label relative to the
* connector.
*/
x: 0,
/**
* The y position offset of the label relative to the
* connector.
*/
y: 0
},
/**
* Maximum bubble legend range size. If values for ranges are
* not specified, the `minSize` and the `maxSize` are calculated
* from bubble series.
*/
maxSize: 60, // Number
/**
* Minimum bubble legend range size. If values for ranges are
* not specified, the `minSize` and the `maxSize` are calculated
* from bubble series.
*/
minSize: 10, // Number
/**
* The position of the bubble legend in the legend.
* @sample highcharts/bubble-legend/connectorandlabels/
* Bubble legend as last item in legend
*/
legendIndex: 0, // Number
/**
* Options for specific range. One range consists of bubble,
* label and connector.
*
* @sample highcharts/bubble-legend/ranges/
* Manually defined ranges
* @sample highcharts/bubble-legend/autoranges/
* Auto calculated ranges
*
* @type {Array<*>}
*/
ranges: {
/**
* Range size value, similar to bubble Z data.
* @type {number}
*/
value: void 0,
/**
* The color of the border for individual range.
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
borderColor: void 0,
/**
* The color of the bubble for individual range.
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
color: void 0,
/**
* The color of the connector for individual range.
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
connectorColor: void 0
},
/**
* Whether the bubble legend range value should be represented
* by the area or the width of the bubble. The default, area,
* corresponds best to the human perception of the size of each
* bubble.
*
* @sample highcharts/bubble-legend/ranges/
* Size by width
*
* @type {Highcharts.BubbleSizeByValue}
*/
sizeBy: 'area',
/**
* When this is true, the absolute value of z determines the
* size of the bubble. This means that with the default
* zThreshold of 0, a bubble of value -1 will have the same size
* as a bubble of value 1, while a bubble of value 0 will have a
* smaller size according to minSize.
*/
sizeByAbsoluteValue: false,
/**
* Define the visual z index of the bubble legend.
*/
zIndex: 1,
/**
* Ranges with lower value than zThreshold are skipped.
*/
zThreshold: 0
};
/* *
*
* Default Export
*
* */
/* harmony default export */ var Bubble_BubbleLegendDefaults = (BubbleLegendDefaults);
;// ./code/es5/es-modules/Series/Bubble/BubbleLegendItem.js
/* *
*
* (c) 2010-2024 Highsoft AS
*
* Author: Paweł Potaczek
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var BubbleLegendItem_color = Color_Color.parse;
var BubbleLegendItem_noop = Core_Globals.noop;
var BubbleLegendItem_arrayMax = Core_Utilities.arrayMax, BubbleLegendItem_arrayMin = Core_Utilities.arrayMin, BubbleLegendItem_isNumber = Core_Utilities.isNumber, BubbleLegendItem_merge = Core_Utilities.merge, BubbleLegendItem_pick = Core_Utilities.pick, BubbleLegendItem_stableSort = Core_Utilities.stableSort;
/* *
*
* Class
*
* */
/**
* BubbleLegend class.
*
* @private
* @class
* @name Highcharts.BubbleLegend
* @param {Highcharts.LegendBubbleLegendOptions} options
* Options of BubbleLegendItem.
*
* @param {Highcharts.Legend} legend
* Legend of item.
*/
var BubbleLegendItem = /** @class */ (function () {
/* *
*
* Constructor
*
* */
function BubbleLegendItem(options, legend) {
this.setState = BubbleLegendItem_noop;
this.init(options, legend);
}
/* *
*
* Functions
*
* */
/**
* Create basic bubbleLegend properties similar to item in legend.
* @private
*/
BubbleLegendItem.prototype.init = function (options, legend) {
this.options = options;
this.visible = true;
this.chart = legend.chart;
this.legend = legend;
};
/**
* Depending on the position option, add bubbleLegend to legend items.
*
* @private
*
* @param {Array<(Highcharts.Point|Highcharts.Series)>} items
* All legend items
*/
BubbleLegendItem.prototype.addToLegend = function (items) {
// Insert bubbleLegend into legend items
items.splice(this.options.legendIndex, 0, this);
};
/**
* Calculate ranges, sizes and call the next steps of bubbleLegend
* creation.
*
* @private
*
* @param {Highcharts.Legend} legend
* Legend instance
*/
BubbleLegendItem.prototype.drawLegendSymbol = function (legend) {
var itemDistance = BubbleLegendItem_pick(legend.options.itemDistance, 20),
legendItem = this.legendItem || {},
options = this.options,
ranges = options.ranges,
connectorDistance = options.connectorDistance;
var connectorSpace;
// Do not create bubbleLegend now if ranges or ranges values are not
// specified or if are empty array.
if (!ranges || !ranges.length || !BubbleLegendItem_isNumber(ranges[0].value)) {
legend.options.bubbleLegend.autoRanges = true;
return;
}
// Sort ranges to right render order
BubbleLegendItem_stableSort(ranges, function (a, b) {
return b.value - a.value;
});
this.ranges = ranges;
this.setOptions();
this.render();
// Get max label size
var maxLabel = this.getMaxLabelSize(),
radius = this.ranges[0].radius,
size = radius * 2;
// Space for connectors and labels.
connectorSpace =
connectorDistance - radius + maxLabel.width;
connectorSpace = connectorSpace > 0 ? connectorSpace : 0;
this.maxLabel = maxLabel;
this.movementX = options.labels.align === 'left' ?
connectorSpace : 0;
legendItem.labelWidth = size + connectorSpace + itemDistance;
legendItem.labelHeight = size + maxLabel.height / 2;
};
/**
* Set style options for each bubbleLegend range.
* @private
*/
BubbleLegendItem.prototype.setOptions = function () {
var ranges = this.ranges,
options = this.options,
series = this.chart.series[options.seriesIndex],
baseline = this.legend.baseline,
bubbleAttribs = {
zIndex: options.zIndex,
'stroke-width': options.borderWidth
},
connectorAttribs = {
zIndex: options.zIndex,
'stroke-width': options.connectorWidth
},
labelAttribs = {
align: (this.legend.options.rtl ||
options.labels.align === 'left') ? 'right' : 'left',
zIndex: options.zIndex
},
fillOpacity = series.options.marker.fillOpacity,
styledMode = this.chart.styledMode;
// Allow to parts of styles be used individually for range
ranges.forEach(function (range, i) {
if (!styledMode) {
bubbleAttribs.stroke = BubbleLegendItem_pick(range.borderColor, options.borderColor, series.color);
bubbleAttribs.fill = BubbleLegendItem_pick(range.color, options.color, fillOpacity !== 1 ?
BubbleLegendItem_color(series.color).setOpacity(fillOpacity)
.get('rgba') :
series.color);
connectorAttribs.stroke = BubbleLegendItem_pick(range.connectorColor, options.connectorColor, series.color);
}
// Set options needed for rendering each range
ranges[i].radius = this.getRangeRadius(range.value);
ranges[i] = BubbleLegendItem_merge(ranges[i], {
center: (ranges[0].radius - ranges[i].radius +
baseline)
});
if (!styledMode) {
BubbleLegendItem_merge(true, ranges[i], {
bubbleAttribs: BubbleLegendItem_merge(bubbleAttribs),
connectorAttribs: BubbleLegendItem_merge(connectorAttribs),
labelAttribs: labelAttribs
});
}
}, this);
};
/**
* Calculate radius for each bubble range,
* used code from BubbleSeries.js 'getRadius' method.
*
* @private
*
* @param {number} value
* Range value
*
* @return {number|null}
* Radius for one range
*/
BubbleLegendItem.prototype.getRangeRadius = function (value) {
var options = this.options,
seriesIndex = this.options.seriesIndex,
bubbleSeries = this.chart.series[seriesIndex],
zMax = options.ranges[0].value,
zMin = options.ranges[options.ranges.length - 1].value,
minSize = options.minSize,
maxSize = options.maxSize;
return bubbleSeries.getRadius.call(this, zMin, zMax, minSize, maxSize, value);
};
/**
* Render the legendItem group.
* @private
*/
BubbleLegendItem.prototype.render = function () {
var legendItem = this.legendItem || {},
renderer = this.chart.renderer,
zThreshold = this.options.zThreshold;
if (!this.symbols) {
this.symbols = {
connectors: [],
bubbleItems: [],
labels: []
};
}
// Nesting SVG groups to enable handleOverflow
legendItem.symbol = renderer.g('bubble-legend');
legendItem.label = renderer.g('bubble-legend-item')
.css(this.legend.itemStyle || {});
// To enable default 'hideOverlappingLabels' method
legendItem.symbol.translateX = 0;
legendItem.symbol.translateY = 0;
// To use handleOverflow method
legendItem.symbol.add(legendItem.label);
legendItem.label.add(legendItem.group);
for (var _i = 0, _a = this.ranges; _i < _a.length; _i++) {
var range = _a[_i];
if (range.value >= zThreshold) {
this.renderRange(range);
}
}
this.hideOverlappingLabels();
};
/**
* Render one range, consisting of bubble symbol, connector and label.
*
* @private
*
* @param {Highcharts.LegendBubbleLegendRangesOptions} range
* Range options
*/
BubbleLegendItem.prototype.renderRange = function (range) {
var mainRange = this.ranges[0], legend = this.legend, options = this.options, labelsOptions = options.labels, chart = this.chart, bubbleSeries = chart.series[options.seriesIndex], renderer = chart.renderer, symbols = this.symbols, labels = symbols.labels, elementCenter = range.center, absoluteRadius = Math.abs(range.radius), connectorDistance = options.connectorDistance || 0, labelsAlign = labelsOptions.align, rtl = legend.options.rtl, borderWidth = options.borderWidth, connectorWidth = options.connectorWidth, posX = mainRange.radius || 0, posY = elementCenter - absoluteRadius -
borderWidth / 2 + connectorWidth / 2, crispMovement = (posY % 1 ? 1 : 0.5) -
(connectorWidth % 2 ? 0 : 0.5), styledMode = renderer.styledMode;
var connectorLength = rtl || labelsAlign === 'left' ?
-connectorDistance : connectorDistance;
// Set options for centered labels
if (labelsAlign === 'center') {
connectorLength = 0; // Do not use connector
options.connectorDistance = 0;
range.labelAttribs.align = 'center';
}
// Render bubble symbol
symbols.bubbleItems.push(renderer
.circle(posX, elementCenter + crispMovement, absoluteRadius)
.attr(styledMode ? {} : range.bubbleAttribs)
.addClass((styledMode ?
'highcharts-color-' +
bubbleSeries.colorIndex + ' ' :
'') +
'highcharts-bubble-legend-symbol ' +
(options.className || '')).add(this.legendItem.symbol));
// Render connector
symbols.connectors.push(renderer
.path(renderer.crispLine([
['M', posX, posY],
['L', posX + connectorLength, posY]
], options.connectorWidth))
.attr((styledMode ? {} : range.connectorAttribs))
.addClass((styledMode ?
'highcharts-color-' +
this.options.seriesIndex + ' ' : '') +
'highcharts-bubble-legend-connectors ' +
(options.connectorClassName || '')).add(this.legendItem.symbol));
// Render label
var label = renderer
.text(this.formatLabel(range))
.attr((styledMode ? {} : range.labelAttribs))
.css(styledMode ? {} : labelsOptions.style)
.addClass('highcharts-bubble-legend-labels ' +
(options.labels.className || '')).add(this.legendItem.symbol);
// Now that the label is added we can read the bounding box and
// vertically align
var position = {
x: posX + connectorLength + options.labels.x,
y: posY + options.labels.y + label.getBBox().height * 0.4
};
label.attr(position);
labels.push(label);
// To enable default 'hideOverlappingLabels' method
label.placed = true;
label.alignAttr = position;
};
/**
* Get the label which takes up the most space.
* @private
*/
BubbleLegendItem.prototype.getMaxLabelSize = function () {
var labels = this.symbols.labels;
var maxLabel,
labelSize;
labels.forEach(function (label) {
labelSize = label.getBBox(true);
if (maxLabel) {
maxLabel = labelSize.width > maxLabel.width ?
labelSize : maxLabel;
}
else {
maxLabel = labelSize;
}
});
return maxLabel || {};
};
/**
* Get formatted label for range.
*
* @private
*
* @param {Highcharts.LegendBubbleLegendRangesOptions} range
* Range options
*
* @return {string}
* Range label text
*/
BubbleLegendItem.prototype.formatLabel = function (range) {
var options = this.options,
formatter = options.labels.formatter,
format = options.labels.format;
var numberFormatter = this.chart.numberFormatter;
return format ? Core_Templating.format(format, range, this.chart) :
formatter ? formatter.call(range) :
numberFormatter(range.value, 1);
};
/**
* By using default chart 'hideOverlappingLabels' method, hide or show
* labels and connectors.
* @private
*/
BubbleLegendItem.prototype.hideOverlappingLabels = function () {
var chart = this.chart,
allowOverlap = this.options.labels.allowOverlap,
symbols = this.symbols;
if (!allowOverlap && symbols) {
chart.hideOverlappingLabels(symbols.labels);
// Hide or show connectors
symbols.labels.forEach(function (label, index) {
if (!label.newOpacity) {
symbols.connectors[index].hide();
}
else if (label.newOpacity !== label.oldOpacity) {
symbols.connectors[index].show();
}
});
}
};
/**
* Calculate ranges from created series.
*
* @private
*
* @return {Array<Highcharts.LegendBubbleLegendRangesOptions>}
* Array of range objects
*/
BubbleLegendItem.prototype.getRanges = function () {
var bubbleLegend = this.legend.bubbleLegend,
series = bubbleLegend.chart.series,
rangesOptions = bubbleLegend.options.ranges;
var ranges,
zData,
minZ = Number.MAX_VALUE,
maxZ = -Number.MAX_VALUE;
series.forEach(function (s) {
// Find the min and max Z, like in bubble series
if (s.isBubble && !s.ignoreSeries) {
zData = s.getColumn('z').filter(BubbleLegendItem_isNumber);
if (zData.length) {
minZ = BubbleLegendItem_pick(s.options.zMin, Math.min(minZ, Math.max(BubbleLegendItem_arrayMin(zData), s.options.displayNegative === false ?
s.options.zThreshold :
-Number.MAX_VALUE)));
maxZ = BubbleLegendItem_pick(s.options.zMax, Math.max(maxZ, BubbleLegendItem_arrayMax(zData)));
}
}
});
// Set values for ranges
if (minZ === maxZ) {
// Only one range if min and max values are the same.
ranges = [{ value: maxZ }];
}
else {
ranges = [
{ value: minZ },
{ value: (minZ + maxZ) / 2 },
{ value: maxZ, autoRanges: true }
];
}
// Prevent reverse order of ranges after redraw
if (rangesOptions.length && rangesOptions[0].radius) {
ranges.reverse();
}
// Merge ranges values with user options
ranges.forEach(function (range, i) {
if (rangesOptions && rangesOptions[i]) {
ranges[i] = BubbleLegendItem_merge(rangesOptions[i], range);
}
});
return ranges;
};
/**
* Calculate bubble legend sizes from rendered series.
*
* @private
*
* @return {Array<number,number>}
* Calculated min and max bubble sizes
*/
BubbleLegendItem.prototype.predictBubbleSizes = function () {
var chart = this.chart,
legendOptions = chart.legend.options,
floating = legendOptions.floating,
horizontal = legendOptions.layout === 'horizontal',
lastLineHeight = horizontal ? chart.legend.lastLineHeight : 0,
plotSizeX = chart.plotSizeX,
plotSizeY = chart.plotSizeY,
bubbleSeries = chart.series[this.options.seriesIndex],
pxSizes = bubbleSeries.getPxExtremes(),
minSize = Math.ceil(pxSizes.minPxSize),
maxPxSize = Math.ceil(pxSizes.maxPxSize),
plotSize = Math.min(plotSizeY,
plotSizeX);
var calculatedSize,
maxSize = bubbleSeries.options.maxSize;
// Calculate predicted max size of bubble
if (floating || !(/%$/.test(maxSize))) {
calculatedSize = maxPxSize;
}
else {
maxSize = parseFloat(maxSize);
calculatedSize = ((plotSize + lastLineHeight) * maxSize / 100) /
(maxSize / 100 + 1);
// Get maxPxSize from bubble series if calculated bubble legend
// size will not affect to bubbles series.
if ((horizontal && plotSizeY - calculatedSize >=
plotSizeX) || (!horizontal && plotSizeX -
calculatedSize >= plotSizeY)) {
calculatedSize = maxPxSize;
}
}
return [minSize, Math.ceil(calculatedSize)];
};
/**
* Correct ranges with calculated sizes.
* @private
*/
BubbleLegendItem.prototype.updateRanges = function (min, max) {
var bubbleLegendOptions = this.legend.options.bubbleLegend;
bubbleLegendOptions.minSize = min;
bubbleLegendOptions.maxSize = max;
bubbleLegendOptions.ranges = this.getRanges();
};
/**
* Because of the possibility of creating another legend line, predicted
* bubble legend sizes may differ by a few pixels, so it is necessary to
* correct them.
* @private
*/
BubbleLegendItem.prototype.correctSizes = function () {
var legend = this.legend,
chart = this.chart,
bubbleSeries = chart.series[this.options.seriesIndex],
pxSizes = bubbleSeries.getPxExtremes(),
bubbleSeriesSize = pxSizes.maxPxSize,
bubbleLegendSize = this.options.maxSize;
if (Math.abs(Math.ceil(bubbleSeriesSize) - bubbleLegendSize) >
1) {
this.updateRanges(this.options.minSize, pxSizes.maxPxSize);
legend.render();
}
};
return BubbleLegendItem;
}());
/* *
*
* Default Export
*
* */
/* harmony default export */ var Bubble_BubbleLegendItem = (BubbleLegendItem);
/* *
*
* API Declarations
*
* */
/**
* @interface Highcharts.BubbleLegendFormatterContextObject
*/ /**
* The center y position of the range.
* @name Highcharts.BubbleLegendFormatterContextObject#center
* @type {number}
*/ /**
* The radius of the bubble range.
* @name Highcharts.BubbleLegendFormatterContextObject#radius
* @type {number}
*/ /**
* The bubble value.
* @name Highcharts.BubbleLegendFormatterContextObject#value
* @type {number}
*/
''; // Detach doclets above
;// ./code/es5/es-modules/Series/Bubble/BubbleLegendComposition.js
/* *
*
* (c) 2010-2024 Highsoft AS
*
* Author: Paweł Potaczek
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var BubbleLegendComposition_setOptions = Defaults.setOptions;
var BubbleLegendComposition_composed = Core_Globals.composed;
var BubbleLegendComposition_addEvent = Core_Utilities.addEvent, BubbleLegendComposition_objectEach = Core_Utilities.objectEach, BubbleLegendComposition_pushUnique = Core_Utilities.pushUnique, BubbleLegendComposition_wrap = Core_Utilities.wrap;
/* *
*
* Functions
*
* */
/**
* If ranges are not specified, determine ranges from rendered bubble series
* and render legend again.
*/
function chartDrawChartBox(proceed, options, callback) {
var chart = this,
legend = chart.legend,
bubbleSeries = getVisibleBubbleSeriesIndex(chart) >= 0;
var bubbleLegendOptions,
bubbleSizes,
legendItem;
if (legend && legend.options.enabled && legend.bubbleLegend &&
legend.options.bubbleLegend.autoRanges && bubbleSeries) {
bubbleLegendOptions = legend.bubbleLegend.options;
bubbleSizes = legend.bubbleLegend.predictBubbleSizes();
legend.bubbleLegend.updateRanges(bubbleSizes[0], bubbleSizes[1]);
// Disable animation on init
if (!bubbleLegendOptions.placed) {
legend.group.placed = false;
legend.allItems.forEach(function (item) {
legendItem = item.legendItem || {};
if (legendItem.group) {
legendItem.group.translateY = void 0;
}
});
}
// Create legend with bubbleLegend
legend.render();
// Calculate margins after first rendering the bubble legend
if (!bubbleLegendOptions.placed) {
chart.getMargins();
chart.axes.forEach(function (axis) {
axis.setScale();
axis.updateNames();
// Disable axis animation on init
BubbleLegendComposition_objectEach(axis.ticks, function (tick) {
tick.isNew = true;
tick.isNewLabel = true;
});
});
chart.getMargins();
}
bubbleLegendOptions.placed = true;
// Call default 'drawChartBox' method.
proceed.call(chart, options, callback);
// Check bubble legend sizes and correct them if necessary.
legend.bubbleLegend.correctSizes();
// Correct items positions with different dimensions in legend.
retranslateItems(legend, getLinesHeights(legend));
}
else {
proceed.call(chart, options, callback);
// Allow color change on static bubble legend after click on legend
if (legend && legend.options.enabled && legend.bubbleLegend) {
legend.render();
retranslateItems(legend, getLinesHeights(legend));
}
}
}
/**
* Compose classes for use with Bubble series.
* @private
*
* @param {Highcharts.Chart} ChartClass
* Core chart class to use with Bubble series.
*
* @param {Highcharts.Legend} LegendClass
* Core legend class to use with Bubble series.
*/
function BubbleLegendComposition_compose(ChartClass, LegendClass) {
if (BubbleLegendComposition_pushUnique(BubbleLegendComposition_composed, 'Series.BubbleLegend')) {
BubbleLegendComposition_setOptions({
// Set default bubble legend options
legend: {
bubbleLegend: Bubble_BubbleLegendDefaults
}
});
BubbleLegendComposition_wrap(ChartClass.prototype, 'drawChartBox', chartDrawChartBox);
BubbleLegendComposition_addEvent(LegendClass, 'afterGetAllItems', onLegendAfterGetAllItems);
BubbleLegendComposition_addEvent(LegendClass, 'itemClick', onLegendItemClick);
}
}
/**
* Check if there is at least one visible bubble series.
*
* @private
* @function getVisibleBubbleSeriesIndex
* @param {Highcharts.Chart} chart
* Chart to check.
* @return {number}
* First visible bubble series index
*/
function getVisibleBubbleSeriesIndex(chart) {
var series = chart.series;
var i = 0;
while (i < series.length) {
if (series[i] &&
series[i].isBubble &&
series[i].visible &&
series[i].dataTable.rowCount) {
return i;
}
i++;
}
return -1;
}
/**
* Calculate height for each row in legend.
*
* @private
* @function getLinesHeights
*
* @param {Highcharts.Legend} legend
* Legend to calculate from.
*
* @return {Array<Highcharts.Dictionary<number>>}
* Informations about line height and items amount
*/
function getLinesHeights(legend) {
var items = legend.allItems,
lines = [],
length = items.length;
var lastLine,
legendItem,
legendItem2,
i = 0,
j = 0;
for (i = 0; i < length; i++) {
legendItem = items[i].legendItem || {};
legendItem2 = (items[i + 1] || {}).legendItem || {};
if (legendItem.labelHeight) {
// For bubbleLegend
items[i].itemHeight = legendItem.labelHeight;
}
if ( // Line break
items[i] === items[length - 1] ||
legendItem.y !== legendItem2.y) {
lines.push({ height: 0 });
lastLine = lines[lines.length - 1];
// Find the highest item in line
for (j; j <= i; j++) {
if (items[j].itemHeight > lastLine.height) {
lastLine.height = items[j].itemHeight;
}
}
lastLine.step = i;
}
}
return lines;
}
/**
* Start the bubble legend creation process.
*/
function onLegendAfterGetAllItems(e) {
var legend = this,
bubbleLegend = legend.bubbleLegend,
legendOptions = legend.options,
options = legendOptions.bubbleLegend,
bubbleSeriesIndex = getVisibleBubbleSeriesIndex(legend.chart);
// Remove unnecessary element
if (bubbleLegend && bubbleLegend.ranges && bubbleLegend.ranges.length) {
// Allow change the way of calculating ranges in update
if (options.ranges.length) {
options.autoRanges =
!!options.ranges[0].autoRanges;
}
// Update bubbleLegend dimensions in each redraw
legend.destroyItem(bubbleLegend);
}
// Create bubble legend
if (bubbleSeriesIndex >= 0 &&
legendOptions.enabled &&
options.enabled) {
options.seriesIndex = bubbleSeriesIndex;
legend.bubbleLegend = new Bubble_BubbleLegendItem(options, legend);
legend.bubbleLegend.addToLegend(e.allItems);
}
}
/**
* Toggle bubble legend depending on the visible status of bubble series.
*/
function onLegendItemClick(e) {
// #14080 don't fire this code if click function is prevented
if (e.defaultPrevented) {
return false;
}
var legend = this,
series = e.legendItem,
chart = legend.chart,
visible = series.visible;
var status;
if (legend && legend.bubbleLegend) {
// Temporary correct 'visible' property
series.visible = !visible;
// Save future status for getRanges method
series.ignoreSeries = visible;
// Check if at lest one bubble series is visible
status = getVisibleBubbleSeriesIndex(chart) >= 0;
// Hide bubble legend if all bubble series are disabled
if (legend.bubbleLegend.visible !== status) {
// Show or hide bubble legend
legend.update({
bubbleLegend: { enabled: status }
});
legend.bubbleLegend.visible = status; // Restore default status
}
series.visible = visible;
}
}
/**
* Correct legend items translation in case of different elements heights.
*
* @private
* @function Highcharts.Legend#retranslateItems
*
* @param {Highcharts.Legend} legend
* Legend to translate in.
*
* @param {Array<Highcharts.Dictionary<number>>} lines
* Informations about line height and items amount
*/
function retranslateItems(legend, lines) {
var items = legend.allItems,
rtl = legend.options.rtl;
var orgTranslateX,
orgTranslateY,
movementX,
legendItem,
actualLine = 0;
items.forEach(function (item, index) {
legendItem = item.legendItem || {};
if (!legendItem.group) {
return;
}
orgTranslateX = legendItem.group.translateX || 0;
orgTranslateY = legendItem.y || 0;
movementX = item.movementX;
if (movementX || (rtl && item.ranges)) {
movementX = rtl ?
orgTranslateX - item.options.maxSize / 2 :
orgTranslateX + movementX;
legendItem.group.attr({ translateX: movementX });
}
if (index > lines[actualLine].step) {
actualLine++;
}
legendItem.group.attr({
translateY: Math.round(orgTranslateY + lines[actualLine].height / 2)
});
legendItem.y = orgTranslateY + lines[actualLine].height / 2;
});
}
/* *
*
* Default Export
*
* */
var BubbleLegendComposition = {
compose: BubbleLegendComposition_compose
};
/* harmony default export */ var Bubble_BubbleLegendComposition = (BubbleLegendComposition);
;// ./code/es5/es-modules/Series/Bubble/BubblePoint.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var BubblePoint_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var BubblePoint_ScatterPoint = Series_SeriesRegistry.seriesTypes.scatter.prototype.pointClass;
var BubblePoint_extend = Core_Utilities.extend;
/* *
*
* Class
*
* */
var BubblePoint = /** @class */ (function (_super) {
BubblePoint_extends(BubblePoint, _super);
function BubblePoint() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* @private
*/
BubblePoint.prototype.haloPath = function (size) {
var computedSize = (size && this.marker ?
this.marker.radius ||
0 :
0) + size;
if (this.series.chart.inverted) {
var pos = this.pos() || [0, 0],
_a = this.series,
xAxis = _a.xAxis,
yAxis = _a.yAxis,
chart = _a.chart;
return chart.renderer.symbols.circle(xAxis.len - pos[1] - computedSize, yAxis.len - pos[0] - computedSize, computedSize * 2, computedSize * 2);
}
return Series_Point.prototype.haloPath.call(this,
// #6067
computedSize);
};
return BubblePoint;
}(BubblePoint_ScatterPoint));
/* *
*
* Class Prototype
*
* */
BubblePoint_extend(BubblePoint.prototype, {
ttBelow: false
});
/* *
*
* Default Export
*
* */
/* harmony default export */ var Bubble_BubblePoint = (BubblePoint);
;// ./code/es5/es-modules/Series/Bubble/BubbleSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var BubbleSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var BubbleSeries_color = Color_Color.parse;
var BubbleSeries_composed = Core_Globals.composed, BubbleSeries_noop = Core_Globals.noop;
var BubbleSeries_Series = Series_SeriesRegistry.series, BubbleSeries_a = Series_SeriesRegistry.seriesTypes, BubbleSeries_columnProto = BubbleSeries_a.column.prototype, BubbleSeries_ScatterSeries = BubbleSeries_a.scatter;
var BubbleSeries_addEvent = Core_Utilities.addEvent, BubbleSeries_arrayMax = Core_Utilities.arrayMax, BubbleSeries_arrayMin = Core_Utilities.arrayMin, BubbleSeries_clamp = Core_Utilities.clamp, BubbleSeries_extend = Core_Utilities.extend, BubbleSeries_isNumber = Core_Utilities.isNumber, BubbleSeries_merge = Core_Utilities.merge, BubbleSeries_pick = Core_Utilities.pick, BubbleSeries_pushUnique = Core_Utilities.pushUnique;
/* *
*
* Functions
*
* */
/**
* Add logic to pad each axis with the amount of pixels necessary to avoid the
* bubbles to overflow.
*/
function onAxisFoundExtremes() {
var _this = this;
var axisLength = this.len,
_a = this,
coll = _a.coll,
isXAxis = _a.isXAxis,
min = _a.min,
range = (this.max || 0) - (min || 0);
var pxMin = 0,
pxMax = axisLength,
transA = axisLength / range,
hasActiveSeries;
if (coll !== 'xAxis' && coll !== 'yAxis') {
return;
}
// Handle padding on the second pass, or on redraw
this.series.forEach(function (series) {
if (series.bubblePadding && series.reserveSpace()) {
// Correction for #1673
_this.allowZoomOutside = true;
hasActiveSeries = true;
var data = series.getColumn(isXAxis ? 'x' : 'y');
if (isXAxis) {
(series.onPoint || series).getRadii(0, 0, series);
if (series.onPoint) {
series.radii = series.onPoint.radii;
}
}
if (range > 0) {
var i = data.length;
while (i--) {
if (BubbleSeries_isNumber(data[i]) &&
_this.dataMin <= data[i] &&
data[i] <= _this.max) {
var radius = series.radii && series.radii[i] || 0;
pxMin = Math.min(((data[i] - min) * transA) - radius, pxMin);
pxMax = Math.max(((data[i] - min) * transA) + radius, pxMax);
}
}
}
}
});
// Apply the padding to the min and max properties
if (hasActiveSeries && range > 0 && !this.logarithmic) {
pxMax -= axisLength;
transA *= (axisLength +
Math.max(0, pxMin) - // #8901
Math.min(pxMax, axisLength)) / axisLength;
[
['min', 'userMin', pxMin],
['max', 'userMax', pxMax]
].forEach(function (keys) {
if (typeof BubbleSeries_pick(_this.options[keys[0]], _this[keys[1]]) === 'undefined') {
_this[keys[0]] += keys[2] / transA;
}
});
}
}
/**
* If a user has defined categories, it is necessary to retroactively hide any
* ticks added by the 'onAxisFoundExtremes' function above (#21672).
*
* Otherwise they can show up on the axis, alongside user-defined categories.
*/
function onAxisAfterRender() {
var _a;
var _b = this,
ticks = _b.ticks,
tickPositions = _b.tickPositions,
_c = _b.dataMin,
dataMin = _c === void 0 ? 0 : _c,
_d = _b.dataMax,
dataMax = _d === void 0 ? 0 : _d,
categories = _b.categories,
type = this.options.type;
if (((categories === null || categories === void 0 ? void 0 : categories.length) || type === 'category') &&
this.series.find(function (s) { return s.bubblePadding; })) {
var tickCount = tickPositions.length;
while (tickCount--) {
var tick = ticks[tickPositions[tickCount]],
pos = tick.pos || 0;
if (pos > dataMax || pos < dataMin) {
(_a = tick.label) === null || _a === void 0 ? void 0 : _a.hide();
}
}
}
}
/* *
*
* Class
*
* */
var BubbleSeries = /** @class */ (function (_super) {
BubbleSeries_extends(BubbleSeries, _super);
function BubbleSeries() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Static Functions
*
* */
BubbleSeries.compose = function (AxisClass, ChartClass, LegendClass) {
Bubble_BubbleLegendComposition.compose(ChartClass, LegendClass);
if (BubbleSeries_pushUnique(BubbleSeries_composed, 'Series.Bubble')) {
BubbleSeries_addEvent(AxisClass, 'foundExtremes', onAxisFoundExtremes);
BubbleSeries_addEvent(AxisClass, 'afterRender', onAxisAfterRender);
}
};
/* *
*
* Functions
*
* */
/**
* Perform animation on the bubbles
* @private
*/
BubbleSeries.prototype.animate = function (init) {
if (!init &&
this.points.length < this.options.animationLimit // #8099
) {
this.points.forEach(function (point) {
var graphic = point.graphic,
_a = point.plotX,
plotX = _a === void 0 ? 0 : _a,
_b = point.plotY,
plotY = _b === void 0 ? 0 : _b;
if (graphic && graphic.width) { // URL symbols don't have width
// Start values
if (!this.hasRendered) {
graphic.attr({
x: plotX,
y: plotY,
width: 1,
height: 1
});
}
graphic.animate(this.markerAttribs(point), this.options.animation);
}
}, this);
}
};
/**
* Get the radius for each point based on the minSize, maxSize and each
* point's Z value. This must be done prior to Series.translate because
* the axis needs to add padding in accordance with the point sizes.
* @private
*/
BubbleSeries.prototype.getRadii = function () {
var zData = this.getColumn('z'), yData = this.getColumn('y'), radii = [];
var len,
i,
value,
zExtremes = this.chart.bubbleZExtremes;
var _a = this.getPxExtremes(),
minPxSize = _a.minPxSize,
maxPxSize = _a.maxPxSize;
// Get the collective Z extremes of all bubblish series. The chart-level
// `bubbleZExtremes` are only computed once, and reset on `updatedData`
// in any member series.
if (!zExtremes) {
var zMin_1 = Number.MAX_VALUE;
var zMax_1 = -Number.MAX_VALUE;
var valid_1;
this.chart.series.forEach(function (otherSeries) {
if (otherSeries.bubblePadding && otherSeries.reserveSpace()) {
var zExtremes_1 = (otherSeries.onPoint || otherSeries).getZExtremes();
if (zExtremes_1) {
// Changed '||' to 'pick' because min or max can be 0.
// #17280
zMin_1 = Math.min(BubbleSeries_pick(zMin_1, zExtremes_1.zMin), zExtremes_1.zMin);
zMax_1 = Math.max(BubbleSeries_pick(zMax_1, zExtremes_1.zMax), zExtremes_1.zMax);
valid_1 = true;
}
}
});
if (valid_1) {
zExtremes = { zMin: zMin_1, zMax: zMax_1 };
this.chart.bubbleZExtremes = zExtremes;
}
else {
zExtremes = { zMin: 0, zMax: 0 };
}
}
// Set the shape type and arguments to be picked up in drawPoints
for (i = 0, len = zData.length; i < len; i++) {
value = zData[i];
// Separate method to get individual radius for bubbleLegend
radii.push(this.getRadius(zExtremes.zMin, zExtremes.zMax, minPxSize, maxPxSize, value, yData && yData[i]));
}
this.radii = radii;
};
/**
* Get the individual radius for one point.
* @private
*/
BubbleSeries.prototype.getRadius = function (zMin, zMax, minSize, maxSize, value, yValue) {
var options = this.options,
sizeByArea = options.sizeBy !== 'width',
zThreshold = options.zThreshold;
var zRange = zMax - zMin,
pos = 0.5;
// #8608 - bubble should be visible when z is undefined
if (yValue === null || value === null) {
return null;
}
if (BubbleSeries_isNumber(value)) {
// When sizing by threshold, the absolute value of z determines
// the size of the bubble.
if (options.sizeByAbsoluteValue) {
value = Math.abs(value - zThreshold);
zMax = zRange = Math.max(zMax - zThreshold, Math.abs(zMin - zThreshold));
zMin = 0;
}
// Issue #4419 - if value is less than zMin, push a radius that's
// always smaller than the minimum size
if (value < zMin) {
return minSize / 2 - 1;
}
// Relative size, a number between 0 and 1
if (zRange > 0) {
pos = (value - zMin) / zRange;
}
}
if (sizeByArea && pos >= 0) {
pos = Math.sqrt(pos);
}
return Math.ceil(minSize + pos * (maxSize - minSize)) / 2;
};
/**
* Define hasData function for non-cartesian series.
* Returns true if the series has points at all.
* @private
*/
BubbleSeries.prototype.hasData = function () {
return !!this.dataTable.rowCount;
};
/**
* @private
*/
BubbleSeries.prototype.markerAttribs = function (point, state) {
var attr = _super.prototype.markerAttribs.call(this,
point,
state),
_a = attr.height,
height = _a === void 0 ? 0 : _a,
_b = attr.width,
width = _b === void 0 ? 0 : _b;
// Bubble needs a specific `markerAttribs` override because the markers
// are rendered into the potentially inverted `series.group`. Unlike
// regular markers, which are rendered into the `markerGroup` (#21125).
return this.chart.inverted ? BubbleSeries_extend(attr, {
x: (point.plotX || 0) - width / 2,
y: (point.plotY || 0) - height / 2
}) : attr;
};
/**
* @private
*/
BubbleSeries.prototype.pointAttribs = function (point, state) {
var markerOptions = this.options.marker,
fillOpacity = markerOptions.fillOpacity,
attr = BubbleSeries_Series.prototype.pointAttribs.call(this,
point,
state);
if (fillOpacity !== 1) {
attr.fill = BubbleSeries_color(attr.fill)
.setOpacity(fillOpacity)
.get('rgba');
}
return attr;
};
/**
* Extend the base translate method to handle bubble size
* @private
*/
BubbleSeries.prototype.translate = function () {
// Run the parent method
_super.prototype.translate.call(this);
this.getRadii();
this.translateBubble();
};
BubbleSeries.prototype.translateBubble = function () {
var _a = this,
data = _a.data,
options = _a.options,
radii = _a.radii,
minPxSize = this.getPxExtremes().minPxSize;
// Set the shape type and arguments to be picked up in drawPoints
var i = data.length;
while (i--) {
var point = data[i],
radius = radii ? radii[i] : 0; // #1737
// Negative points means negative z values (#9728)
if (this.zoneAxis === 'z') {
point.negative = (point.z || 0) < (options.zThreshold || 0);
}
if (BubbleSeries_isNumber(radius) && radius >= minPxSize / 2) {
// Shape arguments
point.marker = BubbleSeries_extend(point.marker, {
radius: radius,
width: 2 * radius,
height: 2 * radius
});
// Alignment box for the data label
point.dlBox = {
x: point.plotX - radius,
y: point.plotY - radius,
width: 2 * radius,
height: 2 * radius
};
}
else { // Below zThreshold
// #1691
point.shapeArgs = point.plotY = point.dlBox = void 0;
point.isInside = false; // #17281
}
}
};
BubbleSeries.prototype.getPxExtremes = function () {
var smallestSize = Math.min(this.chart.plotWidth,
this.chart.plotHeight);
var getPxSize = function (length) {
var isPercent;
if (typeof length === 'string') {
isPercent = /%$/.test(length);
length = parseInt(length, 10);
}
return isPercent ? smallestSize * length / 100 : length;
};
var minPxSize = getPxSize(BubbleSeries_pick(this.options.minSize, 8));
// Prioritize min size if conflict to make sure bubbles are
// always visible. #5873
var maxPxSize = Math.max(getPxSize(BubbleSeries_pick(this.options.maxSize, '20%')),
minPxSize);
return { minPxSize: minPxSize, maxPxSize: maxPxSize };
};
BubbleSeries.prototype.getZExtremes = function () {
var options = this.options,
zData = this.getColumn('z').filter(BubbleSeries_isNumber);
if (zData.length) {
var zMin = BubbleSeries_pick(options.zMin,
BubbleSeries_clamp(BubbleSeries_arrayMin(zData),
options.displayNegative === false ?
(options.zThreshold || 0) :
-Number.MAX_VALUE,
Number.MAX_VALUE));
var zMax = BubbleSeries_pick(options.zMax,
BubbleSeries_arrayMax(zData));
if (BubbleSeries_isNumber(zMin) && BubbleSeries_isNumber(zMax)) {
return { zMin: zMin, zMax: zMax };
}
}
};
/**
* @private
* @function Highcharts.Series#searchKDTree
*/
BubbleSeries.prototype.searchKDTree = function (point, compareX, e, suppliedPointEvaluator, suppliedBSideCheckEvaluator) {
if (suppliedPointEvaluator === void 0) { suppliedPointEvaluator = BubbleSeries_noop; }
if (suppliedBSideCheckEvaluator === void 0) { suppliedBSideCheckEvaluator = BubbleSeries_noop; }
suppliedPointEvaluator = function (p1, p2, comparisonProp) {
var _a,
_b;
var p1Dist = p1[comparisonProp] || 0;
var p2Dist = p2[comparisonProp] || 0;
var ret,
flip = false;
if (p1Dist < 0 && p2Dist < 0) {
ret = (p1Dist - (((_a = p1.marker) === null || _a === void 0 ? void 0 : _a.radius) || 0) >=
p2Dist - (((_b = p2.marker) === null || _b === void 0 ? void 0 : _b.radius) || 0)) ?
p1 :
p2;
flip = true;
}
else {
ret = p1Dist < p2Dist ? p1 : p2;
}
return [ret, flip];
};
suppliedBSideCheckEvaluator = function (a, b, flip) { return !flip && (a > b) || (a < b); };
return _super.prototype.searchKDTree.call(this, point, compareX, e, suppliedPointEvaluator, suppliedBSideCheckEvaluator);
};
/* *
*
* Static Properties
*
* */
/**
* A bubble series is a three dimensional series type where each point
* renders an X, Y and Z value. Each points is drawn as a bubble where the
* position along the X and Y axes mark the X and Y values, and the size of
* the bubble relates to the Z value.
*
* @sample {highcharts} highcharts/demo/bubble/
* Bubble chart
*
* @extends plotOptions.scatter
* @excluding cluster
* @product highcharts highstock
* @requires highcharts-more
* @optionparent plotOptions.bubble
*/
BubbleSeries.defaultOptions = BubbleSeries_merge(BubbleSeries_ScatterSeries.defaultOptions, {
dataLabels: {
formatter: function () {
var numberFormatter = this.series.chart.numberFormatter;
var z = this.point.z;
return BubbleSeries_isNumber(z) ? numberFormatter(z, -1) : '';
},
inside: true,
verticalAlign: 'middle'
},
/**
* If there are more points in the series than the `animationLimit`, the
* animation won't run. Animation affects overall performance and
* doesn't work well with heavy data series.
*
* @since 6.1.0
*/
animationLimit: 250,
/**
* Whether to display negative sized bubbles. The threshold is given
* by the [zThreshold](#plotOptions.bubble.zThreshold) option, and negative
* bubbles can be visualized by setting
* [negativeColor](#plotOptions.bubble.negativeColor).
*
* @sample {highcharts} highcharts/plotoptions/bubble-negative/
* Negative bubbles
*
* @type {boolean}
* @default true
* @since 3.0
* @apioption plotOptions.bubble.displayNegative
*/
/**
* @extends plotOptions.series.marker
* @excluding enabled, enabledThreshold, height, radius, width
*/
marker: {
lineColor: null, // Inherit from series.color
lineWidth: 1,
/**
* The fill opacity of the bubble markers.
*/
fillOpacity: 0.5,
/**
* In bubble charts, the radius is overridden and determined based
* on the point's data value.
*
* @ignore-option
*/
radius: null,
states: {
hover: {
radiusPlus: 0
}
},
/**
* A predefined shape or symbol for the marker. Possible values are
* "circle", "square", "diamond", "triangle" and "triangle-down".
*
* Additionally, the URL to a graphic can be given on the form
* `url(graphic.png)`. Note that for the image to be applied to
* exported charts, its URL needs to be accessible by the export
* server.
*
* Custom callbacks for symbol path generation can also be added to
* `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
* used by its method name, as shown in the demo.
*
* @sample {highcharts} highcharts/plotoptions/bubble-symbol/
* Bubble chart with various symbols
* @sample {highcharts} highcharts/plotoptions/series-marker-symbol/
* General chart with predefined, graphic and custom markers
*
* @type {Highcharts.SymbolKeyValue|string}
* @since 5.0.11
*/
symbol: 'circle'
},
/**
* Minimum bubble size. Bubbles will automatically size between the
* `minSize` and `maxSize` to reflect the `z` value of each bubble.
* Can be either pixels (when no unit is given), or a percentage of
* the smallest one of the plot width and height.
*
* @sample {highcharts} highcharts/plotoptions/bubble-size/
* Bubble size
*
* @type {number|string}
* @since 3.0
* @product highcharts highstock
*/
minSize: 8,
/**
* Maximum bubble size. Bubbles will automatically size between the
* `minSize` and `maxSize` to reflect the `z` value of each bubble.
* Can be either pixels (when no unit is given), or a percentage of
* the smallest one of the plot width and height.
*
* @sample {highcharts} highcharts/plotoptions/bubble-size/
* Bubble size
*
* @type {number|string}
* @since 3.0
* @product highcharts highstock
*/
maxSize: '20%',
/**
* When a point's Z value is below the
* [zThreshold](#plotOptions.bubble.zThreshold)
* setting, this color is used.
*
* @sample {highcharts} highcharts/plotoptions/bubble-negative/
* Negative bubbles
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 3.0
* @product highcharts
* @apioption plotOptions.bubble.negativeColor
*/
/**
* Whether the bubble's value should be represented by the area or the
* width of the bubble. The default, `area`, corresponds best to the
* human perception of the size of each bubble.
*
* @sample {highcharts} highcharts/plotoptions/bubble-sizeby/
* Comparison of area and size
*
* @type {Highcharts.BubbleSizeByValue}
* @default area
* @since 3.0.7
* @apioption plotOptions.bubble.sizeBy
*/
/**
* When this is true, the absolute value of z determines the size of
* the bubble. This means that with the default `zThreshold` of 0, a
* bubble of value -1 will have the same size as a bubble of value 1,
* while a bubble of value 0 will have a smaller size according to
* `minSize`.
*
* @sample {highcharts} highcharts/plotoptions/bubble-sizebyabsolutevalue/
* Size by absolute value, various thresholds
*
* @type {boolean}
* @default false
* @since 4.1.9
* @product highcharts
* @apioption plotOptions.bubble.sizeByAbsoluteValue
*/
/**
* When this is true, the series will not cause the Y axis to cross
* the zero plane (or [threshold](#plotOptions.series.threshold) option)
* unless the data actually crosses the plane.
*
* For example, if `softThreshold` is `false`, a series of 0, 1, 2,
* 3 will make the Y axis show negative values according to the
* `minPadding` option. If `softThreshold` is `true`, the Y axis starts
* at 0.
*
* @since 4.1.9
* @product highcharts
*/
softThreshold: false,
states: {
hover: {
halo: {
size: 5
}
}
},
tooltip: {
pointFormat: '({point.x}, {point.y}), Size: {point.z}'
},
turboThreshold: 0,
/**
* The minimum for the Z value range. Defaults to the highest Z value
* in the data.
*
* @see [zMin](#plotOptions.bubble.zMin)
*
* @sample {highcharts} highcharts/plotoptions/bubble-zmin-zmax/
* Z has a possible range of 0-100
*
* @type {number}
* @since 4.0.3
* @product highcharts
* @apioption plotOptions.bubble.zMax
*/
/**
* @default z
* @apioption plotOptions.bubble.colorKey
*/
/**
* The minimum for the Z value range. Defaults to the lowest Z value
* in the data.
*
* @see [zMax](#plotOptions.bubble.zMax)
*
* @sample {highcharts} highcharts/plotoptions/bubble-zmin-zmax/
* Z has a possible range of 0-100
*
* @type {number}
* @since 4.0.3
* @product highcharts
* @apioption plotOptions.bubble.zMin
*/
/**
* When [displayNegative](#plotOptions.bubble.displayNegative) is `false`,
* bubbles with lower Z values are skipped. When `displayNegative`
* is `true` and a [negativeColor](#plotOptions.bubble.negativeColor)
* is given, points with lower Z is colored.
*
* @sample {highcharts} highcharts/plotoptions/bubble-negative/
* Negative bubbles
*
* @since 3.0
* @product highcharts
*/
zThreshold: 0,
zoneAxis: 'z'
});
return BubbleSeries;
}(BubbleSeries_ScatterSeries));
BubbleSeries_extend(BubbleSeries.prototype, {
alignDataLabel: BubbleSeries_columnProto.alignDataLabel,
applyZones: BubbleSeries_noop,
bubblePadding: true,
isBubble: true,
keysAffectYAxis: ['y'],
pointArrayMap: ['y', 'z'],
pointClass: Bubble_BubblePoint,
parallelArrays: ['x', 'y', 'z'],
trackerGroups: ['group', 'dataLabelsGroup'],
specialGroup: 'group', // To allow clipping (#6296)
zoneAxis: 'z'
});
// On updated data in any series, delete the chart-level Z extremes cache
BubbleSeries_addEvent(BubbleSeries, 'updatedData', function (e) {
delete e.target.chart.bubbleZExtremes;
});
// After removing series, delete the chart-level Z extremes cache, #17502.
BubbleSeries_addEvent(BubbleSeries, 'remove', function (e) {
delete e.target.chart.bubbleZExtremes;
});
Series_SeriesRegistry.registerSeriesType('bubble', BubbleSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Bubble_BubbleSeries = (BubbleSeries);
/* *
*
* API Declarations
*
* */
/**
* @typedef {"area"|"width"} Highcharts.BubbleSizeByValue
*/
''; // Detach doclets above
/* *
*
* API Options
*
* */
/**
* A `bubble` series. If the [type](#series.bubble.type) option is
* not specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.bubble
* @excluding dataParser, dataURL, legendSymbolColor, stack
* @product highcharts highstock
* @requires highcharts-more
* @apioption series.bubble
*/
/**
* An array of data points for the series. For the `bubble` series type,
* points can be given in the following ways:
*
* 1. An array of arrays with 3 or 2 values. In this case, the values correspond
* to `x,y,z`. If the first value is a string, it is applied as the name of
* the point, and the `x` value is inferred. The `x` value can also be
* omitted, in which case the inner arrays should be of length 2\. Then the
* `x` value is automatically calculated, either starting at 0 and
* incremented by 1, or from `pointStart` and `pointInterval` given in the
* series options.
* ```js
* data: [
* [0, 1, 2],
* [1, 5, 5],
* [2, 0, 2]
* ]
* ```
*
* 2. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.bubble.turboThreshold), this option is not
* available.
* ```js
* data: [{
* x: 1,
* y: 1,
* z: 1,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 5,
* z: 4,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
* @extends series.line.data
* @product highcharts
* @apioption series.bubble.data
*/
/**
* @extends series.line.data.marker
* @excluding enabledThreshold, height, radius, width
* @product highcharts
* @apioption series.bubble.data.marker
*/
/**
* The size value for each bubble. The bubbles' diameters are computed
* based on the `z`, and controlled by series options like `minSize`,
* `maxSize`, `sizeBy`, `zMin` and `zMax`.
*
* @type {number|null}
* @product highcharts
* @apioption series.bubble.data.z
*/
/**
* @excluding enabled, enabledThreshold, height, radius, width
* @apioption series.bubble.marker
*/
''; // Adds doclets above to transpiled file
;// ./code/es5/es-modules/Series/MapBubble/MapBubblePoint.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapBubblePoint_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/* *
*
* Imports
*
* */
var mapPointProto = Series_SeriesRegistry.seriesTypes.map.prototype.pointClass.prototype;
var MapBubblePoint_extend = Core_Utilities.extend;
/* *
*
* Class
*
* */
var MapBubblePoint = /** @class */ (function (_super) {
MapBubblePoint_extends(MapBubblePoint, _super);
function MapBubblePoint() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
MapBubblePoint.prototype.isValid = function () {
return typeof this.z === 'number';
};
return MapBubblePoint;
}(Bubble_BubblePoint));
MapBubblePoint_extend(MapBubblePoint.prototype, {
applyOptions: mapPointProto.applyOptions,
getProjectedBounds: mapPointProto.getProjectedBounds
});
/* *
*
* Default Export
*
* */
/* harmony default export */ var MapBubble_MapBubblePoint = (MapBubblePoint);
;// ./code/es5/es-modules/Series/MapBubble/MapBubbleSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var MapBubbleSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var MapBubbleSeries_a = Series_SeriesRegistry.seriesTypes, mapProto = MapBubbleSeries_a.map.prototype, MapBubbleSeries_mapPointProto = MapBubbleSeries_a.mappoint.prototype;
var MapBubbleSeries_extend = Core_Utilities.extend, MapBubbleSeries_merge = Core_Utilities.merge;
/* *
*
* Class
*
* */
/**
* @private
* @class
* @name Highcharts.seriesTypes.mapbubble
*
* @augments Highcharts.Series
*
* @requires BubbleSeries
* @requires MapPointSeries
*/
var MapBubbleSeries = /** @class */ (function (_super) {
MapBubbleSeries_extends(MapBubbleSeries, _super);
function MapBubbleSeries() {
/* *
*
* Static Properties
*
* */
var _this = _super !== null && _super.apply(this,
arguments) || this;
_this.clearBounds = mapProto.clearBounds;
return _this;
}
MapBubbleSeries.prototype.searchPoint = function (e, compareX) {
return this.searchKDTree({
plotX: e.chartX - this.chart.plotLeft,
plotY: e.chartY - this.chart.plotTop
}, compareX, e);
};
MapBubbleSeries.prototype.translate = function () {
MapBubbleSeries_mapPointProto.translate.call(this);
this.getRadii();
this.translateBubble();
};
/**
* A map bubble series is a bubble series laid out on top of a map
* series, where each bubble is tied to a specific map area.
*
* @sample maps/demo/map-bubble/
* Map bubble chart
*
* @extends plotOptions.bubble
* @product highmaps
* @optionparent plotOptions.mapbubble
*/
MapBubbleSeries.defaultOptions = MapBubbleSeries_merge(Bubble_BubbleSeries.defaultOptions, {
/**
* The main color of the series. This color affects both the fill
* and the stroke of the bubble. For enhanced control, use `marker`
* options.
*
* @sample {highmaps} maps/plotoptions/mapbubble-color/
* Pink bubbles
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption plotOptions.mapbubble.color
*/
/**
* Whether to display negative sized bubbles. The threshold is
* given by the [zThreshold](#plotOptions.mapbubble.zThreshold)
* option, and negative bubbles can be visualized by setting
* [negativeColor](#plotOptions.bubble.negativeColor).
*
* @type {boolean}
* @default true
* @apioption plotOptions.mapbubble.displayNegative
*/
/**
* Color of the line connecting bubbles. The default value is the same
* as series' color.
*
* In styled mode, the color can be defined by the
* [colorIndex](#plotOptions.series.colorIndex) option. Also, the series
* color can be set with the `.highcharts-series`,
* `.highcharts-color-{n}`, `.highcharts-{type}-series` or
* `.highcharts-series-{n}` class, or individual classes given by the
* `className` option.
*
*
* @sample {highmaps} maps/demo/spider-map/
* Spider map
* @sample {highmaps} maps/plotoptions/spider-map-line-color/
* Different line color
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption plotOptions.mapbubble.lineColor
*/
/**
* Pixel width of the line connecting bubbles.
*
* @sample {highmaps} maps/demo/spider-map/
* Spider map
*
* @product highmaps
* @apioption plotOptions.mapbubble.lineWidth
*/
lineWidth: 0,
/**
* Maximum bubble size. Bubbles will automatically size between the
* `minSize` and `maxSize` to reflect the `z` value of each bubble.
* Can be either pixels (when no unit is given), or a percentage of
* the smallest one of the plot width and height.
*
* @sample {highmaps} highcharts/plotoptions/bubble-size/
* Bubble size
* @sample {highmaps} maps/demo/spider-map/
* Spider map
*
* @product highmaps
* @apioption plotOptions.mapbubble.maxSize
*/
/**
* Minimum bubble size. Bubbles will automatically size between the
* `minSize` and `maxSize` to reflect the `z` value of each bubble.
* Can be either pixels (when no unit is given), or a percentage of
* the smallest one of the plot width and height.
*
* @sample {highmaps} maps/demo/map-bubble/
* Bubble size
* @sample {highmaps} maps/demo/spider-map/
* Spider map
*
* @product highmaps
* @apioption plotOptions.mapbubble.minSize
*/
/**
* When a point's Z value is below the
* [zThreshold](#plotOptions.mapbubble.zThreshold) setting, this
* color is used.
*
* @sample {highmaps} maps/plotoptions/mapbubble-negativecolor/
* Negative color below a threshold
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @apioption plotOptions.mapbubble.negativeColor
*/
/**
* Whether the bubble's value should be represented by the area or
* the width of the bubble. The default, `area`, corresponds best to
* the human perception of the size of each bubble.
*
* @type {Highcharts.BubbleSizeByValue}
* @default area
* @apioption plotOptions.mapbubble.sizeBy
*/
/**
* When this is true, the absolute value of z determines the size
* of the bubble. This means that with the default `zThreshold` of
* 0, a bubble of value -1 will have the same size as a bubble of
* value 1, while a bubble of value 0 will have a smaller size
* according to `minSize`.
*
* @sample {highmaps} highcharts/plotoptions/bubble-sizebyabsolutevalue/
* Size by absolute value, various thresholds
*
* @type {boolean}
* @default false
* @since 1.1.9
* @apioption plotOptions.mapbubble.sizeByAbsoluteValue
*/
/**
* The maximum for the Z value range. Defaults to the highest Z value in
* the data.
*
* @see [zMin](#plotOptions.mapbubble.zMin)
*
* @sample {highmaps} highcharts/plotoptions/bubble-zmin-zmax/
* Z has a possible range of 0-100
*
* @type {number}
* @since 1.0.3
* @apioption plotOptions.mapbubble.zMax
*/
/**
* The minimum for the Z value range. Defaults to the lowest Z value
* in the data.
*
* @see [zMax](#plotOptions.mapbubble.zMax)
*
* @sample {highmaps} highcharts/plotoptions/bubble-zmin-zmax/
* Z has a possible range of 0-100
*
* @type {number}
* @since 1.0.3
* @apioption plotOptions.mapbubble.zMin
*/
/**
* When [displayNegative](#plotOptions.mapbubble.displayNegative)
* is `false`, bubbles with lower Z values are skipped. When
* `displayNegative` is `true` and a
* [negativeColor](#plotOptions.mapbubble.negativeColor) is given,
* points with lower Z is colored.
*
* @sample {highmaps} maps/plotoptions/mapbubble-negativecolor/
* Negative color below a threshold
*
* @type {number}
* @default 0
* @apioption plotOptions.mapbubble.zThreshold
*/
/**
* @default 500
*/
animationLimit: 500,
/**
* @type {string|Array<string>}
*/
joinBy: 'hc-key',
tooltip: {
pointFormat: '{point.name}: {point.z}'
}
});
return MapBubbleSeries;
}(Bubble_BubbleSeries));
MapBubbleSeries_extend(MapBubbleSeries.prototype, {
type: 'mapbubble',
axisTypes: ['colorAxis'],
getProjectedBounds: mapProto.getProjectedBounds,
isCartesian: false,
// If one single value is passed, it is interpreted as z
pointArrayMap: ['z'],
pointClass: MapBubble_MapBubblePoint,
processData: mapProto.processData,
projectPoint: MapBubbleSeries_mapPointProto.projectPoint,
kdAxisArray: ['plotX', 'plotY'],
setData: mapProto.setData,
setOptions: mapProto.setOptions,
updateData: mapProto.updateData,
useMapGeometry: true,
xyFromShape: true
});
Series_SeriesRegistry.registerSeriesType('mapbubble', MapBubbleSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var MapBubble_MapBubbleSeries = (MapBubbleSeries);
/* *
*
* API Options
*
* */
/**
* A `mapbubble` series. If the [type](#series.mapbubble.type) option
* is not specified, it is inherited from [chart.type](#chart.type).
*
* @extends series,plotOptions.mapbubble
* @excluding dataParser, dataURL
* @product highmaps
* @apioption series.mapbubble
*/
/**
* An array of data points for the series. For the `mapbubble` series
* type, points can be given in the following ways:
*
* 1. An array of numerical values. In this case, the numerical values
* will be interpreted as `z` options. Example:
*
* ```js
* data: [0, 5, 3, 5]
* ```
*
* 2. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of
* data points exceeds the series'
* [turboThreshold](#series.mapbubble.turboThreshold),
* this option is not available.
*
* ```js
* data: [{
* z: 9,
* name: "Point2",
* color: "#00FF00"
* }, {
* z: 10,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @type {Array<number|null|*>}
* @extends series.mappoint.data
* @excluding labelrank, middleX, middleY, path, value, x, y, lat, lon
* @product highmaps
* @apioption series.mapbubble.data
*/
/**
* While the `x` and `y` values of the bubble are determined by the
* underlying map, the `z` indicates the actual value that gives the
* size of the bubble.
*
* @sample {highmaps} maps/demo/map-bubble/
* Bubble
*
* @type {number|null}
* @product highmaps
* @apioption series.mapbubble.data.z
*/
/**
* @excluding enabled, enabledThreshold, height, radius, width
* @sample {highmaps} maps/plotoptions/mapbubble-symbol
* Map bubble with mapmarker symbol
* @apioption series.mapbubble.marker
*/
''; // Adds doclets above to transpiled file
;// ./code/es5/es-modules/Series/Heatmap/HeatmapPoint.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var HeatmapPoint_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var HeatmapPoint_ScatterPoint = Series_SeriesRegistry.seriesTypes.scatter.prototype.pointClass;
var HeatmapPoint_clamp = Core_Utilities.clamp, HeatmapPoint_defined = Core_Utilities.defined, HeatmapPoint_extend = Core_Utilities.extend, HeatmapPoint_pick = Core_Utilities.pick;
/* *
*
* Class
*
* */
var HeatmapPoint = /** @class */ (function (_super) {
HeatmapPoint_extends(HeatmapPoint, _super);
function HeatmapPoint() {
return _super !== null && _super.apply(this, arguments) || this;
}
/* *
*
* Functions
*
* */
/** @private */
HeatmapPoint.prototype.applyOptions = function (options, x) {
// #17970, if point is null remove its color, because it may be updated
if (this.isNull || this.value === null) {
delete this.color;
}
_super.prototype.applyOptions.call(this, options, x);
this.formatPrefix = this.isNull || this.value === null ?
'null' : 'point';
return this;
};
/** @private */
HeatmapPoint.prototype.getCellAttributes = function () {
var point = this, series = point.series, seriesOptions = series.options, xPad = (seriesOptions.colsize || 1) / 2, yPad = (seriesOptions.rowsize || 1) / 2, xAxis = series.xAxis, yAxis = series.yAxis, markerOptions = point.options.marker || series.options.marker, pointPlacement = series.pointPlacementToXValue(), // #7860
pointPadding = HeatmapPoint_pick(point.pointPadding, seriesOptions.pointPadding, 0), cellAttr = {
x1: HeatmapPoint_clamp(Math.round(xAxis.len -
xAxis.translate(point.x - xPad, false, true, false, true, -pointPlacement)), -xAxis.len, 2 * xAxis.len),
x2: HeatmapPoint_clamp(Math.round(xAxis.len -
xAxis.translate(point.x + xPad, false, true, false, true, -pointPlacement)), -xAxis.len, 2 * xAxis.len),
y1: HeatmapPoint_clamp(Math.round(yAxis.translate(point.y - yPad, false, true, false, true)), -yAxis.len, 2 * yAxis.len),
y2: HeatmapPoint_clamp(Math.round(yAxis.translate(point.y + yPad, false, true, false, true)), -yAxis.len, 2 * yAxis.len)
};
var dimensions = [['width', 'x'], ['height', 'y']];
// Handle marker's fixed width, and height values including border
// and pointPadding while calculating cell attributes.
for (var _i = 0, dimensions_1 = dimensions; _i < dimensions_1.length; _i++) {
var dimension = dimensions_1[_i];
var prop = dimension[0],
direction = dimension[1];
var start = direction + '1', end = direction + '2';
var side = Math.abs(cellAttr[start] - cellAttr[end]),
borderWidth = markerOptions &&
markerOptions.lineWidth || 0,
plotPos = Math.abs(cellAttr[start] + cellAttr[end]) / 2,
widthOrHeight = markerOptions && markerOptions[prop];
if (HeatmapPoint_defined(widthOrHeight) && widthOrHeight < side) {
var halfCellSize = widthOrHeight / 2 + borderWidth / 2;
cellAttr[start] = plotPos - halfCellSize;
cellAttr[end] = plotPos + halfCellSize;
}
// Handle pointPadding
if (pointPadding) {
if ((direction === 'x' && xAxis.reversed) ||
(direction === 'y' && !yAxis.reversed)) {
start = end;
end = direction + '1';
}
cellAttr[start] += pointPadding;
cellAttr[end] -= pointPadding;
}
}
return cellAttr;
};
/**
* @private
*/
HeatmapPoint.prototype.haloPath = function (size) {
if (!size) {
return [];
}
var _a = this.shapeArgs || {},
_b = _a.x,
x = _b === void 0 ? 0 : _b,
_c = _a.y,
y = _c === void 0 ? 0 : _c,
_d = _a.width,
width = _d === void 0 ? 0 : _d,
_e = _a.height,
height = _e === void 0 ? 0 : _e;
return [
['M', x - size, y - size],
['L', x - size, y + height + size],
['L', x + width + size, y + height + size],
['L', x + width + size, y - size],
['Z']
];
};
/**
* Color points have a value option that determines whether or not it is
* a null point
* @private
*/
HeatmapPoint.prototype.isValid = function () {
// Undefined is allowed
return (this.value !== Infinity &&
this.value !== -Infinity);
};
return HeatmapPoint;
}(HeatmapPoint_ScatterPoint));
HeatmapPoint_extend(HeatmapPoint.prototype, {
dataLabelOnNull: true,
moveToTopOnHover: true,
ttBelow: false
});
/* *
*
* Default Export
*
* */
/* harmony default export */ var Heatmap_HeatmapPoint = (HeatmapPoint);
;// ./code/es5/es-modules/Series/Heatmap/HeatmapSeriesDefaults.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var HeatmapSeriesDefaults_isNumber = Core_Utilities.isNumber;
/* *
*
* API Options
*
* */
/**
* A heatmap is a graphical representation of data where the individual
* values contained in a matrix are represented as colors.
*
* @productdesc {highcharts}
* Requires `modules/heatmap`.
*
* @sample highcharts/demo/heatmap/
* Simple heatmap
* @sample highcharts/demo/heatmap-canvas/
* Heavy heatmap
*
* @extends plotOptions.scatter
* @excluding animationLimit, cluster, connectEnds, connectNulls,
* cropThreshold, dashStyle, dragDrop, findNearestPointBy,
* getExtremesFromAll, jitter, legendSymbolColor, linecap,
* lineWidth, pointInterval, pointIntervalUnit, pointRange,
* pointStart, shadow, softThreshold, stacking, step, threshold
* @product highcharts highmaps
* @optionparent plotOptions.heatmap
*/
var HeatmapSeriesDefaults = {
/**
* Animation is disabled by default on the heatmap series.
*/
animation: false,
/**
* The border radius for each heatmap item. The border's color and
* width can be set in marker options.
*
* @see [lineColor](#plotOptions.heatmap.marker.lineColor)
* @see [lineWidth](#plotOptions.heatmap.marker.lineWidth)
*/
borderRadius: 0,
/**
* The border width for each heatmap item.
*/
borderWidth: 0,
/**
* Padding between the points in the heatmap.
*
* @type {number}
* @default 0
* @since 6.0
* @apioption plotOptions.heatmap.pointPadding
*/
/**
* @default value
* @apioption plotOptions.heatmap.colorKey
*/
/**
* The main color of the series. In heat maps this color is rarely used,
* as we mostly use the color to denote the value of each point. Unless
* options are set in the [colorAxis](#colorAxis), the default value
* is pulled from the [options.colors](#colors) array.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @since 4.0
* @product highcharts
* @apioption plotOptions.heatmap.color
*/
/**
* The column size - how many X axis units each column in the heatmap
* should span.
*
* @sample {highcharts} maps/demo/heatmap/
* One day
* @sample {highmaps} maps/demo/heatmap/
* One day
*
* @type {number}
* @default 1
* @since 4.0
* @product highcharts highmaps
* @apioption plotOptions.heatmap.colsize
*/
/**
* The row size - how many Y axis units each heatmap row should span.
*
* @sample {highcharts} maps/demo/heatmap/
* 1 by default
* @sample {highmaps} maps/demo/heatmap/
* 1 by default
*
* @type {number}
* @default 1
* @since 4.0
* @product highcharts highmaps
* @apioption plotOptions.heatmap.rowsize
*/
/**
* Make the heatmap render its data points as an interpolated image.
*
* @sample highcharts/demo/heatmap-interpolation
* Interpolated heatmap image displaying user activity on a website
* @sample highcharts/series-heatmap/interpolation
* Interpolated heatmap toggle
*
*/
interpolation: false,
/**
* The color applied to null points. In styled mode, a general CSS class
* is applied instead.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
*/
nullColor: "#f7f7f7" /* Palette.neutralColor3 */,
dataLabels: {
formatter: function () {
var numberFormatter = this.series.chart.numberFormatter;
var value = this.point.value;
return HeatmapSeriesDefaults_isNumber(value) ? numberFormatter(value, -1) : '';
},
inside: true,
verticalAlign: 'middle',
crop: false,
/**
* @ignore-option
*/
overflow: 'allow',
padding: 0 // #3837
},
/**
* @excluding radius, enabledThreshold
* @since 8.1
*/
marker: {
/**
* A predefined shape or symbol for the marker. When undefined, the
* symbol is pulled from options.symbols. Other possible values are
* `'circle'`, `'square'`,`'diamond'`, `'triangle'`,
* `'triangle-down'`, `'rect'`, and `'ellipse'`.
*
* Additionally, the URL to a graphic can be given on this form:
* `'url(graphic.png)'`. Note that for the image to be applied to
* exported charts, its URL needs to be accessible by the export
* server.
*
* Custom callbacks for symbol path generation can also be added to
* `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
* used by its method name, as shown in the demo.
*
* @sample {highcharts} highcharts/plotoptions/series-marker-symbol/
* Predefined, graphic and custom markers
* @sample {highstock} highcharts/plotoptions/series-marker-symbol/
* Predefined, graphic and custom markers
*/
symbol: 'rect',
/** @ignore-option */
radius: 0,
lineColor: void 0,
states: {
/**
* @excluding radius, radiusPlus
*/
hover: {
/**
* Set the marker's fixed width on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.hover.width
*/
/**
* Set the marker's fixed height on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.hover.height
*/
/**
* The number of pixels to increase the width of the
* selected point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* 20px greater width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.hover.widthPlus
*/
/**
* The number of pixels to increase the height of the
* selected point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* 20px greater width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.hover.heightPlus
*/
/**
* The additional line width for a hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
* 5 pixels wider lineWidth on hover
* @sample {highmaps} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
* 5 pixels wider lineWidth on hover
*/
lineWidthPlus: 0
},
/**
* @excluding radius
*/
select: {
/**
* Set the marker's fixed width on select state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.select.width
*/
/**
* Set the marker's fixed height on select state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.select.height
*/
/**
* The number of pixels to increase the width of the
* selected point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* 20px greater width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.select.widthPlus
*/
/**
* The number of pixels to increase the height of the
* selected point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* 20px greater width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption plotOptions.heatmap.marker.states.select.heightPlus
*/
}
}
},
clip: true,
/** @ignore-option */
pointRange: null, // Dynamically set to colsize by default
tooltip: {
pointFormat: '{point.x}, {point.y}: {point.value}<br/>'
},
states: {
hover: {
/** @ignore-option */
halo: false, // #3406, halo is disabled on heatmaps by default
/**
* How much to brighten the point on interaction. Requires the
* main color to be defined in hex or rgb(a) format.
*
* In styled mode, the hover brightening is by default replaced
* with a fill-opacity set in the `.highcharts-point:hover`
* rule.
*/
brightness: 0.2
}
},
legendSymbol: 'rectangle'
};
/**
* A `heatmap` series. If the [type](#series.heatmap.type) option is
* not specified, it is inherited from [chart.type](#chart.type).
*
* @productdesc {highcharts}
* Requires `modules/heatmap`.
*
* @extends series,plotOptions.heatmap
* @excluding cropThreshold, dataParser, dataURL, dragDrop ,pointRange, stack,
* @product highcharts highmaps
* @apioption series.heatmap
*/
/**
* An array of data points for the series. For the `heatmap` series
* type, points can be given in the following ways:
*
* 1. An array of arrays with 3 or 2 values. In this case, the values
* correspond to `x,y,value`. If the first value is a string, it is
* applied as the name of the point, and the `x` value is inferred.
* The `x` value can also be omitted, in which case the inner arrays
* should be of length 2\. Then the `x` value is automatically calculated,
* either starting at 0 and incremented by 1, or from `pointStart`
* and `pointInterval` given in the series options.
*
* ```js
* data: [
* [0, 9, 7],
* [1, 10, 4],
* [2, 6, 3]
* ]
* ```
*
* 2. An array of objects with named values. The following snippet shows only a
* few settings, see the complete options set below. If the total number of data
* points exceeds the series' [turboThreshold](#series.heatmap.turboThreshold),
* this option is not available.
*
* ```js
* data: [{
* x: 1,
* y: 3,
* value: 10,
* name: "Point2",
* color: "#00FF00"
* }, {
* x: 1,
* y: 7,
* value: 10,
* name: "Point1",
* color: "#FF00FF"
* }]
* ```
*
* @sample {highcharts} highcharts/chart/reflow-true/
* Numerical values
* @sample {highcharts} highcharts/series/data-array-of-arrays/
* Arrays of numeric x and y
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
* Arrays of datetime x and y
* @sample {highcharts} highcharts/series/data-array-of-name-value/
* Arrays of point.name and y
* @sample {highcharts} highcharts/series/data-array-of-objects/
* Config objects
*
* @type {Array<Array<number>|*>}
* @extends series.line.data
* @product highcharts highmaps
* @apioption series.heatmap.data
*/
/**
* The color of the point. In heat maps the point color is rarely set
* explicitly, as we use the color to denote the `value`. Options for
* this are set in the [colorAxis](#colorAxis) configuration.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @product highcharts highmaps
* @apioption series.heatmap.data.color
*/
/**
* The value of the point, resulting in a color controlled by options
* as set in the [colorAxis](#colorAxis) configuration.
*
* @type {number}
* @product highcharts highmaps
* @apioption series.heatmap.data.value
*/
/**
* The x value of the point. For datetime axes,
* the X value is the timestamp in milliseconds since 1970.
*
* @type {number}
* @product highcharts highmaps
* @apioption series.heatmap.data.x
*/
/**
* The y value of the point.
*
* @type {number}
* @product highcharts highmaps
* @apioption series.heatmap.data.y
*/
/**
* Point padding for a single point.
*
* @sample maps/plotoptions/tilemap-pointpadding
* Point padding on tiles
*
* @type {number}
* @product highcharts highmaps
* @apioption series.heatmap.data.pointPadding
*/
/**
* @excluding radius, enabledThreshold
* @product highcharts highmaps
* @since 8.1
* @apioption series.heatmap.data.marker
*/
/**
* @excluding radius, enabledThreshold
* @product highcharts highmaps
* @since 8.1
* @apioption series.heatmap.marker
*/
/**
* @excluding radius, radiusPlus
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.hover
*/
/**
* @excluding radius
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.select
*/
/**
* @excluding radius, radiusPlus
* @product highcharts highmaps
* @apioption series.heatmap.data.marker.states.hover
*/
/**
* @excluding radius
* @product highcharts highmaps
* @apioption series.heatmap.data.marker.states.select
*/
/**
* Set the marker's fixed width on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
* 5 pixels wider lineWidth on hover
*
* @type {number|undefined}
* @default 0
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.hover.lineWidthPlus
*/
/**
* Set the marker's fixed width on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.hover.width
*/
/**
* Set the marker's fixed height on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.hover.height
*/
/**
* The number of pixels to increase the width of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.hover.widthPlus
*/
/**
* The number of pixels to increase the height of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.hover.heightPlus
*/
/**
* The number of pixels to increase the width of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.select.widthPlus
*/
/**
* The number of pixels to increase the height of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.marker.states.select.heightPlus
*/
/**
* Set the marker's fixed width on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
* 5 pixels wider lineWidth on hover
*
* @type {number|undefined}
* @default 0
* @product highcharts highmaps
* @apioption series.heatmap.data.marker.states.hover.lineWidthPlus
*/
/**
* Set the marker's fixed width on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.data.marker.states.hover.width
*/
/**
* Set the marker's fixed height on hover state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.data.marker.states.hover.height
*/
/**
* The number of pixels to increase the width of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highstock
* @apioption series.heatmap.data.marker.states.hover.widthPlus
*/
/**
* The number of pixels to increase the height of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highstock
* @apioption series.heatmap.data.marker.states.hover.heightPlus
*/
/**
* Set the marker's fixed width on select state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.data.marker.states.select.width
*/
/**
* Set the marker's fixed height on select state.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
* 70px fixed marker's width and height on hover
*
* @type {number|undefined}
* @default undefined
* @product highcharts highmaps
* @apioption series.heatmap.data.marker.states.select.height
*/
/**
* The number of pixels to increase the width of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highstock
* @apioption series.heatmap.data.marker.states.select.widthPlus
*/
/**
* The number of pixels to increase the height of the
* hovered point.
*
* @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
* One day
*
* @type {number|undefined}
* @default undefined
* @product highcharts highstock
* @apioption series.heatmap.data.marker.states.select.heightPlus
*/
''; // Keeps doclets above separate
/* *
*
* Default Export
*
* */
/* harmony default export */ var Heatmap_HeatmapSeriesDefaults = (HeatmapSeriesDefaults);
;// ./code/es5/es-modules/Series/InterpolationUtilities.js
/* *
*
* (c) 2010-2024 Hubert Kozik
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var InterpolationUtilities_doc = Core_Globals.doc;
var InterpolationUtilities_defined = Core_Utilities.defined, InterpolationUtilities_pick = Core_Utilities.pick;
/* *
*
* Functions
*
* */
/**
* Find color of point based on color axis.
*
* @function Highcharts.colorFromPoint
*
* @param {number | null} value
* Value to find corresponding color on the color axis.
*
* @param {Highcharts.Point} point
* Point to find it's color from color axis.
*
* @return {number[]}
* Color in RGBa array.
*/
function colorFromPoint(value, point) {
var colorAxis = point.series.colorAxis;
if (colorAxis) {
var rgba = (colorAxis.toColor(value || 0, point)
.split(')')[0]
.split('(')[1]
.split(',')
.map(function (s) { return InterpolationUtilities_pick(parseFloat(s), parseInt(s, 10)); }));
rgba[3] = InterpolationUtilities_pick(rgba[3], 1.0) * 255;
if (!InterpolationUtilities_defined(value) || !point.visible) {
rgba[3] = 0;
}
return rgba;
}
return [0, 0, 0, 0];
}
/**
* Method responsible for creating a canvas for interpolation image.
* @private
*/
function getContext(series) {
var canvas = series.canvas,
context = series.context;
if (canvas && context) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
else {
series.canvas = InterpolationUtilities_doc.createElement('canvas');
series.context = series.canvas.getContext('2d', {
willReadFrequently: true
}) || void 0;
return series.context;
}
return context;
}
var InterpolationUtilities = {
colorFromPoint: colorFromPoint,
getContext: getContext
};
/* harmony default export */ var Series_InterpolationUtilities = (InterpolationUtilities);
;// ./code/es5/es-modules/Series/Heatmap/HeatmapSeries.js
/* *
*
* (c) 2010-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
var HeatmapSeries_extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d,
b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d,
b) { d.__proto__ = b; }) ||
function (d,
b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b,
p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var HeatmapSeries_assign = (undefined && undefined.__assign) || function () {
HeatmapSeries_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return HeatmapSeries_assign.apply(this, arguments);
};
var HeatmapSeries_Series = Series_SeriesRegistry.series, HeatmapSeries_a = Series_SeriesRegistry.seriesTypes, HeatmapSeries_ColumnSeries = HeatmapSeries_a.column, HeatmapSeries_ScatterSeries = HeatmapSeries_a.scatter;
var HeatmapSeries_symbols = SVG_SVGRenderer.prototype.symbols;
var HeatmapSeries_addEvent = Core_Utilities.addEvent, HeatmapSeries_extend = Core_Utilities.extend, HeatmapSeries_fireEvent = Core_Utilities.fireEvent, HeatmapSeries_isNumber = Core_Utilities.isNumber, HeatmapSeries_merge = Core_Utilities.merge, HeatmapSeries_pick = Core_Utilities.pick;
var HeatmapSeries_colorFromPoint = Series_InterpolationUtilities.colorFromPoint, HeatmapSeries_getContext = Series_InterpolationUtilities.getContext;
/* *
*
* Class
*
* */
/**
* @private
* @class
* @name Highcharts.seriesTypes.heatmap
*
* @augments Highcharts.Series
*/
var HeatmapSeries = /** @class */ (function (_super) {
HeatmapSeries_extends(HeatmapSeries, _super);
function HeatmapSeries() {
/* *
*
* Static Properties
*
* */
var _this = _super !== null && _super.apply(this,
arguments) || this;
_this.valueMax = NaN;
_this.valueMin = NaN;
_this.isDirtyCanvas = true;
return _this;
/* eslint-enable valid-jsdoc */
}
/* *
*
* Functions
*
* */
/**
* @private
*/
HeatmapSeries.prototype.drawPoints = function () {
var series = this,
seriesOptions = series.options,
interpolation = seriesOptions.interpolation,
seriesMarkerOptions = seriesOptions.marker || {};
if (interpolation) {
var image = series.image,
chart = series.chart,
xAxis = series.xAxis,
yAxis = series.yAxis,
_a = xAxis.reversed,
xRev = _a === void 0 ? false : _a,
width = xAxis.len,
_b = yAxis.reversed,
yRev = _b === void 0 ? false : _b,
height = yAxis.len,
dimensions = { width: width,
height: height };
if (!image || series.isDirtyData || series.isDirtyCanvas) {
var ctx = HeatmapSeries_getContext(series),
canvas = series.canvas,
_c = series.options,
_d = _c.colsize,
colsize = _d === void 0 ? 1 : _d,
_e = _c.rowsize,
rowsize = _e === void 0 ? 1 : _e,
points = series.points,
length_1 = series.points.length,
pointsLen = length_1 - 1,
colorAxis = (chart.colorAxis && chart.colorAxis[0]);
if (canvas && ctx && colorAxis) {
var _f = xAxis.getExtremes(), xMin_1 = _f.min, xMax = _f.max, _g = yAxis.getExtremes(), yMin_1 = _g.min, yMax = _g.max, xDelta = xMax - xMin_1, yDelta = yMax - yMin_1, imgMultiple = 8.0, lastX = Math.round(imgMultiple * ((xDelta / colsize) / imgMultiple)), lastY = Math.round(imgMultiple * ((yDelta / rowsize) / imgMultiple)), _h = [
[lastX, lastX / xDelta, xRev, 'ceil'],
[lastY, lastY / yDelta, !yRev, 'floor']
].map(function (_a) {
var last = _a[0], scale = _a[1], rev = _a[2], rounding = _a[3];
return (rev ?
function (v) { return (Math[rounding](last -
(scale * (v)))); } :
function (v) { return (Math[rounding](scale * v)); });
}), transformX_1 = _h[0], transformY_1 = _h[1], canvasWidth_1 = canvas.width = lastX + 1, canvasHeight = canvas.height = lastY + 1, canvasArea = canvasWidth_1 * canvasHeight, pixelToPointScale = pointsLen / canvasArea, pixelData = new Uint8ClampedArray(canvasArea * 4), pointInPixels = function (x, y) { return (Math.ceil((canvasWidth_1 * transformY_1(y - yMin_1)) +
transformX_1(x - xMin_1)) * 4); };
series.buildKDTree();
for (var i = 0; i < canvasArea; i++) {
var point = points[Math.ceil(pixelToPointScale * i)],
x = point.x,
y = point.y;
pixelData.set(HeatmapSeries_colorFromPoint(point.value, point), pointInPixels(x, y));
}
ctx.putImageData(new ImageData(pixelData, canvasWidth_1), 0, 0);
if (image) {
image.attr(HeatmapSeries_assign(HeatmapSeries_assign({}, dimensions), { href: canvas.toDataURL('image/png', 1) }));
}
else {
series.directTouch = false;
series.image = chart.renderer.image(canvas.toDataURL('image/png', 1))
.attr(dimensions)
.add(series.group);
}
}
series.isDirtyCanvas = false;
}
else if (image.width !== width || image.height !== height) {
image.attr(dimensions);
}
}
else if (seriesMarkerOptions.enabled || series._hasPointMarkers) {
HeatmapSeries_Series.prototype.drawPoints.call(series);
series.points.forEach(function (point) {
if (point.graphic) {
// In styled mode, use CSS, otherwise the fill used in
// the style sheet will take precedence over
// the fill attribute.
point.graphic[series.chart.styledMode ? 'css' : 'animate'](series.colorAttribs(point));
if (point.value === null) { // #15708
point.graphic.addClass('highcharts-null-point');
}
}
});
}
};
/**
* @private
*/
HeatmapSeries.prototype.getExtremes = function () {
// Get the extremes from the value data
var _a = HeatmapSeries_Series.prototype.getExtremes
.call(this,
this.getColumn('value')),
dataMin = _a.dataMin,
dataMax = _a.dataMax;
if (HeatmapSeries_isNumber(dataMin)) {
this.valueMin = dataMin;
}
if (HeatmapSeries_isNumber(dataMax)) {
this.valueMax = dataMax;
}
// Get the extremes from the y data
return HeatmapSeries_Series.prototype.getExtremes.call(this);
};
/**
* Override to also allow null points, used when building the k-d-tree for
* tooltips in boost mode.
* @private
*/
HeatmapSeries.prototype.getValidPoints = function (points, insideOnly) {
return HeatmapSeries_Series.prototype.getValidPoints.call(this, points, insideOnly, true);
};
/**
* Define hasData function for non-cartesian series. Returns true if the
* series has points at all.
* @private
*/
HeatmapSeries.prototype.hasData = function () {
return !!this.dataTable.rowCount;
};
/**
* Override the init method to add point ranges on both axes.
* @private
*/
HeatmapSeries.prototype.init = function () {
_super.prototype.init.apply(this, arguments);
var options = this.options;
// #3758, prevent resetting in setData
options.pointRange = HeatmapSeries_pick(options.pointRange, options.colsize || 1);
// General point range
this.yAxis.axisPointRange = options.rowsize || 1;
// Bind new symbol names
HeatmapSeries_symbols.ellipse = HeatmapSeries_symbols.circle;
// @todo
//
// Setting the border radius here is a workaround. It should be set in
// the shapeArgs or returned from `markerAttribs`. However,
// Series.drawPoints does not pick up markerAttribs to be passed over to
// `renderer.symbol`. Also, image symbols are not positioned by their
// top left corner like other symbols are. This should be refactored,
// then we could save ourselves some tests for .hasImage etc. And the
// evaluation of borderRadius would be moved to `markerAttribs`.
if (options.marker && HeatmapSeries_isNumber(options.borderRadius)) {
options.marker.r = options.borderRadius;
}
};
/**
* @private
*/
HeatmapSeries.prototype.markerAttribs = function (point, state) {
var shapeArgs = point.shapeArgs || {};
if (point.hasImage) {
return {
x: point.plotX,
y: point.plotY
};
}
// Setting width and height attributes on image does not affect on its
// dimensions.
if (state && state !== 'normal') {
var pointMarkerOptions = point.options.marker || {},
seriesMarkerOptions = this.options.marker || {},
seriesStateOptions = (seriesMarkerOptions.states &&
seriesMarkerOptions.states[state]) || {},
pointStateOptions = (pointMarkerOptions.states &&
pointMarkerOptions.states[state]) || {};
// Set new width and height basing on state options.
var width = (pointStateOptions.width ||
seriesStateOptions.width ||
shapeArgs.width ||
0) + (pointStateOptions.widthPlus ||
seriesStateOptions.widthPlus ||
0);
var height = (pointStateOptions.height ||
seriesStateOptions.height ||
shapeArgs.height ||
0) + (pointStateOptions.heightPlus ||
seriesStateOptions.heightPlus ||
0);
// Align marker by the new size.
var x = (shapeArgs.x || 0) + ((shapeArgs.width || 0) - width) / 2, y = (shapeArgs.y || 0) + ((shapeArgs.height || 0) - height) / 2;
return { x: x, y: y, width: width, height: height };
}
return shapeArgs;
};
/**
* @private
*/
HeatmapSeries.prototype.pointAttribs = function (point, state) {
var series = this,
attr = HeatmapSeries_Series.prototype.pointAttribs.call(series,
point,
state),
seriesOptions = series.options || {},
plotOptions = series.chart.options.plotOptions || {},
seriesPlotOptions = plotOptions.series || {},
heatmapPlotOptions = plotOptions.heatmap || {},
// Get old properties in order to keep backward compatibility
borderColor = (point && point.options.borderColor) ||
seriesOptions.borderColor ||
heatmapPlotOptions.borderColor ||
seriesPlotOptions.borderColor,
borderWidth = (point && point.options.borderWidth) ||
seriesOptions.borderWidth ||
heatmapPlotOptions.borderWidth ||
seriesPlotOptions.borderWidth ||
attr['stroke-width'];
// Apply lineColor, or set it to default series color.
attr.stroke = ((point && point.marker && point.marker.lineColor) ||
(seriesOptions.marker && seriesOptions.marker.lineColor) ||
borderColor ||
this.color);
// Apply old borderWidth property if exists.
attr['stroke-width'] = borderWidth;
if (state && state !== 'normal') {
var stateOptions = HeatmapSeries_merge((seriesOptions.states &&
seriesOptions.states[state]), (seriesOptions.marker &&
seriesOptions.marker.states &&
seriesOptions.marker.states[state]), (point &&
point.options.states &&
point.options.states[state] || {}));
attr.fill =
stateOptions.color ||
Color_Color.parse(attr.fill).brighten(stateOptions.brightness || 0).get();
attr.stroke = (stateOptions.lineColor || attr.stroke); // #17896
}
return attr;
};
/**
* @private
*/
HeatmapSeries.prototype.translate = function () {
var series = this, options = series.options, borderRadius = options.borderRadius, marker = options.marker, symbol = marker && marker.symbol || 'rect', shape = HeatmapSeries_symbols[symbol] ? symbol : 'rect', hasRegularShape = ['circle', 'square'].indexOf(shape) !== -1;
series.generatePoints();
for (var _i = 0, _a = series.points; _i < _a.length; _i++) {
var point = _a[_i];
var cellAttr = point.getCellAttributes();
var x = Math.min(cellAttr.x1,
cellAttr.x2),
y = Math.min(cellAttr.y1,
cellAttr.y2),
width = Math.max(Math.abs(cellAttr.x2 - cellAttr.x1), 0),
height = Math.max(Math.abs(cellAttr.y2 - cellAttr.y1), 0);
point.hasImage = (point.marker && point.marker.symbol || symbol || '').indexOf('url') === 0;
// If marker shape is regular (square), find the shorter cell's
// side.
if (hasRegularShape) {
var sizeDiff = Math.abs(width - height);
x = Math.min(cellAttr.x1, cellAttr.x2) +
(width < height ? 0 : sizeDiff / 2);
y = Math.min(cellAttr.y1, cellAttr.y2) +
(width < height ? sizeDiff / 2 : 0);
width = height = Math.min(width, height);
}
if (point.hasImage) {
point.marker = { width: width, height: height };
}
point.plotX = point.clientX = (cellAttr.x1 + cellAttr.x2) / 2;
point.plotY = (cellAttr.y1 + cellAttr.y2) / 2;
point.shapeType = 'path';
point.shapeArgs = HeatmapSeries_merge(true, { x: x, y: y, width: width, height: height }, {
d: HeatmapSeries_symbols[shape](x, y, width, height, { r: HeatmapSeries_isNumber(borderRadius) ? borderRadius : 0 })
});
}
HeatmapSeries_fireEvent(series, 'afterTranslate');
};
HeatmapSeries.defaultOptions = HeatmapSeries_merge(HeatmapSeries_ScatterSeries.defaultOptions, Heatmap_HeatmapSeriesDefaults);
return HeatmapSeries;
}(HeatmapSeries_ScatterSeries));
HeatmapSeries_addEvent(HeatmapSeries, 'afterDataClassLegendClick', function () {
this.isDirtyCanvas = true;
this.drawPoints();
});
HeatmapSeries_extend(HeatmapSeries.prototype, {
axisTypes: Series_ColorMapComposition.seriesMembers.axisTypes,
colorKey: Series_ColorMapComposition.seriesMembers.colorKey,
directTouch: true,
getExtremesFromAll: true,
keysAffectYAxis: ['y'],
parallelArrays: Series_ColorMapComposition.seriesMembers.parallelArrays,
pointArrayMap: ['y', 'value'],
pointClass: Heatmap_HeatmapPoint,
specialGroup: 'group',
trackerGroups: Series_ColorMapComposition.seriesMembers.trackerGroups,
/**
* @private
*/
alignDataLabel: HeatmapSeries_ColumnSeries.prototype.alignDataLabel,
colorAttribs: Series_ColorMapComposition.seriesMembers.colorAttribs,
getSymbol: HeatmapSeries_Series.prototype.getSymbol
});
Series_ColorMapComposition.compose(HeatmapSeries);
Series_SeriesRegistry.registerSeriesType('heatmap', HeatmapSeries);
/* *
*
* Default Export
*
* */
/* harmony default export */ var Heatmap_HeatmapSeries = ((/* unused pure expression or super */ null && (HeatmapSeries)));
/* *
*
* API Declarations
*
* */
/**
* Heatmap series only. Padding between the points in the heatmap.
* @name Highcharts.Point#pointPadding
* @type {number|undefined}
*/
/**
* Heatmap series only. The value of the point, resulting in a color
* controlled by options as set in the colorAxis configuration.
* @name Highcharts.Point#value
* @type {number|null|undefined}
*/
/* *
* @interface Highcharts.PointOptionsObject in parts/Point.ts
*/ /**
* Heatmap series only. Point padding for a single point.
* @name Highcharts.PointOptionsObject#pointPadding
* @type {number|undefined}
*/ /**
* Heatmap series only. The value of the point, resulting in a color controlled
* by options as set in the colorAxis configuration.
* @name Highcharts.PointOptionsObject#value
* @type {number|null|undefined}
*/
''; // Detach doclets above
;// ./code/es5/es-modules/masters/modules/map.src.js
/**
* @license Highmaps JS v12.1.2 (2025-01-09)
* @module highcharts/modules/map
* @requires highcharts
*
* Highmaps as a plugin for Highcharts or Highcharts Stock.
*
* (c) 2011-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*/
var map_src_G = Core_Globals;
// Classes
map_src_G.ColorMapComposition = Series_ColorMapComposition;
map_src_G.MapChart = map_src_G.MapChart || Chart_MapChart;
map_src_G.MapNavigation = map_src_G.MapNavigation || Maps_MapNavigation;
map_src_G.MapView = map_src_G.MapView || Maps_MapView;
map_src_G.Projection = map_src_G.Projection || Maps_Projection;
// Functions
map_src_G.mapChart = map_src_G.Map = map_src_G.MapChart.mapChart;
map_src_G.maps = map_src_G.MapChart.maps;
map_src_G.geojson = Maps_GeoJSONComposition.geojson;
map_src_G.topo2geo = Maps_GeoJSONComposition.topo2geo;
// Compositions
Maps_GeoJSONComposition.compose(map_src_G.Chart);
MapBubble_MapBubbleSeries.compose(map_src_G.Axis, map_src_G.Chart, map_src_G.Legend);
Maps_MapNavigation.compose(Chart_MapChart, map_src_G.Pointer, map_src_G.SVGRenderer);
Maps_MapView.compose(Chart_MapChart);
// Default Export
/* harmony default export */ var map_src = ((/* unused pure expression or super */ null && (Highcharts)));
;// ./code/es5/es-modules/masters/highmaps.src.js
/**
* @license Highmaps JS v12.1.2 (2025-01-09)
* @module highcharts/highmaps
*
* (c) 2011-2024 Torstein Honsi
*
* License: www.highcharts.com/license
*/
highcharts_src.product = 'Highmaps';
/* harmony default export */ var highmaps_src = (highcharts_src);
__webpack_exports__ = __webpack_exports__["default"];
/******/ return __webpack_exports__;
/******/ })()
;
});
Hacked By AnonymousFox1.0, Coded By AnonymousFox