import type { AlignObject } from '../Renderer/AlignObject'; import type { ButtonRelativeToValue } from '../../Maps/MapNavigationOptions'; import type AnimationOptions from '../../Core/Animation/AnimationOptions'; import type Axis from '../Axis/Axis'; import type Chart from './Chart'; import type ColorType from '../../Core/Color/ColorType'; import type CSSObject from '../Renderer/CSSObject'; import type { GeoJSON, TopoJSON } from '../../Maps/GeoJSON'; import type { HTMLDOMElement } from '../Renderer/DOMElementType'; import type { NumberFormatterCallbackFunction } from '../Options'; import type { SeriesTypeOptions } from '../Series/SeriesType'; import type ShadowOptionsObject from '../Renderer/ShadowOptionsObject'; import type SVGAttributes from '../Renderer/SVG/SVGAttributes'; declare module '../Options' { interface Options { /** * General options for the chart. */ chart: ChartOptions; } } export interface ChartAddSeriesCallbackFunction { (this: Chart, event: ChartAddSeriesEventObject): void; } export interface ChartAddSeriesEventObject { options: SeriesTypeOptions; preventDefault: Function; target: Chart; type: 'addSeries'; } export interface ChartClickCallbackFunction { (this: Chart, event: PointerEvent): void; } export interface ChartClickEventAxisObject { axis: Axis; value: number; } export interface ChartClickEventObject { xAxis: Array; yAxis: Array; zAxis?: Array; } /** * Event listeners for the chart. */ export interface ChartEventsOptions { /** * 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 * * @since 1.2.0 */ addSeries?: ChartAddSeriesCallbackFunction; /** * 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 * * @since 1.2.0 */ click?: ChartClickCallbackFunction; /** * Fires when the chart is finished loading. Since v4.2.2, it also waits * for images to be loaded, for example from point markers. One * parameter, `event`, is passed to the function, containing common * event information. * * There is also a second parameter to the chart constructor where a * callback function can be passed to be executed on chart.load. * * @sample {highcharts} highcharts/chart/events-load/ * Alert on chart load * @sample {highcharts} highcharts/chart/events-render/ * Load vs Redraw vs Render * @sample {highstock} stock/chart/events-load/ * Alert on chart load * @sample {highmaps} maps/chart/events-load/ * Add series on chart load */ load?: ChartLoadCallbackFunction; /** * Fires when the chart is redrawn, either after a call to * `chart.redraw()` or after an axis, series or point is modified with * the `redraw` option set to `true`. One parameter, `event`, is passed * to the function, containing common event information. * * @sample {highcharts} highcharts/chart/events-redraw/ * Alert on chart redraw * @sample {highcharts} highcharts/chart/events-render/ * Load vs Redraw vs Render * @sample {highstock} stock/chart/events-redraw/ * Alert on chart redraw when adding a series or moving the * zoomed range * @sample {highmaps} maps/chart/events-redraw/ * Set subtitle on chart redraw * * @since 1.2.0 */ redraw?: ChartRedrawCallbackFunction; /** * Fires after initial load of the chart (directly after the `load` * event), and after each redraw (directly after the `redraw` event). * * @sample {highcharts} highcharts/chart/events-render/ * Load vs Redraw vs Render * * @since 5.0.7 */ render?: ChartRenderCallbackFunction; /** * 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) */ selection?: ChartSelectionCallbackFunction; } export interface ChartLoadCallbackFunction { (this: Chart, event: Event): void; } /** * General options for the chart. */ export interface ChartOptions { /** * When using multiple axes, align the thresholds. When this is true, other * ticks will also be aligned. * * Note that for line series and some other series types, the `threshold` * option is set to `null` by default. This will in turn cause their y-axis * to not have a threshold. In order to avoid that, set the series * `threshold` to 0 or another number. * * If `startOnTick` or `endOnTick` in the axis options are set to false, or * if the axis is logarithmic, the threshold will not be aligned. * * @sample {highcharts} highcharts/chart/alignthresholds/ Set to true * * @since 10.0.0 * @product highcharts highstock gantt */ alignThresholds?: boolean; /** * When using multiple axes, the ticks of two or more opposite axes * will automatically be aligned by adding ticks to the axis or axes * with the least ticks, as if `tickAmount` were specified. * * This can be prevented by setting `alignTicks` to false. If the grid * lines look messy, it's a good idea to hide them for the secondary * axis by setting `gridLineWidth` to 0. * * If `startOnTick` or `endOnTick` in the axis options are set to false, * then the `alignTicks ` will be disabled for the axis. * * Disabled for logarithmic axes. * * @sample {highcharts} highcharts/chart/alignticks-true/ * True by default * @sample {highcharts} highcharts/chart/alignticks-false/ * False * @sample {highstock} stock/chart/alignticks-true/ * True by default * @sample {highstock} stock/chart/alignticks-false/ * False * * @default true * @product highcharts highstock gantt */ alignTicks?: boolean; /** * 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 * * @default true */ animation?: (boolean | Partial); /** * When a chart with an x and a y-axis is rendered, we first pre-render the * labels of both in order to measure them. Then, if either of the axis * labels take up so much space that it significantly affects the length of * the other axis, we repeat the process. * * By default we stop at two axis layout runs, but it may be that the second * run also alter the space required by either axis, for example if it * causes the labels to rotate. In this situation, a subsequent redraw of * the chart may cause the tick and label placement to change for apparently * no reason. * * Use the `axisLayoutRuns` option to set the maximum allowed number of * repetitions. But keep in mind that the default value of 2 is set because * every run costs performance time. * * **Note:** Changing that option to higher than the default might decrease * performance significantly, especially with bigger sets of data. * * @default 2 * @since 11.3.0 */ axisLayoutRuns?: number; /** * The background color of the outer chart area. * * @see In styled mode, the background is set with the * `.highcharts-background` class. * * @sample {highcharts} highcharts/chart/backgroundcolor-color/ * Color * @sample {highcharts} highcharts/chart/backgroundcolor-gradient/ * Gradient * @sample {highstock} stock/chart/backgroundcolor-color/ * Color * @sample {highstock} stock/chart/backgroundcolor-gradient/ * Gradient * @sample {highmaps} maps/chart/backgroundcolor-color/ * Color * @sample {highmaps} maps/chart/backgroundcolor-gradient/ * Gradient */ backgroundColor?: ColorType; /** * The color of the outer chart border. * * @see In styled mode, the stroke is set with the * `.highcharts-background` class. * * @sample {highcharts} highcharts/chart/bordercolor/ * Brown border * @sample {highstock} stock/chart/border/ * Brown border * @sample {highmaps} maps/chart/border/ * Border options */ borderColor?: ColorType; /** * 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?: number; /** * The pixel width of the outer chart border. * * @see In styled mode, the stroke is set with the * `.highcharts-background` class. * * @sample {highcharts} highcharts/chart/borderwidth/ * 5px border * @sample {highstock} stock/chart/border/ * 2px border * @sample {highmaps} maps/chart/border/ * Border options * * @default 0 */ borderWidth?: number; /** * A CSS class name to apply to the charts container `div`, allowing * unique CSS styling for each chart. */ className?: string; /** * In styled mode, this sets how many colors the class names * should rotate between. With ten colors, series (or points) are * given class names like `highcharts-color-0`, `highcharts-color-1` * [...] `highcharts-color-9`. The equivalent in non-styled mode * is to set colors using the [colors](#colors) setting. * * @since 5.0.0 */ colorCount?: number; /** * The default series type for the chart. Can be any of the chart types * listed under [plotOptions](#plotOptions) and [series](#series) or can * be a series provided by an additional module. * * In TypeScript this option has no effect in sense of typing and * instead the `type` option must always be set in the series. * * @sample {highcharts} highcharts/chart/type-bar/ * Bar * @sample {highstock} stock/chart/type/ * Areaspline * @sample {highmaps} maps/chart/type-mapline/ * Mapline * * @default {highcharts} line * @default {highstock} line * @default {highmaps} map * @since 2.1.0 */ defaultSeriesType?: string; /** * By default, (because of memory and performance reasons) the chart does * not copy the data but keeps it as a reference. In some cases, this might * result in mutating the original data source. In order to prevent that, * set that property to false. Please note that changing that might decrease * performance, especially with bigger sets of data. * * @since 10.1.0 */ allowMutatingData?: boolean; /** * Event listeners for the chart. */ events?: ChartEventsOptions; /** * An explicit width for the chart. By default (when `null`) the width * is calculated from the offset width of the containing element. * * @sample {highcharts} highcharts/chart/width/ * 800px wide * @sample {highstock} stock/chart/width/ * 800px wide * @sample {highmaps} maps/chart/size/ * Chart with explicit size */ height?: (null | number | string); /** * 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?: boolean; /** * Whether to invert the axes so that the x axis is vertical and y axis * is horizontal. When `true`, the x axis is [reversed](#xAxis.reversed) * by default. * * @productdesc {highcharts} * If a bar series is present in the chart, it will be inverted * automatically. Inverting the chart doesn't have an effect if there * are no cartesian series in the chart. * * @sample {highcharts} highcharts/chart/inverted/ * Inverted line * @sample {highstock} stock/navigator/inverted/ * Inverted stock chart * * @default false * @product highcharts highstock gantt */ inverted?: boolean; /** * Default `mapData` for all series, in terms of a GeoJSON or TopoJSON * object. If set to a string, it functions as an index into the * `Highcharts.maps` array. * * For picking out individual shapes and geometries to use for each series * of the map, see [series.mapData](#series.map.mapData). * * @sample maps/demo/geojson * Loading GeoJSON data * @sample maps/chart/topojson * Loading TopoJSON data * * @since 5.0.0 * @product highmaps */ map?: string | GeoJSON | TopoJSON; /** * Set lat/lon transformation definitions for the chart. If not defined, * these are extracted from the map data. * * @since 5.0.0 * @product highmaps */ mapTransforms?: any; /** * 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 */ margin?: (number | Array); /** * 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 * * @since 2.0 */ marginBottom?: number; /** * 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 * * @since 2.0 */ marginLeft?: number; /** * 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 * * @since 22.0 */ marginRight?: number; /** * 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 * * @since 2.0 */ marginTop?: number; /** * 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 * * @since 8.0.0 */ numberFormatter?: NumberFormatterCallbackFunction; /** * 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`). * * @since 4.0.3 * @product highcharts gantt * @validvalue ["alt", "ctrl", "meta", "shift"] */ panKey?: 'ctrl' | 'shift'; /** * 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`. * * **Note:** If both zooming and panning are enabled without keys, zooming * will take precedence by default. To prioritize panning, either set * [chart.zooming.key](#chart.zooming.key) or panKey. * * @sample {highcharts} highcharts/chart/pankey/ * Zooming and panning * @sample {highstock} stock/chart/panning/ * Zooming and xy panning */ panning?: ChartPanningOptions; /** * 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. * * @default {highcharts} undefined * @default {highstock} undefined * @since 3.0 * @product highcharts highstock gantt * @deprecated */ pinchType?: ChartPinchTypeValue; /** * The background color or gradient for the plot area. * * @see In styled mode, the plot background is set with the * `.highcharts-plot-background` class. * * @sample {highcharts} highcharts/chart/plotbackgroundcolor-color/ * Color * @sample {highcharts} highcharts/chart/plotbackgroundcolor-gradient/ * Gradient * @sample {highstock} stock/chart/plotbackgroundcolor-color/ * Color * @sample {highstock} stock/chart/plotbackgroundcolor-gradient/ * Gradient * @sample {highmaps} maps/chart/plotbackgroundcolor-color/ * Color * @sample {highmaps} maps/chart/plotbackgroundcolor-gradient/ * Gradient */ plotBackgroundColor?: ColorType; /** * The URL for an image to use as the plot background. To set an image * as the background for the entire chart, set a CSS background image * to the container element. Note that for the image to be applied to * exported charts, its URL needs to be accessible by the export server. * * @see In styled mode, a plot background image can be set with the * `.highcharts-plot-background` class and a [custom pattern]( * https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns). * * @sample {highcharts} highcharts/chart/plotbackgroundimage/ * Skies * @sample {highstock} stock/chart/plotbackgroundimage/ * Skies */ plotBackgroundImage?: string; /** * The color of the inner chart or plot area border. * * @see In styled mode, a plot border stroke can be set with the * `.highcharts-plot-border` class. * * @sample {highcharts} highcharts/chart/plotbordercolor/ * Blue border * @sample {highstock} stock/chart/plotborder/ * Blue border * @sample {highmaps} maps/chart/plotborder/ * Plot border options */ plotBorderColor?: ColorType; /** * 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 * * @default 0 */ plotBorderWidth?: number; /** * 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 * * @default false */ plotShadow?: (boolean | Partial); /** * Whether to reflow the chart to fit the width of the container div * on resizing the window. * * @sample {highcharts} highcharts/chart/reflow-true/ * True by default * @sample {highcharts} highcharts/chart/reflow-false/ * False * @sample {highstock} stock/chart/reflow-true/ * True by default * @sample {highstock} stock/chart/reflow-false/ * False * @sample {highmaps} maps/chart/reflow-true/ * True by default * @sample {highmaps} maps/chart/reflow-false/ * False * * @since 2.1 */ reflow?: boolean; /** * 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 */ renderTo?: (string | HTMLDOMElement); /** * The button that appears after a selection zoom, allowing the user * to reset zoom. This option is deprecated in favor of * [zooming](#chart.zooming). * * @since 2.2 * @deprecated 10.2.1 */ resetZoomButton?: ChartResetZoomButtonOptions; /** * Whether to apply a drop shadow to the outer chart area. Requires * that backgroundColor be set. The shadow can be an object * configuration containing `color`, `offsetX`, `offsetY`, `opacity` and * `width`. * * @sample {highcharts} highcharts/chart/shadow/ * Shadow * @sample {highstock} stock/chart/shadow/ * Shadow * @sample {highmaps} maps/chart/border/ * Chart border and shadow * * @default false */ shadow?: (boolean | Partial); /** * The background color of the marker square when selecting (zooming * in on) an area of the chart. * * @see In styled mode, the selection marker fill is set with the * `.highcharts-selection-marker` class. * * @default rgba(51,92,173,0.25) * @since 2.1.7 */ selectionMarkerFill?: ColorType; /** * Whether to apply a drop shadow to the global series group. This causes * all the series to have the same shadow. Contrary to the `series.shadow` * option, this prevents items from casting shadows on each other, like for * others series in a stack. The shadow can be an object configuration * containing `color`, `offsetX`, `offsetY`, `opacity` and `width`. * * @sample highcharts/chart/seriesgroupshadow/ * Shadow * * @default false */ seriesGroupShadow?: (boolean | Partial); /** * Whether to show the axes initially. This only applies to empty charts * where series are added dynamically, as axes are automatically added * to cartesian series. * * @sample {highcharts} highcharts/chart/showaxes-false/ * False by default * @sample {highcharts} highcharts/chart/showaxes-true/ * True * * @since 1.2.5 * @product highcharts gantt */ showAxes?: boolean; /** * The space between the bottom edge of the chart and the content (plot * area, axis title and labels, title, subtitle or legend in top * position). * * @sample {highcharts} highcharts/chart/spacingbottom/ * Spacing bottom set to 100 * @sample {highstock} stock/chart/spacingbottom/ * Spacing bottom set to 100 * @sample {highmaps} maps/chart/spacing/ * Spacing 100 all around * * @default 15 * @since 2.1 */ spacing?: Array; /** * The space between the bottom edge of the chart and the content (plot * area, axis title and labels, title, subtitle or legend in top * position). * * @sample {highcharts} highcharts/chart/spacingbottom/ * Spacing bottom set to 100 * @sample {highstock} stock/chart/spacingbottom/ * Spacing bottom set to 100 * @sample {highmaps} maps/chart/spacing/ * Spacing 100 all around * * @default 15 * @since 2.1 */ spacingBottom?: number; /** * The space between the left edge of the chart and the content (plot * area, axis title and labels, title, subtitle or legend in top * position). * * @sample {highcharts} highcharts/chart/spacingleft/ * Spacing left set to 100 * @sample {highstock} stock/chart/spacingleft/ * Spacing left set to 100 * @sample {highmaps} maps/chart/spacing/ * Spacing 100 all around * * @default 10 * @since 2.1 */ spacingLeft?: number; /** * The space between the right edge of the chart and the content (plot * area, axis title and labels, title, subtitle or legend in top * position). * * @sample {highcharts} highcharts/chart/spacingright-100/ * Spacing set to 100 * @sample {highcharts} highcharts/chart/spacingright-legend/ * Legend in right position with default spacing * @sample {highstock} stock/chart/spacingright/ * Spacing set to 100 * @sample {highmaps} maps/chart/spacing/ * Spacing 100 all around * * @default 10 * @since 2.1 */ spacingRight?: number; /** * The space between the top edge of the chart and the content (plot * area, axis title and labels, title, subtitle or legend in top * position). * * @sample {highcharts} highcharts/chart/spacingtop-100/ * A top spacing of 100 * @sample {highcharts} highcharts/chart/spacingtop-10/ * Floating chart title makes the plot area align to the default * spacingTop of 10. * @sample {highstock} stock/chart/spacingtop/ * A top spacing of 100 * @sample {highmaps} maps/chart/spacing/ * Spacing 100 all around * * @default 10 * @since 2.1 */ spacingTop?: number; /** * Additional CSS styles to apply inline to the container `div` and the root * SVG. * * According to the CSS syntax documentation, it is recommended to quote * font family names that contain white space, digits, or punctuation * characters other than hyphens. In such cases, wrap the fontFamily * name as follows: `fontFamily: '"Font name"'`. * * Since v11, the root font size is 1rem by default, and all child element * are given a relative `em` font size by default. This allows implementers * to control all the chart's font sizes by only setting the root level. * * @see In styled mode, general chart styles can be set with the * `.highcharts-root` class. * @sample {highcharts} highcharts/chart/style-serif-font/ * Using a serif type font * @sample {highcharts} highcharts/chart/style-special-font/ * Using a font with special character in name * @sample {highcharts} highcharts/members/relative-font-size/ * Relative font sizes * @sample {highcharts} highcharts/css/em/ * Styled mode with relative font sizes * @sample {highstock} stock/chart/style/ * Using a serif type font * @sample {highmaps} maps/chart/style-serif-font/ * Using a serif type font * * @default {"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif", "fontSize":"1rem"} */ style?: CSSObject; /** * Whether to apply styled mode. When in styled mode, no presentational * attributes or CSS are applied to the chart SVG. Instead, CSS rules * are required to style the chart. The default style sheet is * available from `https://code.highcharts.com/css/highcharts.css`. * * [Read more in the docs](https://www.highcharts.com/docs/chart-design-and-style/style-by-css) * on what classes and variables are available. * * @sample highcharts/css/colors * Color theming with CSS * @sample highcharts/css/prefers-color-scheme * Dynamic theme based on system settings * * @default false * @since 7.0 */ styledMode?: boolean; /** * The default series type for the chart. Can be any of the chart types * listed under [plotOptions](#plotOptions) and [series](#series) or can * be a series provided by an additional module. * * In TypeScript this option has no effect in sense of typing and * instead the `type` option must always be set in the series. * * @sample {highcharts} highcharts/chart/type-bar/ * Bar * @sample {highstock} stock/chart/type/ * Areaspline * @sample {highmaps} maps/chart/type-mapline/ * Mapline * * @default {highcharts} line * @default {highstock} line * @default {highmaps} map * @since 2.1.0 */ type?: string; /** * An explicit height for the chart. If a _number_, the height is * given in pixels. If given a _percentage string_ (for example * `'56%'`), the height is given as the percentage of the actual chart * width. This allows for preserving the aspect ratio across responsive * sizes. * * By default (when `null`) the height is calculated from the offset * height of the containing element, or 400 pixels if the containing * element's height is 0. * * @sample {highcharts} highcharts/chart/height/ * Forced 200px height * @sample {highstock} stock/chart/height/ * 300px height * @sample {highmaps} maps/chart/size/ * Chart with explicit size * @sample highcharts/chart/height-percent/ * Highcharts with percentage height * @sample highcharts/chart/height-inherited/ * Chart with inherited height */ width?: (null | number); /** * Enables zooming by a single touch, in combination with * [chart.zoomType](#chart.zoomType). When enabled, two-finger pinch * will still work as set up by [chart.pinchType](#chart.pinchType). * However, `zoomBySingleTouch` will interfere with touch-dragging the * chart to read the tooltip. And especially when vertical zooming is * enabled, it will make it hard to scroll vertically on the page. * @since 9.0.0 * @sample highcharts/chart/zoombysingletouch * Zoom by single touch enabled, with buttons to toggle * @product highcharts highstock gantt * @deprecated */ zoomBySingleTouch?: boolean; /** * Chart zooming options. * * @sample highcharts/plotoptions/sankey-node-color * Zooming in sankey series * @sample highcharts/series-treegraph/link-types * Zooming in treegraph series * * @since 10.2.1 */ zooming: Partial; /** * Decides in what dimensions the user can zoom by dragging the mouse. * Can be one of `x`, `y` or `xy`. * * @see [panKey](#chart.panKey) * * @sample {highcharts} highcharts/chart/zoomtype-none/ * None by default * @sample {highcharts} highcharts/chart/zoomtype-x/ * X * @sample {highcharts} highcharts/chart/zoomtype-y/ * Y * @sample {highcharts} highcharts/chart/zoomtype-xy/ * Xy * @sample {highcharts} highcharts/chart/zoomtype-polar/ * Zoom on polar chart * @sample {highstock} stock/demo/basic-line/ * None by default * @sample {highstock} stock/chart/zoomtype-x/ * X * @sample {highstock} stock/chart/zoomtype-y/ * Y * @sample {highstock} stock/chart/zoomtype-xy/ * Xy * @sample {highstock} stock/chart/zoomtype-xy/ * Map with selection zoom * * @validvalue ["x", "y", "xy"] * @deprecated */ zoomType?: ('x' | 'xy' | 'y'); } /** * 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 */ export interface ChartPanningOptions { /** * Enable or disable chart panning. * * @default {highcharts} false * @default {highstock|highmaps} true */ enabled: boolean; /** * Decides in what dimensions the user can pan the chart. Can be * one of `x`, `y`, or `xy`. * * During panning, all axes will behave as if * [`startOnTick`](#yAxis.startOnTick) and * [`endOnTick`](#yAxis.endOnTick) were set to `false`. After the * panning action is finished, the axes will adjust to their actual * settings. * * **Note:** For non-cartesian series, the only supported panning type * is `xy`, as zooming in a single direction is not applicable due to * the radial nature of the coordinate system. * * @sample {highcharts} highcharts/chart/panning-type * Zooming and xy panning * * @product highcharts highstock gantt */ type: ChartPanningTypeValue; } export type ChartPanningTypeValue = ('x' | 'y' | 'xy'); export type ChartPinchTypeValue = ('x' | 'y' | 'xy'); export interface ChartRedrawCallbackFunction { (this: Chart, event: Event): void; } export interface ChartRenderCallbackFunction { (this: Chart, event: Event): void; } /** * The button that appears after a selection zoom, allowing the user * to reset zoom. */ export interface ChartResetZoomButtonOptions { /** * The position of the button. * * Note: Adjusting position values might cause overlap with chart * elements. Ensure coordinates do not obstruct other components or * data visibility. * * @sample {highcharts} highcharts/chart/resetzoombutton-position/ * Above the plot area * @sample {highstock} highcharts/chart/resetzoombutton-position/ * Above the plot area * @sample {highmaps} highcharts/chart/resetzoombutton-position/ * Above the plot area * * @since 10.2.1 */ position?: AlignObject & { /** @default 'right' */ align?: AlignObject['align']; /** @default 'top' */ verticalAlign?: AlignObject['verticalAlign']; /** @default -10 */ x?: AlignObject['x']; /** @default 10 */ y?: AlignObject['y']; }; /** * 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 * * @default plot */ relativeTo?: ButtonRelativeToValue; /** * 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 * * @since 10.2.1 */ theme?: SVGAttributes & { /** @default 6 */ zIndex?: SVGAttributes['zIndex']; }; } export interface ChartSelectionAxisContextObject { axis: Axis; max: number; min: number; } export interface ChartSelectionCallbackFunction { (this: Chart, event: ChartSelectionContextObject): (boolean | undefined); } export interface ChartSelectionContextObject { xAxis: Array; yAxis: Array; } /** * Chart zooming options. * @since 10.2.1 * * @sample highcharts/plotoptions/sankey-node-color * Zooming in sankey series * @sample highcharts/series-treegraph/link-types * Zooming in treegraph series */ export interface ChartZoomingOptions { /** * Set a key to hold when dragging to zoom the chart. This is useful to * avoid zooming while moving points. Should be set different than * [chart.panKey](#chart.panKey). * * **Note:** If both zooming and panning are enabled without keys, zooming * will take precedence by default. To prioritize panning, either set * zooming key or [chart.panKey](#chart.panKey). * * @default {highcharts} undefined * @validvalue ["alt", "ctrl", "meta", "shift"] * @requires modules/draggable-points */ key?: string; /** * Equivalent to [type](#chart.zooming.type), but for multitouch * gestures only. By default, the `pinchType` is the same as the * `type` setting. However, pinching can be enabled separately in * some cases, for example in stock charts where a mouse drag pans the * chart, while pinching is enabled. When [tooltip.followTouchMove]( * #tooltip.followTouchMove) is true, pinchType only applies to * two-finger touches. * * @default {highcharts} undefined * @default {highstock} x * @product highcharts highstock gantt * @validvalue ["x", "y", "xy"] */ pinchType?: string; /** * The button that appears after a selection zoom, allowing the user * to reset zoom. */ resetButton?: ChartResetZoomButtonOptions; /** * Enables zooming by a single touch, in combination with * [chart.zooming.type](#chart.zooming.type). When enabled, two-finger * pinch will still work as set up by [chart.zooming.pinchType] * (#chart.zooming.pinchType). However, `singleTouch` will interfere * with touch-dragging the chart to read the tooltip. And especially * when vertical zooming is enabled, it will make it hard to scroll * vertically on the page. * * @sample highcharts/chart/zoombysingletouch * Zoom by single touch enabled, with buttons to toggle * * @product highcharts highstock gantt */ singleTouch: boolean; /** * Decides in what dimensions the user can zoom by dragging the mouse. * Can be one of `x`, `y` or `xy`. * * **Note:** For non-cartesian series, the only supported zooming type * is `xy`, as zooming in a single direction is not applicable due to * the radial nature of the coordinate system. * * @default {highcharts} undefined * @product highcharts highstock gantt */ type?: ChartZoomingTypeValue; } export type ChartZoomingTypeValue = ('x' | 'xy' | 'y'); export default ChartOptions;