UNPKG

highcharts

Version:
1,299 lines 145 kB
/* * * * (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