highcharts
Version:
JavaScript charting framework
1,299 lines • 145 kB
JavaScript
/* *
*
* (c) 2010-2021 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from './Globals.js';
var isTouchDevice = H.isTouchDevice, svg = H.svg;
import Color from './Color/Color.js';
var color = Color.parse;
import palette from './Color/Palette.js';
import Time from './Time.js';
import U from './Utilities.js';
var merge = U.merge;
/**
* @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 occured.
*
* @param {Highcharts.ChartAddSeriesEventObject} event
* The event that occured.
*/
/**
* 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 occured.
*
* @param {Highcharts.PointerEventObject} event
* The event that occured.
*/
/**
* 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 occured.
*
* @param {global.Event} event
* The event that occured.
*/
/**
* 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 occured.
*
* @param {global.Event} event
* The event that occured.
*/
/**
* 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 occured.
*
* @param {global.Event} event
* The event that occured.
*/
/**
* 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 occured.
*
* @param {global.ChartSelectionContextObject} event
* Event informations
*
* @return {boolean|undefined}
* Return false to prevent the default action, usually zoom.
*/
/**
* 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.ChartSelectionContextObject
* @extends global.Event
*/ /**
* Arrays containing the axes of each dimension and each axis' min and max
* values.
* @name Highcharts.ChartSelectionContextObject#xAxis
* @type {Array<Highcharts.ChartSelectionAxisContextObject>}
*/ /**
* Arrays containing the axes of each dimension and each axis' min and max
* values.
* @name Highcharts.ChartSelectionContextObject#yAxis
* @type {Array<Highcharts.ChartSelectionAxisContextObject>}
*/
/**
* Axis context of the selection.
*
* @interface Highcharts.ChartSelectionAxisContextObject
*/ /**
* The selected Axis.
* @name Highcharts.ChartSelectionAxisContextObject#axis
* @type {Highcharts.Axis}
*/ /**
* The maximum axis value, either automatic or set manually.
* @name Highcharts.ChartSelectionAxisContextObject#max
* @type {number}
*/ /**
* The minimum axis value, either automatic or set manually.
* @name Highcharts.ChartSelectionAxisContextObject#min
* @type {number}
*/
''; // detach doclets above
/* ************************************************************************** *
* Handle the options *
* ************************************************************************** */
/**
* Global default settings.
*
* @name Highcharts.defaultOptions
* @type {Highcharts.Options}
*/ /**
* @optionparent
*/
H.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.
*
*
* ### Legacy
*
* In Highcharts 3.x, the default colors were:
* ```js
* colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
* '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
* ```
*
* In Highcharts 2.x, the default colors were:
* ```js
* colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
* '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']
* ```
*
* @sample {highcharts} highcharts/chart/colors/
* Assign a global color theme
*
* @type {Array<Highcharts.ColorString>}
* @default ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
* "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"]
*/
colors: palette.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'],
/**
* The language object is global and it can't be set on each chart
* initialization. Instead, use `Highcharts.setOptions` to set it before any
* chart is initialized.
*
* ```js
* Highcharts.setOptions({
* lang: {
* months: [
* 'Janvier', 'Février', 'Mars', 'Avril',
* 'Mai', 'Juin', 'Juillet', 'Août',
* 'Septembre', 'Octobre', 'Novembre', 'Décembre'
* ],
* weekdays: [
* 'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
* 'Jeudi', 'Vendredi', 'Samedi'
* ]
* }
* });
* ```
*/
lang: {
/**
* 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()`.
*
* @type {Array<string>}
* @default ["January", "February", "March", "April", "May", "June",
* "July", "August", "September", "October", "November",
* "December"]
*/
months: [
'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'
],
/**
* An array containing the months names in abbreviated form. Corresponds
* to the `%b` format in `Highcharts.dateFormat()`.
*
* @type {Array<string>}
* @default ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
* "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
*/
shortMonths: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
/**
* An array containing the weekday names.
*
* @type {Array<string>}
* @default ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
* "Friday", "Saturday"]
*/
weekdays: [
'Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday'
],
/**
* Short week days, starting Sunday. If not specified, Highcharts uses
* the first three letters of the `lang.weekdays` option.
*
* @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.
*
* @since 1.2.2
*/
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 `null` 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 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',
/**
* The default thousands separator used in the `Highcharts.numberFormat`
* method unless otherwise specified in the function arguments. Defaults
* to a single space character, which is recommended in
* [ISO 31-0](https://en.wikipedia.org/wiki/ISO_31-0#Numbers) and works
* across Anglo-American and continental European languages.
*
* @default \u0020
* @since 1.2.2
*/
thousandsSep: ' '
},
/**
* 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: {
* useUTC: false
* }
* });
* ```
*/
/**
* _Canvg rendering for Android 2.x is removed as of Highcharts 5.0\.
* Use the [libURL](#exporting.libURL) option to configure exporting._
*
* The URL to the additional file to lazy load for Android 2.x devices.
* These devices don't support SVG, so we download a helper file that
* contains [canvg](https://github.com/canvg/canvg), its dependency
* rbcolor, and our own CanVG Renderer class. To avoid hotlinking to
* our site, you can install canvas-tools.js on your own server and
* change this option accordingly.
*
* @deprecated
*
* @type {string}
* @default https://code.highcharts.com/{version}/modules/canvas-tools.js
* @product highcharts highmaps
* @apioption global.canvasToolsURL
*/
/**
* This option is deprecated since v6.0.5. Instead, use
* [time.useUTC](#time.useUTC) that supports individual time settings
* per chart.
*
* @deprecated
*
* @type {boolean}
* @apioption global.useUTC
*/
/**
* This option is deprecated since v6.0.5. Instead, use
* [time.Date](#time.Date) that supports individual time settings
* per chart.
*
* @deprecated
*
* @type {Function}
* @product highcharts highstock
* @apioption global.Date
*/
/**
* This option is deprecated since v6.0.5. Instead, use
* [time.getTimezoneOffset](#time.getTimezoneOffset) that supports
* individual time settings per chart.
*
* @deprecated
*
* @type {Function}
* @product highcharts highstock
* @apioption global.getTimezoneOffset
*/
/**
* This option is deprecated since v6.0.5. Instead, use
* [time.timezone](#time.timezone) that supports individual time
* settings per chart.
*
* @deprecated
*
* @type {string}
* @product highcharts highstock
* @apioption global.timezone
*/
/**
* This option is deprecated since v6.0.5. Instead, use
* [time.timezoneOffset](#time.timezoneOffset) that supports individual
* time settings per chart.
*
* @deprecated
*
* @type {number}
* @product highcharts highstock
* @apioption global.timezoneOffset
*/
global: {},
/**
* 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 Highstock 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
* var 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` obect 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 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.
*
* @see [global.timezoneOffset](#global.timezoneOffset)
*
* @sample {highcharts|highstock} highcharts/time/gettimezoneoffset/
* Use moment.js to draw Oslo time regardless of browser locale
*
* @type {Highcharts.TimezoneOffsetCallbackFunction}
* @since 4.1.0
* @product highcharts highstock gantt
*/
getTimezoneOffset: void 0,
/**
* Requires [moment.js](https://momentjs.com/). If the timezone option
* is specified, it creates a default
* [getTimezoneOffset](#time.getTimezoneOffset) function that looks
* up the specified timezone in moment.js. If moment.js is not included,
* this throws a Highcharts error in the console, but does not crash the
* chart.
*
* @see [getTimezoneOffset](#time.getTimezoneOffset)
*
* @sample {highcharts|highstock} highcharts/time/timezone/
* Europe/Oslo
*
* @type {string}
* @since 5.0.7
* @product highcharts highstock gantt
*/
timezone: void 0,
/**
* 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.
*
* @see [time.getTimezoneOffset](#time.getTimezoneOffset)
*
* @sample {highcharts|highstock} highcharts/time/timezoneoffset/
* Timezone offset
*
* @since 3.0.8
* @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.
*
* @sample {highcharts} highcharts/time/useutc-true/
* True by default
* @sample {highcharts} highcharts/time/useutc-false/
* False
*/
useUTC: true
},
/**
* General options for the chart.
*/
chart: {
/**
* Default `mapData` for all series. If set to a string, it functions
* as an index into the `Highcharts.maps` array. Otherwise it is
* interpreted as map data.
*
* @see [mapData](#series.map.mapData)
*
* @sample maps/demo/geojson
* Loading geoJSON data
* @sample maps/chart/topojson
* Loading topoJSON converted to geoJSON
*
* @type {string|Array<*>|Highcharts.GeoJSON}
* @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 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.
*
* @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
*/
/**
* 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 undefined
* @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 {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 {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).
*
* @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
*/
/**
* 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
*
* @product highcharts highstock gantt
* @apioption chart.panning
*/
/**
* Enable or disable chart panning.
*
* @type {boolean}
* @default {highcharts} false
* @default {highstock} true
* @apioption chart.panning.enabled
*/
/**
* Decides in what dimensions the user can pan the chart. Can be
* one of `x`, `y`, or `xy`.
*
* @sample {highcharts} highcharts/chart/panning-type
* Zooming and xy panning
*
* @type {string}
* @validvalue ["x", "y", "xy"]
* @default x
* @apioption chart.panning.type
*/
/**
* 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} x
* @since 3.0
* @product highcharts highstock gantt
* @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`.
*
* @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-0`
* [...] `highcharts-color-9`. The equivalent in non-styled mode
* is to set colors using the [colors](#colors) setting.
*
* @since 5.0.0
*/
colorCount: 10,
/**
* Alias of `type`.
*
* @sample {highcharts} highcharts/chart/defaultseriestype/
* Bar
*
* @deprecated
*
* @product highcharts
*/
defaultSeriesType: 'line',
/**
* 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, or if the chart is
* [polar](#chart.polar).
*
* @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.
*/
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}
* @default plot
* @since 2.2
* @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}
* @since 2.2
*/
theme: {
/** @internal */
zIndex: 6
},
/**
* 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}
* @since 2.2
*/
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.resetZoomButton.position.verticalAlign
*/
/**
* The vertical offset of the button.
*/
y: 10
}
},
/**
* 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.CSSObject}
* @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
*
* @type {boolean}
* @default true
* @since 2.1
* @apioption chart.reflow
*/
/**
* 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}
* @apiopti