/**
* (c) 2010-2017 Torstein Honsi
*
* License: www.highcharts.com/license
*/
/* eslint max-len: 0 */
'use strict';
import H from './Globals.js';
import './Color.js';
import './Utilities.js';
import './Time.js';
var color = H.color,
isTouchDevice = H.isTouchDevice,
merge = H.merge,
svg = H.svg;
/* ****************************************************************************
* Handle the 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:
*
*
*
* @type {Array}
* @sample {highcharts} highcharts/chart/colors/ Assign a global color theme
* @default ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9",
* "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"]
*/
colors: '#7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1'.split(' '),
/**
* Styled mode only. Configuration object for adding SVG definitions for
* reusable elements. See [gradients, shadows and patterns](http://www.
* highcharts.com/docs/chart-design-and-style/gradients-shadows-and-
* patterns) for more information and code examples.
*
* @type {Object}
* @since 5.0.0
* @apioption defs
*/
/**
* @ignore-option
*/
symbols: ['circle', 'diamond', 'square', 'triangle', 'triangle-down'],
lang: {
/**
* The loading text that appears when the chart is set into the loading
* state following a call to `chart.showLoading`.
*
* @type {String}
* @default Loading...
*/
loading: 'Loading...',
/**
* An array containing the months names. Corresponds to the `%B` format
* in `Highcharts.dateFormat()`.
*
* @type {Array}
* @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}
* @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}
* @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.
*
* @type {Array}
* @sample highcharts/lang/shortweekdays/
* Finnish two-letter abbreviations
* @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 default decimal point used in the `Highcharts.numberFormat`
* method unless otherwise specified in the function arguments.
*
* @type {String}
* @default .
* @since 1.2.2
*/
decimalPoint: '.',
/**
* [Metric prefixes](http://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.
*
* @type {Array}
* @sample {highcharts} highcharts/lang/numericsymbols/
* Replacing the symbols with text
* @sample {highstock} highcharts/lang/numericsymbols/
* Replacing the symbols with text
* @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.
*
* @type {Number}
* @sample highcharts/lang/numericsymbolmagnitude/
* 10000 magnitude for Japanese
* @default 1000
* @since 5.0.3
* @apioption lang.numericSymbolMagnitude
*/
/**
* The text for the label appearing when a chart is zoomed.
*
* @type {String}
* @default Reset zoom
* @since 1.2.4
*/
resetZoom: 'Reset zoom',
/**
* The tooltip title for the label appearing when a chart is zoomed.
*
* @type {String}
* @default Reset zoom level 1:1
* @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. Since
* Highcharts 4.1 it defaults to a single space character, which is
* compatible with ISO and works across Anglo-American and continental
* European languages.
*
* The default is a single space.
*
* @type {String}
* @default
* @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.
*
*
*
*/
/**
* _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](http://code.google.com/p/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.
*
* @type {String}
* @deprecated
* @default http://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 {Object}
* @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: H.Time.prototype.defaultOptions,
chart: {
/**
* 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.
*
* @type {Boolean}
* @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
* @default true
* @product highcharts highstock
* @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:
*
*
*
*
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](http://jsfiddle.net/gh/get/library/pure/
* highcharts/highcharts/tree/master/samples/highcharts/plotoptions/
* series-animation-easing/).
*
*
*
* @type {Boolean|Object}
* @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
* @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 was
* passed to the `addSeries` method. Returning false prevents the series
* from being added.
*
* @type {Function}
* @context Chart
* @sample {highcharts} highcharts/chart/events-addseries/ Alert on add series
* @sample {highstock} stock/chart/events-addseries/ Alert on add series
* @since 1.2.0
* @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.
*
*
*
* @type {Function}
* @context Chart
* @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
* @since 1.2.0
* @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.
*
* @type {Function}
* @context Chart
* @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
* @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.
*
* @type {Function}
* @context Chart
* @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
* @since 1.2.0
* @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 {Function}
* @context Chart
* @since 5.0.7
* @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()`.
*
* 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.
*
*
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);
* }
*
* @type {Function}
* @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)
* @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.
*
* @type {Array}
* @sample {highcharts} highcharts/chart/margins-zero/
* Zero margins
* @sample {highstock} stock/chart/margin-zero/
* Zero margins
*
* @defaults {all} null
* @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`.
*
* @type {Number}
* @sample {highcharts} highcharts/chart/marginbottom/
* 100px bottom margin
* @sample {highstock} stock/chart/marginbottom/
* 100px bottom margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
* @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`.
*
* @type {Number}
* @sample {highcharts} highcharts/chart/marginleft/
* 150px left margin
* @sample {highstock} stock/chart/marginleft/
* 150px left margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
* @default null
* @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`.
*
* @type {Number}
* @sample {highcharts} highcharts/chart/marginright/
* 100px right margin
* @sample {highstock} stock/chart/marginright/
* 100px right margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
* @default null
* @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`.
*
* @type {Number}
* @sample {highcharts} highcharts/chart/margintop/ 100px top margin
* @sample {highstock} stock/chart/margintop/
* 100px top margin
* @sample {highmaps} maps/chart/margin/
* 100px margins
* @default null
* @since 2.0
* @apioption chart.marginTop
*/
/**
* 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`).
*
* @validvalue [null, "alt", "ctrl", "meta", "shift"]
* @type {String}
* @since 4.0.3
* @product highcharts
* @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`.
*
* @type {Boolean}
* @sample {highcharts} highcharts/chart/pankey/ Zooming and panning
* @default {highcharts} false
* @default {highstock} true
* @since 4.0.3
* @product highcharts highstock
* @apioption chart.panning
*/
/**
* 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.
*
* @validvalue ["x", "y", "xy"]
* @type {String}
* @default {highcharts} null
* @default {highstock} x
* @since 3.0
* @product highcharts highstock
* @apioption chart.pinchType
*/
/**
* The corner radius of the outer chart border.
*
* @type {Number}
* @sample {highcharts} highcharts/chart/borderradius/ 20px radius
* @sample {highstock} stock/chart/border/ 10px radius
* @sample {highmaps} maps/chart/border/ Border options
* @default 0
*/
borderRadius: 0,
/**
* Alias of `type`.
*
* @validvalue ["line", "spline", "column", "area", "areaspline", "pie"]
* @type {String}
* @deprecated
* @sample {highcharts} highcharts/chart/defaultseriestype/ Bar
* @default line
* @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.
*
* @type {Boolean}
* @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
* @default true
* @since 1.2.0
* @product highcharts highstock
*/
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).
*
* @type {Boolean}
* @sample {highcharts} highcharts/chart/inverted/
* Inverted line
* @sample {highstock} stock/navigator/inverted/
* Inverted stock chart
* @default false
* @product highcharts highstock
* @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}
* @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 should be placed related to. Can be either
* `plot` or `chart`
*
* @validvalue ["plot", "chart"]
* @type {String}
* @sample {highcharts} highcharts/chart/resetzoombutton-relativeto/
* Relative to the chart
* @sample {highstock} highcharts/chart/resetzoombutton-relativeto/
* Relative to the chart
* @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`.
*
* @type {Object}
* @sample {highcharts} highcharts/chart/resetzoombutton-theme/
* Theming the button
* @sample {highstock} highcharts/chart/resetzoombutton-theme/
* Theming the button
* @since 2.2
*/
theme: {
/**
* The Z index for the reset zoom button. The default value
* places it below the tooltip that has Z index 7.
*/
zIndex: 6
},
/**
* The position of the button.
*
* @type {Object}
* @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
* @since 2.2
*/
position: {
/**
* The horizontal alignment of the button.
*
* @type {String}
*/
align: 'right',
/**
* The horizontal offset of the button.
*
* @type {Number}
*/
x: -10,
/**
* The vertical alignment of the button.
*
* @validvalue ["top", "middle", "bottom"]
* @type {String}
* @default top
* @apioption chart.resetZoomButton.position.verticalAlign
*/
/**
* The vertical offset of the button.
*
* @type {Number}
*/
y: 10
}
},
/**
* The pixel width of the plot area border.
*
* @type {Number}
* @sample {highcharts} highcharts/chart/plotborderwidth/ 1px border
* @sample {highstock} stock/chart/plotborder/
* 2px border
* @sample {highmaps} maps/chart/plotborder/
* Plot border options
* @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`.
*
* @type {Boolean|Object}
* @sample {highcharts} highcharts/chart/plotshadow/ Plot shadow
* @sample {highstock} stock/chart/plotshadow/
* Plot shadow
* @sample {highmaps} maps/chart/plotborder/
* Plot border options
* @default false
* @apioption chart.plotShadow
*/
/**
* When true, cartesian charts like line, spline, area and column are
* transformed into the polar coordinate system. Requires
* `highcharts-more.js`.
*
* @type {Boolean}
* @default false
* @since 2.3.0
* @product highcharts
* @apioption chart.polar
*/
/**
* Whether to reflow the chart to fit the width of the container div
* on resizing the window.
*
* @type {Boolean}
* @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
* @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.
*
* @type {String|Object}
* @sample {highcharts} highcharts/chart/reflow-true/
* String
* @sample {highcharts} highcharts/chart/renderto-object/
* Object reference
* @sample {highcharts} highcharts/chart/renderto-jquery/
* Object reference through jQuery
* @sample {highstock} stock/chart/renderto-string/
* String
* @sample {highstock} stock/chart/renderto-object/
* Object reference
* @sample {highstock} stock/chart/renderto-jquery/
* Object reference through jQuery
* @apioption chart.renderTo
*/
/**
* The background color of the marker square when selecting (zooming
* in on) an area of the chart.
*
* @type {Color}
* @see In styled mode, the selection marker fill is set with the
* `.highcharts-selection-marker` class.
* @default rgba(51,92,173,0.25)
* @since 2.1.7
* @apioption chart.selectionMarkerFill
*/
/**
* 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`.
*
* @type {Boolean|Object}
* @sample {highcharts} highcharts/chart/shadow/ Shadow
* @sample {highstock} stock/chart/shadow/
* Shadow
* @sample {highmaps} maps/chart/border/
* Chart border and shadow
* @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.
*
* @type {Boolean}
* @sample {highcharts} highcharts/chart/showaxes-false/ False by default
* @sample {highcharts} highcharts/chart/showaxes-true/ True
* @since 1.2.5
* @product highcharts
* @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).
*
* @type {Number}
* @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
* @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).
*
* @type {Number}
* @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
* @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).
*
* @type {Number}
* @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
* @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).
*
* @type {Number}
* @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
* @default 10
* @since 2.1
* @apioption chart.spacingTop
*/
/**
* Additional CSS styles to apply inline to the container `div`. Note
* that since the default font styles are applied in the renderer, it
* is ignorant of the individual chart options and must be set globally.
*
* @type {CSSObject}
* @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/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
* @default {"fontFamily":"\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"}
* @apioption chart.style
*/
/**
* The default series type for the chart. Can be any of the chart types
* listed under [plotOptions](#plotOptions).
*
* @validvalue ["line", "spline", "column", "bar", "area", "areaspline", "pie", "arearange", "areasplinerange", "boxplot", "bubble", "columnrange", "errorbar", "funnel", "gauge", "heatmap", "polygon", "pyramid", "scatter", "solidgauge", "treemap", "waterfall"]
* @type {String}
* @sample {highcharts} highcharts/chart/type-bar/ Bar
* @sample {highstock} stock/chart/type/
* Areaspline
* @sample {highmaps} maps/chart/type-mapline/
* Mapline
* @default {highcharts} line
* @default {highstock} line
* @default {highmaps} map
* @since 2.1.0
* @apioption chart.type
*/
/**
* Decides in what dimensions the user can zoom by dragging the mouse.
* Can be one of `x`, `y` or `xy`.
*
* @validvalue [null, "x", "y", "xy"]
* @type {String}
* @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 {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
* @product highcharts highstock
* @apioption chart.zoomType
*/
/**
* An explicit width for the chart. By default (when `null`) the width
* is calculated from the offset width of the containing element.
*
* @type {Number}
* @sample {highcharts} highcharts/chart/width/ 800px wide
* @sample {highstock} stock/chart/width/ 800px wide
* @sample {highmaps} maps/chart/size/ Chart with explicit size
* @default null
*/
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.
*
* @type {Number|String}
* @sample {highcharts} highcharts/chart/height/
* 500px 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
* @default null
*/
height: null,
/**
* The color of the outer chart border.
*
* @type {Color}
* @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
* @default #335cad
*/
borderColor: '#335cad',
/**
* The pixel width of the outer chart border.
*
* @type {Number}
* @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
* @default 0
* @apioption chart.borderWidth
*/
/**
* The background color or gradient for the outer chart area.
*
* @type {Color}
* @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
* @default #FFFFFF
*/
backgroundColor: '#ffffff',
/**
* The background color or gradient for the plot area.
*
* @type {Color}
* @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
* @default null
* @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.
*
* @type {String}
* @see In styled mode, a plot background image can be set with the
* `.highcharts-plot-background` class and a [custom pattern](http://www.
* highcharts.com/docs/chart-design-and-style/gradients-shadows-and-
* patterns).
* @sample {highcharts} highcharts/chart/plotbackgroundimage/ Skies
* @sample {highstock} stock/chart/plotbackgroundimage/ Skies
* @default null
* @apioption chart.plotBackgroundImage
*/
/**
* The color of the inner chart or plot area border.
*
* @type {Color}
* @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
* @default #cccccc
*/
plotBorderColor: '#cccccc'
},
/**
* The chart's main title.
*
* @sample {highmaps} maps/title/title/ Title options demonstrated
*/
title: {
/**
* When the title is floating, the plot area will not move to make space
* for it.
*
* @type {Boolean}
* @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
* @default false
* @since 2.1
* @apioption title.floating
*/
/**
* CSS styles for the title. Use this for font styling, but use `align`,
* `x` and `y` for text alignment.
*
* In styled mode, the title style is given in the `.highcharts-title` class.
*
* @type {CSSObject}
* @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
* @default {highcharts|highmaps} { "color": "#333333", "fontSize": "18px" }
* @default {highstock} { "color": "#333333", "fontSize": "16px" }
* @apioption title.style
*/
/**
* Whether to [use HTML](http://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`.
*
* @validvalue ["top", "middle", "bottom"]
* @type {String}
* @sample {highcharts} highcharts/title/verticalalign/
* Chart title in bottom right corner
* @sample {highstock} stock/chart/title-verticalalign/
* Chart title in bottom right corner
* @since 2.1
* @apioption title.verticalAlign
*/
/**
* The x position of the title relative to the alignment within chart.
* spacingLeft and chart.spacingRight.
*
* @type {Number}
* @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)
* @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.
*
* @type {Number}
* @sample {highcharts} highcharts/title/y/
* Title inside the plot area
* @sample {highstock} stock/chart/title-verticalalign/
* Chart title in bottom right corner
* @since 2.0
* @apioption title.y
*/
/**
* The title of the chart. To disable the title, set the `text` to
* `null`.
*
* @type {String}
* @sample {highcharts} highcharts/title/text/ Custom title
* @sample {highstock} stock/chart/title-text/ Custom title
* @default {highcharts|highmaps} Chart title
* @default {highstock} null
*/
text: 'Chart title',
/**
* The horizontal alignment of the title. Can be one of "left", "center"
* and "right".
*
* @validvalue ["left", "center", "right"]
* @type {String}
* @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)
* @default center
* @since 2.0
*/
align: 'center',
/**
* The margin between the title and the plot area, or if a subtitle
* is present, the margin between the subtitle and the plot area.
*
* @type {Number}
* @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
* @default 15
* @since 2.1
*/
margin: 15,
/**
* Adjustment made to the title width, normally to reserve space for
* the exporting burger menu.
*
* @type {Number}
* @sample {highcharts} highcharts/title/widthadjust/ Wider menu, greater padding
* @sample {highstock} highcharts/title/widthadjust/ Wider menu, greater padding
* @sample {highmaps} highcharts/title/widthadjust/ Wider menu, greater padding
* @default -44
* @since 4.2.5
*/
widthAdjust: -44
},
/**
* 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 {highmaps} maps/title/subtitle/ Subtitle options demonstrated
*/
subtitle: {
/**
* When the subtitle is floating, the plot area will not move to make
* space for it.
*
* @type {Boolean}
* @sample {highcharts} highcharts/subtitle/floating/
* Floating title and subtitle
* @sample {highstock} stock/chart/subtitle-footnote
* Footnote floating at bottom right of plot area
* @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.
*
* @type {CSSObject}
* @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
* @default { "color": "#666666" }
* @apioption subtitle.style
*/
/**
* Whether to [use HTML](http://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 a value is given, the title behaves as floating.
*
* @validvalue ["top", "middle", "bottom"]
* @type {String}
* @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
* @default
* @since 2.1
* @apioption subtitle.verticalAlign
*/
/**
* The x position of the subtitle relative to the alignment within chart.
* spacingLeft and chart.spacingRight.
*
* @type {Number}
* @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
* @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.
*
* @type {Number}
* @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
* @default {highcharts} null
* @default {highstock} null
* @default {highmaps}
* @since 2.0
* @apioption subtitle.y
*/
/**
* The subtitle of the chart.
*
* @type {String}
* @sample {highcharts} highcharts/subtitle/text/ Custom subtitle
* @sample {highcharts} highcharts/subtitle/text-formatted/ Formatted and linked text.
* @sample {highstock} stock/chart/subtitle-text Custom subtitle
* @sample {highstock} stock/chart/subtitle-text-formatted Formatted and linked text.
*/
text: '',
/**
* The horizontal alignment of the subtitle. Can be one of "left",
* "center" and "right".
*
* @validvalue ["left", "center", "right"]
* @type {String}
* @sample {highcharts} highcharts/subtitle/align/ Footnote at right of plot area
* @sample {highstock} stock/chart/subtitle-footnote Footnote at bottom right of plot area
* @default center
* @since 2.0
*/
align: 'center',
/**
* Adjustment made to the subtitle width, normally to reserve space
* for the exporting burger menu.
*
* @type {Number}
* @see [title.widthAdjust](#title.widthAdjust)
* @sample {highcharts} highcharts/title/widthadjust/ Wider menu, greater padding
* @sample {highstock} highcharts/title/widthadjust/ Wider menu, greater padding
* @sample {highmaps} highcharts/title/widthadjust/ Wider menu, greater padding
* @default -44
* @since 4.2.5
*/
widthAdjust: -44
},
/**
* 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: {},
/**
* HTML labels that can be positioned anywhere in the chart area.
*
*/
labels: {
/**
* A HTML label that can be positioned anywhere in the chart area.
*
* @type {Array