From f3a2beb1fd0fc47afe60c99cc49093054d9ce709 Mon Sep 17 00:00:00 2001 From: Alexander T Date: Thu, 7 Nov 2019 21:37:21 +0200 Subject: [PATCH] highcharts: Provides its own types (#39599) * highcharts: Provides its own types * use @types/highcharts instead of highcharts --- notNeededPackages.json | 6 + types/highcharts-ng/package.json | 6 + types/highcharts/highcharts-more.d.ts | 5 - types/highcharts/highstock.d.ts | 152 - types/highcharts/index.d.ts | 7679 ----------------- types/highcharts/js/highcharts/index.d.ts | 2 - types/highcharts/modules/boost.d.ts | 5 - types/highcharts/modules/bullet.d.ts | 5 - types/highcharts/modules/drilldown.d.ts | 5 - types/highcharts/modules/exporting.d.ts | 5 - types/highcharts/modules/heatmap.d.ts | 5 - types/highcharts/modules/map/index.d.ts | 47 - .../modules/no-data-to-display.d.ts | 29 - .../highcharts/modules/offline-exporting.d.ts | 5 - types/highcharts/modules/solid-gauge.d.ts | 5 - types/highcharts/modules/treemap.d.ts | 5 - types/highcharts/modules/wordcloud.d.ts | 5 - types/highcharts/test/boost.ts | 1 - types/highcharts/test/bullet.ts | 1 - types/highcharts/test/datapoint.ts | 25 - types/highcharts/test/drilldown.ts | 1 - types/highcharts/test/exporting.ts | 1 - types/highcharts/test/heatmap.ts | 1 - types/highcharts/test/highstock.ts | 75 - types/highcharts/test/index.ts | 2937 ------- types/highcharts/test/more.ts | 1 - types/highcharts/test/no-data-to-display.ts | 8 - types/highcharts/test/offline-exporting.ts | 1 - types/highcharts/test/solid-gauge.ts | 1 - types/highcharts/test/treemap.ts | 1 - types/highcharts/test/wordcloud.ts | 1 - types/highcharts/tsconfig.json | 46 - types/highcharts/tslint.json | 13 - types/react-highcharts/package.json | 6 + 34 files changed, 18 insertions(+), 11073 deletions(-) create mode 100644 types/highcharts-ng/package.json delete mode 100644 types/highcharts/highcharts-more.d.ts delete mode 100644 types/highcharts/highstock.d.ts delete mode 100644 types/highcharts/index.d.ts delete mode 100644 types/highcharts/js/highcharts/index.d.ts delete mode 100644 types/highcharts/modules/boost.d.ts delete mode 100644 types/highcharts/modules/bullet.d.ts delete mode 100644 types/highcharts/modules/drilldown.d.ts delete mode 100644 types/highcharts/modules/exporting.d.ts delete mode 100644 types/highcharts/modules/heatmap.d.ts delete mode 100644 types/highcharts/modules/map/index.d.ts delete mode 100644 types/highcharts/modules/no-data-to-display.d.ts delete mode 100644 types/highcharts/modules/offline-exporting.d.ts delete mode 100644 types/highcharts/modules/solid-gauge.d.ts delete mode 100644 types/highcharts/modules/treemap.d.ts delete mode 100644 types/highcharts/modules/wordcloud.d.ts delete mode 100644 types/highcharts/test/boost.ts delete mode 100644 types/highcharts/test/bullet.ts delete mode 100644 types/highcharts/test/datapoint.ts delete mode 100644 types/highcharts/test/drilldown.ts delete mode 100644 types/highcharts/test/exporting.ts delete mode 100644 types/highcharts/test/heatmap.ts delete mode 100644 types/highcharts/test/highstock.ts delete mode 100644 types/highcharts/test/index.ts delete mode 100644 types/highcharts/test/more.ts delete mode 100644 types/highcharts/test/no-data-to-display.ts delete mode 100644 types/highcharts/test/offline-exporting.ts delete mode 100644 types/highcharts/test/solid-gauge.ts delete mode 100644 types/highcharts/test/treemap.ts delete mode 100644 types/highcharts/test/wordcloud.ts delete mode 100644 types/highcharts/tsconfig.json delete mode 100644 types/highcharts/tslint.json create mode 100644 types/react-highcharts/package.json diff --git a/notNeededPackages.json b/notNeededPackages.json index 8daa7faf4b..f6ddb3766b 100644 --- a/notNeededPackages.json +++ b/notNeededPackages.json @@ -1692,6 +1692,12 @@ "sourceRepoURL": "https://github.com/wKovacs64/hibp", "asOfVersion": "7.3.0" }, + { + "libraryName": "highcharts", + "typingsPackageName": "highcharts", + "sourceRepoURL": "http://www.highcharts.com/", + "asOfVersion": "7.0.0" + }, { "libraryName": "homeworks", "typingsPackageName": "homeworks", diff --git a/types/highcharts-ng/package.json b/types/highcharts-ng/package.json new file mode 100644 index 0000000000..0c78c9b5a5 --- /dev/null +++ b/types/highcharts-ng/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "@types/highcharts": "^5.0.44" + } +} diff --git a/types/highcharts/highcharts-more.d.ts b/types/highcharts/highcharts-more.d.ts deleted file mode 100644 index aaa2da832c..0000000000 --- a/types/highcharts/highcharts-more.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import * as Highcharts from "highcharts"; - -declare function HighchartsMore(H: Highcharts.Static): Highcharts.Static; -export = HighchartsMore; -export as namespace HighchartsMore; diff --git a/types/highcharts/highstock.d.ts b/types/highcharts/highstock.d.ts deleted file mode 100644 index 70ebfcb5c1..0000000000 --- a/types/highcharts/highstock.d.ts +++ /dev/null @@ -1,152 +0,0 @@ -import * as Highcharts from "highcharts"; - -declare namespace Highstock { - interface ChartObject extends Highcharts.ChartObject { - options: Options; - } - - interface NavigatorOptions { - adaptToUpdatedData?: boolean; - baseSeries?: string | number; - enabled?: boolean; - handles?: { - backgroundColor?: string; - borderColor?: string; - }; - height?: number; - margin?: number; - maskFill?: string; - maskInside?: boolean; - outlineColor?: string; - outlineWidth?: number; - series?: Highcharts.IndividualSeriesOptions; - xAxis?: Highcharts.AxisOptions; - yAxis?: Highcharts.AxisOptions; - } - - interface RangeSelectorButtonEvent { - click?(event: Event): void; - } - - interface RangeSelectorButton { - type: string; // Defines the timespan, can be one of 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' and 'all'. - count?: number; - text: string; - dataGrouping?: any; // not sure how this works - events?: RangeSelectorButtonEvent; - } - - interface RangeSelectorOptions { - allButtonsEnabled?: boolean; - buttonSpacing?: number; - buttonTheme?: any; - buttons?: RangeSelectorButton[]; - enabled?: boolean; - inputBoxBorderColor?: string; - inputBoxHeight?: number; - inputBoxWidth?: number; - inputDateFormat?: string; - inputDateParser?(date: string): number; - inputEditDateFormat?: string; - inputEnabled?: boolean; - inputPosition?: { - align?: string; - verticalAlign?: string; - x?: number; - y?: number; - }; - inputStyle?: Highcharts.CSSObject; - labelStyle?: Highcharts.CSSObject; - selected?: number; - } - - interface ScrollbarOptions { - barBackgroundColor?: string; - barBorderColor?: string; - barBorderRadius?: number; - barBorderWidth?: number; - buttonArrowColor?: string; - buttonBackgroundColor?: string; - buttonBorderColor?: string; - buttonBorderRadius?: number; - buttonBorderWidth?: number; - enabled?: boolean; - height?: number; - liveRedraw?: boolean; - minWidth?: number; - rifleColor?: string; - trackBackgroundColor?: string; - trackBorderColor?: string; - trackBorderRadius?: number; - trackBorderWidth?: number; - } - - interface AxisOptions extends Highcharts.AxisOptions { - scrollbar?: ScrollbarOptions; - } - - interface XAxisOptions extends AxisOptions { - ordinal?: boolean; - overscroll?: number; - } - - interface YAxisOptions extends AxisOptions { - height?: number | string; - maxLength?: number | string; - minLength?: number | string; - resize?: { - controlledAxis?: { - next?: Array; - prev?: Array; - }, - cursor?: string; - enabled?: boolean; - lineColor?: string; - lineDashStyle?: string; - lineWidth?: number; - x?: number; - y?: number; - }; - reversedStacks?: boolean; - tooltipValueFormat?: string; - top?: number | string; - } - - interface Options extends Highcharts.Options { - navigator?: NavigatorOptions; - rangeSelector?: RangeSelectorOptions; - scrollbar?: ScrollbarOptions; - xAxis?: XAxisOptions[] |XAxisOptions; - yAxis?: YAxisOptions[] | YAxisOptions; - } - - interface Chart { - new (options: Options, callback?: (chart: ChartObject) => void): ChartObject; - } - - interface Static extends Highcharts.Static { - StockChart: Chart; - stockChart(renderTo: string | HTMLElement, options: Options, callback?: (chart: ChartObject) => void): ChartObject; - } -} - -declare global { - interface JQuery { - highcharts(type: "StockChart"): Highstock.ChartObject; - /** - * Creates a new Highcharts.Chart for the current JQuery selector; usually - * a div selected by $('#container') - * @param options Options for this chart - * @param callback Callback function used to manipulate the constructed chart instance - * @return current selector the current JQuery selector - */ - highcharts(type: "StockChart", options: Highstock.Options, callback?: (chart: Highstock.ChartObject) => void): JQuery; - - highcharts(type: string): Highcharts.ChartObject; - highcharts(type: string, options: Highcharts.Options, callback?: (chart: Highcharts.ChartObject) => void): JQuery; - } -} - -declare const Highstock: Highstock.Static; -export = Highstock; -export as namespace Highstock; diff --git a/types/highcharts/index.d.ts b/types/highcharts/index.d.ts deleted file mode 100644 index 2532888612..0000000000 --- a/types/highcharts/index.d.ts +++ /dev/null @@ -1,7679 +0,0 @@ -// Type definitions for Highcharts 5.0 -// Project: http://www.highcharts.com/ -// Definitions by: Damiano Gambarotto -// Dan Lewi Harkestad -// Albert Ozimek -// Juliën Hanssens -// Johns Gresham -// ArunkeshavaReddy Sankaramaddi -// Dolan Miu -// Jack Siman -// Matthew Wills -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.3 - -declare namespace Highcharts { - interface Position { - align?: string; - verticalAlign?: string; - x?: number; - y?: number; - } - - interface DateTimeFormats { - /** - * @default '%H:%M:%S.%L' - */ - millisecond?: string; - /** - * @default '%H:%M:%S' - */ - second?: string; - /** - * @default '%H:%M' - */ - minute?: string; - /** - * @default '%H:%M' - */ - hour?: string; - /** - * @default '%e. %b' - */ - day?: string; - /** - * @default '%e. %b' - */ - week?: string; - /** - * @default '%b \ '%y' - */ - month?: string; - /** - * @default '%Y' - */ - year?: string; - } - - interface AxisEvent extends Event { - min: number; - max: number; - } - - interface AxisLabelFormatterOptions { - value: any; - isFirst: number; - isLast: number; - chart: ChartObject; - axis: AxisObject; - } - - interface AxisLabels { - /** - * What part of the string the given position is anchored to. Can be one of 'left', 'center' or 'right'. Defaults to - * an intelligent guess based on which side of the chart the axis is on and the rotation of the label. - * @default 'center' on xAxis, 'right' on yAxis - */ - align?: string; - /** - * For horizontal axes, the allowed degrees of label rotation to prevent overlapping labels. If there is enough - * space, labels are not rotated. As the chart gets narrower, it will start rotating the labels -45 degrees, then - * remove every second label and try again with rotations 0 and -45 etc. Set it to false to disable rotation, which - * will cause the labels to word-wrap if possible. - * @default [-45] - * @since 4.1.0 - */ - autoRotation?: number[] | boolean; - /** - * When each category width is more than this many pixels, we don't apply auto rotation. Instead, we lay out the - * axis label with word wrap. A lower limit makes sense when the label contains multiple short words that don't - * extend the available horizontal space for each label. - * @default 80 - * @since 4.1.5 - */ - autoRotationLimit?: number; - /** - * Polar charts only. The label's pixel distance from the perimeter of the plot area. - * @default 15 - */ - distance?: number; - /** - * Enable or disable the axis labels. - * @default true - */ - enabled?: boolean; - /** - * A {@link http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting|format string} for the axis label. - * @default '{value}' - * @since 3.0 - */ - format?: string; - /** - * Callback JavaScript function to format the label. The value is given by this.value. Additional properties for - * this are axis, chart, isFirst and isLast. The value of the default label formatter can be retrieved by calling - * this.axis.defaultLabelFormatter.call(this) within the function. - * @default function() {return this.value;} - */ - formatter?(this: AxisLabelFormatterOptions): string; - /** - * Horizontal axis only. When staggerLines is not set, maxStaggerLines defines how many lines the axis is allowed to - * add to automatically avoid overlapping X labels. Set to 1 to disable overlap detection. - * @default 5 - * @since 3.0.3 - * @deprecated - */ - maxStaggerLines?: number; - /** - * How to handle overflowing labels on horizontal axis. Can be undefined, false or 'justify'. By default it aligns - * inside the chart area. If 'justify', labels will not render outside the plot area. If false, it will not be - * aligned at all. If there is room to move it, it will be aligned to the edge, else it will be removed. - * @since 2.2.5 - * @deprecated - */ - overflow?: string | boolean; - /** - * The pixel padding for axis labels, to ensure white space between them. - * @default 5 - */ - padding?: number; - /** - * Whether to reserve space for the labels. This can be turned off when for example the labels are rendered inside - * the plot area instead of outside. - * @default true - * @since 4.1.10 - */ - reserveSpace?: boolean; - /** - * Rotation of the labels in degrees. - * @default 0 - */ - rotation?: number; - /** - * Horizontal axes only. The number of lines to spread the labels over to make room or tighter labels. - * @since 2.1 - */ - staggerLines?: number; - /** - * To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label. By - * default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only - * happens on a category axis, and is often a sign that you have chosen the wrong axis type. - * Read more at {@link http://www.highcharts.com/docs/chart-concepts/axes|Axis docs} => What axis should I use? - * @since 2.1 - */ - step?: number; - /** - * CSS styles for the label. Use whiteSpace: 'nowrap' to prevent wrapping of category labels. Use textOverflow: - * 'none' to prevent ellipsis (dots). - * @default {'color':'#6D869F','fontWeight':'bold'}. - */ - style?: CSSObject; - /** - * Whether to use HTML to render the labels. - * @default false - */ - useHTML?: boolean; - /** - * The x position offset of the label relative to the tick position on the axis. - * @default 0 - */ - x?: number; - /** - * The y position offset of the label relative to the tick position on the axis. The default makes it adapt to the - * font size on bottom axis. - * @default null - */ - y?: number | null; - /** - * The Z index for the axis labels. - * @default 7 - */ - zIndex?: number; - } - - interface MousePlotEvents { - click?(event: Event): void; - mouseover?(event: Event): void; - mouseout?(event: Event): void; - mousemove?(event: Event): void; - } - - /** - * Text labels for the plot bands - */ - interface PlotLabel { - /** - * Horizontal alignment of the label. Can be one of 'left', 'center' or 'right'. - * @default 'center' - * @since 2.1 - */ - align?: string; - /** - * Rotation of the text label in degrees. - * @default 0 - * @since 2.1 - */ - rotation?: number; - /** - * CSS styles for the text label. - * @since 2.1 - */ - style?: CSSObject; - /** - * The string text itself. A subset of HTML is supported. - * @since 2.1 - */ - text?: string; - /** - * The text alignment for the label. While align determines where the texts anchor point is placed within the plot - * band, textAlign determines how the text is aligned against its anchor point. Possible values are 'left', 'center' - * and 'right'. Defaults to the same as the align option. - * @since 2.1 - */ - textAlign?: string; - /** - * Whether to {@link http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html|use HTML} to render the labels. - * @default false - * @since 3.0.3 - */ - useHTML?: boolean; - /** - * Vertical alignment of the label relative to the plot band. Can be one of 'top', 'middle' or 'bottom'. - * @default 'top' - * @since 2.1 - */ - verticalAlign?: string; - /** - * Horizontal position relative the alignment. Default varies by orientation. - * @since 2.1 - */ - x?: number; - /** - * Vertical position of the text baseline relative to the alignment. Default varies by orientation. - * @since 2.1 - */ - y?: number; - } - - interface PlotBands { - /** - * A custom class name, in addition to the default highcharts-plot-band, to apply to each individual band. - * @since 5.0.0 - */ - className?: string; - /** - * Border color for the plot band. Also requires borderWidth to be set. - * @default null - */ - borderColor?: Color | null; - /** - * Border width for the plot band. Also requires borderColor to be set. - * @default 0 - */ - borderWidth?: number; - /** - * The color of the plot band. - */ - color?: Color; - /** - * An object defining mouse events for the plot band. Supported properties are click, mouseover, mouseout, - * mousemove. - * The this keyword refers to the PlotLineOrBand object. - * @since 1.2 - */ - events?: MousePlotEvents; - /** - * The start position of the plot band in axis units. - */ - from?: number; - /** - * An id used for identifying the plot band in Axis.removePlotBand. - */ - id?: string; - /** - * In a gauge chart, this option determines the inner radius of the plot band that stretches along the perimeter. It - * can be given as a percentage string, like '100%', or as a pixel number, like 100. By default, the inner radius is - * controlled by the thickness option. - * Only defined for yAxis.plotBands - * @default null - * @since 2.3 - */ - innerRadius?: number | string | null; - /** - * Text labels for the plot bands - */ - label?: PlotLabel; - /** - * In a gauge chart, this option determines the outer radius of the plot band that stretches along the perimeter. It - * can be given as a percentage string, like '100%', or as a pixel number, like 100. - * Only defined for yAxis.plotBands - * @default '100%' - * @since 2.3 - */ - outerRadius?: number | string; - /** - * In a gauge chart, this option sets the width of the plot band stretching along the perimeter. It can be given as - * a percentage string, like '10%', or as a pixel number, like 10. The default value 10 is the same as the default - * tickLength, thus making the plot band act as a background for the tick markers. - * Only defined for yAxis.plotBands - * @default 10 - * @since 2.3 - */ - thickness?: number | string; - /** - * The end position of the plot band in axis units. - */ - to?: number; - /** - * The z index of the plot band within the chart, relative to other elements. Using the same z index as another - * element may give unpredictable results, as the last rendered element will be on top. Values from 0 to 20 make - * sense. - * @since 1.2 - */ - zIndex?: number; - } - - /** - * An array of lines stretching across the plot area, marking a specific value - * on one of the axes. - */ - interface PlotLines { - /** - * A custom class name, in addition to the default highcharts-plot-line, to apply to each individual line. - * @since 5.0.0 - */ - className?: string; - /** - * The color of the line. - */ - color?: string | Gradient; - /** - * The dashing or dot style for the plot line. For possible values see - * {@link http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/|this overview}. - * (Solid ShortDash ShortDot ShortDashDot ShortDashDotDot Dot Dash LongDash DashDot LongDashDot LongDashDotDot) - * @default 'Solid' - * @since 1.2 - */ - dashStyle?: string; - /** - * An object defining mouse events for the plot line. Supported properties are click, mouseover, mouseout, - * mousemove. - * The this keyword refers to the PlotLineOrBand object. - * @since 1.2 - */ - events?: MousePlotEvents; - /** - * An id used for identifying the plot line in Axis.removePlotLine. - */ - id?: string; - /** - * Text labels for the plot lines - */ - label?: PlotLabel; - /** - * The position of the line in axis units. - */ - value?: number; - /** - * The width or thickness of the plot line. - */ - width?: number; - /** - * The z index of the plot line within the chart. - * @since 1.2 - */ - zIndex?: number; - } - - interface AnnotationsPoint { - /** - * The x position of the point. Units can be either in axis or chart pixel coordinates. - * @default undefined - * @since 6.0.0 - */ - x?: number; - /** - * This number defines which xAxis the point is connected to. - * It refers to either the axis id or the index of the axis in the xAxis array. - * If the option is not configured or the axis is not found the point's x coordinate refers to the chart pixels. - * @default undefined - * @since 6.0.0 - */ - xAxis?: number | string; - /** - * The y position of the point. Units can be either in axis or chart pixel coordinates. - * @default undefined - * @since 6.0.0 - */ - y?: number; - /** - * This number defines which yAxis the point is connected to. - * It refers to either the axis id or the index of the axis in the yAxis array. - * If the option is not configured or the axis is not found the point's y coordinate refers to the chart pixels. - * @default undefined - * @since 6.0.0 - */ - yAxis?: number; - } - - interface AnnotationsLabelOptions { - /** - * The alignment of the annotation's label. If right, the right side of the label should be touching the point. - * @default "center" - * @since 6.0.0 - */ - align?: "left" | "center" | "right"; - /** - * The alignment of the annotation's label. If right, the right side of the label should be touching the point. - * @default false - * @since 6.0.0 - */ - allowOverlap?: boolean; - /** - * The background color or gradient for the annotation's label. - * @default rgba(0, 0, 0, 0.75) - * @since 6.0.0 - */ - backgroundColor?: string | Gradient; - /** - * The border color for the annotation's label. - * @default "black" - * @since 6.0.0 - */ - borderColor?: string | Gradient; - /** - * The border radius in pixels for the annotation's label. - * @default 1 - * @since 6.0.0 - */ - borderRadius?: number; - /** - * The border width in pixels for the annotation's label. - * @default 1 - * @since 6.0.0 - */ - borderWidth?: number; - /** - * Whether to hide the annotation's label that is outside the plot area. - * @default false - * @since 6.0.0 - */ - crop?: boolean; - /** - * The label's pixel distance from the point. - * @default undefined - * @since 6.0.0 - */ - distance?: number; - /** - * A format string for the data label. - * @default undefined - * @since 6.0.0 - */ - format?: string; - /** - * Callback JavaScript function to format the annotation's label. - * Note that if a format or text are defined, the format or text take precedence and the formatter is ignored. - * This refers to a point object. - * @default function () { return defined(this.y) ? this.y : 'Annotation label'; } - * @since 6.0.0 - */ - formatter?: Function; - /** - * How to handle the annotation's label that flow outside the plot area. - * The justify option aligns the label inside the plot area. - * @default "justify - * @since 6.0.0 - */ - overflow?: "justify" | "none"; - /** - * When either the borderWidth or the backgroundColor is set, this is the padding within the box. - * @default 5 - * @since 6.0.0 - */ - padding?: number; - /** - * The shadow of the box. The shadow can be an object configuration containing color, offsetX, offsetY, opacity and width. - * @default false - * @since 6.0.0 - */ - shadow?: - | boolean - | { - color?: string | Gradient; - offsetX?: number; - offsetY?: number; - opacity?: number; - width?: number; - }; - /** - * The name of a symbol to use for the border around the label. Symbols are predefined functions on the Renderer object. - * @default "callout" - * @since 6.0.0 - */ - shape?: "connector" | "rect" | "circle" | "diamond" | "triangle"; - /** - * Styles for the annotation's label. - * @default "callout" - * @since 6.0.0 - */ - style?: { - /** - * @default "contrast" - * @since 6.0.0 - */ - color?: string; - fontFamily?: string; - /** - * @default "11px" - * @since 6.0.0 - */ - fontSize?: string; - /** - * @default "normal" - * @since 6.0.0 - */ - fontWeight?: string; - textAlign?: string; - }; - /** - * Alias for the format option. - * @default undefined - * @since 6.0.0 - */ - text?: string; - /** - * Whether to use HTML to render the annotation's label. - * @default false - * @since 6.0.0 - */ - useHTML?: boolean; - /** - * The vertical alignment of the annotation's label. - * @default "bottom" - * @since 6.0.0 - */ - verticalAlign?: "bottom" | "middle" | "top"; - /** - * The x position offset of the label relative to the point. - * Note that if a distance is defined, the distance takes precedence over x and y options. - * @default 0 - * @since 6.0.0 - */ - x?: number; - /** - * The y position offset of the label relative to the point. - * Note that if a distance is defined, the distance takes precedence over x and y options. - * @default -16 - * @since 6.0.0 - */ - y?: number; - } - - interface AnnotationsLabel extends AnnotationsLabelOptions { - /** - * This option defines the point to which the label will be connected. - * It can be either the point which exists in the series - it is referenced by the point's id - * - or a new point with defined x, y properties and optionally axes. - * @since 6.0.0 - */ - point?: string | AnnotationsPoint; - } - - interface AnnotationsShapeOptions { - /** - * The color of the shape's fill. - * @default rgba(0, 0, 0, 0.75) - * @since 6.0.0 - */ - fill?: string; - /** - * The height of the shape. - * @default undefined - * @since 6.0.0 - */ - height?: number; - /** - * The radius of the shape. - * @default 0 - * @since 6.0.0 - */ - r?: number; - /** - * The color of the shape's stroke. - * @default rgba(0, 0, 0, 0.75) - * @since 6.0.0 - */ - stroke?: string; - /** - * The pixel stroke width of the shape. - * @default 1 - * @since 6.0.0 - */ - strokeWidth?: number; - /** - * The type of the shape, e.g. circle or rectangle. - * @default "rect" - * @since 6.0.0 - */ - type?: "circle" | "path" | "rect"; - /** - * The width of the shape. - * @default undefined - * @since 6.0.0 - */ - width?: number; - } - - interface AnnotationsShape extends AnnotationsShapeOptions { - /** - * Id of the marker which will be drawn at the final vertex of the path. Custom markers can be defined in defs property. - * @default undefined - * @since 6.0.0 - */ - markerEnd?: string; - /** - * Id of the marker which will be drawn at the final vertex of the path. Custom markers can be defined in defs property. - * @default undefined - * @since 6.0.0 - */ - markerStart?: string; - /** - * This option defines the point to which the shape will be connected. - * It can be either the point which exists in the series - it is referenced by the point's id - * - or a new point with defined x, y properties and optionally axes. - * @since 6.0.0 - */ - point?: string | AnnotationsPoint; - /** - * An array of points for the shape. This option is available for shapes which can use multiple points such as path. - * A point can be either a point object or a point's id. - * @default undefined - * @since 6.0.0 - */ - points?: Array; - } - - /** - * Options for configuring annotations, for example labels, arrows or shapes. Annotations can be tied to points, - * axis coordinates or chart pixel coordinates. - */ - interface AnnotationsOptions { - /** - * Options for annotation's labels. Each label inherits options from the labelOptions object. - * An option from the labelOptions can be overwritten by config for a specific label. - * @since 6.0.0 - */ - labelOptions?: AnnotationsLabelOptions; - /** - * An array of labels for the annotation. For options that apply to multiple labels, they can be added to the labelOptions. - * @since 6.0.0 - */ - labels?: AnnotationsLabel[]; - /** - * Options for annotation's shapes. Each shape inherits options from the shapeOptions object. - * An option from the shapeOptions can be overwritten by config for a specific shape. - * @since 6.0.0 - */ - shapeOptions?: AnnotationsShapeOptions; - /** - * An array of shapes for the annotation. For options that apply to multiple shapes, they can be added to the shapeOptions. - * @since 6.0.0 - */ - shapes?: AnnotationsShape[]; - /** - * Whether the annotation is visible. - * @default true - * @since 6.0.0 - */ - visible?: boolean; - /** - * The Z index of the annotation. - * @default 6 - * @since 6.0.0 - */ - zIndex?: number; - } - - /** - * Options for configuring accessibility for the chart. Requires the accessibility module to be loaded. - * For a description of the module and information on its features, see Highcharts Accessibility. - */ - interface AccessibilityOptions { - /** - * Whether or not to add series descriptions to charts with a single series. Defaults to false. - * @since 5.0.0 - */ - describeSingleSeries?: boolean; - - /** - * Enable accessibility features for the chart. - * @since 5.0.0 - * @default true - */ - enabled?: boolean; - - /** - * Options for keyboard navigation. - * @since 5.0.0 - */ - keyboardNavigation?: KeyboardNavigationOptions; - - /** - * Function to run upon clicking the "View as Data Table" link in the screen reader region. - * By default Highcharts will insert and set focus to a data table representation of the chart. - * @since 5.0.0 - */ - onTableAnchorClick?: Function; - - /** - * Date format to use for points on datetime axes when describing them to screen reader users. - * Defaults to the same format as in tooltip. - * For an overview of the replacement codes, see dateFormat. - * @since 5.0.0 - */ - pointDateFormat?: string; - - /** - * Formatter function to determine the date/time format used with points on datetime axes when describing them - * to screen reader users. Receives one argument, point, referring to the point to describe. - * Should return a date format string compatible with dateFormat. - * @since 5.0.0 - */ - pointDateFormatter?: Function; - - /** - * Formatter function to use instead of the default for point descriptions. Receives one argument, point, referring to the point to describe. - * Should return a String with the description of the point for a screen reader user. - * @since 5.0.0 - */ - pointDescriptionFormatter?: Function; - - /** - * When a series contains more points than this, we no longer expose information about individual points to screen readers. - * Set to false to disable. - * @since 5.0.0 - * @default 30 - */ - pointDescriptionThreshold?: number | boolean; - - /** - * A formatter function to create the HTML contents of the hidden screen reader information region. Receives one argument, chart, referring to the chart object. - * Should return a String with the HTML content of the region. - * @since 5.0.0 - * @default undefined - */ - screenReaderSectionFormatter?: Function; - - /** - * Formatter function to use instead of the default for series descriptions. Receives one argument, series, referring to the series to describe. - * Should return a String with the description of the series for a screen reader user. - * @since 5.0.0 - */ - seriesDescriptionFormatter?: Function; - } - - /** - * Options for keyboard navigation (accessibility.keyboardNavigation). - * @since 5.0.0 - */ - interface KeyboardNavigationOptions { - /** - * Enable keyboard navigation for the chart. - * @since 5.0.0 - * @default true - */ - enabled?: boolean; - - /** - * Skip null points when navigating through points with the keyboard. - * @since 5.0.0 - * @default false - */ - skipNullPoints?: boolean; - } - - interface AnimationOptions { - /** - * The animation duration in milliseconds. - */ - duration: number; - /** - * The name of an easing function as defined on the Math object. - */ - easing?: string; - /** - * A callback function to exectute when the animation finishes. - */ - complete?: () => void; - /** - * A callback function to execute on each step of each attribute or CSS property that's being animated. - * The first argument contains information about the animation and progress. - */ - step?: () => void; - } - - interface AxisTitle { - /** - * Alignment of the title relative to the axis values. Possible values are 'low', 'middle' or 'high'. - * @default 'middle' - */ - align?: string; - /** - * Set the text to null to disable the title. - * @default 'middle' - * @deprecated - */ - enabled?: string | null; - /** - * The pixel distance between the axis labels or line and the title. - * @default xAxis: 0 for horizontal axes, 10 for vertical axes, yAxis: 40 - */ - margin?: number; - /** - * The distance of the axis title from the axis line. By default, this distance is computed from the offset width of - * the labels, the labels' distance from the axis and the title's margin. However when the offset option is set, it - * overrides all this. - * @since 2.2.0 - */ - offset?: number; - /** - * The rotation of the text in degrees. 0 is horizontal, 270 is vertical reading from bottom to top. - * @default xAxis: 0, yAxis: 270 - */ - rotation?: number; - /** - * CSS styles for the title. When titles are rotated they are rendered using vector graphic techniques and not all - * styles are applicable. - * @default { 'color': '#707070', 'fontWeight': 'bold' }. - */ - style?: CSSObject; - /** - * The actual text of the axis title. It can contain basic HTML text markup like , and spans with style. - * @default xAxis: null, yAxis: 'Values' - */ - text?: string | null; - /** - * Horizontal pixel offset of the title position. - * @default 0 - * @since 4.1.6 - */ - x?: number; - /** - * Vertical pixel offset of the title position. - */ - y?: number; - } - - interface AxisBreak { - /** - * A number indicating how much space should be left between the start and the end of the break. The break size is - * given in axis units, so for instance on a datetime axis, a break size of 3600000 would indicate the equivalent of - * an hour. - * @default 0 - * @since 4.1.0 - */ - breakSize?: number; - /** - * The point where the break starts. - * @since 4.1.0 - */ - from?: number; - /** - * Defines an interval after which the break appears again. By default the breaks do not repeat. - * @default 0 - * @since 4.1.0 - */ - repeat?: number; - /** - * The point where the break ends. - * @since 4.1.0 - */ - to?: number; - } - - interface AxisOptions { - /** - * Whether to allow decimals in this axis' ticks. When counting integers, - * like persons or hits on a web page, decimals must be avoided in the axis - * tick labels. - * @default true - * @since 2.0 - */ - allowDecimals?: boolean; - /** - * When using an alternate grid color, a band is painted across the plot - * area between every other grid line. - */ - alternateGridColor?: string; - /** - * An array defining breaks in the axis, the sections defined will be left out and all the points shifted closer to - * each other. Requires that the broken-axis.js module is loaded. - * @since 4.1.0 - */ - breaks?: AxisBreak[]; - /** - * If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, - * categories can also be extracted by giving each point a name and setting axis type to category. However, if you - * have multiple series, best practice remains defining the categories array. - * Example: - * categories: ['Apples', 'Bananas', 'Oranges'] - * @default null - */ - categories?: any[] | null; - /** - * The highest allowed value for automatically computed axis extremes. - * @since 4.0 - */ - ceiling?: number; - /** - * A class name that opens for styling the axis by CSS, especially in Highcharts styled mode. The class name is applied to group elements for the grid, axis elements and labels. - * @since 5.0.0 - */ - className?: string; - /** - * Configure a crosshair that follows either the mouse pointer or the hovered point. - */ - crosshair?: CrosshairObject | boolean; - /** - * For a datetime axis, the scale will automatically adjust to the appropriate unit. This member gives the default - * string representations used for each unit. For an overview of the replacement codes, see dateFormat. - */ - dateTimeLabelFormats?: DateTimeFormats; - /** - * Description of the axis to screen reader users. - * @since 5.0.0 - * @default undefined - */ - description?: string; - /** - * Whether to force the axis to end on a tick. Use this option with the maxPadding option to control the axis end. - * @default false - */ - endOnTick?: boolean; - /** - * Event handlers for the axis - */ - events?: { - /** - * An event fired after the breaks have rendered. - * @since 4.1.0 - */ - afterBreaks?(event: Event): void; - /** - * As opposed to the setExtremes event, this event fires after the final min and max values are computed and - * corrected for minRange. - * The this keyword refers to the {@link AxisObject|Axis} object. - * @since 2.3 - */ - afterSetExtremes?(event: AxisEvent): void; - /** - * An event fired when a break from this axis occurs on a point. - * The this keyword refers to the {@link AxisObject|Axis} object. - */ - pointBreak?(event: Event): void; - /** - * Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by - * selecting an area in the chart. One parameter, event, is passed to the function. This contains common event - * information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * - * The new user set minimum and maximum values can be found by event.min and event.max. When an axis is zoomed - * all the way out from the 'Reset zoom' button, event.min and event.max are null, and the new extremes are set - * based on this.dataMin and this.dataMax. - * - * The this keyword refers to the {@link AxisObject|Axis} object. - * @since 1.2.0 - */ - setExtremes?(event: AxisEvent): void; - }; - /** - * The lowest allowed value for automatically computed axis extremes. - * @default null - * @since 4.0 - */ - floor?: number | null; - /** - * Color of the grid lines extending the ticks across the plot area. - * @defaults to '#D8D8D8'. - */ - gridLineColor?: string; - /** - * The dash or dot style of the grid lines. For possible values, - * see {@http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/|this demonstration}. - * Defaults to Solid. - * @since 1.2 - */ - gridLineDashStyle?: string; - /** - * The width of the grid lines extending the ticks across the plot area. - * @default 0 - */ - gridLineWidth?: number; - /** - * Polar charts only. Whether the grid lines should draw as a polygon with straight lines between categories, or as circles. - * @default undefined - */ - gridLineInterpolation?: string; - /** - * The Z index of the grid lines. - * @default 1 - */ - gridZIndex?: number; - /** - * An id for the axis. This can be used after render time to get a pointer to the axis object through chart.get(). - * @since 1.2.0 - */ - id?: string; - /** - * The axis labels show the number or category for each tick. - */ - labels?: AxisLabels; - /** - * The color of the line marking the axis itself. - * @default '#C0D0E0'. - */ - lineColor?: string | Gradient; - /** - * The width of the line marking the axis itself. - * @default 1 - */ - lineWidth?: number; - /** - * Index of another axis that this axis is linked to. When an axis is linked to a master axis, it will take the same - * extremes as the master, but as assigned by min or max or by setExtremes. It can be used to show additional info, - * or to ease reading the chart by duplicating the scales. - * @since 2.0.2 - */ - linkedTo?: number; - /** - * The maximum value of the axis. If null, the max value is automatically calculated. If the endOnTick option is - * true, the max value might be rounded up. The actual maximum value is also influenced by chart.alignTicks. - */ - max?: number | null; - /** - * Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. - * This is useful when you don't want the highest data value to appear on the edge of the plot area. When the axis' - * max option is set or a max extreme is set using axis.setExtremes(), the maxPadding will be ignored. - * @default 0.01 - * @since 1.2.0 - */ - maxPadding?: number; - /** - * Renamed to minRange as of Highcharts 2.2. - * @deprecated - */ - maxZoom?: number; - /** - * The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is - * true, the min value might be rounded down. - */ - min?: number | null; - /** - * Padding of the min value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. - * This is useful when you don't want the lowest data value to appear on the edge of the plot area. When the axis' - * min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored. - * @default 0.01 - * @since 1.2.0 - */ - minPadding?: number; - /** - * The minimum range to display on this axis. The entire axis will not be allowed to span over a smaller interval - * than this. For example, for a datetime axis the main unit is milliseconds. If minRange is set to 3600000, you - * can't zoom in more than to one hour. - * - * The default minRange for the x axis is five times the smallest interval between any of the data points. - * - * On a logarithmic axis, the unit for the minimum range is the power. So a minRange of 1 means that the axis can be - * zoomed to 10-100, 100-1000, 1000-10000 etc. - * - * Note that the minPadding, maxPadding, startOnTick and endOnTick settings also affect how the extremes of the axis - * are computed. - */ - minRange?: number; - /** - * The minimum tick interval allowed in axis values. For example on zooming in on an axis with daily data, this can - * be used to prevent the axis from showing hours. Defaults to the closest distance between two points on the axis. - * @since 2.3.0 - */ - minTickInterval?: number; - /** - * Color of the minor, secondary grid lines. - * @default '#E0E0E0' - */ - minorGridLineColor?: string; - /** - * The dash or dot style of the minor grid lines. For possible values, - * see {@link http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/|this demonstration}. - * @default 'Solid' - */ - minorGridLineDashStyle?: string; - /** - * Width of the minor, secondary grid lines. - * @default 1 - */ - minorGridLineWidth?: number; - /** - * Color for the minor tick marks. - * @default to '#A0A0A0' - */ - minorTickColor?: string; - /** - * Tick interval in scale units for the minor ticks. On a linear axis, if 'auto', the minor tick interval is - * calculated as a fifth of the tickInterval. If null, minor ticks are not shown. - * - * On logarithmic axes, the unit is the power of the value. For example, setting the minorTickInterval to 1 puts one - * tick on each of 0.1, 1, 10, 100 etc. Setting the minorTickInterval to 0.1 produces 9 ticks between 1 and 10, 10 - * and 100 etc. A minorTickInterval of 'auto' on a log axis results in a best guess, attempting to enter - * approximately 5 minor ticks between each major tick. - * - * If user settings dictate minor ticks to become too dense, they don't make sense, and will be ignored to prevent - * performance problems. - * - * On axes using categories, minor ticks are not supported. - */ - minorTickInterval?: number | string | null; - /** - * The pixel length of the minor tick marks. - * @default 2 - */ - minorTickLength?: number; - /** - * The position of the minor tick marks relative to the axis line. Can be one of 'inside' and 'outside'. - * @default 'outside' - */ - minorTickPosition?: string; - /** - * The pixel width of the minor tick mark. - * @default 0 - */ - minorTickWidth?: number; - /** - * The distance in pixels from the plot area to the axis line. A positive offset moves the axis with it's line, - * labels and ticks away from the plot area. This is typically used when two or more axes are displayed on the same - * side of the plot. - * @default 0 - */ - offset?: number; - /** - * Whether to display the axis on the opposite side of the normal. The normal is on the left side for vertical axes - * and bottom for horizontal, so the opposite sides will be right and top respectively. This is typically used with - * dual or multiple axes. - * @default false - */ - opposite?: boolean; - /** - * An array of colored bands stretching across the plot area marking an interval on the axis. - * - * In a gauge, a plot band on the Y axis (value axis) will stretch along the perimeter of the gauge. - */ - plotBands?: PlotBands[]; - /** - * An array of lines stretching across the plot area, marking a specific value on one of the axes. - */ - plotLines?: PlotLines[]; - /** - * Whether to reverse the axis so that the highest number is closest to the origin. If the chart is inverted, the x - * axis is reversed by default. - * @default false - */ - reversed?: boolean; - /** - * If true, the first series in a stack will be drawn on top in a positive, non-reversed Y axis. If false, the first series is in the base of the stack. - * Only used for yAxis - * @default true - * @since 3.0.10 - */ - reversedStacks?: boolean; - /** - * Whether to show the axis line and title when the axis has no data. - * @default true - * @since 1.1 - */ - showEmpty?: boolean; - /** - * Whether to show the first tick label. - * @default true - */ - showFirstLabel?: boolean; - /** - * Whether to show the last tick label. - * @default true - */ - showLastLabel?: boolean; - /** - * A soft maximum for the axis. If the series data maximum is less than this, the axis will stay at this maximum, - * but if the series data maximum is higher, the axis will flex to show all data. - * @since 5.0.1 - */ - softMax?: number; - /** - * A soft minimum for the axis. If the series data minimum is greater than this, the axis will stay at this minimum, - * but if the series data minimum is lower, the axis will flex to show all data. - * @since 5.0.1 - */ - softMin?: number; - /** - * Show the total value for each bar in a stacked column or bar chart. - * The label will be placed on top of positive columns and below negative columns. - * In case of an inverted column chart or a bar chart the label is placed to the right of positive bars and to the left of negative bars. - * Only used for yAxis - */ - stackLabels?: { - /** - * Defines the horizontal alignment of the stack total label. Can be one of "left", "center" or "right". - * @default calculated at runtime and depends on orientation and whether the stack is positive or negative. - * @since 2.1.5 - */ - align?: string; - /** - * Enable or disable the stack total labels. - * @default false - * @since 2.1.5 - */ - enabled?: boolean; - /** - * A format string for the data label. Available variables are the same as for formatter. - * @default {total} - * @since 3.0.2 - */ - format?: string; - /** - * Callback JavaScript function to format the label. The value is given by this.total. - * @default function() { return this.total; } - * @since 2.1.5 - */ - formatter?: Function; - /** - * Rotation of the labels in degrees. - * @default 0 - * @since 2.1.5 - */ - rotation?: number; - /** - * CSS styles for the label. - * @default { "color": "#000000", "fontSize": "11px", "fontWeight": "bold", "textShadow": "0 0 6px contrast, 00 3px contrast" } - * @since 2.1.5 - */ - style?: CSSObject; - /** - * The text alignment for the label. - * While align determines where the texts anchor point is placed with regards to the stack, textAlign determines how the text is aligned against its anchor point. - * Possible values are "left", "center" and "right". - * @default calculated at runtime and depends on orientation and whether the stack is positive or negative. - * @since 2.1.5 - */ - textAlign?: string; - /** - * Whether to use HTML to render the labels. - * @default false - * @since 3.0 - */ - useHTML?: boolean; - /** - * Defines the vertical alignment of the stack total label. Can be one of "top", "middle" or "bottom". - * @default calculated at runtime and depends on orientation and whether the stack is positive or negative. - * @since 2.1.5 - */ - verticalAlign?: string; - /** - * The x position offset of the label relative to the left of the stacked bar. - * @default calculated at runtime and depends on orientation and whether the stack is positive or negative. - * @since 2.1.5 - */ - x?: number; - /** - * The y position offset of the label relative to the tick position on the axis. - * @default calculated at runtime and depends on orientation and whether the stack is positive or negative. - * @since 2.1.5 - */ - y?: number; - }; - /** - * For datetime axes, this decides where to put the tick between weeks. 0 = Sunday, 1 = Monday. - * @default 1 - */ - startOfWeek?: number; - /** - * Whether to force the axis to start on a tick. Use this option with the minPadding option to control the axis - * start. - * @default false - * @since 1.2.0 - */ - startOnTick?: boolean; - /** - * Solid gauge series only. Color stops for the solid gauge. - * Use this in cases where a linear gradient between a minColor and maxColor is not sufficient. - * The stops is an array of tuples, where the first item is a float between 0 and 1 assigning the relative position in the gradient, and the second item is the color. - */ - stops?: Array>; - /** - * The amount of ticks to draw on the axis. This opens up for aligning the ticks of multiple charts or panes within - * a chart. This option overrides the tickPixelInterval option. - * - * This option only has an effect on linear axes. Datetime, logarithmic or category axes are not affected. - */ - tickAmount?: number; - /** - * Color for the main tick marks. - * @default '#C0D0E0' - */ - tickColor?: string; - /** - * The interval of the tick marks in axis units. When null, the tick interval is computed to approximately follow - * the tickPixelInterval on linear and datetime axes. On categorized axes, a null tickInterval will default to 1, - * one category. Note that datetime axes are based on milliseconds, so for example an interval of one day is - * expressed as 24 * 3600 * 1000. - * - * On logarithmic axes, the tickInterval is based on powers, so a tickInterval of 1 means one tick on each of 0.1, - * 1, 10, 100 etc. A tickInterval of 2 means a tick of 0.1, 10, 1000 etc. A tickInterval of 0.2 puts a tick on 0.1, - * 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40 etc. - * - * If the tickInterval is too dense for labels to be drawn, Highcharts may remove ticks. - */ - tickInterval?: number | null; - /** - * The pixel length of the main tick marks. - * @default 10 - */ - tickLength?: number; - /** - * If tickInterval is null this option sets the approximate pixel interval of the tick marks. Not applicable to - * categorized axis. - * - * @default 72 for the Y axis, 100 for the X axis. - */ - tickPixelInterval?: number | null; - /** - * The position of the major tick marks relative to the axis line. Can be one of 'inside' and 'outside'. - * @default 'outside' - */ - tickPosition?: string; - /** - * A callback function returning array defining where the ticks are laid out on the axis. This overrides the default - * behaviour of tickPixelInterval and tickInterval. The automatic tick positions are accessible through - * this.tickPositions and can be modified by the callback. - */ - tickPositioner?(min: number, max: number): void; - /** - * An array defining where the ticks are laid out on the axis. This overrides the default behaviour of - * tickPixelInterval and tickInterval. - */ - tickPositions?: number[]; - /** - * The pixel width of the major tick marks. - * @default 1 - */ - tickWidth?: number; - /** - * For categorized axes only. If 'on' the tick mark is placed in the center of the category, if 'between' the tick - * mark is placed between categories. The default is 'between' if the tickInterval is 1, else 'on'. - * @default null - */ - tickmarkPlacement?: string | null; - /** - * The axis title, showing next to the axis line. To disable the title, set the text to null. - */ - title?: AxisTitle | null; - /** - * The type of axis. Can be one of 'linear', 'logarithmic', 'datetime' or 'category'. In a datetime axis, the - * numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a - * category axis, the point names of the chart's series are used for categories, if not a categories array is - * defined. - * @default 'linear' - */ - type?: string; - /** - * Datetime axis only. An array determining what time intervals the ticks are allowed to fall on. Each array item is - * an array where the first value is the time unit and the second value another array of allowed multiples. - */ - units?: Array<[string, number[]]>; - /** - * Whether axis, including axis title, line, ticks and labels, should be visible. - * @default true - * @since 4.1.9 - */ - visible?: boolean; - } - - interface ColorAxisDataClass { - from?: number; - to?: number; - color?: string | Gradient; - name?: string; - } - - /** - * A color axis for choropleth mapping. Visually, the color axis will appear as a gradient or as separate items inside - * the legend, depending on whether the axis is scalar or based on data classes. - * - * For supported color formats, see the docs article about colors. - * - * A scalar color axis is represented by a gradient. The colors either range between the minColor and the maxColor, or - * for more fine grained control the colors can be defined in stops. Often times, the color axis needs to be adjusted to - * get the right color spread for the data. In addition to stops, consider using a logarithmic axis type, or setting min - * and max to avoid the colors being determined by outliers. - * - * When dataClasses are used, the ranges are subdivided into separate classes like categories based on their values. - * This can be used for ranges between two values, but also for a true category. However, when your data is categorized, - * it may be as convenient to add each category to a separate series. - * - * See the Axis object for programmatic access to the axis. - */ - interface ColorAxisOptions { - /** - * Determines how to set each data class' color if no individual color is set. The default value, tween, computes - * intermediate colors between minColor and maxColor. The other possible value, category, pulls colors from the - * global or chart specific colors array. - * @default 'tween' - */ - dataClassColor?: string; - /** - * An array of data classes or ranges for the choropleth map. If none given, the color axis is scalar and values are - * distributed as a gradient between the minimum and maximum colors. - */ - dataClasses?: ColorAxisDataClass[]; - /** - * Whether to force the axis to end on a tick. Use this option with the maxPadding option to control the axis end. - * @default true - */ - endOnTick?: boolean; - events?: { - /** - * As opposed to the setExtremes event, this event fires after the final min and max values are computed and - * corrected for minRange. - * The this keyword refers to the {@link AxisObject|Axis} object. - */ - afterSetExtremes?(event: AxisEvent): void; - /** - * Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by - * selecting an area in the chart. One parameter, event, is passed to the function. This contains common event - * information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * - * The new user set minimum and maximum values can be found by event.min and event.max. When an axis is zoomed - * all the way out from the 'Reset zoom' button, event.min and event.max are null, and the new extremes are set - * based on this.dataMin and this.dataMax. - * - * The this keyword refers to the {@link AxisObject|Axis} object. - */ - setExtremes?(event: AxisEvent): void; - }; - /** - * Color of the grid lines extending from the axis across the gradient. - * @default '#C0C0C0' - */ - gridLineColor?: string; - /** - * The dash or dot style of the grid lines. - * @default 'Solid' - */ - gridLineDashStyle?: string; - /** - * The width of the grid lines extending from the axis across the gradient of a scalar color axis. - * @default 1 - */ - gridLineWidth?: number; - /** - * An id for the axis. This can be used after render time to get a pointer to the axis object through chart.get(). - */ - id?: string; - /** - * The axis labels show the number for each tick. - */ - labels?: AxisLabels; - /** - * The color of the line marking the axis itself. - * @default '#C0D0E0' - */ - lineColor?: string | Gradient; - /** - * The width of the line marking the axis itself. - * @default 0 - */ - lineWidth?: number; - /** - * The triangular marker on a scalar color axis that points to the value of the hovered area. To disable the marker, - * set marker: null. - */ - marker?: { - /** - * Animation for the marker as it moves between values. Set to false to disable animation. - * @default {duration: 50} - */ - animation?: boolean | Animation; - /** - * The color of the marker. - * @default 'gray' - */ - color?: string | Gradient; - } | null; - /** - * The maximum value of the axis in terms of map point values. If null, the max value is automatically calculated. - * If the endOnTick option is true, the max value might be rounded up. - */ - max?: number | null; - /** - * The color to represent the maximum of the color axis. Unless dataClasses or stops are set, the gradient ends at - * this value. - * - * If dataClasses are set, the color is based on minColor and maxColor unless a color is set for each data class, or - * the dataClassColor is set. - * @default '#102D4C' - */ - maxColor?: string; - /** - * Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. - * @default 0.05 - */ - maxPadding?: number; - /** - * The minimum value of the axis in terms of map point values. If null, the min value is automatically calculated. - * If the startOnTick option is true, the min value might be rounded down. - */ - min?: number | null; - /** - * The color to represent the minimum of the color axis. Unless dataClasses or stops are set, the gradient starts at - * this value. - * - * If dataClasses are set, the color is based on minColor and maxColor unless a color is set for each data class, or - * the dataClassColor is set. - * @default '#EFEFFF' - */ - minColor?: string; - /** - * Padding of the min value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. - * @default 0.05 - */ - minPadding?: number; - /** - * Color of the minor, secondary grid lines. - * @default '#E0E0E0' - */ - minorGridLineColor?: string; - /** - * The dash or dot style of the minor grid lines. - * @default 'Solid' - */ - minorGridLineDashStyle?: string; - /** - * Width of the minor, secondary grid lines. - * @default 1 - */ - minorGridLineWidth?: number; - /** - * Color for the minor tick marks. - * @default '#A0A0A0' - */ - minorTickColor?: string; - /** - * Tick interval in scale units for the minor ticks. On a linear axis, if 'auto', the minor tick interval is - * calculated as a fifth of the tickInterval. If null, minor ticks are not shown. - * - * On logarithmic axes, the unit is the power of the value. For example, setting the minorTickInterval to 1 puts one - * tick on each of 0.1, 1, 10, 100 etc. Setting the minorTickInterval to 0.1 produces 9 ticks between 1 and 10, 10 - * and 100 etc. A minorTickInterval of 'auto' on a log axis results in a best guess, attempting to enter - * approximately 5 minor ticks between each major tick. - * - * If user settings dictate minor ticks to become too dense, they don't make sense, and will be ignored to prevent - * performance problems. - */ - minorTickInterval?: string | number | null; - /** - * The pixel length of the minor tick marks. - * @default 2 - */ - minorTickLength?: number; - /** - * The position of the minor tick marks relative to the axis line. Can be one of inside and outside. - * @default 'outside' - */ - minorTickPosition?: string; - /** - * The pixel width of the minor tick mark - * @default 0 - */ - minorTickWidth?: number; - /** - * Whether to reverse the axis so that the highest number is closest to the origin. Defaults to false in a - * horizontal legend and true in a vertical legend, where the smallest value starts on top. - */ - reversed?: boolean; - /** - * If labels are enabled, whether to show the first tick label. - * @default true - */ - showFirstLabel?: boolean; - /** - * If labels are enabled, whether to show the last tick label. - * @default true - */ - showLastLabel?: boolean; - /** - * Whether to force the axis to start on a tick. Use this option with the maxPadding option to control the axis - * start. - * @default true - */ - startOnTick?: boolean; - /** - * Color stops for the gradient of a scalar color axis. Use this in cases where a linear gradient between a minColor - * and maxColor is not sufficient. The stops is an array of tuples, where the first item is a float between 0 and 1 - * assigning the relative position in the gradient, and the second item is the color. - */ - stops?: Array<[number, string]>; - /** - * Color for the main tick marks. - * @default '#C0D0E0' - */ - tickColor?: string; - /** - * The interval of the tick marks in axis units. When null, the tick interval is computed to approximately follow - * the tickPixelInterval. - */ - tickInterval?: number | null; - /** - * The pixel length of the main tick marks. - * @default 10 - */ - tickLength?: number; - /** - * If tickInterval is null this option sets the approximate pixel interval of the tick marks. - * @default 72 - */ - tickPixelInterval?: number | null; - /** - * The position of the major tick marks relative to the axis line. Can be one of 'inside' and 'outside'. - * @default 'outside' - */ - tickPosition?: string; - /** - * A callback function returning array defining where the ticks are laid out on the axis. This overrides the default - * behaviour of tickPixelInterval and tickInterval. - */ - tickPositioner?(min: number, max: number): void; - /** - * An array defining where the ticks are laid out on the axis. This overrides the default behaviour of - * tickPixelInterval and tickInterval. - */ - tickPositions?: number[]; - /** - * The pixel width of the major tick marks. - * @default 0 - */ - tickWidth?: number; - /** - * The type of interpolation to use for the color axis. Can be 'linear' or 'logarithmic'. - * @default 'linear' - */ - type?: string; - } - - interface Extremes { - /** - * The maximum value of the axis' associated series. - */ - dataMax: number; - /** - * The minimum value of the axis' associated series. - */ - dataMin: number; - /** - * The maximum axis value, either automatic or set manually. If the max option is not set and maxPadding is 0, this - * value will be the same as dataMax. - */ - max: number; - /** - * The minimum axis value, either automatic or set manually. If the min option is not set and minPadding is 0, this - * value will be the same as dataMin. - */ - min: number; - } - - interface Animation { - /** - * The duration of the animation in milliseconds. - */ - duration?: number; - /** - * When using jQuery as the general framework, the easing can be set to linear or swing. More easing functions are - * available with the use of jQuery plug-ins, most notably the jQuery UI suite. See the - * {@link http://api.jquery.com/animate/|jQuery docs}. When using MooTools as the general framework, use the - * property name transition instead of easing. - */ - easing?: string; - } - - interface AddSeriesEvent extends Event { - /** - * The series options that was passed to the addSeries method. - */ - options: ChartOptions; - } - - interface AxisValueOptions extends AxisOptions { - /** - * The axis value at the clicked spot - */ - value: number; - } - - interface ChartClickEvent extends Event { - /** - * Array containing the axes of each dimension and each axis' value at the clicked spot - */ - xAxis: AxisValueOptions[]; - /** - * Array containing the axes of each dimension and each axis' value at the clicked spot - */ - yAxis: AxisValueOptions[]; - } - - interface ChartDrilldownEvent extends Event { - /** - * If a category label was clicked, which index. - */ - category?: number; - /** - * The originating point. - */ - point?: PointObject; - /** - * If a category label was clicked, this array holds all points corresponing to the category. - */ - points?: PointObject[]; - /** - * Options for the new series. - */ - seriesOptions?: IndividualSeriesOptions; - } - - interface ChartSelectionEvent extends Event { - /** - * Array containing the axes of each dimension and each axis' min and max values - */ - xAxis: AxisOptions[]; - /** - * Array containing the axes of each dimension and each axis' min and max values - */ - yAxis: AxisOptions[]; - } - - interface ChartEvents { - /** - * Fires when a series is added to the chart after load time, using the addSeries method. One parameter, event, is - * passed to the function. This contains common event information based on jQuery or MooTools depending on which - * library is used as the base for Highcharts. Through event.options you can access the series options that was - * passed to the addSeries method. Returning false prevents the series from being added. - * - * The this keyword refers to the Chart object. - * @since 1.2.0 - */ - addSeries?(event: AddSeriesEvent): boolean | void; - /** - * Fires after a chart is printed through the context menu item or the Chart.print method. Requires the exporting - * module. - * @since 4.1.0 - */ - afterPrint?(event: Event): void; - /** - * Fires before a chart is printed through the context menu item or the Chart.print method. Requires the exporting - * module. - * @since 4.1.0 - */ - beforePrint?(event: Event): void; - /** - * Fires when clicking on the plot background. One parameter, event, is passed to the function. This contains common - * event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * - * 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. - * - * click: function(e) { - * console.log(Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value), e.yAxis[0].value); - * } - * - * The this keyword refers to the Chart object. - * @since 1.2.0 - */ - click?(event: ChartClickEvent): void; - /** - * Fires when a drilldown point is clicked, before the new series is added. - * @since 3.0.8 - */ - drilldown?(event: ChartDrilldownEvent): void; - /** - * Fires when drilling up from a drilldown series. - * @since 3.0.8 - */ - drillup?(event: Event): void; - /** - * Fires after drilling up from all drilldown series. - * @since 4.2.4 - */ - drillupall?(event: Event): void; - /** - * Fires when the chart is finished loading. One parameter, event, is passed to the function. This contains common - * event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * - * From version 2.0.4, there is also a second parameter to Highcharts.Chart where a callback function can be passed - * to be executed on chart.load. - * - * The this keyword refers to the Chart object. - */ - load?(event: Event): void; - /** - * 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. This contains - * common event information based on jQuery or MooTools depending on which library is used as the base for - * Highcharts. - * - * The this keyword refers to the Chart object. - * @since 1.2.0 - */ - redraw?(event: Event): void; - /** - * Fires after initial load of the chart (directly after the load - * event), and after each redraw (directly after the redraw event). - * - * @since 5.0.7 - */ - render?(event: Event): void; - /** - * 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. This contains common event information based on jQuery or MooTools - * depending on which library is used as the base for Highcharts. 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); - * } - */ - selection?(event: ChartSelectionEvent): void; - } - - interface LinearGradient { - x1: number; - y1: number; - x2: number; - y2: number; - } - - interface Gradient { - linearGradient?: LinearGradient | number[]; - radialGradient?: { - cx: number; cy: number; r: number; - }; - stops?: any[][]; - /** - * Brighten the color - */ - brighten?(alpha: number): Gradient; - /** - * Return the color a specified format - */ - get?(format: string): string; - /** - * The raw input - */ - raw?: string; - /** - * rgba array - */ - rgba?: number[]; - /** - * Set the color's opacity to a given alpha value - */ - setOpacity?(alpha: number): Gradient; - } - - /** - * Type equivalent to the 'Color' type mentioned throughout the documentation. - */ - type Color = string | Gradient; - - interface ChartOptions3dFrame { - /** - * The color of the panel. - * @default 'transparent' - * @since 4.0 - */ - color?: string | Gradient; - /** - * Thickness of the panel. - * @default 1 - * @since 4.0 - */ - size?: number; - } - - interface ChartOptions3d { - /** - * One of the two rotation angles for the chart. - * @default 0 - * @since 4.0 - */ - alpha?: number; - /** - * One of the two rotation angles for the chart. - * @default 0 - * @since 4.0 - */ - beta?: number; - /** - * The total depth of the chart. - * @default 100 - * @since 4.0 - */ - depth?: number; - /** - * Wether to render the chart using the 3D functionality. - * @default false - * @since 4.0 - */ - enabled?: boolean; - /** - * Provides the option to draw a frame around the charts by defining a bottom, front and back panel. - */ - frame?: { - /** - * Defines the back panel of the frame around 3D charts. - * @since 4.0 - */ - back?: ChartOptions3dFrame; - /** - * The bottom of the frame around a 3D chart. - * @since 4.0 - */ - bottom?: ChartOptions3dFrame; - /** - * The side for the frame around a 3D chart. - * @since 4.0 - */ - side?: ChartOptions3dFrame; - }; - /** - * Defines the distance the viewer is standing in front of the chart, this setting is important to calculate the - * perspective effect in column and scatter charts. It is not used for 3D pie charts. - * @default 100 - * @since 4.0 - */ - viewDistance?: number; - } - - interface Shadow { - /** - * @default 'black' - */ - color?: string | Gradient; - /** - * @default 1 - */ - offsetX?: number; - /** - * @default 1 - */ - offsetY?: number; - /** - * @default 0.15 / width - */ - opacity?: number; - /** - * @default 3 - */ - width?: number; - } - - interface ChartResetZoomButton { - /** - * The position of the button. This is an object that can hold the properties align, verticalAlign, x and y. - * @since 2.2 - */ - position?: Position; - /** - * What frame the button should be placed related to. Can be either 'plot' or 'chart'. - * @default 'plot' - * @since 2.2 - */ - relativeTo?: string; - /** - * 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. - * @since 2.2 - */ - theme?: ButtonStatesTheme; - } - - interface ButtonTheme { - display?: string; // css attr eg: 'none' - /** - * The button fill color, SVG color definition - */ - fill?: string | Gradient; - /** - * The button stroke color, SVG color definition - */ - stroke?: string; - /** - * The button stroke width - */ - 'stroke-width'?: number; - /** - * The border radius - */ - r?: number; - /** - * CSS style - */ - style?: Object; - } - - interface ButtonStatesTheme extends ButtonTheme { - /** - * Themed button states. Only hover is supported for reset zoom button. - */ - states?: { - /** - * Attributes and styles applied when hovering. - */ - hover?: ButtonTheme; - /** - * Attributes and styles applied when button is selected (tri-state). - */ - select?: ButtonTheme; - }; - } - - interface ChartOptions { - /** - * 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. 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. - * @default true - */ - 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. - * - * 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. - * - * @default true - */ - animation?: boolean | Animation; - /** - * The background color or gradient for the outer chart area. - * @default '#FFFFFF' - */ - backgroundColor?: string | Gradient; - /** - * The color of the outer chart border. - * @default '#4572A7' - */ - borderColor?: string | Gradient; - /** - * The corner radius of the outer chart border. - * @default 0 - */ - borderRadius?: number; - /** - * The pixel width of the outer chart border. - * @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-0 [...] highcharts-color-9. - * The equivalent in non-styled mode is to set colors using the colors setting. - * @since 5.0.0 - * @default 10 - */ - colorCount?: number; - /** - * Alias of type. Defaults to line. - * @default 'line' - * @deprecated - */ - defaultSeriesType?: string; - description?: string; - /** - * Event listeners for the chart. - */ - events?: ChartEvents; - /** - * 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. - * @default null - * @since 5.0.8 - */ - height?: number | string | null; - /** - * 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. - * @default true - * @since 1.2.0 - */ - 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 by default. If a bar series is present in the chart, it will be inverted automatically. - * @default false - */ - inverted?: boolean; - /** - * 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. - * - * Since version 2.1, the margin is 0 by default. 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. - */ - margin?: number | number[]; - /** - * 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. - * @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. - * @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. - * @since 2.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. - * @since 2.0 - */ - marginTop?: number; - /** - * Options to render charts in 3 dimensions. This feature requires highcharts-3d.js, found in the download package - * or online at {@link code.highcharts.com/highcharts-3d.js}. - */ - options3d?: ChartOptions3d; - /** - * Allows setting a key to switch between zooming and panning. - * @since 4.0.3 - */ - panKey?: string; - /** - * Allow panning in a chart. Best used with panKey to combine zooming and panning. - * @default false - * @since 4.0.3 - */ - panning?: boolean; - /** - * Equivalent to 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. - * @default null - * @since 3.0 - */ - pinchType?: string | null; - /** - * The background color or gradient for the plot area. - */ - plotBackgroundColor?: string | Gradient; - /** - * 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. - */ - plotBackgroundImage?: string; - /** - * The color of the inner chart or plot area border. - * @default 0 - */ - plotBorderColor?: string; - /** - * The pixel width of the plot area border. - * @default 0 - */ - plotBorderWidth?: number; - /** - * Whether to apply a drop shadow to the plot area. Requires that plotBackgroundColor be set. Since 2.3 the shadow - * can be an object configuration containing color, offsetX, offsetY, opacity and width. - * @default false - */ - plotShadow?: boolean | Shadow; - /** - * When true, cartesian charts like line, spline, area and column are transformed into the polar coordinate system. - * Requires highcharts-more.js. - * @default false - * @since 2.3.0 - */ - polar?: boolean; - /** - * Whether to reflow the chart to fit the width of the container div on resizing the window. - * @default true - * @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. - */ - renderTo?: string | HTMLElement; - /** - * The button that appears after a selection zoom, allowing the user to reset zoom. - */ - resetZoomButton?: ChartResetZoomButton; - /** - * Options for a scrollable plot area - */ - scrollablePlotArea?: ScrollablePropArea; - /** - * The background color of the marker square when selecting (zooming in on) an area of the chart. - * @default 'rgba(69,114,167,0.25)' - * @since 2.1.7 - */ - selectionMarkerFill?: string; - /** - * Whether to apply a drop shadow to the outer chart area. Requires that backgroundColor be set. Since 2.3 the - * shadow can be an object configuration containing color, offsetX, offsetY, opacity and width. - * @default false - */ - shadow?: boolean | 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. - * @default false - * @since 1.2.5 - */ - showAxes?: boolean; - /** - * The distance between the outer edge of the chart and the content, like title, legend, axis title or labels. 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. - * @default [10, 10, 15, 10] - * @since 3.0.6 - */ - spacing?: number[]; - /** - * 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). - * @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). - * @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). - * @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). - * @default 10 - * @since 2.1 - */ - spacingTop?: number; - /** - * 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. - */ - style?: CSSObject; - /** - * The default series type for the chart. Can be any of the chart types listed under plotOptions. - * @default 'line' - * @since 2.1.0 - */ - type?: string; - /** - * A text description of the chart type. - * If the Accessibility module is loaded, this will be included in the description of the chart in the screen reader information region. - * Highcharts will by default attempt to guess the chart type, but for more complex charts it is recommended to specify this property for clarity. - * @since 5.0.0 - * @default undefined - */ - typeDescription?: string; - /** - * An explicit width for the chart. By default the width is calculated from the offset width of the containing - * element. - */ - width?: number; - /** - * Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy. - */ - zoomType?: string; - } - - interface CSSObject { - background?: string; - border?: string; - color?: string | Gradient; - cursor?: string; - font?: string; - fontFamily?: string; - fontSize?: string; - fontWeight?: string; - left?: string; - opacity?: number; - overflow?: string; - padding?: string | number; - position?: string; - top?: string; - textOutline?: string; - textOverflow?: string; - whiteSpace?: string; - } - - interface CreditsOptions { - /** - * Whether to show the credits text. - * @default true - */ - enabled?: boolean; - /** - * The URL for the credits label. - * @default 'http://www.highcharts.com' - */ - href?: string; - /** - * Position configuration for the credits label. Supported properties are align, verticalAlign, x and y. - */ - position?: Position; - /** - * CSS styles for the credits label. - */ - style?: Object; - /** - * The text for the credits label. - * @default 'Highcharts.com' - */ - text?: string; - } - - interface CreditsObject extends CreditsOptions { - update(options: CreditsOptions): void; - } - - interface DataSeriesMapping { - [pointPropertyName: string]: number; - } - - /** - * The Data module provides a simplified interface for adding data to a chart from sources like CVS, HTML tables or grid - * views. See also the tutorial article on the Data module. - * - * It requires the modules/data.js file to be loaded. - * - * Please note that the default way of adding data in Highcharts, without the need of a module, is through the - * series.data option. - */ - interface DataOptions { - /** - * A two-dimensional array representing the input data on tabular form. This input can be used when the data is - * already parsed, for example from a grid view component. Each cell can be a string or number. If not - * switchRowsAndColumns is set, the columns are interpreted as series. - * @since 4.0 - */ - columns?: Array>; - /** - * The callback that is evaluated when the data is finished loading, optionally from an external source, and parsed. - * The first argument passed is a finished chart options object, containing the series. These options can be - * extended with additional options and passed directly to the chart constructor. - * @since 4.0 - */ - complete?(options: Options): void; - /** - * A comma delimited string to be parsed. Related options are startRow, endRow, startColumn and endColumn to delimit - * what part of the table is used. The lineDelimiter and itemDelimiter options define the CSV delimiter formats. - * @since 4.0 - */ - csv?: string; - /** - * Which of the predefined date formats in Date.prototype.dateFormats to use to parse date values. Defaults to a - * best guess based on what format gives valid and ordered dates. - * - * Valid options include: - * 'YYYY-mm-dd' - * 'dd/mm/YYYY' - * 'mm/dd/YYYY' - * 'dd/mm/YY' - * 'mm/dd/YY' - * @since 4.0 - */ - dateFormat?: string; - /** - * The decimal point used for parsing numbers in the CSV. - * @default '.' - */ - decimalPoint?: string; - /** - * In tabular input data, the last column (indexed by 0) to use. Defaults to the last column containing data. - * @since 4.0 - */ - endColumn?: number; - /** - * In tabular input data, the last row (indexed by 0) to use. Defaults to the last row containing data. - * @since 4.0.4 - */ - endRow?: number; - /** - * Whether to use the first row in the data set as series names. - * @default true - * @since 4.1.0 - */ - firstRowAsNames?: boolean; - /** - * The key for a Google Spreadsheet to load. See {@link https://developers.google.com/gdata/samples/spreadsheet_sample|general information on GS}. - * @since 4.0 - */ - googleSpreadsheetKey?: string; - /** - * The Google Spreadsheet worksheet to use in combination with googleSpreadsheetKey. The available id's from your - * sheet can be read from https://spreadsheets.google.com/feeds/worksheets/{key}/public/basic - * @since 4.0 - */ - googleSpreadsheetWorksheet?: string; - /** - * Item or cell delimiter for parsing CSV. Defaults to the tab character \t if a tab character is found in the CSV - * string, if not it defaults to ,. - * @since 4.0 - */ - itemDelimiter?: string; - /** - * Line delimiter for parsing CSV. - * @default '\n' - * @since 4.0 - */ - lineDelimiter?: string; - /** - * A callback function to parse string representations of dates into JavaScript timestamps. Should return an integer - * timestamp on success. - * @since 4.0 - */ - parseDate?(val: any): number; - /** - * A callback function to access the parsed columns, the two-dimentional input data array directly, before they are - * interpreted into series data and categories. Return false to stop completion, or call this.complete() to continue - * async. - * @since 4.0 - */ - parsed?(columns: Array<[string | number]>): boolean | void; - /** - * The same as the columns input option, but defining rows intead of columns. - * @since 4.0 - */ - rows?: Array<[string | number]>; - /** - * An array containing object with Point property names along with what column id the property should be taken from. - * @since 4.0.4 - */ - seriesMapping?: DataSeriesMapping[]; - /** - * In tabular input data, the first column (indexed by 0) to use. - * @default 0 - * @since 4.0 - */ - startColumn?: number; - /** - * In tabular input data, the first row (indexed by 0) to use. - * @default 0 - * @since 4.0 - */ - startRow?: number; - /** - * Switch rows and columns of the input data, so that this.columns effectively becomes the rows of the data set, and - * the rows are interpreted as series. - * @default false - * @since 4.0 - */ - switchRowsAndColumns?: boolean; - /** - * A HTML table or the id of such to be parsed as input data. Related options are startRow, endRow, startColumn and - * endColumn to delimit what part of the table is used. - */ - table?: string | HTMLElement; - } - - /** - * Options for drill down, the concept of inspecting increasingly high resolution data through clicking on chart items - * like columns or pie slices. - * - * The drilldown feature requires the drilldown.js file to be loaded, found in the modules directory of the download - * package, or online at code.highcharts.com/modules/drilldown.js. - */ - interface DrilldownOptions { - /** - * Additional styles to apply to the X axis label for a point that has drilldown data. By default it is underlined - * and blue to invite to interaction. - * @default { cursor: 'pointer', color: '#0d233a', fontWeight: 'bold', textDecoration: 'underline' } - * @since 3.0.8 - */ - activeAxisLabelStyle?: Object; - /** - * Additional styles to apply to the data label of a point that has drilldown data. By default it is underlined and - * blue to invite to interaction. - * @default { cursor: 'pointer', color: '#0d233a', fontWeight: 'bold', textDecoration: 'underline' } - * @since 3.0.8 - */ - activeDataLabelStyle?: Object; - /** - * When this option is false, clicking a single point will drill down all points in the same category, equivalent to - * clicking the X axis label. - * @default true - * @since 4.1.7 - */ - allowPointDrilldown?: boolean; - /** - * Set the animation for all drilldown animations. Animation of a drilldown occurs when drilling between a column - * point and a column series, or a pie slice and a full pie series. Drilldown can still be used between series and - * points of different types, but animation will not occur. - * - * 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. - * @since 3.0.8 - */ - animation?: boolean | Animation; - /** - * Options for the drill up button that appears when drilling down on a series. The text for the button is defined - * in lang.drillUpText. - */ - drillUpButton?: { - /** - * Positioning options for the button within the relativeTo box. Available properties are x, y, align and - * verticalAlign. - * @since 3.0.8 - */ - position?: Position; - /** - * What box to align the button to. Can be either 'plotBox' or 'spacingBox'. - * @default 'plotBox' - * @since 3.0.8 - */ - relativeTo?: string; - /** - * 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. - * @since 3.0.8 - */ - theme?: ButtonStatesTheme; - }; - /** - * An array of series configurations for the drill down. Each series configuration uses the same syntax as the - * series option set. These drilldown series are hidden by default. The drilldown series is linked to the parent - * series' point by its id. - * @since 3.0.8 - */ - series?: IndividualSeriesOptions[]; - } - - interface MenuItem { - /** - * String to show in the menu item. - */ - text: string; - /** - * Callback function to run on click. - */ - onclick(): void; - } - - interface Button { - /** - * Alignment for the buttons. - * @default 'right' - * @since 2.0 - */ - align?: string; - /** - * Whether to enable buttons. - * @default true - * @since 2.0 - */ - enabled?: boolean; - /** - * Pixel height of the buttons. - * @default 20 - * @since 2.0 - */ - height?: number; - /** - * Fill color for the symbol within the button. - * @default '#E0E0E0' - * @since 2.0 - */ - symbolFill?: string; - /** - * The pixel size of the symbol on the button. - * @default 14 - * @since 2.0 - */ - symbolSize?: number; - /** - * The color of the symbol's stroke or line. - * @default '#666' - * @since 2.0 - */ - symbolStroke?: string; - /** - * The pixel stroke width of the symbol on the button. - * @default 1 - * @since 2.0 - */ - symbolStrokeWidth?: number; - /** - * The x position of the center of the symbol inside the button. - * @default 12.5 - * @since 2.0 - */ - symbolX?: number; - /** - * The y position of the center of the symbol inside the button. - * @default 10.5 - * @since 2.0 - */ - symbolY?: number; - /** - * A text string to add to the individual button. - * @default null - * @since 3.0 - */ - text?: string | null; - /** - * A configuration object for the button theme. The object accepts SVG properties like stroke-width, stroke and - * fill. Tri-state button styles are supported by the states.hover and states.select objects. - * @since 3.0 - */ - theme?: ButtonStatesTheme; - /** - * The vertical alignment of the buttons. Can be one of 'top', 'middle' or 'bottom'. - * @default 'top' - * @since 2.0 - */ - verticalAlign?: string; - /** - * The pixel width of the button. - * @default 24 - * @since 2.0 - */ - width?: number; - /** - * The vertical offset of the button's position relative to its verticalAlign. - * @default 0 - * @since 2.0 - */ - y?: number; - } - - interface ExportingContextButton extends Button { - /** - * A collection of config options for the menu items. Each options object consists of a text option which is a - * string to show in the menu item, as well as an onclick parameter which is a callback function to run on click. - * - * By default, there is the 'Print' menu item plus one menu item for each of the available export types. Menu items - * can be customized by defining a new array of items and assigning null to unwanted positions. - * @since 2.0 - */ - menuItems?: string[] | MenuItem[]; - /** - * A click handler callback to use on the button directly instead of the popup menu. - * @since 2.0 - */ - onclick?(): void; - /** - * The symbol for the button. Points to a definition function in the Highcharts.Renderer.symbols collection. The - * default exportIcon function is part of the exporting module. - * @default 'menu' - */ - symbol?: string; - /** - * The horizontal position of the button relative to the align option. - * @default -10 - */ - x?: number; - } - - interface ExportingOptions { - /** - * Experimental setting to allow HTML inside the chart (added through the useHTML options), directly in the exported - * image. This allows you to preserve complicated HTML structures like tables or bi-directional text in exported - * charts. - * - * Disclaimer: The HTML is rendered in a foreignObject tag in the generated SVG. The official export server is based - * on PhantomJS, which supports this, but other SVG clients, like Batik, does not support it. This also applies to - * downloaded SVG that you want to open in a desktop client. - * @default false - * @since 4.1.8 - */ - allowHTML?: boolean; - /** - * Options for the export related buttons, print and export. In addition to the default buttons listed here, custom - * buttons can be added. See navigation.buttonOptions for general options. - */ - buttons?: { - contextButton?: ExportingContextButton; - }; - /** - * Additional chart options to be merged into an exported chart. For example, the exported chart can be given a - * specific width and height, or a printer-friendly color scheme. - * @default null - */ - chartOptions?: Options | null; - /** - * Whether to enable the exporting module. Disabling the module will hide the context button, but API methods will - * still be available. - * @default true - * @since 2.0 - */ - enabled?: boolean; - /** - * Function to call if the offline-exporting module fails to export a chart on the client side, and - * fallbackToExportServer is disabled. If left undefined, an exception is thrown instead. - * @default undefined - * @since 5.0.0 - */ - error?: Function; - /** - * Whether or not to fall back to the export server if the offline-exporting module is unable to export the chart on - * the client side. - * @default true - * @since 4.1.8 - */ - fallbackToExportServer?: boolean; - /** - * The filename, without extension, to use for the exported chart. - * @default 'chart' - * @since 2.0 - */ - filename?: string; - /** - * An object containing additional attributes for the POST form that sends the SVG to the export server. For - * example, a target can be set to make sure the generated image is received in another frame, or a custom enctype - * or encoding can be set. - * @since 3.0.8 - */ - formAttributes?: any; - /** - * Path where Highcharts will look for export module dependencies to load on demand if they don't already exist on - * window. Should currently point to location of CanVG library (https://github.com/canvg/canvg) and RGBColor.js, - * required for client side export in certain browsers. - * @default 'http://code.highcharts.com/{version}/lib' - * @since 5.0.0 - */ - libUrl?: string; - /** - * When printing the chart from the menu item in the burger menu, if the on-screen chart exceeds this width, it is - * resized. After printing or cancelled, it is restored. The default width makes the chart fit into typical paper - * format. Note that this does not affect the chart when printing the web page as a whole. - * @default 780 - * @since 4.2.5 - */ - printMaxWidth?: number; - /** - * Defines the scale or zoom factor for the exported image compared to the on-screen display. While for instance a - * 600px wide chart may look good on a website, it will look bad in print. The default scale of 2 makes this chart - * export to a 1200px PNG or JPG. - * @default 2 - * @since 3.0 - */ - scale?: number; - /** - * The height of the original chart when exported, unless an explicit chart.height is set. The height exported - * raster image is then multiplied by scale. - * @since 3.0 - */ - sourceHeight?: number; - /** - * The width of the original chart when exported, unless an explicit chart.width is set. The width exported - * raster image is then multiplied by scale. - * @since 3.0 - */ - sourceWidth?: number; - /** - * Default MIME type for exporting if chart.exportChart() is called without specifying a type option. Possible - * values are image/png, image/jpeg, application/pdf and image/svg+xml. - * @default 'image/png' - * @since 2.0 - */ - type?: string; - /** - * The URL for the server module converting the SVG string to an image format. By default this points to Highslide - * Software's free web service. - * @default 'http://export.highcharts.com' - * @since 2.0 - */ - url?: string; - /** - * The pixel width of charts exported to PNG or JPG. As of Highcharts 3.0, the default pixel width is a function of - * the chart.width or exporting.sourceWidth and the exporting.scale. - * @since 2.0 - */ - width?: number; - } - - /** - * Global options that don't apply to each chart. These options, like the lang options, must be set using the - * Highcharts.setOptions method. - */ - interface GlobalObject { - /** - * A custom Date class for advanced date handling. For example, JDate can be hooked in to handle Jalali dates. - * @since 4.0.4 - */ - Date?: any; - /** - * Path to the pattern image required by VML browsers in order to draw radial gradients. - * @default 'http://code.highcharts.com/{version}/gfx/vml-radial-gradient.png' - * @since 2.3.0 - */ - VMLRadialGradientURL?: string; - /** - * 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, 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. - * @default 'http://code.highcharts.com/{version}/modules/canvas-tools.js' - */ - canvasToolsURL?: string; - /** - * 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. - * @since 4.1.0 - */ - getTimezoneOffset?(timestamp: number): number; - /** - * Requires moment.js. If the timezone option is specified, it creates a default 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. - * @default undefined - * @since 5.0.7 - */ - timezone?: string; - /** - * The timezone offset in minutes. Positive values are west, negative values are east of UTC, as in the ECMAScript - * getTimezoneOffset method. Use this to display UTC based data in a predefined time zone. - * @default 0 - * @since 3.0.8 - */ - timezoneOffset?: number; - /** - * 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. - * @default true - */ - useUTC?: boolean; - } - - interface LabelItem { - html: string; - style: CSSObject; - } - - interface LabelsOptions { - items?: LabelItem[]; - style?: CSSObject; - } - - interface LangObject { - /** - * Exporting module menu. The tooltip title for the context menu holding print and export menu items. - * @default 'Chart context menu' - * @since 3.0 - */ - contextButtonTitle?: string; - /** - * The default decimal point used in the Highcharts.numberFormat method unless otherwise specified in the function - * arguments. - * @default '.' - * @since 1.2.2 - */ - decimalPoint?: string; - /** - * Exporting module only. The text for the JPEG download menu item. - * @default 'Download JPEG image' - * @since 2.0 - */ - downloadJPEG?: string; - /** - * Exporting module only. The text for the PDF download menu item. - * @default 'Download PDF document' - * @since 2.0 - */ - downloadPDF?: string; - /** - * Exporting module only. The text for the PNG download menu item. - * @default 'Download PNG image' - * @since 2.0 - */ - downloadPNG?: string; - /** - * Exporting module only. The text for the SVG download menu item. - * @default 'Download SVG vector image' - * @since 2.0 - */ - downloadSVG?: string; - /** - * The text for the button that appears when drilling down, linking back to the parent series. The parent series' - * name is inserted for {series.name} - * @default 'Back to {series.name}' - * @since 3.0.8 - */ - drillUpText?: string; - /** - * What to show in a date field for invalid dates. - * @default '' - * @since 4.1.8 - */ - invalidDate?: string; - /** - * The loading text that appears when the chart is set into the loading state following a call to chart.showLoading. - * @default 'Loading...' - */ - loading?: string; - /** - * An array containing the months names. Corresponds to the %B format in Highcharts.dateFormat(). - * @default ['January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'December'] - */ - months?: string[]; - /** - * The text to display when the chart contains no data. Requires the no-data module, see noData. - * @default 'No data to display' - * @since 3.0.8 - */ - noData?: string; - /** - * The magnitude of numericSymbols replacements. - * Use 10000 for Japanese, Korean and various Chinese locales, which use symbols for 10^4, 10^8 and 10^12. - * @since 5.0.3 - * @default 1000 - */ - numericSymbolMagnitude?: number; - /** - * Metric prefixes 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. - * @default ['k', 'M', 'G', 'T', 'P', 'E'] - * @since 2.3.0 - */ - numericSymbols?: string[] | null; - /** - * Exporting module only. The text for the menu item to print the chart. - * @default 'Print chart' - * @since 3.0.1 - */ - printChart?: string; - /** - * The text for the label for the "from" input box in the range selector. - * @default 'From' - */ - rangeSelectorFrom?: string; - /** - * The text for the label for the "to" input box in the range selector. - * @default 'To' - */ - rangeSelectorTo?: string; - /** - * The text for the label for the range selector buttons. - * @default 'Zoom' - */ - rangeSelectorZoom?: String; - /** - * The text for the label appearing when a chart is zoomed. - * @default 'Reset zoom' - * @since 1.2.4 - */ - resetZoom?: string; - /** - * The tooltip title for the label appearing when a chart is zoomed. - * @default 'Reset zoom level 1:1' - * @since 1.2.4 - */ - resetZoomTitle?: string; - /** - * An array containing the months names in abbreviated form. Corresponds to the %b format in - * Highcharts.dateFormat(). - * @default ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - */ - shortMonths?: string[]; - /** - * Short week days, starting Sunday. If not specified, Highcharts uses the first three letters of the lang.weekdays option. - * @default undefined - * @since 4.2.4 - */ - shortWeekdays?: string[]; - /** - * 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. - * @default ' ' - * @since 1.2.2 - */ - thousandsSep?: string; - /** - * An array containing the weekday names. - * @default ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] - */ - weekdays?: string[]; - } - - interface LegendNavigationOptions { - /** - * The color for the active up or down arrow in the legend page navigation. - * @default '#3E576F' - * @since 2.2.4 - */ - activeColor?: string; - /** - * How to animate the pages when navigating up or down. A value of true applies the default navigation given in the - * chart.animation option. Additional options can be given as an object containing values for easing and duration. - * @default true - * @since 2.2.4 - */ - animation?: boolean | Animation; - /** - * The pixel size of the up and down arrows in the legend paging navigation. - * @default 12 - * @since 2.2.4 - */ - arrowSize?: number; - /** - * The color of the inactive up or down arrow in the legend page navigation. - * @default '#CCC' - */ - inactiveColor?: string; - /** - * Text styles for the legend page navigation. - * @since 2.2.4 - */ - style?: CSSObject; - } - - interface LegendTitleOptions { - /** - * Generic CSS styles for the legend title. - * @default {'fontWeight':'bold'} - * @since 3.0 - */ - style?: CSSObject; - /** - * A text or HTML string for the title. - * @default null - * @since 3.0 - */ - text?: string | null; - } - - interface LegendOptions { - /** - * The horizontal alignment of the legend box within the chart area. Valid values are 'left', 'center' and 'right'. - * In the case that the legend is aligned in a corner position, the layout option will determine whether to place it - * above/below or on the side of the plot area. - * @default 'center' - * @since 2.0 - */ - align?: string; - /** - * The background color of the legend. - */ - backgroundColor?: string | Gradient; - /** - * The color of the drawn border around the legend. - * @default '#909090' - */ - borderColor?: string | Gradient; - /** - * The border corner radius of the legend. - * @default 0 - */ - borderRadius?: number; - /** - * The width of the drawn border around the legend. - * @default 0 - */ - borderWidth?: number; - /** - * Enable or disable the legend. - * @default true - */ - enabled?: boolean; - /** - * When the legend is floating, the plot area ignores it and is allowed to be placed below it. - * @default false - * @since 2.1 - */ - floating?: boolean; - /** - * In a legend with horizontal layout, the itemDistance defines the pixel distance between each item. - * @default 20 - * @since 3.0.3 - */ - itemDistance?: number; - /** - * CSS styles for each legend item when the corresponding series or point is hidden. Only a subset of CSS is - * supported, notably those options related to text. Properties are inherited from style unless overridden here. - * @default {color: '#CCC'} - */ - itemHiddenStyle?: CSSObject; - /** - * CSS styles for each legend item in hover mode. Only a subset of CSS is supported, notably those options related - * to text. Properties are inherited from style unless overridden here. - * @default {color: '#000'} - */ - itemHoverStyle?: CSSObject; - /** - * The pixel bottom margin for each legend item. - * @default 0 - * @since 2.2.0 - */ - itemMarginBottom?: number; - /** - * The pixel top margin for each legend item. - * @default 0 - * @since 2.2.0 - */ - itemMarginTop?: number; - /** - * CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. - * @default { 'color': '#333333', 'cursor': 'pointer', 'fontSize': '12px', 'fontWeight': 'bold' } - */ - itemStyle?: CSSObject; - /** - * The width for each legend item. This is useful in a horizontal layout with many items when you want the items to - * align vertically. - * @since 2.0 - */ - itemWidth?: number; - /** - * A format string for each legend label. Available variables relates to properties on the series, or the point in - * case of pies. - * @default '{name}' - * @since 1.3 - */ - labelFormat?: string; - /** - * Callback function to format each of the series' labels. The this keyword refers to the series object, or the - * point object in case of pie charts. By default the series or point name is printed. - */ - labelFormatter?(): string; - /** - * The layout of the legend items. Can be one of 'horizontal' or 'vertical'. - * @default 'horizontal' - */ - layout?: string; - /** - * Line height for the legend items. Deprecated as of 2.1. Instead, the line height for each item can be set using - * itemStyle.lineHeight, and the padding between items using itemMarginTop and itemMarginBottom. - * @default 16 - * @since 2.0 - * @deprecated - */ - lineHeight?: number; - /** - * If the plot area sized is calculated automatically and the legend is not floating, the legend margin is the space - * between the legend and the axis labels or plot area. - * @default 12 - * @since 2.1 - */ - margin?: number; - /** - * Maximum pixel height for the legend. When the maximum height is extended, navigation will show. - * @since 2.3.0 - */ - maxHeight?: number; - /** - * Options for the paging or navigation appearing when the legend is overflown. - */ - navigation?: LegendNavigationOptions; - /** - * The inner padding of the legend box. - * @default 8 - * @since 2.2.0 - */ - padding?: number; - /** - * Whether to reverse the order of the legend items compared to the order of the series or points as defined in the - * configuration object. - * @default false - * @since 1.2.5 - */ - reversed?: boolean; - /** - * Whether to show the symbol on the right side of the text rather than the left side. This is common in Arabic and - * Hebraic. - * @default false - * @since 2.2 - */ - rtl?: boolean; - /** - * Whether to apply a drop shadow to the legend. A backgroundColor also needs to be applied for this to take effect. - * Since 2.3 the shadow can be an object configuration containing color, offsetX, offsetY, opacity and width. - * @default false - */ - shadow?: boolean | Shadow; - /** - * CSS styles for the legend area. In the 1.x versions the position of the legend area was determined by CSS. In - * 2.x, the position is determined by properties like align, verticalAlign, x and y, but the styles are still parsed - * for backwards compatibility. - * @deprecated - */ - style?: CSSObject; - /** - * The pixel height of the symbol for series types that use a rectangle in the legend. Defaults to the font size of - * legend items. - * @since 3.0.8 - */ - symbolHeight?: number; - /** - * The pixel padding between the legend item symbol and the legend item text. - * @default 5 - */ - symbolPadding?: number; - /** - * The border radius of the symbol for series types that use a rectangle in the legend. - * @default 0 - * @since 3.0.8 - */ - symbolRadius?: number; - /** - * The pixel width of the legend item symbol. - * @default 16 - */ - symbolWidth?: number; - /** - * A title to be added on top of the legend. - * @since 3.0 - */ - title?: LegendTitleOptions; - /** - * Whether to use HTML to render the legend item texts. Prior to 4.1.7, when using HTML, legend.navigation was - * disabled. - * @default false - */ - useHTML?: boolean; - /** - * The vertical alignment of the legend box. Can be one of 'top', 'middle' or 'bottom'. Vertical position can be - * further determined by the y option. - * - * In the case that the legend is aligned in a corner position, the layout option will determine whether to place it - * above/below or on the side of the plot area. - * - * @default 'bottom' - * @since 2.0 - */ - verticalAlign?: string; - /** - * The width of the legend box. - * @since 2.0 - */ - width?: number; - /** - * The x offset of the legend relative to its horizontal alignment align within chart.spacingLeft and - * chart.spacingRight. Negative x moves it to the left, positive x moves it to the right. - * @default 0 - * @since 2.0 - */ - x?: number; - /** - * The vertical offset of the legend relative to it's vertical alignment verticalAlign within chart.spacingTop and - * chart.spacingBottom. Negative y moves it up, positive y moves it down. - * @default 0 - * @since 2.0 - */ - y?: number; - } - - /** - * The loading options control the appearance of the loading screen that covers the plot area on chart operations. This - * screen only appears after an explicit call to chart.showLoading(). It is a utility for developers to communicate to - * the end user that something is going on, for example while retrieving new data via an XHR connection. The - * 'Loading...' text itself is not part of this configuration object, but part of the lang object. - */ - interface LoadingOptions { - /** - * The duration in milliseconds of the fade out effect. - * @default 100 - * @since 1.2.0 - */ - hideDuration?: number; - /** - * CSS styles for the loading label span. - * @default { 'fontWeight': 'bold', 'position': 'relative', 'top': '45%' } - */ - labelStyle?: CSSObject; - /** - * The duration in milliseconds of the fade in effect. - * @default 100 - * @since 1.2.0 - */ - showDuration?: number; - /** - * CSS styles for the loading screen that covers the plot area. - * @default { position: 'absolute', backgroundColor: 'white', opacity: 0.5, textAlign: 'center' } - */ - style?: Object; - } - - /** - * A collection of options for buttons and menus appearing in the exporting module. - */ - interface NavigationOptions { - /** - * A collection of options for buttons appearing in the exporting module. - */ - buttonOptions?: Button; - /** - * CSS styles for the hover state of the individual items within the popup menu appearing by default when the export - * icon is clicked. The menu items are rendered in HTML. - * @default {background: '#4572A5', color: '#FFFFFF'} - * @since 2.0 - */ - menuItemHoverStyle?: Object; - /** - * CSS styles for the individual items within the popup menu appearing by default when the export icon is clicked. - * The menu items are rendered in HTML. - * @default { padding: '0 5px', background: NONE, color: '#303030'} - * @since 2.0 - */ - menuItemStyle?: Object; - /** - * CSS styles for the popup menu appearing by default when the export icon is clicked. This menu is rendered in - * HTML. - * @default { border: '1px solid #A0A0A0', background: '#FFFFFF' } - * @since 2.0 - */ - menuStyle?: Object; - } - - /** - * Options for displaying a message like 'No data to display'. This feature requires the file no-data-to-display.js to - * be loaded in the page. The actual text to display is set in the lang.noData option. - */ - interface NoDataOptions { - /** - * An object of additional SVG attributes for the no-data label. - * @since 3.0.8 - */ - attr?: {}; - /** - * The position of the no-data label, relative to the plot area. - * @default { 'x': 0, 'y': 0, 'align': 'center', 'verticalAlign': 'middle' } - * @since 3.0.8 - */ - position?: Position; - /** - * CSS styles for the no-data label. - * @default { 'fontSize': '12px', 'fontWeight': 'bold', 'color': '#60606a' } - */ - style?: CSSObject; - } - - interface PaneBackground { - /** - * @default {linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, '#FFF'],[1, '#DDD']]} - */ - backgroundColor: string | Gradient; - /** - * @default 'silver' - */ - borderColor?: string | Gradient; - /** - * @default 1 - */ - borderWidth?: number; - /** - * The class name for this background. - * @since 5.0.0 - * @default 'highcharts-pane' - */ - className?: string; - /** - * @default 0 - */ - innerRadius?: number | string; - /** - * @default '105%' - */ - outerRadius?: number | string; - /** - * @default 'circle' - */ - shape?: string; - } - - /** - * Applies only to polar charts and angular gauges. This configuration object holds general options for the combined X - * and Y axes set. Each xAxis or yAxis can reference the pane by index. - */ - interface PaneOptions { - /** - * An object, or array of objects, for backgrounds. Sub options include backgroundColor (can be solid or gradient), - * shape ('solid', 'arc' or 'circle'), innerWidth, outerWidth, borderWidth, borderColor. - * @since 2.3.0 - */ - background?: PaneBackground | PaneBackground[]; - /** - * The center of a polar chart or angular gauge, given as an array of [x, y] positions. Positions can be given as - * integers that transform to pixels, or as percentages of the plot area size. - * @default ['50%', '50%'] - * @since 2.3.0 - */ - center?: Array; - /** - * The end angle of the polar X axis or gauge value axis, given in degrees where 0 is north. - * @default startAngle + 360 - * @since 2.3.0 - */ - endAngle?: number; - /** - * The size of the pane, either as a number defining pixels, or a percentage defining a percentage of the plot are. - * @default '85%' - */ - size?: number | string; - /** - * The size of the pane, either as a number defining pixels, or a percentage defining a percentage of the plot are - * @since 2.3.0 - */ - startAngle?: number; - } - - /** - * Allows setting a set of rules to apply for different screen or chart sizes. - * Each rule specifies additional chart options. - * @since 5.0.0 - */ - interface ResponsiveOptions { - /** - * A set of rules for responsive settings. The rules are executed from the top down. - * @since 5.0.0 - */ - rules?: RulesOptions[]; - } - - /** - * A set of rules for responsive settings. The rules are executed from the top down. - */ - interface RulesOptions { - /** - * A full set of chart options to apply as overrides to the general chart options. - * The chart options are applied when the given rule is active. - * - * A special case is configuration objects that take arrays, for example xAxis, yAxis or series. - * For these collections, an id option is used to map the new option set to an existing object. - * If an existing object of the same id is not found, the item of the same indexupdated. - * So for example, setting chartOptions with two series items without an id, will cause the existing - * chart's two series to be updated with respective options. - * @since 5.0.0 - */ - chartOptions?: Options; - - /** - * Under which conditions the rule applies. - * @since 5.0.0 - */ - condition?: ConditionOptions; - } - - interface TitleObject extends TitleOptions { - /** - * Update method that points back to Chart.setTitle. - * @since 5.0.0 - */ - update(options: TitleOptions): void; - } - - interface ScrollablePropArea { - minWidth?: number; - scrollPositionX?: number; - } - - /** - * Under which conditions the rule applies. - */ - interface ConditionOptions { - /** - * A callback function to gain complete control on when the responsive rule applies. Return true if it applies. - * This opens for checking against other metrics than the chart size, or example the document size or other elements. - * The this keyword refers to the Chart object. - * @since 5.0.0 - */ - callback?: Function; - - /** - * The responsive rule applies if the chart height is less than this. - * @since 5.0.0 - */ - maxHeight?: number; - - /** - * The responsive rule applies if the chart height is less than this. - * @since 5.0.0 - */ - maxWidth?: number; - - /** - * The responsive rule applies if the chart height is greater than this. - * @since 5.0.0 - * @default 0 - */ - minHeight?: number; - - /** - * The responsive rule applies if the chart width is greater than this. - * @since 5.0.0 - * @default 0 - */ - minWidth?: number; - } - - interface DataLabels { - /** - * The alignment of the data label compared to the point. If right, the right side of the label should be touching - * the point. For points with an extent, like columns, the alignments also dictates how to align it inside the box, - * as given with the inside option. Can be one of 'left', 'center' or 'right'. - * @default 'center' - */ - align?: string; - /** - * Whether to allow data labels to overlap. To make the labels less sensitive for overlapping, the - * dataLabels.padding can be set to 0. - * @default false - * @since 4.1.0 - */ - allowOverlap?: boolean; - /** - * The background color or gradient for the data label. - * @since 2.2.1 - */ - backgroundColor?: string | Gradient; - /** - * The border color for the data label. - * @since 2.2.1 - */ - borderColor?: string | Gradient; - /** - * The border radius in pixels for the data label. - * @default 0 - * @since 2.2.1 - */ - borderRadius?: number; - /** - * The border width in pixels for the data label. - * @default 0 - * @since 2.2.1 - */ - borderWidth?: number; - /** - * A class name for the data label. Particularly in styled mode, this can be used to give each series' or point's - * data label unique styling. In addition to this option, a default color class name is added so that we can give - * the labels a contrast text shadow. - * @since 5.0.0 - */ - className?: string; - /** - * The text color for the data labels. - * @default null - */ - color?: string | Gradient | null; - /** - * Whether to hide data labels that are outside the plot area. By default, the data label is moved inside the plot - * area according to the overflow option. - * @default 2.3.3 - */ - crop?: boolean; - /** - * Whether to defer displaying the data labels until the initial series animation has finished. - * @default true - * @since 4.0 - */ - defer?: boolean; - /** - * Enable or disable the data labels. - * @default false - */ - enabled?: boolean; - /** - * A format string for the data label. Available variables are the same as for formatter. - * @default {y} - * @since 3.0 - */ - format?: string; - /** - * Callback JavaScript function to format the data label. Note that if a format is defined, the format takes - * precedence and the formatter is ignored. - * Available data are: - * - this.percentage Stacked series and pies only. The point's percentage of the total. - * - this.point The point object. The point name, if defined, is available through this.point.name. - * - this.series The series object. The series name is available through this.series.name. - * - this.total Stacked series only. The total value at this point's x value. - * - this.x: The x value. - * - this.y: The y value. - */ - formatter?(): string; - /** - * For points with an extent, like columns, whether to align the data label inside the box or to the actual value - * point. Defaults to false in most cases, true in stacked columns. - * @since 3.0 - */ - inside?: boolean; - /** - * How to handle data labels that flow outside the plot area. The default is 'justify', which aligns them inside the - * plot area. For columns and bars, this means it will be moved inside the bar. To display data labels outside the - * plot area, set crop to false and overflow to 'none'. - * @default 'justify' - * @since 3.0.6 - */ - overflow?: string; - /** - * When either the borderWidth or the backgroundColor is set, this is the padding within the box. - * @default 5 - * @since 2.2.1 - */ - padding?: number; - /** - * Whether to reserve space for the labels. This can be turned off when for example the labels are rendered inside - * the plot area instead of outside. - * @default true - * @since 4.1.10 - */ - reserveSpace?: boolean; - /** - * Text rotation in degrees. Note that due to a more complex structure, backgrounds, borders and padding will be - * lost on a rotated data label. - * @default 0 - */ - rotation?: number; - /** - * The shadow of the box. Works best with borderWidth or backgroundColor. Since 2.3 the shadow can be an object - * configuration containing color, offsetX, offsetY, opacity and width. - * @default false - */ - shadow?: boolean | Shadow; - /** - * The name of a symbol to use for the border around the label. Symbols are predefined functions on the Renderer - * object. - * @default 'square' - * @since 4.1.2 - */ - shape?: string; - /** - * Styles for the label. - * @default {'color': 'contrast', 'fontSize': '11px', 'fontWeight': 'bold', 'textShadow': '0 0 6px contrast, 0 0 3px contrast' } - * @since 4.1.0 - */ - style?: CSSObject; - /** - * Whether to {@link http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html|use HTML} to render the labels. - * @default false - */ - useHTML?: boolean; - /** - * The vertical alignment of a data label. Can be one of top, middle or bottom. The default value depends on the - * data, for instance in a column chart, the label is above positive values and below negative values. - * @since 2.3.3 - */ - verticalAlign?: string; - /** - * The x position offset of the label relative to the point. - * @default 0 - */ - x?: number; - /** - * The y position offset of the label relative to the point. - * @default -6 - */ - y?: number; - /** - * The Z index of the data labels. The default Z index puts it above the series. Use a Z index of 2 to display it - * behind the series. - * @default 6 - * @since 2.3.5 - */ - zIndex?: number; - } - - interface PieDataLabels extends DataLabels { - /** - * The color of the line connecting the data label to the pie slice. The default color is the same as the point's - * color. Defaults to {point.color}. - * @since 2.1 - */ - connectorColor?: string; - /** - * The distance from the data label to the connector. - * @default 5 - * @since 2.1 - */ - connectorPadding?: number; - /** - * The width of the line connecting the data label to the pie slice. - * @default 1 - * @since 2.1 - */ - connectorWidth?: number; - /** - * The distance of the data label from the pie's edge. Negative numbers put the data label on top of the pie slices. - * Connectors are only shown for data labels outside the pie. - * @default 30 - * @since 2.1 - */ - distance?: number; - /** - * Whether to render the connector as a soft arc or a line with sharp break. - * @default true - * @since 2.1.7 - */ - softConnector?: boolean; - } - - interface AreaCheckboxEvent extends Event { - /** - * The state of the checkbox - */ - checked: boolean; - /** - * The checked item - */ - item: SeriesObject | PointObject; - } - - interface AreaClickEvent extends Event { - /** - * A pointer to the nearest point on the graph - */ - point: PointObject; - } - - interface PlotEvents { - /** - * Fires after the series has finished its initial animation, or in case animation is disabled, immediately as the - * series is displayed. - * - * The this keyword refers to the Series object. - * @since 4.0 - */ - afterAnimate?(event: Event): void; - /** - * Fires when the checkbox next to the series' name in the legend is clicked. One parameter, event, is passed to the - * function. The state of the checkbox is found by event.checked. The checked item is found by event.item. Return - * false to prevent the default action which is to toggle the select state of the series. - * - * The this keyword refers to the Series object. - * @since 1.2.0 - */ - checkboxClick?(event: AreaCheckboxEvent): boolean | void; - /** - * Fires when the series is clicked. One parameter, event, is passed to the function. This contains common event - * information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * Additionally, event.point holds a pointer to the nearest point on the graph. - * - * The this keyword refers to the Series object. - */ - click?(event: AreaClickEvent): void; - /** - * Fires when the series is hidden after chart generation time, either by clicking the legend item or by calling - * .hide(). - * - * The this keyword refers to the Series object. - */ - hide?(): void; - /** - * Fires when the legend item belonging to the series is clicked. One parameter, event, is passed to the function. - * This contains common event information based on jQuery or MooTools depending on which library is used as the base - * for Highcharts. The default action is to toggle the visibility of the series. This can be prevented by returning - * false or calling event.preventDefault(). - * - * The this keyword refers to the Series object. - */ - legendItemClick?(event: Event): boolean | void; - /** - * Fires when the mouse leaves the graph. One parameter, event, is passed to the function. This contains common - * event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. If - * the stickyTracking option is true, mouseOut doesn't happen before the mouse enters another graph or leaves the - * plot area. - * - * The this keyword refers to the Series object. - */ - mouseOut?(event: Event): void; - /** - * Fires when the mouse enters the graph. One parameter, event, is passed to the function. This contains common - * event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * - * The this keyword refers to the Series object. - */ - mouseOver?(event: Event): void; - /** - * Fires when the series is shown after chart generation time, either by clicking the legend item or by calling - * .show(). - * - * The this keyword refers to the Series object. - * @since 1.2.0 - */ - show?(): void; - } - - interface MarkerState { - /** - * Enable or disable the point marker. If null, the markers are hidden when the data is dense, and shown for more - * widespread data points. - * @default null, true for hover and select - */ - enabled?: boolean | null; - /** - * The fill color of the point marker. When null, the series' or point's color is used. - */ - fillColor?: string | null; - /** - * The color of the point marker's outline. When null, the series' or point's color is used. - * @default '#FFFFFF', '#000000' for select state - */ - lineColor?: string | Gradient | null; - /** - * The width of the point marker's outline. - * @default 0 - */ - lineWidth?: number; - /** - * The radius of the point marker. - * @default 4, undefined for hover and select - */ - radius?: number; - } - - interface MarkerHoverState extends MarkerState { - /** - * The additional line width for a hovered point. - * @default 1 - * @since 4.0.3 - */ - lineWidthPlus?: number; - /** - * The number of pixels to increase the radius of the hovered point. - * @default 2 - * @since 4.0.3 - */ - radiusPlus?: number; - } - - interface Marker extends MarkerState { - /** - * Image markers only. Set the image width explicitly. When using this option, a width must also be set. - * @default null - * @since 4.0.4 - */ - height?: number | null; - states?: { - hover?: MarkerHoverState; - /** - * The appearance of the point marker when selected. In order to allow a point to be selected, set the - * series.allowPointSelect option to true. - */ - select?: MarkerState; - }; - /** - * A predefined shape or symbol for the marker. When null, the symbol is pulled from options.symbols. Other possible - * values are 'circle', 'square', 'diamond', 'triangle' and 'triangle-down'. - * - * Additionally, the URL to a graphic can be given on this form: 'url(graphic.png)'. Note that for the image to be - * applied to exported charts, its URL needs to be accessible by the export server. - * - * Custom callbacks for symbol path generation can also be added to Highcharts.SVGRenderer.prototype.symbols. The - * callback is then used by its method name. - */ - symbol?: string | null; // null, 'circle', 'square', 'diamond', 'triangle' 'triangle-down' or 'url(graphic.png)' - /** - * Image markers only. Set the image width explicitly. When using this option, a height must also be set. - * @default null. - * @since 4.0.4 - */ - width?: number | null; - } - - interface PointEvents { - /** - * Fires when a point is clicked. One parameter, event, is passed to the function. This contains common event - * information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * - * If the series.allowPointSelect option is true, the default action for the point's click event is to toggle the - * point's select state. Returning false cancels this action. - * - * The this keyword refers to the Point object. - */ - click?(event: Event): boolean; - /** - * Fires when the mouse leaves the area close to the point. One parameter, event, is passed to the function. This - * contains common event information based on jQuery or MooTools depending on which library is used as the base for - * Highcharts. - * - * The this keyword refers to the Point object. - */ - mouseOut?(event: Event): void; - /** - * Fires when the mouse enters the area close to the point. One parameter, event, is passed to the function. This - * contains common event information based on jQuery or MooTools depending on which library is used as the base for - * Highcharts. - * - * The this keyword refers to the Point object. - */ - mouseOver?(event: Event): void; - /** - * Fires when the point is removed using the .remove() method. One parameter, event, is passed to the function. - * Returning false cancels the operation. - * - * The this keyword refers to the Point object. - * @since 1.2.0 - */ - remove?(event: Event): boolean | void; - /** - * Fires when the point is selected either programmatically or following a click on the point. One parameter, event, - * is passed to the function. Returning false cancels the operation. - * - * The this keyword refers to the Point object. - * @since 1.2.0 - */ - select?(event: Event): boolean | void; - /** - * Fires when the point is unselected either programmatically or following a click on the point. One parameter, - * event, is passed to the function. Returning false cancels the operation. - * - * The this keyword refers to the Point object. - * @since 1.2.0 - */ - unselect?(event: Event): boolean | void; - /** - * Fires when the point is updated programmatically through the .update() method. One parameter, event, is passed to - * the function. The new point options can be accessed through event.options. Returning false cancels the operation. - * - * The this keyword refers to the Point object. - * @since 1.2.0 - */ - update?(event: Event): boolean | void; - /** - * Fires when the legend item belonging to the pie point (slice) is clicked. - * The this keyword refers to the point itself. One parameter, event, is passed to the function. - * This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. - * The default action is to toggle the visibility of the point. This can be prevented by calling event.preventDefault(). - */ - legendItemClick?(event: Event): boolean | void; - } - - interface Halo { - /** - * A collection of SVG attributes to override the appearance of the halo, for example fill, stroke and stroke-width. - * @since 4.0 - */ - attributes?: {}; - /** - * Opacity for the halo unless a specific fill is overridden using the attributes setting. Note that Highcharts is - * only able to apply opacity to colors of hex or rgb(a) formats. - * @default 0.25 - * @since 4.0 - */ - opacity?: number; - /** - * The pixel size of the halo. For point markers this is the radius of the halo. For pie slices it is the width of - * the halo outside the slice. For bubbles it defaults to 5 and is the width of the halo outside the bubble. - * Defaults to 10. - */ - size?: number; - } - - interface LineStates { - /** - * Animation setting for hovering the graph in line-type series. - * @default { "duration": 50 } - * @since 5.0.8 - */ - animation?: boolean | Animation; - /** - * Enable separate styles for the hovered series to visualize that the user hovers either the series itself or the - * legend. - * @default true - * @since 1.2 - */ - enabled?: boolean; - /** - * Options for the halo appearing around the hovered point in line-type series as well as outside the hovered slice - * in pie charts. By default the halo is filled by the current point or series color with an opacity of 0.25. The - * halo can be disabled by setting the halo option to false. - * @since 4.0 - */ - halo?: boolean | Halo; - /** - * Pixel with of the graph line. - * @default 2 - */ - lineWidth?: number; - /** - * The additional line width for the graph of a hovered series. - * @default 1 - * @since 4.0.3 - */ - lineWidthPlus?: number; - marker?: Marker; - } - - interface BarStates { - /** - * A specific border color for the hovered point. Defaults to inherit the normal state border color. - */ - borderColor?: string | Gradient; - /** - * How much to brighten the point on interaction. Requires the main color to be defined in hex or rgb(a) format. - * @default 0.1 - */ - brightness?: number; - color?: string | Gradient; - /** - * Enable separate styles for the hovered series to visualize that the user hovers either the series itself or the - * legend. - * @default true - * @since 1.2 - */ - enabled?: boolean; - /** - * Options for the halo appearing around the hovered point in line-type series as well as outside the hovered slice - * in pie charts. By default the halo is filled by the current point or series color with an opacity of 0.25. The - * halo can be disabled by setting the halo option to false. - * @since 4.0 - */ - halo?: boolean | Halo; - } - - interface PieStates extends BarStates, LineStates { } - - interface AreaZone { - /** - * Styled mode only. A custom class name for the zone. - * @since 5.0.0 - */ - className?: string; - /** - * Defines the color of the series. - * @since 4.1.0 - */ - color?: string | Gradient; - /** - * A name for the dash style to use for the graph. - * @since 4.1.0 - */ - dashStyle?: string; - /** - * Defines the fill color for the series (in area type series) - * @since 4.1.0 - */ - fillColor?: string; - /** - * The value up to where the zone extends, if undefined the zones stretches to the last value in the series. - * @default undefined - * @since 4.1.0 - */ - value?: number; - } - - interface RangeDataLabels { - /** - * The alignment of the data label compared to the point. If right, the right side of the label should be touching - * the point. For points with an extent, like columns, the alignments also dictates how to align it inside the box, - * as given with the inside option. Can be one of 'left', 'center' or 'right'. - * @default 'center' - */ - align?: string; - /** - * Whether to allow data labels to overlap. To make the labels less sensitive for overlapping, the - * dataLabels.padding can be set to 0. - * @default false - * @since 4.1.0 - */ - allowOverlap?: boolean; - /** - * The background color or gradient for the data label. - * @default undefined - * @since 2.2.1 - */ - backgroundColor?: string | Gradient; - /** - * The border color for the data label. - * @default undefined - * @since 2.2.1 - */ - borderColor?: string | Gradient; - /** - * The border radius in pixels for the data label. - * @default 0 - * @since 2.2.1 - */ - borderRadius?: number; - /** - * The border width in pixels for the data label. - * @default 0 - * @since 2.2.1 - */ - borderWidth?: number; - /** - * The text color for the data labels. - * @default null - */ - color?: string | Gradient | null; - /** - * Whether to hide data labels that are outside the plot area. By default, the data label is moved inside the plot - * area according to the overflow option. - * @default true - * @since 2.3.3 - */ - crop?: boolean; - /** - * Whether to defer displaying the data labels until the initial series animation has finished. - * @default true - * @since 4.0 - */ - defer?: boolean; - /** - * Enable or disable the data labels. - * @default false - */ - enabled?: boolean; - /** - * A format string for the data label. Available variables are the same as for formatter. - * @default '{y}' - * @since 3.0 - */ - format?: string; - /** - * Callback JavaScript function to format the data label. Note that if a format is defined, the format takes - * precedence and the formatter is ignored. - * Available data are: - * - this.percentage Stacked series and pies only. The point's percentage of the total. - * - this.point The point object. The point name, if defined, is available through this.point.name. - * - this.series The series object. The series name is available through this.series.name. - * - this.total Stacked series only. The total value at this point's x value. - * - this.x: The x value. - * - this.y: The y value. - */ - formatter?(): string; - /** - * For points with an extent, like columns, whether to align the data label inside the box or to the actual value - * point. Defaults to false in most cases, true in stacked columns. - * @since 3.0 - */ - inside?: boolean; - /** - * How to handle data labels that flow outside the plot area. The default is justify, which aligns them inside the - * plot area. For columns and bars, this means it will be moved inside the bar. To display data labels outside the - * plot area, set crop to false and overflow to 'none'. - * @default 'justify' - * @since 3.0.6 - */ - overflow?: string; - /** - * When either the borderWidth or the backgroundColor is set, this is the padding within the box. - * @default 5 - * @since 2.2.1 - */ - padding?: number; - /** - * Text rotation in degrees. Note that due to a more complex structure, backgrounds, borders and padding will be - * lost on a rotated data label. - * @default 0 - */ - rotation?: number; - /** - * The shadow of the box. Works best with borderWidth or backgroundColor. Since 2.3 the shadow can be an object - * configuration containing color, offsetX, offsetY, opacity and width. - * @default false - * @since 2.2.1 - */ - shadow?: boolean | Shadow; - /** - * The name of a symbol to use for the border around the label. Symbols are predefined functions on the Renderer - * object. - * @default 'square' - * @since 4.1.2 - */ - shape?: string; - /** - * Styles for the label. - * @default {'color': 'contrast', 'fontSize': '11px', 'fontWeight': 'bold', 'textShadow': '0 0 6px contrast, 0 0 3px contrast' } - * @since 4.1.0 - */ - style?: CSSObject; - /** - * Whether to {@link http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html|use HTML} to render the labels. - * @default false - */ - useHTML?: boolean; - /** - * The vertical alignment of a data label. Can be one of 'top', 'middle' or 'bottom'. The default value depends on the - * data, for instance in a column chart, the label is above positive values and below negative values. - * @since 2.3.3 - */ - verticalAlign?: string; - /** - * X offset of the higher data labels relative to the point value. - * @default 0 - * @since 2.3.0 - */ - xHigh?: number; - /** - * X offset of the lower data labels relative to the point value. - * @default 0 - * @since 2.3.0 - */ - xLow?: number; - /** - * Y offset of the higher data labels relative to the point value. - * @default -6 - * @since 2.3.0 - */ - yHigh?: number; - /** - * Y offset of the lower data labels relative to the point value. - * @default 16 - * @since 2.3.0 - */ - yLow?: number; - /** - * The Z index of the data labels. The default Z index puts it above the series. Use a Z index of 2 to display it - * behind the series. - * @default 6 - * @since 2.3.5 - */ - zIndex?: number; - } - - interface Dial { - /** - * The background or fill color of the gauge's dial. - * @default 'black' - * @since 2.3.0 - */ - backgroundColor?: string | Gradient; - /** - * The length of the dial's base part, relative to the total radius or length of the dial. - * @default '70%'. - * @since 2.3.0 - */ - baseLength?: string; - /** - * The pixel width of the base of the gauge dial. The base is the part closest to the pivot, defined by baseLength. - * @default 3 - * @since 2.3.0 - */ - baseWidth?: number; - /** - * The border color or stroke of the gauge's dial. By default, the borderWidth is 0, so this must be set in addition - * to a custom border color. - * @default 'silver' - * @since 2.3.0 - */ - borderColor?: string | Gradient; - /** - * The width of the gauge dial border in pixels. - * @default 0 - * @since 2.3.0 - */ - borderWidth?: number; - /** - * The radius or length of the dial, in percentages relative to the radius of the gauge itself. - * @default '80%' - * @since 2.3.0 - */ - radius?: string; - /** - * The length of the dial's rear end, the part that extends out on the other side of the pivot. Relative to the - * dial's length. - * @default '10%' - * @since 2.3.0 - */ - rearLength?: string; - /** - * The width of the top of the dial, closest to the perimeter. The pivot narrows in from the base to the top. - * @default 1 - * @since 2.3.0 - */ - topWidth?: number; - } - - interface Pivot { - /** - * The background color or fill of the pivot. - * @default 'black' - * @since 2.3.0 - */ - backgroundColor?: string | Gradient; - /** - * The border or stroke color of the pivot. In able to change this, the borderWidth must also be set to something - * other than the default 0. - * @default 'silver' - * @since 2.3.0 - */ - borderColor?: string | Gradient; - /** - * The border or stroke width of the pivot. - * @default 0 - * @since 2.3.0 - */ - borderWidth?: number; - /** - * The pixel radius of the pivot. - * @default 5 - * @since 2.3.0 - */ - radius?: number; - } - - /** - * Set options on specific levels. Takes precedence over series options, but not point options. - */ - interface TreeMapLevel { - /** - * Can set borderColor on all points which lies on the same level. - * @since 4.1.0 - */ - borderColor?: string | Gradient; - /** - * et the dash style of the border of all the point which lies on the level. - * @since 4.1.0 - */ - borderDashStyle?: string; - /** - * Can set the borderWidth on all points which lies on the same level. - * @since 4.1.0 - */ - borderWidth?: number; - /** - * Can set a color on all points which lies on the same level. - * @since 4.1.0 - */ - color?: string | Gradient; - /** - * Can set the options of dataLabels on each point which lies on the level. - * @default undefined - * @since 4.1.0 - */ - dataLabels?: DataLabels; - /** - * Can set the layoutAlgorithm option on a specific level. - * @since 4.1.0 - */ - layoutAlgorithm?: string; - /** - * Can set the layoutStartingDirection option on a specific level. - * @since 4.1.0 - */ - layoutStartingDirection?: string; - /** - * Decides which level takes effect from the options set in the levels object. - * @since 4.1.0 - */ - level?: number; - } - - /** - * General options for all series types. - */ - interface SeriesChart { - /** - * Allow this series' points to be selected by clicking on the markers, bars or pie slices. - * @default false - * @since 1.2.0 - */ - allowPointSelect?: boolean; - /** - * Enable or disable the initial animation when a series is displayed. The animation can also be set as a - * configuration object. Please note that this option only applies to the initial animation of the series itself. - * For other animations, see chart.animation and the animation parameter under the API methods. - * @default true - */ - animation?: boolean | Animation; - /** - * A class name to apply to the series' graphical elements. - * @since 5.0.0 - */ - className?: string; - /** - * The main color or the series. In line type series it applies to the line and the point markers unless otherwise - * specified. In bar type series it applies to the bars unless a color is specified per point. The default value is - * pulled from the options.colors array. - */ - color?: string | Gradient; - /** - * Polar charts only. Whether to connect the ends of a line series plot across the extremes. - * @default true - * @since 2.3.0 - */ - connectEnds?: boolean; - /** - * Whether to connect a graph line across null points. - * @default false - */ - connectNulls?: boolean; - /** - * When the series contains less points than the crop threshold, all points are drawn, event if the points fall - * outside the visible plot area at the current zoom. The advantage of drawing all points (including markers and - * columns), is that animation is performed on updates. On the other hand, when the series contains more points than - * the crop threshold, the series data is cropped to only contain points that fall within the plot area. The - * advantage of cropping away invisible points is to increase performance on large series. - * @default 300 - * @since 2.2 - */ - cropThreshold?: number; - /** - * You can set the cursor to 'pointer' if you have click events attached to the series, to signal to the user that - * the points and lines can be clicked. - */ - cursor?: string; - /** - * A name for the dash style to use for the graph. Applies only to series type having a graph, like line, spline, - * area and scatter in case it has a lineWidth. The value for the dashStyle include: - * - Solid - * - ShortDash - * - ShortDot - * - ShortDashDot - * - ShortDashDotDot - * - Dot - * - Dash - * - LongDash - * - DashDot - * - LongDashDot - * - LongDashDotDot - * @default 'Solid' - */ - dashStyle?: string; - /** - * Gantt charts use one or more data labels for each series, for showing multiple date periods. - */ - dataLabels?: DataLabels | DataLabels[]; - /** - * Enable or disable the mouse tracking for a specific series. This includes point tooltips and click events on - * graphs and points. For large datasets it improves performance. - * @default true - */ - enableMouseTracking?: boolean; - events?: PlotEvents; - /** - * Determines whether the series should look for the nearest point in both dimensions or just the x-dimension when - * hovering the series. Defaults to 'xy' for scatter series and 'x' for most other series. If the data has duplicate - * x-values, it is recommended to set this to 'xy' to allow hovering over all points. - * - * Applies only to series types using nearest neighbor search (not direct hover) for tooltip. - * @since 5.0.10 - */ - findNearestPointBy?: string; - /** - * Whether to use the Y extremes of the total chart width or only the zoomed area when zooming in on parts of the X - * axis. By default, the Y axis adjusts to the min and max of the visible data. Cartesian series only. - * @default false - * @since 4.1.6 - */ - getExtremesFromAll?: boolean; - /** - * An array specifying which option maps to which key in the data point array. This makes it convenient to work with - * unstructured data arrays from different sources. - * @since 4.1.6 - */ - keys?: string[]; - /** - * Pixel with of the graph line. - * @default 2 - */ - lineWidth?: number; - /** - * The line cap used for line ends and line joins on the graph. - * @default 'round' - */ - linecap?: string; - /** - * The id of another series to link to. Additionally, the value can be ':previous' to link to the previous series. - * When two series are linked, only the first one appears in the legend. Toggling the visibility of this also - * toggles the linked series. - * @since 3.0 - */ - linkedTo?: string; - marker?: Marker; - /** - * The color for the parts of the graph or points that are below the threshold. - * @default null. - * @since 3.0 - */ - negativeColor?: string | null; - point?: { - events: PointEvents; - }; - /** - * If no x values are given for the points in a series, pointInterval defines the interval of the x values. For - * example, if a series contains one value every decade starting from year 0, set pointInterval to 10. - * - * Since Highcharts 4.1, it can be combined with pointIntervalUnit to draw irregular intervals. - * @default 1 - */ - pointInterval?: number; - /** - * On datetime series, this allows for setting the pointInterval to the two irregular time units, month and year. - * Combine it with pointInterval to draw quarters, 6 months, 10 years etc. - * @since 4.1.0 - */ - pointIntervalUnit?: string; - /** - * Possible values: null, 'on', 'between'. - * - * In a column chart, when pointPlacement is 'on', the point will not create any padding of the X axis. In a polar - * column chart this means that the first column points directly north. If the pointPlacement is 'between', the - * columns will be laid out between ticks. This is useful for example for visualising an amount between two points - * in time or in a certain sector of a polar chart. - * - * Since Highcharts 3.0.2, the point placement can also be numeric, where 0 is on the axis value, -0.5 is between - * this value and the previous, and 0.5 is between this value and the next. Unlike the textual options, numeric - * point placement options won't affect axis padding. - * - * Note that pointPlacement needs a pointRange to work. For column series this is computed, but for line-type series - * it needs to be set. - * - * Defaults to null in cartesian charts, 'between' in polar charts. - * @since 2.3.0 - */ - pointPlacement?: string | number | null; - /** - * If no x values are given for the points in a series, pointStart defines on what value to start. For example, if a - * series contains one yearly value starting from 1945, set pointStart to 1945. - * @default 0 - */ - pointStart?: number; - /** - * Whether to select the series initially. If showCheckbox is true, the checkbox next to the series name will be - * checked for a selected series. - * @default false - * @since 1.2.0 - */ - selected?: boolean; - /** - * Whether to apply a drop shadow to the graph line. Since 2.3 the shadow can be an object configuration containing - * color, offsetX, offsetY, opacity and width. - * @default false - */ - shadow?: boolean | Shadow; - /** - * If true, a checkbox is displayed next to the legend item to allow selecting the series. The state of the checkbox - * is determined by the selected option. - * @default false - * @since 1.2.0 - */ - showCheckbox?: boolean; - /** - * Whether to display this particular series or series type in the legend. The default value is true for standalone - * series, false for linked series. Defaults to true. - */ - showInLegend?: boolean; - /** - * When this is true, the series will not cause the Y axis to cross the zero plane (or threshold option) unless the - * data actually crosses the plane. - * - * For example, if softThreshold is false, a series of 0, 1, 2, 3 will make the Y axis show negative values - * according to the minPadding option. If softThreshold is true, the Y axis starts at 0. - * @default true - * @since 4.1.9 - */ - softThreshold?: boolean; - /** - * Whether to stack the values of each series on top of each other. Possible values are null to disable, 'normal' to - * stack by value or 'percent'. - */ - stacking?: string | null; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: LineStates; - }; - /** - * Sticky tracking of mouse events. When true, the mouseOut event on a series isn't triggered until the mouse moves - * over another series, or out of the plot area. When false, the mouseOut event on a series is triggered when the - * mouse leaves the area around the series' graph or markers. This also implies the tooltip. When stickyTracking is - * false and tooltip.shared is false, the tooltip will be hidden when moving the mouse between series. Defaults to - * true for line and area type series, but to false for columns, pies etc. - * @default true - * @since 2.0 - */ - stickyTracking?: boolean; - /** - * The Y axis value to serve as the base for the area, for distinguishing between values above and below a - * threshold. If null, the area behaves like a line series with fill between the graph and the Y axis minimum. - * @default 0 - * @since 2.0 - */ - threshold?: number | null; - /** - * A configuration object for the tooltip rendering of each single series. Properties are inherited from tooltip, - * but only the following properties can be defined on a series level. - * @since 2.3 - */ - tooltip?: SeriesTooltipOptions; - /** - * When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two - * dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are - * assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 - * disable. - * @default 1000 - * @since 2.2 - */ - turboThreshold?: number; - /** - * Set the initial visibility of the series. - * @default true - */ - visible?: boolean; - /** - * Defines the Axis on which the zones are applied. - * @default 'y' - * @since 4.1.0 - */ - zoneAxis?: string; - /** - * An array defining zones within a series. Zones can be applied to the X axis, Y axis or Z axis for bubbles, - * according to the zoneAxis option. - */ - zones?: AreaZone[]; - } - - interface AreaChart extends SeriesChart { - /** - * Fill color or gradient for the area. When null, the series' color is used with the series' fillOpacity. - */ - fillColor?: string | Gradient | null; - /** - * Fill opacity for the area. Note that when you set an explicit fillColor, the fillOpacity is not applied. Instead, - * you should define the opacity in the fillColor with an rgba color definition. - * @default 0.75 - */ - fillOpacity?: number; - /** - * A separate color for the graph line. By default the line takes the color of the series, but the lineColor setting - * allows setting a separate color for the line without altering the fillColor. - */ - lineColor?: string | Gradient; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * A separate color for the negative part of the area. - * @since 3.0 - */ - negativeFillColor?: string; - /** - * Whether to apply steps to the line. Possible values are left, center and right. Prior to 2.3.5, only left was - * supported. - * - * @default 'false' - * @since 1.2.5 - */ - step?: string; - /** - * Whether the whole area or just the line should respond to mouseover tooltips and other mouse or touch events. - * @default false - * @since 1.1.6 - */ - trackByArea?: boolean; - } - - interface AreaRangeChart extends AreaChart { - /** - * Extended data labels for range series types. Range series data labels have no x and y options. Instead, they have - * xLow, xHigh, yLow and yHigh options to allow the higher and lower data label sets individually. - * @since 2.3.0 - */ - dataLabels?: RangeDataLabels; - } - - interface AreaSplineChart extends AreaChart { - } - - interface AreaSplineRangeChart extends AreaRangeChart { - } - - interface BarChart extends SeriesChart { - /** - * The color of the border surrounding each column or bar. - * @default '#FFFFFF' - */ - borderColor?: string | Gradient; - /** - * The corner radius of the border surrounding each column or bar. - * @default 0 - */ - borderRadius?: number; - /** - * The width of the border surrounding each column or bar. - * @default 1 - */ - borderWidth?: number; - /** - * When using automatic point colors pulled from the options.colors collection, this option determines whether the - * chart should receive one color per series or one color per point. Defaults to false. - * @default false - * @since 2.0 - */ - colorByPoint?: boolean; - /** - * A series specific or series type specific color set to apply instead of the global colors when colorByPoint is true. - * @since 3.0 - */ - colors?: Color[]; - /** - * Depth of the columns in a 3D column chart. Requires highcharts-3d.js. - * @default 25 - * @since 4.0 - */ - depth?: number; - /** - * 3D columns only. The color of the edges. Similar to borderColor, except it defaults to the same color as the - * column. - */ - edgeColor?: string; - /** - * 3D columns only. The width of the colored edges. - * @default 1 - */ - edgeWidth?: number; - /** - * Padding between each value groups, in x axis units. - * @default 0.2 - */ - groupPadding?: number; - /** - * The spacing between columns on the Z Axis in a 3D chart. Requires highcharts-3d.js. - * @default 1 - * @since 4.0 - */ - groupZPadding?: number; - /** - * Whether to group non-stacked columns or to let them render independent of each other. Non-grouped columns will be - * laid out individually and overlap each other. - * @default true - * @since 2.3.0 - */ - grouping?: boolean; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * The maximum allowed pixel width for a column, translated to the height of a bar in a bar chart. This prevents the - * columns from becoming too wide when there is a small number of points in the chart. - * @default null - * @since 4.1.8 - */ - maxPointWidth?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * The minimal height for a column or width for a bar. By default, 0 values are not shown. To visualize a 0 (or - * close to zero) point, set the minimal point length to a pixel value like 3. In stacked column charts, - * minPointLength might not be respected for tightly packed values. - * @default 0 - */ - minPointLength?: number; - /** - * Padding between each column or bar, in x axis units. - * @default 0.1 - */ - pointPadding?: string | number; - /** - * The X axis range that each point is valid for. This determines the width of the column. On a categorized axis, - * the range will be 1 by default (one category unit). On linear and datetime axes, the range will be computed as - * the distance between the two closest data points. - * @since 2.3 - */ - pointRange?: number; - /** - * A pixel value specifying a fixed width for each column or bar. When null, the width is calculated from the - * pointPadding and groupPadding. - * @since 1.2.5 - */ - pointWidth?: number | null; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: BarStates; - }; - } - - /** - * A box plot is a convenient way of depicting groups of data through their five-number summaries: the smallest - * observation (sample minimum), lower quartile (Q1), median (Q2), upper quartile (Q3), and largest observation (sample - * maximum). - */ - interface BoxPlotChart extends ErrorBarChart { - /** - * The fill color of the box. - * @default '#FFFFFF' - * @since 3.0 - */ - fillColor?: string; - /** - * Padding between each value groups, in x axis units. - * @default 0.2 - */ - groupPadding?: number; - /** - * Whether to group non-stacked columns or to let them render independent of each other. Non-grouped columns will be - * laid out individually and overlap each other. - * @default true - * @since 2.3.0 - */ - grouping?: boolean; - /** - * The id of another series to link to. Additionally, the value can be ':previous' to link to the previous series. - * When two series are linked, only the first one appears in the legend. Toggling the visibility of this also - * toggles the linked series. - * @since 3.0 - */ - linkedTo?: string; - /** - * The color of the median line. If null, the general series color applies. - * @default null - * @since 3.0 - */ - medianColor?: string | null; - /** - * The pixel width of the median line. If null, the lineWidth is used. - * @default 2 - * @since 3.0 - */ - medianWidth?: number | null; - } - - /** - * A bubble series is a three dimensional series type where each point renders an X, Y and Z value. Each points is drawn - * as a bubble where the position along the X and Y axes mark the X and Y values, and the size of the bubble relates to - * the Z value. - */ - interface BubbleChart extends SeriesChart { - /** - * Whether to display negative sized bubbles. The threshold is given by the zThreshold option, and negative bubbles - * can be visualized by setting negativeColor. - * @default true - * @since 3.0 - */ - displayNegative?: boolean; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * Maximum bubble size. Bubbles will automatically size between the minSize and maxSize to reflect the z value of - * each bubble. Can be either pixels (when no unit is given), or a percentage of the smallest one of the plot width - * and height. - * @default '20%' - * @since 3.0 - */ - maxSize?: string | number; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * Minimum bubble size. Bubbles will automatically size between the minSize and maxSize to reflect the z value of - * each bubble. Can be either pixels (when no unit is given), or a percentage of the smallest one of the plot width - * and height. - * @default 8 - * @since 3.0 - */ - minSize?: string | number; - /** - * When a point's Z value is below the zThreshold setting, this color is used. - * @default null - * @since 3.0 - */ - negativeColor?: string | null; - /** - * Whether the bubble's value should be represented by the area or the width of the bubble. The default, area, - * corresponds best to the human perception of the size of each bubble. - * @default 'area' - * @since 3.0.7 - */ - sizeBy?: string; - /** - * When this is true, the absolute value of z determines the size of the bubble. This means that with the default - * zThreshold of 0, a bubble of value -1 will have the same size as a bubble of value 1, while a bubble of value 0 - * will have a smaller size according to minSize. - * @default false - * @since 4.1.9 - */ - sizeByAbsoluteValues?: boolean; - /** - * The maximum for the Z value range. Defaults to the highest Z value in the data. - * @default null - * @since 4.0.3 - */ - zMax?: number | null; - /** - * The minimum for the Z value range. Defaults to the lowest Z value in the data. - * @default null - * @since 4.0.3 - */ - zMin?: number | null; - /** - * When displayNegative is false, bubbles with lower Z values are skipped. When displayNegative is true and a - * negativeColor is given, points with lower Z is colored. - * @default 0 - * @since 3.0 - */ - zThreshold?: number; - } - - interface ColumnChart extends BarChart { - } - - /** - * The column range is a cartesian series type with higher and lower Y values along an X axis. Requires - * highcharts-more.js. To display horizontal bars, set chart.inverted to true. - */ - interface ColumnRangeChart extends ColumnChart { - dataLabels?: RangeDataLabels; - } - - /** - * Error bars are a graphical representation of the variability of data and are used on graphs to indicate the error, or - * uncertainty in a reported measurement. - */ - interface ErrorBarChart extends SeriesChart { - /** - * When using automatic point colors pulled from the options.colors collection, this option determines whether the - * chart should receive one color per series or one color per point. - * @default false - * @since 2.0 - */ - colorByPoint?: boolean; - /** - * A series specific or series type specific color set to apply instead of the global colors when colorByPoint is true. - * @since 3.0 - */ - colors?: Color[]; - /** - * Depth of the columns in a 3D column chart. Requires highcharts-3d.js. - * @default 25 - * @since 4.0 - */ - depth?: number; - /** - * 3D columns only. The color of the edges. Similar to borderColor, except it defaults to the same color as the - * column. - */ - edgeColor?: string; - /** - * 3D columns only. The width of the colored edges. - * @default 1 - */ - edgeWidth?: number; - /** - * The spacing between columns on the Z Axis in a 3D chart. Requires highcharts-3d.js. - * @default 1 - * @since 4.0 - */ - groupZPadding?: number; - /** - * The parent series of the error bar. The default value links it to the previous series. Otherwise, use the id of - * the parent series. - * @default ':previous' - * @since 3.0 - */ - linkedTo?: string; - /** - * The maximum allowed pixel width for a column, translated to the height of a bar in a bar chart. This prevents the - * columns from becoming too wide when there is a small number of points in the chart. - * @default null - * @since 4.1.8 - */ - maxPointWidth?: number | null; - /** - * Padding between each column or bar, in x axis units. - * @default 0.1 - */ - pointPadding?: number; - /** - * The X axis range that each point is valid for. This determines the width of the column. On a categorized axis, - * the range will be 1 by default (one category unit). On linear and datetime axes, the range will be computed as - * the distance between the two closest data points. - * @since 2.3 - */ - pointRange?: number; - /** - * A pixel value specifying a fixed width for each column or bar. When null, the width is calculated from the - * pointPadding and groupPadding. - * @since 1.2.5 - */ - pointWidth?: number | null; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: BarStates; - }; - /** - * The color of the stem, the vertical line extending from the box to the whiskers. If null, the series color is - * used. - * @default null - * @since 3.0 - */ - stemColor?: string | null; - /** - * The dash style of the stem, the vertical line extending from the box to the whiskers. - * @default 'Solid' - * @since 3.0 - */ - stemDashStyle?: string; - /** - * The width of the stem, the vertical line extending from the box to the whiskers. If null, the width is inherited - * from the lineWidth option. - * @default null - * @since 3.0 - */ - stemWidth?: number | null; - /** - * The color of the whiskers, the horizontal lines marking low and high values. When null, the general series color - * is used. - * @default null - * @since 3.0 - */ - whiskerColor?: string | null; - /** - * The length of the whiskers, the horizontal lines marking low and high values. It can be a numerical pixel value, - * or a percentage value of the box width. Set 0 to disable whiskers. - * @default '50%' - * @since 3.0 - */ - whiskerLength?: number | string; - /** - * The line width of the whiskers, the horizontal lines marking low and high values. When null, the general - * lineWidth applies. - * @default 2 - * @since 3.0 - */ - whiskerWidth?: number | null; - } - - /** - * Funnel charts are a type of chart often used to visualize stages in a sales project, where the top are the initial - * stages with the most clients. It requires that the modules/funnel.js file is loaded - */ - interface FunnelChart extends SeriesChart { - /** - * The color of the border surrounding each column or bar. - * @default '#FFFFFF' - */ - borderColor?: string | Gradient; - /** - * The width of the border surrounding each column or bar. - * @default 1 - */ - borderWidth?: number; - /** - * The center of the series. By default, it is centered in the middle of the plot area, so it fills the plot area - * height. - * @default ['50%', '50%'] - * @since 3.0 - */ - center?: [string | number, string | number]; - /** - * A series specific or series type specific color set to use instead of the global colors. - * @since 3.0 - */ - colors?: Color[]; - dataLabels?: PieDataLabels; - /** - * The thickness of a 3D pie. Requires highcharts-3d.js - * @default 0 - * @since 4.0 - */ - depth?: number; - /** - * The height of the funnel or pyramid. If it is a number it defines the pixel height, if it is a percentage string - * it is the percentage of the plot area height. - * @since 3.0 - */ - height?: number | string; - /** - * The minimum size for a pie in response to auto margins. The pie will try to shrink to make room for data labels - * in side the plot area, but only to this size. - * @default 80 - * @since 3.0 - */ - minSize?: number; - /** - * The height of the neck, the lower part of the funnel. A number defines pixel width, a percentage string defines a - * percentage of the plot area height. - * @default '25%' - */ - neckHeight?: number | string; - /** - * The width of the neck, the lower part of the funnel. A number defines pixel width, a percentage string defines a - * percentage of the plot area width. - * @default '30%' - * @since 3.0 - */ - neckWidth?: number | string; - /** - * A reversed funnel has the widest area down. A reversed funnel with no neck width and neck height is a pyramid. - * @default false - * @since 3.0.10 - */ - reversed?: boolean; - /** - * If a point is sliced, moved out from the center, how many pixels should it be moved? - * @default 10 - */ - slicedOffset?: number; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: PieStates; - }; - /** - * The width of the funnel compared to the width of the plot area, or the pixel width if it is a number. - * @default '90%' - * @since 3.0 - */ - width?: number | string; - } - - /** - * General plotting options for the gauge series type. Requires highcharts-more.js - */ - interface GaugeChart extends SeriesChart { - /** - * Data labels for the gauge. For gauges, the data labels are enabled by default and shown in a bordered box below - * the point. - */ - datalabels?: DataLabels; - /** - * Options for the dial or arrow pointer of the gauge. - */ - dial?: Dial; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * Allow the dial to overshoot the end of the perimeter axis by this many degrees. Say if the gauge axis goes from 0 - * to 60, a value of 100, or 1000, will show 5 degrees beyond the end of the axis. Defaults to 0. - * @default 0 - * @since 3.0.10 - */ - overshoot?: number; - /** - * Options for the pivot or the center point of the gauge. - * @since 2.3.0 - */ - pivot?: Pivot; - /** - * When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to - * 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. - * @default true - * @since 3.0 - */ - wrap?: boolean; - } - - /** - * The heatmap series type. This series type is available both in Highcharts and Highmaps. - * The colors of each heat map point is usually determined by its value and controlled by settings on the colorAxis. - */ - interface HeatMapChart extends SeriesChart { - /** - * The color of the border surrounding each column or bar. - * @default '#FFFFFF' - */ - borderColor?: string | Gradient; - /** - * The corner radius of the border surrounding each column or bar. - * @default 0 - */ - borderRadius?: number; - /** - * The width of the border surrounding each column or bar. - * @default 1 - */ - borderWidth?: number; - /** - * When using automatic point colors pulled from the options.colors collection, this option determines whether the - * chart should receive one color per series or one color per point. Defaults to false. - * @default false - * @since 2.0 - */ - colorByPoint?: boolean; - /** - * A series specific or series type specific color set to apply instead of the global colors when colorByPoint is true. - * @since 3.0 - */ - colors?: Color[]; - /** - * The columns size - how many X axis units each column in the heatmap should span. - * @default 1 - * @since 4.0 - */ - colsize?: number; - /** - * When the series contains less points than the crop threshold, all points are drawn, event if the points fall - * outside the visible plot area at the current zoom. The advantage of drawing all points (including markers and - * columns), is that animation is performed on updates. On the other hand, when the series contains more points than - * the crop threshold, the series data is cropped to only contain points that fall within the plot area. The - * advantage of cropping away invisible points is to increase performance on large series. - * @default 50 - */ - cropTreshold?: number; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * The maximum allowed pixel width for a column, translated to the height of a bar in a bar chart. This prevents the - * columns from becoming too wide when there is a small number of points in the chart. - * @default null - * @since 4.1.8 - */ - maxPointWidth?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * The row size - how many Y axis units each heatmap row should span. - * @default 1 - * @since 4.0 - */ - rowsize?: number; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: BarStates; - }; - } - - interface LineChart extends SeriesChart { - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * Whether to apply steps to the line. Possible values are left, center and right. Prior to 2.3.5, only left was - * supported. - * @default false - * @since 1.2.5 - */ - step?: boolean | string; - } - - /** - * A pie chart is a circular chart divided into sectors, illustrating numerical proportion. - */ - interface PieChart extends SeriesChart { - /** - * The color of the border surrounding each slice. When null, the border takes the same color as the slice fill. - * This can be used together with a borderWidth to fill drawing gaps created by antialiazing artefacts in - * borderless pies. - * @default '#FFFFFF' - */ - borderColor?: string | Gradient | null; - /** - * The width of the border surrounding each column or bar. - * @default 1 - */ - borderWidth?: number; - /** - * The center of the pie chart relative to the plot area. Can be percentages or pixel values. The default behaviour - * (as of 3.0) is to center the pie so that all slices and data labels are within the plot area. As a consequence, - * the pie may actually jump around in a chart with dynamic values, as the data labels move. In that case, the - * center should be explicitly set, for example to ['50%', '50%']. - * @default [null, null] - */ - center?: [string | number | null, string | number | null]; - /** - * A series specific or series type specific color set to apply instead of the global colors when colorByPoint is true. - * @since 3.0 - */ - colors?: Color[]; - dataLabels?: PieDataLabels; - /** - * The thickness of a 3D pie. Requires highcharts-3d.js - * @default 0 - * @since 4.0 - */ - depth?: number; - /** - * The end angle of the pie in degrees where 0 is top and 90 is right. Defaults to startAngle plus 360. - * @default null - * @since 1.3.6 - */ - endAngle?: number | null; - /** - * Equivalent to chart.ignoreHiddenSeries, this option tells whether the series shall be redrawn as if the hidden - * point were null. - * - * The default value changed from false to true with Highcharts 3.0. - * - * @default true - * @since 2.3.0 - */ - ignoreHiddenPoint?: boolean; - /** - * The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or - * pixel value. Percentages are relative to the pie size. Pixel values are given as integers. - * - * Note: in Highcharts < 4.1.2, the percentage was relative to the plot area, not the pie size. - * @default 0 - * @since 2.0 - */ - innerSize?: number | string; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * The minimum size for a pie in response to auto margins. The pie will try to shrink to make room for data labels - * in side the plot area, but only to this size. - * @default 80 - * @since 3.0 - */ - minSize?: number; - /** - * The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as - * integers. The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the - * plot area. As a consequence, the size of the pie may vary when points are updated and data labels more around. In - * that case it is best to set a fixed value, for example '75%'. - */ - size?: number | string; - /** - * If a point is sliced, moved out from the center, how many pixels should it be moved? - * @default 10 - */ - slicedOffset?: number; - /** - * The start angle of the pie slices in degrees where 0 is top and 90 right. - * @default 0 - * @since 2.3.4 - */ - startAngle?: number; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: PieStates; - }; - } - - /** - * A polygon series can be used to draw any freeform shape in the cartesian coordinate system. A fill is applied with - * the color option, and stroke is applied through lineWidth and lineColor options. Requires the highcharts-more.js - * file. - */ - interface PolygonChart extends SeriesChart { - /** - * The width of the line connecting the data points. - * @default 0 - */ - lineWidth?: number; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - } - - interface PyramidChart extends SeriesChart { - /** - * The color of the border surrounding each slice - * @default '#FFFFFF' - */ - borderColor?: string | Gradient; - /** - * The width of the border surrounding each slice - * @default 1 - */ - borderWidth?: number; - /** - * The center of the series. By default, it is centered in the middle of the plot area, so it fills the plot area - * height. - * @default ['50%', '50%'] - * @since 3.0 - */ - center?: [string | number, string | number]; - /** - * A series specific or series type specific color set to apply instead of the global colors when colorByPoint is true. - * @since 3.0 - */ - colors?: Color[]; - dataLabels?: PieDataLabels; - /** - * The thickness of a 3D pie. Requires highcharts-3d.js - * @default 0 - * @since 4.0 - */ - depth?: number; - /** - * The height of the funnel or pyramid. If it is a number it defines the pixel height, if it is a percentage string - * it is the percentage of the plot area height. - * @since 3.0 - */ - height?: number | string; - /** - * The minimum size for a pie in response to auto margins. The pie will try to shrink to make room for data labels - * in side the plot area, but only to this size. - * @default 80 - * @since 3.0 - */ - minSize?: number; - /** - * The pyramid is reversed by default, as opposed to the funnel, which shares the layout engine, and is not - * reversed. - * @default true - * @since 3.0.10 - */ - reversed?: boolean; - /** - * If a point is sliced, moved out from the center, how many pixels should it be moved? - * @default 10 - */ - slicedOffset?: number; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: PieStates; - }; - /** - * The width of the pyramid compared to the width of the plot area, or the pixel width if it is a number. - * @default '90%' - * @since 3.0 - */ - width?: number | string; - } - - interface ScatterChart extends SeriesChart { - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - } - - /** - * A gauge showing values using a filled arc with colors indicating the value. The solid gauge plots values against the - * yAxis, which is extended with some color options, minColor, maxColor and stops, to control the color of the gauge - * itself. - */ - interface SolidGaugeChart extends SeriesChart { - /** - * Allow the dial to overshoot the end of the perimeter axis by this many degrees. Say if the gauge axis goes from 0 - * to 60, a value of 100, or 1000, will show 5 degrees beyond the end of the axis. - * @default 0 - * @since 3.0.10 - */ - overshoot?: number; - /** - * Wether to draw rounded edges on the gauge. - * @default false - * @since 5.0.8 - */ - rounded?: boolean; - /** - * The threshold or base level for the gauge. - * @default null - * @since 5.0.3 - */ - threshold?: number | null; - /** - * When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to - * 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. - * @default true - * @since 3.0 - */ - wrap?: boolean; - } - - interface SplineChart extends SeriesChart { - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - } - - /** - * The size of the point shape is determined by its value relative to its siblings values. Requires the module - * heatmap.js as well, if functionality such as the colorAxis is to be used. - */ - interface TreeMapChart extends SeriesChart { - /** - * When enabled the user can click on a point which is a parent and zoom in on its children. - * @default false - * @since 4.1.0 - */ - allowDrillToNode?: boolean; - /** - * Enabling this option will make the treemap alternate the drawing direction between vertical and horizontal. The - * next levels starting direction will always be the opposite of the previous. - * @default false - * @since 4.1.0 - */ - alternateStartingDirection?: boolean; - /** - * The color of the border surrounding each tree map item. - * @default '#E0E0E0' - */ - borderColor?: string | Gradient; - /** - * The width of the border surrounding each column or bar. - * @default 1 - */ - borderWidth?: number; - /** - * When using automatic point colors pulled from the options.colors collection, this option determines whether the - * chart should receive one color per series or one color per point. - * @default false - * @since 2.0 - */ - colorByPoint?: boolean; - /** - * A series specific or series type specific color set to apply instead of the global colors when colorByPoint is true. - * @since 3.0 - */ - colors?: Color[]; - /** - * This option decides if the user can interact with the parent nodes or just the leaf nodes. When this option is - * undefined, it will be true by default. However when allowDrillToNode is true, then it will be false by default. - * @since 4.1.2 - */ - interactByLeaf?: boolean; - /** - * This option decides which algorithm is used for setting position and dimensions of the points. Can be one of - * 'sliceAndDice', 'stripes', 'squarified' or 'strip'. - * @default 'sliceAndDice' - * @since 4.1.0 - */ - layoutAlgorithm?: string; - /** - * Defines which direction the layout algorithm will start drawing. Possible values are 'vertical' and 'horizontal'. - * @default 'vertical' - * @since 4.1.0 - */ - layoutStartingDirection?: string; - /** - * Used together with the levels and allowDrillToNode options. When set to false the first level visible when - * drilling is considered to be level one. Otherwise the level will be the same as the tree structure. - * @default true - * @since 4.1.0 - */ - levelIsConstant?: boolean; - /** - * Set options on specific levels. Takes precedence over series options, but not point options. - */ - levels?: TreeMapLevel[]; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * The maximum allowed pixel width for a column, translated to the height of a bar in a bar chart. This prevents the - * columns from becoming too wide when there is a small number of points in the chart. - * @default null - * @since 4.1.8 - */ - maxPointWidth?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * The sort index of the point inside the treemap level. - * @since 4.1.10 - */ - sortIndex?: number; - /** - * A wrapper object for all the series options in specific states. - */ - states?: { - /** - * Options for the hovered series - */ - hover?: BarStates; - }; - } - - interface WaterFallChart extends BarChart { - /** - * A name for the dash style to use for the graph. Applies only to series type having a graph, like line, spline, - * area and scatter in case it has a lineWidth. The value for the dashStyle include: - * - Solid - * - ShortDash - * - ShortDot - * - ShortDashDot - * - ShortDashDotDot - * - Dot - * - Dash - * - LongDash - * - DashDot - * - LongDashDot - * - LongDashDotDot - * @default 'Dot' - */ - dashStyle?: string; - /** - * The color of the line that connects columns in a waterfall series. - * @default '#333333' - * @since 3.0 - */ - lineColor?: Color; - /** - * The color used specifically for positive point columns. When not specified, the general series color is used. - */ - upColor?: Color; - } - - interface WordCloudChart extends BarChart { - /** - * For some series, there is a limit that shuts down initial animation by default when the total number of points - * in the chart is too high. For example, for a column chart and its derivatives, animation doesn't run if there - * is more than 250 points totally. To disable this cap, set animationLimit to Infinity. - * @default undefined - * @since 6.0.0 - */ - animationLimit?: number; - /** - * By default, series are exposed to screen readers as regions. By enabling this option, the series element itself - * will be exposed in the same way as the data points. This is useful if the series is not used as a grouping entity - * in the chart, but you still want to attach a description to the series. - * Requires the Accessibility module. - * @default undefined - * @since 5.0.12 - */ - exposeElementToA11y?: boolean; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * This option decides which algorithm is used for placement, and rotation of a word. The choice of algorith is - * therefore a crucial part of the resulting layout of the wordcloud. It is possible for users to add their own - * custom placement strategies for use in word cloud. Read more about it in our documentation - * @default center - * @since 6.0.0 - */ - placementStrategy?: string; - /** - * Same as accessibility.pointDescriptionFormatter, but for an individual series. Overrides the chart wide - * configuration. - * @default undefined - * @since 5.0.12 - */ - pointDescriptionFormatter?: () => string; - /** - * Rotation options for the words in the wordcloud. - * @since 6.0.0 - */ - rotation?: { - /** - * The smallest degree of rotation for a - * @default 0 - * @since 6.0.0 - */ - from?: number; - /** - * The largest degree of rotation for a word. - * @default 90 - * @since 6.0.0 - */ - to?: number; - /** - * The number of possible orientations for a word, within the range of rotation.from and rotation.to. - * @default 2 - * @since 6.0.0 - */ - orientations?: number; - }; - - /** - * If set to True, the accessibility module will skip past the points in this series for keyboard navigation. - * @default undefined - * @since 5.0.12 - */ - skipKeyboardNavigation?: boolean; - /** - * Spiral used for placing a word after the inital position experienced a collision with either another word or the - * borders. It is possible for users to add their own custom spiralling algorithms for use in word cloud. Read more - * about it in our documentation - * @default rectangular - * @since 6.0.0 - */ - spiral?: string; - /** - * CSS styles for the words. - * @since 6.0.0 - */ - style?: { - /** - * @default sans-serif - * @since 6.0.0 - */ - fontFamily?: string; - /** - * @default 900 - * @since 6.0.0 - */ - fontWeight?: number | string; - }; - } - - /** - * 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 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. - */ - interface PlotOptions { - area?: AreaChart; - arearange?: AreaRangeChart; - areaspline?: AreaSplineChart; - areasplinerange?: AreaSplineRangeChart; - bar?: BarChart; - boxplot?: BoxPlotChart; - bubble?: BubbleChart; - column?: ColumnChart; - columnrange?: ColumnRangeChart; - errorbar?: ErrorBarChart; - funnel?: FunnelChart; - gauge?: GaugeChart; - heatmap?: HeatMapChart; - line?: LineChart; - pie?: PieChart; - polygon?: PolygonChart; - pyramid?: PyramidChart; - scatter?: ScatterChart; - series?: SeriesChart; - solidgauge?: SolidGaugeChart; - spline?: SplineChart; - treemap?: TreeMapChart; - waterfall?: WaterFallChart; - } - - /* You will rarely, if ever, want to use this interface directly. Instead it is much more useful to use one of the derived - * interfaces (AreaChartSeriesOptions, LineChartSeriesOptions, etc.) - */ - interface IndividualSeriesOptions { - size?: number | string; - innerSize?: number | string; - - type?: string; - /** - * The main color or the series. In line type series it applies to the line and the point markers unless otherwise - * specified. In bar type series it applies to the bars unless a color is specified per point. The default - * value is pulled from the options.colors array. - */ - color?: string | Gradient; - /** - * Styled mode only. A specific color index to use for the point, so its graphic representations are given the class name highcharts-color-{n}. - * @since 5.0.0 - */ - colorIndex?: number; - /** - * When true, each column edge is rounded to its nearest pixel in order to render sharp on screen. - * In some cases, when there are a lot of densely packed columns, this leads to visible difference - * in column widths or distance between columns. In these cases, setting crisp to false may look - * better, even though each column is rendered blurry. - * @default true - * @since 5.0.10 - */ - crisp?: boolean; - /** - * You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user - * that the points and lines can be clicked. - */ - cursor?: string; - /** - * An array of data points for the series. For the area series type, points can be given in the following ways: - * - * 1. An array of numerical values. In this case, the numerical values will be interpreted as y options. The x - * values will be automatically calculated, either starting at 0 and incremented by 1, or from pointStart and - * pointInterval given in the series options. If the axis has categories, these will be used. Example: - * data: [0, 5, 3, 5] - * - * 2. An array of arrays with 2 values. In this case, the values correspond to x,y. If the first value is a string, - * it is applied as the name of the point, and the x value is inferred. - * data: [ - * [0, 9], - * [1, 7], - * [2, 6] - * ] - * - * 3. An array of objects with named values. The objects are point configuration objects as seen below. If the total - * number of data points exceeds the series' turboThreshold, this option is not available. - * data: [{ - * x: 1, - * y: 9, - * name: 'Point2', - * color: '#00FF00' - * }, { - * x: 1, - * y: 6, - * name: 'Point1', - * color: '#FF00FF' - * }] - * - * 4. An array of arrays with three values for ranges. In this case the values correspond x, yMin and yMax. If the - * first value is a string it is applied as the name of the point, and the x value is inferred. - * data: [ - * [1, 2, 3], - * [2, 4, 6], - * [3, 7, 8] - * - */ - data?: Array; - /** - * A description of the series to add to the screen reader information about the series. - * @since 5.0.0 - * @default undefined - */ - description?: string; - /** - * The dash style for the series. See series.dashStyle for possible values. Defaults to Solid. - * @since 4.1 - */ - dashStyle?: string; // Solid ShortDash ShortDot ShortDashDot ShortDashDotDot Dot Dash LongDash DashDot LongDashDot LongDashDotDot - /** - * An id for the series. This can be used after render time to get a pointer to the series object through - * chart.get(). - */ - id?: string; - /** - * The index of the series in the chart, affecting the internal index in the chart.series array, the visible Z index - * as well as the order in the legend. - * @since 2.3.0 - */ - index?: number; - /** - * The sequential index of the series in the legend. - */ - legendIndex?: number; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - maxFontSize?: number | null; - /** - * For area-like series, allow the font size to vary so that small areas get a smaller font size. The default applies this effect to area-like series but not line-like series. - */ - minFontSize?: number | null; - /** - * The name of the series as shown in the legend, tooltip etc. - */ - name?: string; - /** - * A pixel value specifying a fixed width for each column or bar. When null, the width is calculated from - * the pointPadding and groupPadding. - */ - pointWidth?: number | null; - /** - * This option allows grouping series in a stacked chart. The stack option can be a string or a number or anything - * else, as long as the grouped series' stack options match each other. - * @since 2.1 - */ - stack?: any; - /** - * The series' visibility state as set by series.show(), series.hide(), or the initial configuration. - */ - visible?: boolean; - /** - * When using dual or multiple x axes, this number defines which xAxis the particular series is connected to. It - * refers to either the axis id or the index of the axis in the xAxis array, with 0 being the first. - * @default 0 - */ - xAxis?: string | number; - /** - * When using dual or multiple x axes, this number defines which xAxis the particular series is connected to. It - * refers to either the axis id or the index of the axis in the xAxis array, with 0 being the first. - * @default 0 - */ - yAxis?: string | number; - /** - * Define the visual z index of the series. - */ - zIndex?: number; - /** - * When using any indicators, Define the indicators name like 'candlesticksss'. - */ - linkedTo?: string; - } - - interface SeriesOptions extends IndividualSeriesOptions, SeriesChart { } - - interface AreaChartSeriesOptions extends IndividualSeriesOptions, AreaChart { } - interface AreaRangeChartSeriesOptions extends IndividualSeriesOptions, AreaRangeChart { } - interface AreaSplineChartSeriesOptions extends IndividualSeriesOptions, AreaSplineChart { } - interface AreaSplineRangeChartSeriesOptions extends IndividualSeriesOptions, AreaSplineRangeChart { } - interface BarChartSeriesOptions extends IndividualSeriesOptions, BarChart { } - interface BoxPlotChartSeriesOptions extends IndividualSeriesOptions, BoxPlotChart { } - interface BubbleChartSeriesOptions extends IndividualSeriesOptions, BubbleChart { } - interface ColumnChartSeriesOptions extends IndividualSeriesOptions, ColumnChart { } - interface ColumnRangeChartSeriesOptions extends IndividualSeriesOptions, ColumnRangeChart { } - interface ErrorBarChartSeriesOptions extends IndividualSeriesOptions, ErrorBarChart { } - interface FunnelChartSeriesOptions extends IndividualSeriesOptions, FunnelChart { } - interface GanttChartSeriesOptions extends IndividualSeriesOptions, SeriesChart { } - interface GaugeChartSeriesOptions extends IndividualSeriesOptions, GaugeChart { } - interface HeatMapSeriesOptions extends IndividualSeriesOptions, HeatMapChart { } - interface LineChartSeriesOptions extends IndividualSeriesOptions, LineChart { } - interface PieChartSeriesOptions extends IndividualSeriesOptions, PieChart { } - interface PolygonChartSeriesOptions extends IndividualSeriesOptions, PolygonChart { } - interface PyramidChartSeriesOptions extends IndividualSeriesOptions, PyramidChart { } - interface ScatterChartSeriesOptions extends IndividualSeriesOptions, ScatterChart { } - interface SolidGaugeChartSeriesOptions extends IndividualSeriesOptions, SolidGaugeChart { } - interface SplineChartSeriesOptions extends IndividualSeriesOptions, SplineChart { } - interface TreeMapChartSeriesOptions extends IndividualSeriesOptions, TreeMapChart { } - interface WaterFallChartSeriesOptions extends IndividualSeriesOptions, WaterFallChart { } - interface WordCloudChartSeriesOptions extends IndividualSeriesOptions, WordCloudChart { } - - interface DataPoint { - /** - * Individual color for the point. By default the color is pulled from the global colors array. - * @default undefined - */ - color?: string | Gradient; - /** - * Serves a purpose only if a colorAxis object is defined in the chart options. This value will decide which color - * the point gets from the scale of the colorAxis. - * @default undefined - */ - colorValue?: number; - /** - * Individual data label for each point. The options are the same as the ones for plotOptions.series.dataLabels - */ - dataLabels?: DataLabels; - /** - * A description of the point to add to the screen reader information about the point. - * @default undefined - * @since 5.0.0 - */ - description?: string; - /** - * The id of a series in the drilldown.series array to use for a drilldown for this point. - * @since 3.0.8 - */ - drilldown?: string; - /** - * The end value of the point. For gantt datetime axes, the end value is the timestamp in milliseconds since 1970. - */ - end?: number; - /** - * Individual point events - */ - events?: PointEvents; - /** - * The high or maximum value for each data point. - */ - high?: number; - /** - * An id for the point. This can be used after render time to get a pointer to the point object through chart.get(). - * @since 1.2.0 - */ - id?: string; - /** - * The inner radius of an individual point in a solid gauge. Can be given as a number (pixels) or percentage string. - * @since 4.1.6 - */ - innerRadius?: number | string; - /** - * When this property is true, the points acts as a summary column for the values added or substracted since the - * last intermediate sum, or since the start of the series. The y value is ignored. - * @default false - */ - isIntermediateSum?: boolean; - /** - * When this property is true, the point display the total sum across the entire series. The y value is ignored. - * @default false - */ - isSum?: boolean; - /** - * The sequential index of the data point in the legend. - */ - legendIndex?: number; - /** - * The low or minimum value for each data point. - */ - low?: number; - marker?: Marker; - /** - * The median for each data point. This is drawn as a line through the middle area of the box. - */ - median?: number; - /** - * The name of the point as shown in the legend, tooltip, dataLabel etc. - * - * If the xAxis.type is set to category, and no categories option exists, the category will be pulled from the - * point.name of the last series defined. For multiple series, best practice however is to define xAxis.categories. - */ - name?: string; - /** - * Only for treemap. Use this option to build a tree structure. The value should be the id of the point which is the - * parent. If no points has a matching id, or this option is undefined, then the parent will be set to the root. - * @default undefined - * @since 4.1.0 - */ - parent?: string; - /** - * The lower quartile for each data point. This is the bottom of the box. - */ - q1?: number; - /** - * The higher quartile for each data point. This is the top of the box. - */ - q3?: number; - /** - * The outer radius of an individual point in a solid gauge. Can be given as a number (pixels) or percentage string. - * @since 4.1.6 - */ - radius?: number | string; - /** - * Whether the data point is selected initially. - * @default false - */ - selected?: boolean; - /** - * Whether to display a slice offset from the center. - * @default false - */ - sliced?: boolean; - /** - * The start value of the point. For gantt datetime axes, the start value is the timestamp in milliseconds since 1970. - */ - start?: number; - /** - * The value of the point, resulting in a relative area of the point in the treemap. - */ - value?: number; - /** - * The x value of the point. For datetime axes, the X value is the timestamp in milliseconds since 1970. - */ - x?: number; - /** - * The y value of the point. - */ - y?: number | null; - /** - * The size value for each bubble. The bubbles' diameters are computed based on the z, and controlled by series - * options like minSize, maxSize, sizeBy, zMin and zMax. - */ - z?: number; - } - - /** - * The chart's subtitle - */ - interface SubtitleOptions { - /** - * The horizontal alignment of the subtitle. Can be one of 'left', 'center' and 'right'. - * @default 'center' - * @since 2.0 - */ - align?: string; - /** - * When the subtitle is floating, the plot area will not move to make space for it. - * @default false - * @since 2.1 - */ - floating?: boolean; - /** - * CSS styles for the title. Exact positioning of the title can be achieved by changing the margin property, or by - * adding position: 'absolute' and left and top properties. - * @default { 'color': '#555555' } - */ - style?: Object; - /** - * The subtitle of the chart. - */ - text?: string; - /** - * Whether to {@link http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html|use HTML} to render the text. - * @default false - */ - useHTML?: boolean; - /** - * The vertical alignment of the title. Can be one of 'top', 'middle' and 'bottom'. When a value is given, the title - * behaves as floating. - * @since 2.1 - */ - verticalAlign?: string; - /** - * The x position of the subtitle relative to the alignment within chart.spacingLeft and chart.spacingRight. - * @default 0 - * @since 2.0 - */ - x?: number; - /** - * 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. - * @default null - * @since 2.0 - */ - y?: number | null; - } - - interface TimeOptions { - /** - * A custom Date class for advanced date handling. For example, JDate can be hooked in to handle Jalali dates. - * @default undefined - * @since 4.0.4 - */ - Date?: Date; - /** - * 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. - * @default undefined - * @since 4.1.0 - */ - getTimezoneOffset?: (timestamp: Date) => number; - /** - * Requires moment.js. If the timezone option is specified, it creates a default 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. - * @default undefined - * @since 5.0.7 - */ - timezone?: string; - /** - * The timezone offset in minutes. Positive values are west, negative values are east of UTC, as in the ECMAScript - * getTimezoneOffset method. Use this to display UTC based data in a predefined time zone. - * @default 0 - * @since 3.0.8 - */ - timezoneOffset?: number; - /** - * 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. - * @default undefined - * @since 6.0.5 - */ - useUTC?: boolean; - } - - interface TitleOptions { - /** - * The horizontal alignment of the title. Can be one of 'left', 'center' and 'right'. - * @default 'center' - * @since 2.0 - */ - align?: string; - /** - * When the title is floating, the plot area will not move to make space for it. - * @default false - * @since 2.1 - */ - floating?: boolean; - /** - * The margin between the title and the plot area, or if a subtitle is present, the margin between the subtitle and - * the plot area. - * @default 15 - * @since 2.1 - */ - margin?: number; - /** - * CSS styles for the title. Exact positioning of the title can be achieved by changing the margin property, or by - * adding position: 'absolute' and left and top properties. - * @default { 'color': '#333333', 'fontSize': '18px' } - */ - style?: Object; - /** - * The title of the chart. To disable the title, set the text to null. - * @default 'Chart title' - */ - text?: string | null; - /** - * Whether to {@link http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html|use HTML} to render the text. - * @default false - */ - useHTML?: boolean; - /** - * The vertical alignment of the title. Can be one of 'top', 'middle' and 'bottom'. When a value is given, the title - * behaves as floating. - * @since 2.1 - */ - verticalAlign?: string; - /** - * The x position of the title relative to the alignment within chart.spacingLeft and chart.spacingRight. - * @default 0 - * @since 2.0 - */ - x?: number; - /** - * The y position of the title relative to the alignment within chart.spacingTop and chart.spacingBottom. By default - * it depends on the font size. - * @default null - * @since 2.0 - */ - y?: number | null; - } - - interface CrosshairObject { - /** - * A class name for the crosshair, especially as a hook for styling. - * @since 5.0.0 - */ - className?: string; - /** - * The color of the crosshair. Defaults to #cccccc for numeric and datetime axes, and rgba(204,214,235,0.25) for category axes, - * where the crosshair by default highlights the whole category. - * @since 4.1 - */ - color?: string | Gradient; - /** - * The dash style for the crosshair. See series.dashStyle for possible values. Defaults to Solid. - * @since 4.1 - */ - dashStyle?: string; // Solid ShortDash ShortDot ShortDashDot ShortDashDotDot Dot Dash LongDash DashDot LongDashDot LongDashDotDot - /** - * The Z index of the crosshair. Higher Z indices allow drawing the crosshair on top of the series or behind the grid lines. - * @since 4.1 - * @default 2 - */ - zIndex?: number; - /** - * The pixel width of the crosshair. Defaults to 1 for numeric or datetime axes, and for one category width for category axes. - * @since 4.1 - */ - width?: number; - } - - interface PlotPoint { - plotX: number; - plotY: number; - } - - interface TooltipOptions extends SeriesTooltipOptions { - /** - * Enable or disable animation of the tooltip. In slow legacy IE browsers the animation is disabled by default. - * @default true - * @since 2.3.0 - */ - animation?: boolean; - /** - * The background color or gradient for the tooltip. - * @default 'rgba(255, 255, 255, 0.85)' - */ - backgroundColor?: string | Gradient; - /** - * The color of the tooltip border. When null, the border takes the color of the corresponding series or point. - * @default null - */ - borderColor?: string | Gradient | null; - /** - * The radius of the rounded border corners. - * @default 3 - */ - borderRadius?: number; - /** - * The pixel width of the tooltip border. - * @default 1 - */ - borderWidth?: number; - /** - * Display crosshairs to connect the points with their corresponding axis values. The crosshairs can be defined as a - * boolean, an array of booleans or an object. - * - * Boolean - * If the crosshairs option is true, a single crosshair relating to the x axis will be shown. - * - * Array of booleans - * In an array of booleans, the first value turns on the x axis crosshair and the second value to the y axis - * crosshair. Use [true, true] to show complete crosshairs. - * - * Array of objects - * In an array of objects, the first value applies to the x axis crosshair and the second value to the y axis - * crosshair. For each dimension, a width, color, dashStyle and zIndex can be given. - * - * @default null - */ - crosshairs?: boolean | [boolean, boolean] | CrosshairObject | [CrosshairObject, CrosshairObject] | null; - /** - * Enable or disable the tooltip. - * @default true - */ - enabled?: boolean; - /** - * Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on - * series. - * - * A subset of HTML is supported. The HTML of the tooltip is parsed and converted to SVG, therefore this isn't a - * complete HTML renderer. The following tabs are supported: , , , ,
, . Spans can be - * styled with a style attribute, but only text-related CSS that is shared with SVG is handled. - * - * Since version 2.1 the tooltip can be shared between multiple series through the shared option. The available data - * in the formatter differ a bit depending on whether the tooltip is shared or not. In a shared tooltip, all - * properties except x, which is common for all points, are kept in an array, this.points. - * - * Available data are: - * this.percentage (not shared) / this.points[i].percentage (shared) - * Stacked series and pies only. The point's percentage of the total. - * this.point (not shared) / this.points[i].point (shared) - * The point object. The point name, if defined, is available through this.point.name. - * this.points - * In a shared tooltip, this is an array containing all other properties for each point. - * this.series (not shared) / this.points[i].series (shared) - * The series object. The series name is available through this.series.name. - * this.total (not shared) / this.points[i].total (shared) - * Stacked series only. The total value at this point's x value. - * this.x - * The x value. This property is the same regardless of the tooltip being shared or not. - * this.y (not shared) / this.points[i].y (shared) - * The y value. - */ - formatter?(): boolean | string; - /** - * Whether to allow the tooltip to render outside the chart's SVG element box. - * By default (false), the tooltip is rendered within the chart's SVG element, which results in - * the tooltip being aligned inside the chart area. For small charts, this may result in - * clipping or overlapping. When true, a separate SVG element is created and overlaid on the - * page, allowing the tooltip to be aligned inside the page itself. - * @default false - * @since 6.1.1 - */ - outside?: boolean; - /** - * Padding inside the tooltip, in pixels. - * @since 5.0.0 - * @default 8 - */ - padding?: number; - /** - * A callback function to place the tooltip in a default position. The callback receives three parameters: - * labelWidth, labelHeight and point, where point contains values for plotX and plotY telling where the reference - * point is in the plot area. Add chart.plotLeft and chart.plotTop to get the full coordinates. - * - * The return should be an object containing x and y values, for example { x: 100, y: 100 }. - * @since 2.2.4 - */ - positioner?(labelWidth: number, labelHeight: number, point: PlotPoint): { x: number; y: number; }; - /** - * Whether to apply a drop shadow to the tooltip. - * @default true - */ - shadow?: boolean; - /** - * The name of a symbol to use for the border around the tooltip. In Highcharts 3.x and less, the shape was square. - * @default 'callout' - * @since 4.0 - */ - shape?: string; - /** - * When the tooltip is shared, the entire plot area will capture mouse movement or touch events. Tooltip texts for - * series types with ordered data (not pie, scatter, flags etc) will be shown in a single bubble. This is - * recommended for single series charts and for tablet/mobile optimized charts. - * @default false - * @since 2.1 - */ - shared?: boolean; - /** - * Proximity snap for graphs or single points. Does not apply to bars, columns and pie slices. It defaults to 10 for - * mouse-powered devices and 25 for touch devices. Note that since Highcharts 4.1 the whole plot area by default - * captures pointer events in order to show the tooltip, so for tooltip.snap to make sense, stickyTracking must be - * false. - * @since 1.2.0 - */ - snap?: number; - /** - * Split the tooltip into one label per series, with the header close to the axis. - * This is recommended over shared tooltips for charts with multiple line series, - * generally making them easier to read. - * @since 5.0.0 - * @default false - */ - split?: boolean; - /** - * CSS styles for the tooltip. The tooltip can also be styled through the CSS class .highcharts-tooltip - * @default { color: '#333333', fontSize: '12px', padding: '8px' } - */ - style?: Object; - /** - * Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables - * and images in the tooltip. It is also recommended for rtl languages as it works around rtl bugs in early Firefox. - * @default false - * @since 2.2 - */ - useHTML?: boolean; - } - - interface SeriesTooltipOptions { - /** - * For series on a datetime axes, the date format in the tooltip's header will by default be guessed based on the - * closest data points. This member gives the default string representations used for each unit. - */ - dateTimeLabelFormats?: DateTimeFormats; - /** - * Whether the tooltip should follow the mouse as it moves across columns, pie slices and other point types with an - * extent. By default it behaves this way for scatter, bubble and pie series by override in the plotOptions for - * those series types. - * - * For touch moves to behave the same way, followTouchMove must be true also. - * @default false - * @since 3.0 - */ - followPointer?: boolean; - /** - * Whether the tooltip should follow the finger as it moves on a touch device. If chart.zoomType is set, it will - * override followTouchMove. - * @default true - * @since 3.0.1 - */ - followTouchMove?: boolean; - /** - * A string to append to the tooltip format. - * @default 'false' - * @since 2.2 - */ - footerFormat?: string; - /** - * The HTML of the tooltip header line. Variables are enclosed by curly brackets. Available variables are point.key, - * series.name, series.color and other members from the point and series objects. The point.key variable contains - * the category name, x value or datetime string depending on the type of axis. For datetime axes, the point.key - * date format can be set using tooltip.xDateFormat. - * - * @default '{point.key}
' - */ - headerFormat?: string; - /** - * The number of milliseconds to wait until the tooltip is hidden when mouse out from a point or chart. - * @default 500 - * @since 3.0 - */ - hideDelay?: number; - /** - * The HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables are - * point.x, point.y, series.name and series.color and other properties on the same form. Furthermore, point.y can be - * extended by the tooltip.valuePrefix and tooltip.valueSuffix variables. This can also be overridden for each - * series, which makes it a good hook for displaying units. - * - * @default '\u25CF {series.name}: {point.y}
' - * @since 2.2 - */ - pointFormat?: string; - /** - * A callback function for formatting the HTML output for a single point in the tooltip. Like the pointFormat - * string, but with more flexibility. - * - * The this keyword refers to the Point object. - * @since 4.1.0 - */ - pointFormatter?(): string; - /** - * How many decimals to show in each series' y value. This is overridable in each series' tooltip options object. - * The default is to preserve all decimals. - * @since 2.2 - */ - valueDecimals?: number; - /** - * A string to prepend to each series' y value. Overridable in each series' tooltip options object. - * @since 2.2 - */ - valuePrefix?: string; - /** - * A string to append to each series' y value. Overridable in each series' tooltip options object. - * @since 2.2 - */ - valueSuffix?: string; - /** - * The format for the date in the tooltip header if the X axis is a datetime axis. The default is a best guess based - * on the smallest distance between points in the chart. - */ - xDateFormat?: string; - } - - interface Options { - /** - * Options for configuring accessibility for the chart. Requires the accessibility module to be loaded. - * For a description of the module and information on its features, see Highcharts Accessibility. - * @since 5.0.0 - */ - accessibility?: AccessibilityOptions; - /** - * Options for configuring annotations, for example labels, arrows or shapes. - */ - annotations?: AnnotationsOptions[]; - /** - * Options regarding the chart area and plot area as well as general chart options. - */ - chart?: ChartOptions; - colorAxis?: ColorAxisOptions | ColorAxisOptions[]; - /** - * 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, pie.colors. - * - * @default ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'] - */ - colors?: Color[]; - /** - * Highchart by default puts a credits label in the lower right corner of the chart. This can be changed using these options. - */ - credits?: CreditsOptions; - /** - * The Data module provides a simplified interface for adding data to a chart from sources like CVS, HTML tables or - * grid views. See also the tutorial article on the Data module. - * - * It requires the modules/data.js file to be loaded. - * - * Please note that the default way of adding data in Highcharts, without the need of a module, is through the - * series.data option. - */ - data?: DataOptions; - /** - * Styled mode only. Configuration object for adding SVG definitions for reusable elements. - * See gradients, shadows and patterns for more information and code examples. - */ - defs?: any; // TODO: Unknown API interface, see also http://api.highcharts.com/highcharts/defs - /** - * Options for drill down, the concept of inspecting increasingly high resolution data through clicking on chart - * items like columns or pie slices. - * - * The drilldown feature requires the drilldown.js file to be loaded, found in the modules directory of the download - * package, or online at code.highcharts.com/modules/drilldown.js. - */ - drilldown?: DrilldownOptions; - /** - * Options for the exporting module. - */ - exporting?: ExportingOptions; - /** - * HTML labels that can be positioned anywhere in the chart area. - */ - labels?: LabelsOptions; - lang?: LangObject; - /** - * The legend is a box containing a symbol and name for each series item or point item in the chart. - */ - legend?: LegendOptions; - /** - * The loading options control the appearance of the loading screen that covers the plot area on chart operations. - * This screen only appears after an explicit call to chart.showLoading(). It is a utility for developers to - * communicate to the end user that something is going on, for example while retrieving new data via an XHR - * connection. The 'Loading...' text itself is not part of this configuration object, but part of the lang object. - */ - loading?: LoadingOptions; - /** - * A collection of options for buttons and menus appearing in the exporting module. - */ - navigation?: NavigationOptions; - /** - * Options for displaying a message like 'No data to display'. This feature requires the file no-data-to-display.js - * to be loaded in the page. The actual text to display is set in the lang.noData option. - */ - noData?: NoDataOptions; - /** - * Applies only to polar charts and angular gauges. This configuration object holds general options for the combined - * X and Y axes set. Each xAxis or yAxis can reference the pane by index. - */ - pane?: PaneOptions; - /** - * 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 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. - */ - plotOptions?: PlotOptions; - /** - * Allows setting a set of rules to apply for different screen or chart sizes. Each rule specifies additional chart options. - * @since 5.0.0 - */ - responsive?: ResponsiveOptions; - /** - * The actual series to append to the chart. In addition to the members listed below, any member of the plotOptions - * for that specific type of plot can be added to a series individually. For example, even though a general - * lineWidth is specified in plotOptions.series, an individual lineWidth can be specified for each series. - */ - series?: IndividualSeriesOptions[]; - /** - * The chart's subtitle - */ - subtitle?: SubtitleOptions; - /** - * The chart's time options - */ - time?: TimeOptions; - /** - * The chart's main title. - */ - title?: TitleOptions; - /** - * Options for the tooltip that appears when the user hovers over a series or point. - */ - tooltip?: TooltipOptions; - /** - * The X axis or category axis. Normally this is the horizontal axis, though if the chart is inverted this is the - * vertical axis. In case of multiple axes, the xAxis node is an array of configuration objects. - */ - xAxis?: AxisOptions[] | AxisOptions; - /** - * The Y axis or value axis. Normally this is the vertical axis, though if the chart is inverted this is the - * horizontal axis. In case of multiple axes, the yAxis node is an array of configuration objects. - */ - yAxis?: AxisOptions[] | AxisOptions; - } - - /** - * The Gantt chart uses different plot options than the base Highcharts chart Options. - */ - interface GanttOptions extends Options { - /** - * The specific Gantt Series to append the GanttChart. - */ - series?: GanttChartSeriesOptions[]; - } - - interface GlobalOptions extends Options { - /** - * Global options that don't apply to each chart. These options, like the lang options, must be set using the - * Highcharts.setOptions method. - */ - global?: GlobalObject; - /** - * Language object. The language object is global and it can't be set on each chart initiation. Instead, use - * Highcharts.setOptions to set it before any chart is initiated. - */ - lang?: LangObject; - } - - interface DateFormatSpecifiers { - [index: string]: (timestamp: number) => string; - } - - /** - * A chart can have from 0 axes (pie chart) to multiples. In a normal, single series cartesian chart, there is one X - * axis and one Y axis. - * - * The X axis or axes are referenced by chart.xAxis, which is an array of Axis objects. If there is only one axis, it - * can be referenced through chart.xAxis[0], and multiple axes have increasing indices. The same pattern goes for Y - * axes. - * - * If you need to get the axes from a series object, use the series.xAxis andseries.yAxis properties. These are not - * arrays, as one series can only be associated to one X and one Y axis. - * - * A third way to reference the axis programmatically is by id. Add an id in the axis configuration options, and get the - * axis by chart.get(id). - * - * Configuration options for the axes are given in options.xAxis and options.yAxis. - */ - interface AxisObject { - dataMin: number; - dataMax: number; - userMin: number; - userMax: number; - bottom: number; - left: number; - width: number; - /** - * Add a plot band after render time. - * @param options A configuration object consisting of the same members as options.xAxis.plotBands - * @since 1.2.0 - */ - addPlotBand(options: PlotBands): void; - /** - * Add a plot line after render time. - * @param options A configuration object consisting of the same members as options.xAxis.plotLines - * @since 1.2.0 - */ - addPlotLine(options: PlotLines): void; - defaultLabelFormatter(this: AxisLabelFormatterOptions): string; - /** - * Get the current extremes for the axis. - * @since 1.2.0 - */ - getExtremes(): Extremes; - /** - * Remove an axis from the chart. - * @param [boolean] redraw Defaults to true. Whether to redraw the chart following the remove. - * @since 3.0 - */ - remove(redraw?: boolean): void; - /** - * Remove a plot band by its id. - * @param id The plot band's id as given in the original configuration object or in the addPlotBand method. - * @since 1.2.0 - */ - removePlotBand(id: string): void; - /** - * Remove a plot line by its id. - * @param id The plot line's id as given in the original configuration object or in the addPlotLine method. - * @since 1.2.0 - */ - removePlotLine(id: string): void; - /** - * Set new categories for the axis. Redraws. - * @param categories The new category names. - * @param redraw Whether to redraw the axis or wait for an explicit call to chart.redraw(). - * @since 1.2.0 - */ - setCategories(categories: string[], redraw?: boolean): void; - /** - * Set the minimum and maximum of the axes after render time. If the startOnTick and endOnTick options are true, the - * minimum and maximum values are rounded off to the nearest tick. To prevent this, these options can be set to - * false before calling setExtremes. Also, setExtremes will not allow a range lower than the minRange option, which - * by default is the range of five points. - * @param min The new minimum value - * @param max The new maximum value - * @param redraw Whether to redraw the chart or wait for an explicit call to chart.redraw(). - * @param animation When true, the resize will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - * @since 1.2.0 - */ - setExtremes(min?: number, max?: number, redraw?: boolean, animation?: boolean | Animation, eventArguments?: any): void; - /** - * Update the title of the axis after render time. - * @param title The new title options on the same format as given in xAxis.title. - * @param redraw Whether to redraw the chart now or hold until the next chart.redraw() - * @since 2.2 - */ - setTitle(title: AxisTitle, redraw?: boolean): void; - /** - * Translates a value in terms of axis units in to pixels within the chart. - * @param value A value in terms of axis units. - * @param paneCoordinates Whether to return the pixel coordinate relative to the chart or just the axis/pane itself. - * @since 3.0 - */ - toPixels(value: number, paneCoordinates?: boolean): number; - /** - * Translate a pixel position along the axis to a value in terms of axis units. - * @param pixel A pixel position along the axis. - * @param paneCoordinates Whether the input pixel position is relative to the chart or just the axis/pane itself. - * @since 3.0 - */ - toValue(pixel: number, paneCoordinates?: boolean): number; - /** - * Update an axis object with a new set of options. The options are merged with the existing options, so only new or - * altered options need to be specified. - * @param options The new options that will be merged in with existing options on the axis. - * @param redraw Defaults to true. Whether to redraw the chart after the new options are set. - * @since 3.0 - */ - update(options: AxisOptions, redraw?: boolean): void; - } - - /** - * The chart object is the JavaScript object representing a single chart in the web page.The pointer to your chart - * object is returned when a chart is created using the Highcharts.Chart() constructor: - * var chart1 = new Highcharts.Chart(options); - */ - interface ChartObject { - /** - * Add an axis to the chart after render time. Note that this method should never be used when adding data - * synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the - * same time as the chart is initiated, add the axis as a configuration option instead. - * @param options The Axis options, as documented under xAxis and yAxis. - * @param [boolean] isX Whether it is an X axis or Y axis - * @param [boolean] redraw Defaults to true. Whether to redraw the chart after the series is added. See the redraw() method. - * @param [boolean | Animation] animation Defaults to true. When true, the series' updating will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - * @since 3.0 - */ - addAxis(options: AxisOptions, isX?: boolean, redraw?: boolean, animation?: boolean | Animation): AxisObject; - /** - * Set a new credits label for the chart. - * @param A configuration object for the credits as defined at credits. - * @since 5.0.0 - */ - addCredits(options: CreditsOptions): void; - /** - * Add a series to the chart after render time. Note that this method should never be used when adding data - * synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the - * same time as the chart is initiated, add the series as a configuration option instead. - * @param options The series options, as documented under plotOptions.series and under the plotOptions for each series type. - * @param [boolean] redraw - * @since 1.2.0 - */ - addSeries(options: T, redraw?: boolean, animation?: boolean | Animation): SeriesObject; - /** - * Add a series to the chart as drilldown from a specific point in the parent series. This method is used for async - * drilldown, when clicking a point in a series should result in loading and displaying a more high-resolution - * series. When not async, the setup is simpler using the drilldown.series options structure. - * @param point The existing Point object from which the drilldown will start. - * @param seriesOptions The series options, as documented under plotOptions.series and under the plotOptions for each series type. - * @since 3.0.8 - */ - addSeriesAsDrilldown(point: PointObject, seriesOptions: IndividualSeriesOptions): void; - chartHeight?: number; - chartWidth?: number; - /** - * A reference to the containing HTML element, dynamically inserted into the element given in chart.renderTo. - * @since 1.2.5 - */ - container: HTMLElement; - /** - * The chart's credits label. The label has an update method that allows setting new options as per the credits option set. - * - */ - credits: CreditsObject; - /** - * Removes the chart and purges memory. This method should be called before writing a new chart into the same - * container. It is called internally on window unload to prevent leaks. - * @since 1.2.2 - */ - destroy(): void; - /** - * When the chart is drilled down to a child series, calling chart.drillUp() will drill up to the parent series. - * @since 3.0.8 - */ - drillUp(): void; - /** - * Exporting module required. Submit an SVG version of the chart to a server along with some parameters for - * conversion. - * @param options Exporting options. Out of the exporting options, the following options can be given as parameters to the exportChart method. - * All options default to the values given in the exporting config options. filename: the filename for the export without extension, - * url: the URL for the server module to do the conversion, width: the width of the PNG or JPEG image generated on the server, - * type: the MIME type of the converted image, sourceWidth: the width of the source (in-page) chart, sourceHeight: the height of the source chart. - * @param chartOptions Additional chart options for the exported chart. For example a different background color can be added here. - * @since 2.0 - */ - exportChart(options?: ExportingOptions, chartOptions?: Options): void; - /** - * Export the chart to a PNG or SVG without sending it to a server. Requires - * modules/exporting.js and modules/offline-exporting.js. - * @param options Exporting options. Same as - * the exportChart params. - * @param chartOptions Additional chart options for the - * exported chart. Same as the exportChart params. - * @since 2.0 - */ - exportChartLocal(options?: ExportingOptions, chartOptions?: Options): void; - /** - * Get an axis, series or point by its id as given in the configuration options. - * @param id The id of the axis, series or point to get. - * @since 1.2.0 - */ - get(id: string): AxisObject | SeriesObject | PointObject; - /** - * Exporting module required. Get an SVG string representing the chart. - * @param additionalOptions Chart options to add to the exported chart in addition to the options given for the original chart. - * For example if series.lineWidth should be greater in the exported chart than in the original, or the chart should have a different background color, this is added here. - * @since 2.0 - */ - getSVG(additionalOptions?: Options): string; - /** - * Returns an array of all currently selected points in the chart. Points can be selected either programmatically by - * the point.select() method or by clicking. - * @return An array of the selected points. - * @since 1.2.0 - */ - getSelectedPoints(): PointObject[]; - /** - * Returns an array of all currently selected series in the chart. Series can be selected either programmatically by - * the series.select() method or by checking the checkbox next to the legend item if series.showCheckBox is true. - * @return An array of the selected Series items. - * @since 1.2.0 - */ - getSelectedSeries(): SeriesObject[]; - /** - * Hide the loading screen. Options for the loading screen are defined at options.loading. - * @since 1.2.0 - */ - hideLoading(): void; - /** - * The options structure for the chart. - * @since 1.2.0 - */ - options: Options; - plotLeft?: number; - plotSizeX?: number; - plotSizeY?: number; - plotTop?: number; - /** - * Exporting module required. Clears away other elements in the page and prints the chart as it is displayed. By - * default, when the exporting module is enabled, a button at the upper left calls this method. - * @since 2.0 - */ - print(): void; - /** - * Redraw the chart after changes have been done to the data or axis extremes. All methods for updating axes, series - * or points have a parameter for redrawing the chart. This is true by default. But in many cases you want to do - * more than one operation on the chart before redrawing, for example add a number of points. In those cases it is a - * waste of resources to redraw the chart for each new point added. So you add the points and call chart.redraw() - * after. - * @param [boolean | Animation] animation Defaults to true. When true, the update will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - * @since 1.2.0 - */ - redraw(animation?: boolean | Animation): void; - /** - * Reflows the chart to its container. By default, the chart reflows automatically to its container following a - * window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if - * the container is resized without a window resize event, this must be called explicitly. - */ - reflow(): void; - /** - * An array of all the chart's series. - * @since 1.2.0 - */ - series: SeriesObject[]; - /** - * Resize the chart to a given width and height. - * @param width The new pixel width of the chart. - * @param height The new pixel height of the chart. - * @param animation Defaults to true. When true, the resize will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - */ - setSize(width: number, height: number, animation?: boolean | Animation): void; - /** - * Set a new title or subtitle for the chart - * @param title A configuration object for the new title as defined at #title. - * @param [SubtitleOptions] subtitle A configuration object for the new subtitle as defined at #subtitle. - * @param [boolean] redraw Whether to redraw the chart. Defaults to true. - * @since 2.1.0 - */ - setTitle(title: TitleOptions, subtitle?: SubtitleOptions, redraw?: boolean): void; - /** - * Dim the chart's plot area and show a loading label text. Options for the loading screen are defined at - * options.loading. A custom text can be given as a parameter for loading. - * @since 2.0.5 - */ - showLoading(str?: string): void; - /** - * The chart subtitle. The subtitle has an update method that allows modifying the options. - * @since 5.0.0 - */ - subtitle: TitleObject; - /** - * The chart title. The title has an update method that points back to Chart.setTitle. - * @since 5.0.0 - */ - title: TitleObject; - /** - * A generic function to update any element of the chart. Elements can be enabled and disabled, moved, re-styled, - * re-formatted etc. - * A special case is configuration objects that take arrays, for example xAxis, yAxis or series. For these collections, - * an id option is used to map the new option set to an existing object. If an existing object of the same id is not - * found, the first item is updated. So for example, running chart.update with a series item without an id, will cause - * the existing chart's first series to be updated. - * See also the responsive option set. Switching between responsive.rules basically runs chart.update under the hood. - * @param option A configuration object for the new chart options as defined in the options section of the API. - * @param [boolean] redraw Whether to redraw the chart. Defaults to true. - * @param [boolean] oneToOne When true, the series, xAxis and yAxis collections will be updated one to one, and - * items will be either added or removed to match the new updated options. Defaults to false. - * @param [(boolean | AnimationOptions)] animation Whether to apply animation, and optionally animation configuration. - * @since 5.0.0 - */ - update(options: Options, redraw?: boolean, oneToOne?: boolean, animation?: boolean | AnimationOptions): void; - /** - * This method is deprecated as of 2.0.1. Updating the chart position after a move operation is no longer necessary. - * @since 1.2.5 - * @deprecated - */ - updatePosition(): void; - /** - * An array of the chart's x axes. If only one x axis, it is referenced by chart.xAxis[0]. - * @since 1.2.0 - */ - xAxis: AxisObject[]; - /** - * An array of the chart's y axes. If only one y axis, it is referenced by chart.yAxis[0]. - * @since 1.2.0 - */ - yAxis: AxisObject[]; - - renderer: RendererObject; - - legend: LegendObject; - } - - interface Chart { - /** - * This is the constructor for creating a new chart object. - * @param options The chart options - * @param callback A function to execute when the chart object is finished loading and rendering. In most cases the chart is built in one thread, - * but in Internet Explorer version 8 or less the chart is sometimes initiated before the document is ready, - * and in these cases the chart object will not be finished directly after callingnew Highcharts.Chart(). - * s a consequence, code that relies on the newly built Chart object should always run in the callback. Defining a chart.event.load handler is equivalent. - */ - new (options: Options, callback?: (chart: ChartObject) => void): ChartObject; - /** - * This is the constructor for creating a new chart object. - * @param renderTo The id or a reference to a DOM element where the chart should be rendered (since v4.2.0). - * @param options The chart options - * @param callback A function to execute when the chart object is finished loading and rendering. In most cases the chart is built in one thread, - * but in Internet Explorer version 8 or less the chart is sometimes initiated before the document is ready, - * and in these cases the chart object will not be finished directly after callingnew Highcharts.Chart(). - * As a consequence, code that relies on the newly built Chart object should always run in the callback. Defining a chart.event.load handler is equivalent. - */ - new (renderTo: string | HTMLElement, options: Options, callback?: (chart: ChartObject) => void): ChartObject; - } - - /** - * The Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highchart. Combined with - * the Renderer object, these elements allows freeform annotation in the charts or even in your HTML pages without - * creating a chart at all. - */ - interface ElementObject { - /** - * Add the element to the renderer canvas. - * @param parent The element can be added to a g (group) element. - * @since 2.0 - */ - add(parent?: ElementObject): ElementObject; - /** - * Apply numeric attributes to the SVG/VML element by animation. See Element.attr() for more information on setting - * attributes. - * @param attributes A set of attributes to apply. - * @param animation Optional animation parameters that are passed over to jQuery or other framework. - * Valid properties depend on the library, but options like duration, easing and complete are supported by jQuery. - * @since 2.0 - */ - animate(attributes: any, animation?: any): ElementObject; - /** - * Apply attributes to the SVG/VML elements. These attributes for the most parts correspond to SVG, but some are - * specific to Highcharts, like zIndex and rotation. - * - * In order to set the rotation center for rotation, set x and y to 0 and use translateX and translateY attributes - * to position the element instead. - * - * Attributes frequently used in Highcharts are fill, stroke, stroke-width. - * @param hash A set of attributes to apply. - * @since 2.0 - */ - attr(hash: any): ElementObject; - /** - * Apply some CSS properties to the element - * @param hash The object literal of CSS properties to apply. Properties should be hyphenated, not camelCased. - * @since 2.0 - */ - css(hash: Object): ElementObject; - /** - * Destroy the element and free up memory - * @since 2.0 - */ - destroy(): void; - fadeOut(duration?: number): void; - /** - * Get the bounding box of the element - * @return An object containing x, y, width and height values for the element. - * @since 2.0 - */ - getBBox(): { x: number; y: number; height: number; width: number; }; - /** - * Apply an event handler to the element - * @param eventType The event type to attach, for example 'click', 'mouseover', 'touch'. - * @param handler The event handler function. - * @since 2.0 - */ - on(eventType: string, handler: () => void): ElementObject; - /** - * Bring the element to the front. Alternatively, a zIndex attribute can be given. - * @return The element object - * @since 2.0 - */ - toFront(): ElementObject; - } - - /** - * Allows direct access to the Highcharts rendering layer in order to draw primitive shapes like circles, - * rectangles,paths or text directly on a chart, or independent from any chart. The Renderer represents a wrapper object - * for SVGin modern browsers and VML in IE < 8. - * - * An existing chart's renderer can be accessed through chart.renderer. To create a renderer independent from a chart, - * use var renderer = new Highcharts.Renderer(parentNode, width, height); where parentNode is the HTML element where you - * want to add it. - * - * The Renderer's methods are chained wherever possible, so you can initiate an element then call for example attr and - * css and add on that element in one statement. - */ - interface RendererObject { - /** - * Draw an arc on the renderer canvas. - * @param centerX The x position of the arc's center in the SVG element. - * @param centerY The y position of the arc's center in the SVG element. - * @param outerRadius The outer radius of the arc. - * @param innerRadius The inner radius of the arc. - * @param start The starting angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up. - * @param end The ending angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up. - * @since 2.0 - */ - arc(centerX: number, centerY: number, outerRadius: number, innerRadius: number, start: number, end: number): ElementObject; - /** - * Draw circle on the renderer canvas. - * @param centerX The x position of the circle's center in the SVG element. - * @param centerY The y position of the circle's center in the SVG element. - * @param radius [description] - * @since 2.0 - */ - circle(centerX: number, centerY: number, radius: number): ElementObject; - /** - * Styled mode only. A hook for adding general definitions to the SVG's defs tag. Definitions can be referenced from - * the CSS by its id. Read more in Gradients, shadows and patterns. - * The definitions can also be added as configuration options, see defs. - * @param A serialized form of an SVG definition, including children. - * @since 5.0.0 - */ - definition(def: object): ElementObject; - /** - * Utility to return the baseline offset and total line height from the font size. - * - * @param fontSize The current font size to inspect. If not given, the font size will be found from the DOM element. - * @param elem The element to inspect for a current font size. - */ - fontMetrics(fontSize: string, elem: ElementObject): FontMetrics; - /** - * Add an SVG/VML group. - * @param [string] name The name of the group. This will be used in the class name, which will be 'highcharts-'+ name. - * Other Element objects are added to the group by using the group as the first parameter in .add() for the wrappers - * @since 2.0 - */ - g(name?: string): ElementObject; - /** - * Add an image from an external resource. - * @param source The URL of the image. - * @param x The x position of the image's upper left corner. - * @param y The y position of the image's upper left corner. - * @param width The width of the image. - * @param height The height of the image. - * @since 2.0 - */ - image(source: string, x: number, y: number, width: number, height: number): ElementObject; - /** - * Draw a label, which is an extended text element with support for border and background. Highcharts creates a g - * element with a text and a path or rect inside, to make it behave somewhat like a HTML div. Border and background - * are set through stroke, stroke-width and fill attributes using the attr method. This must be done before calling - * add. - * @param str The text or HTML to draw - * @param x The x position of the label's left side. - * @param y The y position of the label's top side or baseline, depending on the baseline parameter. - * @param [string] shape The shape of the label's border/background, if any. Defaults to rect. - * @param [number] anchorX If the shape has a pointer, like the chevron on a callout shape, anchorX is the x position to point to. - * @param [number] anchorY If the shape has a pointer, like the chevron on a callout shape, anchorY is the y position to point to. - * @param [boolean] useHTML Use HTML to render the text of the label. - * @param [boolean] baseline Whether the label should be vertically aligned by the text baseline, which makes it behave like the text element, - * or by the top left side, which makes it behave like a HTML div. - * @param [string] className A class name for the g element surrounding the label. - * @since 2.0 - */ - label(str: string, x: number, y: number, shape?: string, anchorX?: number, anchorY?: number, useHTML?: boolean, baseline?: boolean, className?: string): ElementObject; - /** - * Add a path based on SVG's path commands. In SVG capable browsers all path commands are supported, but in VML only - * a subset is supported: absolute moveTo (M), absolute lineTo (L), absolute curveTo (C) and close (Z). - * @param path An SVG path split up in array form. - */ - path(path: Array): ElementObject; - /** - * Add a rectangle. - * @param x The x position of the rectangle's upper left corner. - * @param y The y position of the rectangle's upper left corner. - * @param width The width of the rectangle. - * @param height The height of the rectangle. - * @param cornerRadius The corner radius of all the rectangle's corners. - * @since 2.0 - */ - rect(x: number, y: number, width: number, height: number, cornerRadius: number): ElementObject; - /** - * Draw text. The text can contain a subset of HTML, like spans and anchors and some basic text styling of these. - * For more advanced features like border and background, use label instead. - * @param str The text or HTML to draw - * @param x The x position of the text's lower left corner. - * @param y The y position of the text's lower left corner. - * @since 2.0 - */ - text(str: string, x: number, y: number): ElementObject; - } - - interface FontMetrics { - /** - * The baseline relative to the top of the box. - */ - b: number; - /** - * The font size. - */ - f: number; - /** - * The line height. - */ - h: number; - } - - interface Renderer { - new (parentNode: HTMLElement, width: number, height: number): RendererObject; - } - - interface Static { - Chart: Chart; - Renderer: Renderer; - Color(color: string | Gradient): string | Gradient; - - /** - * As Highcharts.Chart, but without need for the new keyword. - * @since 4.2.0 - */ - chart(options: Options, callback?: (chart: ChartObject) => void): ChartObject; - /** - * As Highcharts.Chart, but without need for the new keyword. - * @since 4.2.0 - */ - chart(renderTo: string | HTMLElement, options: Options, callback?: (chart: ChartObject) => void): ChartObject; - /** - * Highcharts ganttChart which doesn't require the new keyword. Required Highcharts Gantt module. - */ - ganttChart(renderTo: string | HTMLElement, options: GanttOptions, callback?: (chart: ChartObject) => void): ChartObject; - /** - * An array containing the current chart objects in the page. A chart's position in the array is preserved - * throughout the page's lifetime. When a chart is destroyed, the array item becomes undefined. - * @since 2.3.4 - */ - charts: ChartObject[]; - /** - * Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970) into a human readable date string. The - * format is a subset of the formats for PHP's strftime function. Additional formats can be given in the - * Highcharts.dateFormats hook, see below. - * @param format A string containing some of the formats. - * @param [number] time The JavaScript time to format. - * @param [boolean] capitalize Whether to capitalize words in the return string. - */ - dateFormat(format: string, time?: number, capitalize?: boolean): string; - /** - * A hook for defining additional date format specifiers. New specifiers are defined as key-value pairs by using the - * specifier as key, and a function which takes the timestamp as value. This function returns the formatted portion - * of the date. - */ - dateFormats: DateFormatSpecifiers; - /** - * The error handler function. By default is provides error messages for debugging, with links to the descriptions on Highcharts website. - * This function can be redefined to catch errors in client applications. - * @param Number|String The error code. If this is a number, the default error function prints a link to a human readable error code - * description according to error definition file. If it's a string, the description is printed in the console. - * @param Whether the error should stop execution. - * @since 5.0.6 - */ - error(code: number | string, fatal: boolean): Function; - /** - * Formats a JavaScript number with grouped thousands, a fixed amount of decimals and an optional decimal point. It - * is a port of PHP's function with the same name. See PHP number_format for a full explanation of the parameters. - * @param value The raw number to format. - * @param decimals The desired number of decimals. - * @param decimalPoint The decimal point. Defaults to '.' or to the string specified globally in options.lang.decimalPoint. - * @param thousandsSep The thousands separator. Defaults to ' ' or to the string specified globally in options.lang.thousandsSep. - */ - numberFormat(value: number, decimals?: number, decimalPoint?: string, thousandsSep?: string): string; - /** - * Sets the options globally for all charts created after this has been called. Takes an options JavaScript object - * structure as the argument. These options are merged with the default options and the result is returned. - * @param options The chart configuration object. - */ - setOptions(options: GlobalOptions): Options; - /** - * Get the updated default options. Until 3.0.7, merely exposing defaultOptions for outside modules - * wasn't enough because the setOptions method created a new object. - */ - getOptions(): Options; - - map(array: any[], fn: Function): any[]; - - /** - * Wrap an existing behavior of a part of the chart to extend or replace it. - * @since 2.3.0 - * - * @see {@link https://www.highcharts.com/docs/extending-highcharts/extending-highcharts} - * - * @param prototype The prototype for the part of the chart to extend. - * @param type The type of behavior you are extending. - * @param cb The function that executes when the behavior occurs. - */ - wrap(prototype: any, type: string, cb: (proceed: Function, ...args: any[]) => void): void; - - /** - * Add an event listener. - * - * @see {@link https://api.highcharts.com/class-reference/Highcharts#addEvent} - * @see {@link https://www.highcharts.com/docs/extending-highcharts/extending-highcharts} - * - * @param element The element or object to add a listener to. It can be a HTMLDOMElement, an Highcharts.SVGElement or any other object. - * @param type The event type. - * @param cb The function callback to execute when the event is fired. - * @returns A callback function to remove the added event. - */ - addEvent(element: HTMLElement | ElementObject | object, - type: string, - cb: (evt: Event) => void): () => void; - - /** - * Fire an event that was registered with - * - * @see {@link https://api.highcharts.com/class-reference/Highcharts#fireEvent} - * - * @param element The element or object to add a listener to. It can be a HTMLDOMElement, an Highcharts.SVGElement or any other object. - * @param type The event type. - * @param eventArguments Custom event arguments that are passed on as an argument to the event handler. - * @param defaultFunction The default function to execute if the other listeners haven't returned false. - */ - fireEvent(element: HTMLElement | ElementObject | object, - type: string, - eventArguments?: any, - defaultFunction?: () => void): void; - - distribute(array: any[], value: number): void; - - /** - * Prototype used to extend tooltip behavior in a chart. - * - * @see {@link https://www.highcharts.com/docs/extending-highcharts/extending-highcharts} - */ - Tooltip: TooltipPrototype; - } - - /** - * The Point object is the JavaScript representation of each data point - * - * The object can be accessed in a number of ways. In all point event handlers the point object is this. In the series - * object all the points are accessed by the series.data array. - * - * Another way to reference the point programmatically is by id. Add an id in the point configuration options, and get - * the point object by chart.get(id). - */ - interface PointObject { - /** - * For categorized axes this property holds the category name for the point. For other axis it holds the x value. - * @since 1.2.0 - */ - category: string | number; - name: string; - index: number; - /** - * The percentage for points in a stacked series or pies. - * @since 1.2.0 - */ - percentage: number; - /** - * Remove the point from the series. - * @param [boolean] redraw Defaults to true. Whether to redraw the chart after the point is removed.If doing more operations on the chart, - * it is a good idea to set redraw to false and call chart.redraw() after. - * @param [boolean|Animation] animation Defaults to true. When true, the graph's updating will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - * @since 1.2.0 - */ - remove(redraw?: boolean, animation?: boolean | Animation): void; - /** - * Select or unselect the point. - * @param [boolean] select When true, the point is selected. When false, the point is unselected. When null or undefined, the selection state is toggled. - * @param [boolean] accumulate When true, the selection is added to other selected points. When false, other selected points are deselected. - * Internally in Highcharts,selected points are accumulated on Control, Shift or Cmd clicking the point. - * @since 1.2.0 - */ - select(select?: boolean, accumulate?: boolean): void; - /** - * Whether the point is selected or not. - * @since 1.2.0 - */ - selected: boolean; - /** - * The series object associated with the point. - * @since 1.2.0 - */ - series: SeriesObject; - /** - * Slice out or set back in a pie chart slice. This is the default way of Highcharts to visualize that a pie point - * is selected. - * @param [boolean] sliced When true, the point is sliced out. When false, the point is set in. When null or undefined, the sliced state is toggled. - * @param [boolean] redraw Defaults to true. Whether to redraw the chart after the point is altered. - * @param [boolean|Animation] animation Defaults to true. When true, the move will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - * @since 1.2.0 - */ - slice(sliced?: boolean, redraw?: boolean, animation?: boolean | Animation): void; - /** - * The total of a stack for stacked series, or pie in pie charts. - */ - total: number; - /** - * Update the point with new values. - * @param options The point options. Point options are handled as described under the series.data item for each series type. - * For example for a line series, if options is a single number, the point will be given that number as the main y value. If it is an array, - * it will be interpreted as x and y values respectively. If it is an object, advanced options are applied. - * @param [boolean] redraw Defaults to true. Whether to redraw the chart after the point is updated.If doing more operations on the chart, - * it is a good idea to set redraw to false and call chart.redraw() after. - * @param animation Defaults to true. When true, the update will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - * @since 1.2.0 - */ - update(options: number | [number, number] | DataPoint, redraw?: boolean, animation?: boolean | Animation): void; - /** - * The x value for the point. - * @since 1.2.0 - */ - x: number; - /** - * The y value for the point. - * @since 1.2.0 - */ - y: number; - } - - /** - * The Series object is the JavaScript representation of each line, area series, pie etc. - * - * The object can be accessed in a number of ways. All series and point event handlers give a reference to the series - * object. The chart object has a series property that is a collection of all the chart's series. The point objects also - * have the same reference. - * - * Another way to reference the series programmatically is by id. Add an id in the series configuration options, and get - * the series object by chart.get(id). - * - * Configuration options for the series are given in three levels. Options for all series in a chart are given in the - * 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. - */ - interface SeriesObject { - /** - * Add a point to the series after render time. The point can be added at the end, or by giving it an X value, to - * the start or in the middle of the series. - * @param The point options. If options is a single number, a point with that y value is appended to the series. - * If it is an array, it will be interpreted as x and y values respectively. If it is an object, advanced options as outlined under series.data are applied. - * @param [boolean=true] redraw - Whether to redraw the chart after the point is added. When adding more than one point, - * it is highly recommended that the redraw option be set to false, and instead chart.redraw() is explicitly called after the adding of points is finished. - * @param [boolean=false] shift - When shift is true, one point is shifted off the start of the series as one is appended to the end. - * Use this option for live charts monitoring a value over time. - * @param [(boolean|Animation)=false] animation - When shift is true, one point is shifted off the start of the series as one is appended to the end. - * Use this option for live charts monitoring a value over time. - * @since 1.2.0 - */ - addPoint(options: number | [number, number] | [number, number, number] | DataPoint, redraw?: boolean, shift?: boolean, animation?: boolean | Animation): void; - /** - * Read only. The chart that the series belongs to. - * @since 1.2.0 - */ - chart: ChartObject; - /** - * Read only. An array with the series' data point objects. - * @since 1.2.0 - */ - data: PointObject[]; - /** - * Hides the series if visible. If the chart.ignoreHiddenSeries option is true,the chart is redrawn without this - * series. - * @since 1.2.0 - */ - hide(): void; - /** - * The series' name as given in the options. - * @since 1.2.0 - */ - name: string; - /** - * Read only. The series' options. - * @since 1.2.0 - */ - options: IndividualSeriesOptions; - /** - * Remove the series from the chart. - * @param [boolean=true] redraw - Whether to redraw the chart after the series is removed.If doing more operations on the chart, - * it is a good idea to set redraw to false and call chart.redraw() after. - * @since 1.2.0 - */ - remove(redraw?: boolean): void; - /** - * Remove a point from the series. Unlike the Point.remove method, this can also be done on a point that is not - * instanciated because it is outside the view or subject to data grouping. - * @param index - The index of the point in the data array. - * @param [boolean=true] redraw - Whether to redraw the chart after the point is added. When adding more than one point, - * it is highly recommended that the redraw option be set to false, and instead chart.redraw() is explicitly called after the adding of points is finished. - * @param [boolean|Animation=true] animation - When true, the graph will be animated with default animation options. - * The animation can also be a configuration object with properties duration and easing. - * @since 4.1.0 - */ - removePoint(index: number, redraw?: boolean, animation?: boolean | Animation): void; - /** - * Select or unselect the series. This means its selected property is set,the checkbox in the legend is toggled and - * when selected, the series is returned in the chart.getSelectedSeries() method. - * @param [boolean] selected - When true, the series is selected. When false it is unselected. When null or undefined, the series' selection state is toggled. - * @since 1.2.0 - */ - select(selected?: boolean): void; - /** - * Read only. The series' selected state as set by series.select(). - * @since 1.2.0 - */ - selected: boolean; - /** - * Apply a new set of data to the series and optionally redraw it. Note that this method throws away all points and - * creates new ones. For updating the values of existing points, use Point.update() instead. - * @param data - Takes an array of data in the same format as described under seriesdata for the given series type. - * @param [boolean=true] redraw - Whether to redraw the chart after the series is altered.If doing more operations on the chart, - * it is a good idea to set redraw to false and call chart.redraw() after. - * @param [boolean|Animation] animation - When the updated data is the same length as the existing data, points will be updated by default, - * and animation visualizes how the points are changed. Set false to disable animation, or a configuration object to set duration or easing. - * @param [boolean] updatePoints - When the updated data is the same length as the existing data, points will be updated instead of replace. - * This option prevents this, and makes setData behave like it did prior to Highcharts 3.0.10. - * @since 1.2.0 - */ - setData(data: number[] | number[][] | DataPoint[], redraw?: boolean, animation?: boolean | Animation, updatePoints?: boolean): void; - /** - * A utility function to show or hide the series with an optional redraw. - * @param [boolean] visible - Whether to show or hide the series. If undefined, the visibility is toggled. - * @param [boolean=true] redraw - Whether to redraw the chart after the series is altered.If doing more operations on the chart, - * it is a good idea to set redraw to false and call chart.redraw() after. - * @since 1.2.0 - */ - setVisible(visible?: boolean, redraw?: boolean): void; - /** - * Shows the series if hidden. - * @since 1.2.0 - */ - show(): void; - /** - * Read only. The series' type, like 'line', 'area' etc. - * @since 1.2.0 - */ - type: string; - /** - * Update the series with a new set of options. For a clean and precise handling of new options, all methods and - * elements from the series is removed, and it is initiated from scratch. Therefore, this method is more performance - * expensive than some other utility methods like setData or setVisible. - * @param options New options that will be merged into the series' existing options. - * @param [boolean] redraw - Whether to redraw the chart after the series is altered. If doing more operations on the chart, - * it is a good idea to set redraw to false and call chart.redraw() after. - * @since 1.2.0 - */ - update(options: IndividualSeriesOptions, redraw?: boolean): void; - /** - * Read only. The series' visibility state as set by series.show(), series.hide(), or the initial configuration. - * @since 1.2.0 - */ - visible: boolean; - /** - * Read only. The unique xAxis object associated with the series. - * @since 1.2.0 - */ - xAxis: AxisObject; - /** - * Read only. The unique yAxis object associated with the series. - * @since 1.2.0 - */ - yAxis: AxisObject; - } - - interface LegendObject { - /** - * Update the legend with new options. - * @param options New options that will be merged into the legend's existing options. - * @param [boolean] redraw - Whether to redraw the chart. Defaults to true. - * @since 5.0.0 - */ - update(options: LegendOptions, redraw?: boolean): void; - } - - /** - * The Tooltip prototype is used to to wrap and extend tooltip behaviors. - * - * @see {@link https://www.highcharts.com/docs/extending-highcharts/extending-highcharts} - */ - interface TooltipPrototype { - /** - * The behavior prototypes for the tooltips in a chart. - * @since 2.3.0 - */ - prototype: any; - } -} - -declare global { - interface JQuery { - highcharts(): Highcharts.ChartObject; - /** - * Creates a new Highcharts.Chart for the current JQuery selector; usually - * a div selected by $('#container') - * @param options Options for this chart - * @param callback Callback function used to manipulate the constructed chart instance - * @return current {JQuery} selector the current JQuery selector - */ - highcharts(options: Highcharts.Options, callback?: (chart: Highcharts.ChartObject) => void): JQuery; - } -} - -declare const Highcharts: Highcharts.Static; -export = Highcharts; -export as namespace Highcharts; diff --git a/types/highcharts/js/highcharts/index.d.ts b/types/highcharts/js/highcharts/index.d.ts deleted file mode 100644 index 0c6cf2427f..0000000000 --- a/types/highcharts/js/highcharts/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import Highcharts = require('../..'); -export = Highcharts; diff --git a/types/highcharts/modules/boost.d.ts b/types/highcharts/modules/boost.d.ts deleted file mode 100644 index 2e4da45b13..0000000000 --- a/types/highcharts/modules/boost.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from "highcharts"; - -declare function HighchartsBoost(H: Static): Static; -export = HighchartsBoost; -export as namespace HighchartsBoost; diff --git a/types/highcharts/modules/bullet.d.ts b/types/highcharts/modules/bullet.d.ts deleted file mode 100644 index 98819c1963..0000000000 --- a/types/highcharts/modules/bullet.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from 'highcharts'; - -declare function HighchartsBullet(H: Static): Static; -export = HighchartsBullet; -export as namespace HighchartsBullet; diff --git a/types/highcharts/modules/drilldown.d.ts b/types/highcharts/modules/drilldown.d.ts deleted file mode 100644 index 46115cb4ad..0000000000 --- a/types/highcharts/modules/drilldown.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from "highcharts"; - -declare function HighchartsDrilldown(H: Static): Static; -export = HighchartsDrilldown; -export as namespace HighchartsDrilldown; diff --git a/types/highcharts/modules/exporting.d.ts b/types/highcharts/modules/exporting.d.ts deleted file mode 100644 index 18f9615d41..0000000000 --- a/types/highcharts/modules/exporting.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from "highcharts"; - -declare function HighchartsExporting(H: Static): Static; -export = HighchartsExporting; -export as namespace HighchartsExporting; diff --git a/types/highcharts/modules/heatmap.d.ts b/types/highcharts/modules/heatmap.d.ts deleted file mode 100644 index 46ae5ff3e1..0000000000 --- a/types/highcharts/modules/heatmap.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from 'highcharts'; - -declare function HighchartsHeatMap(H: Static): Static; -export = HighchartsHeatMap; -export as namespace HighchartsHeatMap; diff --git a/types/highcharts/modules/map/index.d.ts b/types/highcharts/modules/map/index.d.ts deleted file mode 100644 index 12b2ca0a7e..0000000000 --- a/types/highcharts/modules/map/index.d.ts +++ /dev/null @@ -1,47 +0,0 @@ -import * as highcharts from 'highcharts'; -import * as geojson from 'geojson'; - -declare module 'highcharts' { - interface Static { - mapChart(renderTo: string | HTMLElement, options: MapOptions, callback?: (chart: ChartObject) => void): ChartObject; - } - - interface MapOptions { - chart?: ChartOptions; - legend?: LegendOptions; - mapNavigation?: Navigation; - plotOptions?: PlotOptions; - series?: MapSeriesOptions[]; - colorAxis?: ColorAxis; - title?: TitleOptions; - tooltip?: TooltipOptions; - } - - interface MapSeriesOptions { - data?: number[] | Array<[number, number]> | Array<[string, number]> | DataPoint[]; - - dataLabels?: MapSeriesOptionsDataLabels; - - joinBy?: string[]; - - mapData?: geojson.GeoJsonObject; - - name?: string; - - states?: MapSeriesOptionsStates; - - tooltip?: MapSeriesOptionsTooltip; - - type?: string; - } - - interface Navigation {} - - interface MapSeriesOptionsDataLabels {} - - interface MapSeriesOptionsStates {} - - interface MapSeriesOptionsTooltip {} - - interface ColorAxis {} -} diff --git a/types/highcharts/modules/no-data-to-display.d.ts b/types/highcharts/modules/no-data-to-display.d.ts deleted file mode 100644 index bb8d406e03..0000000000 --- a/types/highcharts/modules/no-data-to-display.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Static } from "highcharts"; - -declare module "highcharts" { - interface ChartObject { - /** - * Returns true if there are data points within the plot area now - * @return If chart has any data. - * @since 3.0.8 - */ - hasData(): boolean; - - /** - * Hide the 'No data to display' message added by the no-data-to-display plugin. - * @since 3.0.8 - */ - hideNoData(): void; - - /** - * Display a no-data message. - * @param message An optional message to show in place of the default one - * @since 3.0.8 - */ - showNoData(message?: string): void; - } -} - -declare function HighchartsNoDataToDisplay(H: Static): Static; -export = HighchartsNoDataToDisplay; -export as namespace HighchartsNoDataToDisplay; diff --git a/types/highcharts/modules/offline-exporting.d.ts b/types/highcharts/modules/offline-exporting.d.ts deleted file mode 100644 index 5f536a8588..0000000000 --- a/types/highcharts/modules/offline-exporting.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from "highcharts"; - -declare function HighchartsOfflineExporting(H: Static): Static; -export = HighchartsOfflineExporting; -export as namespace HighchartsOfflineExporting; diff --git a/types/highcharts/modules/solid-gauge.d.ts b/types/highcharts/modules/solid-gauge.d.ts deleted file mode 100644 index 4fa17d62cd..0000000000 --- a/types/highcharts/modules/solid-gauge.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from 'highcharts'; - -declare function HighchartsSolidGauge(H: Static): Static; -export = HighchartsSolidGauge; -export as namespace HighchartsSolidGauge; diff --git a/types/highcharts/modules/treemap.d.ts b/types/highcharts/modules/treemap.d.ts deleted file mode 100644 index 25a2c58f2e..0000000000 --- a/types/highcharts/modules/treemap.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from 'highcharts'; - -declare function HighchartsTreeMap(H: Static): Static; -export = HighchartsTreeMap; -export as namespace HighchartsTreeMap; diff --git a/types/highcharts/modules/wordcloud.d.ts b/types/highcharts/modules/wordcloud.d.ts deleted file mode 100644 index f6a9141057..0000000000 --- a/types/highcharts/modules/wordcloud.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Static } from 'highcharts'; - -declare function HighchartsWordcloud(H: Static): Static; -export = HighchartsWordcloud; -export as namespace HighchartsWordcloud; diff --git a/types/highcharts/test/boost.ts b/types/highcharts/test/boost.ts deleted file mode 100644 index 98202a2129..0000000000 --- a/types/highcharts/test/boost.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsBoost(Highcharts); diff --git a/types/highcharts/test/bullet.ts b/types/highcharts/test/bullet.ts deleted file mode 100644 index 6a82c891bf..0000000000 --- a/types/highcharts/test/bullet.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsBullet(Highcharts); diff --git a/types/highcharts/test/datapoint.ts b/types/highcharts/test/datapoint.ts deleted file mode 100644 index 671b0014a6..0000000000 --- a/types/highcharts/test/datapoint.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { IndividualSeriesOptions } from "highcharts"; - -const numbers: IndividualSeriesOptions = { - data: [1, 2, 3] -}; - -const numbersWithNulls: IndividualSeriesOptions = { - data: [1, null, 3] -}; - -const pairs: IndividualSeriesOptions = { - data: [[0, 1], [1, 3], [2, 9]] -}; - -const pairsWithNulls: IndividualSeriesOptions = { - data: [[0, 1], [1, null], [2, 9]] -}; - -const stringNumbers: IndividualSeriesOptions = { - data: [["a", 21], ["b", 4]] -}; - -const dataPoints: IndividualSeriesOptions = { - data: [{ x: 0, y: 1 }, { x: 1, y: null }] -}; diff --git a/types/highcharts/test/drilldown.ts b/types/highcharts/test/drilldown.ts deleted file mode 100644 index f4aa33ca4a..0000000000 --- a/types/highcharts/test/drilldown.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsDrilldown(Highcharts); diff --git a/types/highcharts/test/exporting.ts b/types/highcharts/test/exporting.ts deleted file mode 100644 index 22bced1b24..0000000000 --- a/types/highcharts/test/exporting.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsExporting(Highcharts); diff --git a/types/highcharts/test/heatmap.ts b/types/highcharts/test/heatmap.ts deleted file mode 100644 index d42454d447..0000000000 --- a/types/highcharts/test/heatmap.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsHeatMap(Highcharts); diff --git a/types/highcharts/test/highstock.ts b/types/highcharts/test/highstock.ts deleted file mode 100644 index af9de8d1f9..0000000000 --- a/types/highcharts/test/highstock.ts +++ /dev/null @@ -1,75 +0,0 @@ -/// -import * as Highcharts from "highcharts"; - -const someData = [1, 2, 3, 4, 5, 6, 7, 8, 9]; - -$(() => { - $('#container').highcharts('StockChart', { - chart: { - type: "arearange" - }, - - xAxis: { - scrollbar: { enabled: true } - }, - - navigator: { - height: 80, - maskFill: 'rgba(255, 198, 220, 0.75)', - handles: { - backgroundColor: 'yellow', - borderColor: 'red' - } - }, - - rangeSelector: { - allButtonsEnabled: true, - selected: 1, - buttons: [{ - type: 'month', - count: 1, - text: '1m', - events: { - click: () => { } - } - }], - buttonTheme: { // styles for the buttons - fill: 'none', - stroke: 'none', - 'stroke-width': 0, - r: 8, - style: { - color: '#039', - fontWeight: 'bold' - }, - states: { - hover: { - }, - select: { - fill: '#039', - style: { - color: 'white' - } - } - } - }, - inputBoxBorderColor: 'gray', - inputBoxWidth: 120, - inputBoxHeight: 18, - inputStyle: { - color: '#039', - fontWeight: 'bold' - }, - labelStyle: { - color: 'silver', - fontWeight: 'bold' - } - }, - - series: [{ - name: 'USD to EUR', - data: someData, - lineColor: "blue" - } as Highcharts.AreaRangeChartSeriesOptions] - }); -}); diff --git a/types/highcharts/test/index.ts b/types/highcharts/test/index.ts deleted file mode 100644 index be8747af30..0000000000 --- a/types/highcharts/test/index.ts +++ /dev/null @@ -1,2937 +0,0 @@ -/// -import * as Highcharts from "highcharts"; // May also use /// - -function originalTests() { - Highcharts.setOptions({ - global: { - useUTC: false - } - }); - - 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'] - } - }); - - const animate: Highcharts.Animation = { - duration: 200, - easing: "linear" - }; - - const gradient: Highcharts.Gradient = { - linearGradient: { - x1: 0, - y1: 0, - x2: 500, - y2: 500 - }, - stops: [ - [0, 'rgb(255, 255, 255)'], - [1, 'rgb(200, 200, 255)'] - ] - }; - - const color: Highcharts.Color = "#fcfcff"; - - const chart1 = new Highcharts.Chart({ - chart: { - renderTo: "container" - }, - xAxis: {}, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], - description: "foo", - type: "line", - allowPointSelect: true - } as Highcharts.LineChartSeriesOptions] - }); - - chart1.addSeries({ - enableMouseTracking: true, - data: [1, 2, 3, 4, 5], - description: "some description" - }); - - const chart2 = new Highcharts.Chart({ - chart: { - renderTo: 'container', - width: 400, - height: 400, - spacingRight: 20 - }, - xAxis: [{ - description: 'x-foo', - min: 1, - max: 1000, - endOnTick: true, - tickInterval: 1, - minorTickInterval: 0.1, - gridLineWidth: 1, - type: 'logarithmic' - }], - yAxis: [{ - description: 'y-foo', - min: 1, - max: 1000, - tickInterval: 1, - minorTickInterval: 0.1, - title: { - text: null - }, - type: 'logarithmic' - }], - legend: { - enabled: false - }, - series: [{ - data: [ - [550, 870], [738, 362], [719, 711], [547, 665], [595, 197], [332, 144], - [581, 555], [196, 862], [6, 837], [400, 924], [888, 148], [785, 730], - [374, 358], [440, 69], [704, 318], [646, 506], [238, 662], [233, 56], - [622, 572], [563, 903], [744, 672], [904, 646], [390, 325], [536, 491], - [676, 186], [467, 145], [790, 114], [437, 793], [853, 243], [947, 196], - [395, 728], [527, 148], [516, 675], [632, 562], [52, 552], [605, 580], - [790, 865], [156, 87], [584, 290], [339, 921], [383, 633], [106, 373], - [762, 863], [424, 149], [608, 959], [574, 711], [468, 664], [268, 77], - [894, 850], [171, 102], [203, 565], [592, 549], [86, 486], [526, 244], - [323, 575], [488, 842], [401, 618], [148, 43], [828, 314], [554, 711], - [685, 868], [387, 435], [469, 828], [623, 506], [436, 184], [450, 156], - [805, 517], [465, 997], [728, 802], [231, 438], [935, 438], [519, 856], - [378, 579], [73, 765], [223, 219], [359, 317], [686, 742], [17, 790], - [20, 35], [410, 644], [984, 325], [503, 882], [900, 187], [578, 968], - [27, 718], [355, 704], [395, 332], [641, 548], [964, 374], [215, 472], - [323, 66], [882, 542], [671, 327], [650, 193], [828, 632], [760, 929], - [607, 335], [928, 826], [462, 598], [631, 411] - ], - type: 'scatter' - }] - }); - - const chart3 = new Highcharts.Chart({ - chart: { - renderTo: "container" - }, - xAxis: {}, - series: [{ - data: [[1, 1, 2], [2, 2, 3], [3, 2, 3]], - description: "foo", - type: "columnrange", - allowPointSelect: true - } as Highcharts.ColumnRangeChartSeriesOptions] - }); - - const chart4 = new Highcharts.Chart({ - chart: { - renderTo: "container" - }, - xAxis: {}, - series: [{ - data: [["01-01-2018", 1, 2], ["02-01-2018", 2, 3], ["03-01-2018", 2, 3]], - description: "column range data", - type: "columnrange", - allowPointSelect: true - } as Highcharts.ColumnRangeChartSeriesOptions] - }); - - const div: HTMLDivElement = null as any; - const r = new Highcharts.Renderer(div, 20, 30); - const box = r.text("Hello", 10, 10).getBBox(); - - const highChartSettings: Highcharts.Options = { - chart: { - width: 400, - height: 400 - }, - xAxis: [{ - }], - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }; - - const container = $("#container").highcharts(highChartSettings, (chart) => { - chart.series[0].setVisible(true, true); - }); - - const singleYAxisOptions: Highcharts.Options = { - yAxis: {} - }; - const multipleYAxisOptions: Highcharts.Options = { - yAxis: [{}, {}] - }; - - const renderToIdChart = new Highcharts.Chart("container", { - xAxis: {}, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], - type: "line", - allowPointSelect: true - } as Highcharts.LineChartSeriesOptions] - }); - - const renderToElementChart = new Highcharts.Chart(div, { - xAxis: {}, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], - type: "line", - allowPointSelect: true - } as Highcharts.LineChartSeriesOptions] - }); - - const createWithFunction = Highcharts.chart({ - xAxis: {}, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], - type: "line", - allowPointSelect: true - } as Highcharts.LineChartSeriesOptions] - }); - - const createWithFunctionRenderToId = Highcharts.chart("container", { - xAxis: {}, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], - type: "line", - allowPointSelect: true - } as Highcharts.LineChartSeriesOptions] - }); - - const createWithFunctionRenderToElement = Highcharts.chart(div, { - xAxis: {}, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], - type: "line", - allowPointSelect: true - } as Highcharts.LineChartSeriesOptions] - }); -} - -function test_alldefaults() { - const options: Highcharts.Options = { - chart: {}, - credits: {}, - data: {}, - drilldown: {}, - exporting: {}, - labels: {}, - legend: {}, - loading: {}, - colors: [], - navigation: {}, - noData: {}, - pane: {}, - plotOptions: {}, - series: [{}], - subtitle: {}, - title: {}, - tooltip: {}, - xAxis: {}, - yAxis: {} - }; -} - -function test_ChartOptions() { - const emptyChartOptions: Highcharts.ChartOptions = { - events: {}, - options3d: {}, - resetZoomButton: {} - }; - - const allValuesSet: Highcharts.ChartOptions = { - alignTicks: false, - animation: { - duration: 500, - easing: "linear" - }, - backgroundColor: { - linearGradient: { - x1: 0, - y1: 0, - x2: 1, - y2: 1 - }, - stops: [[0]] - }, - borderColor: "#000000", - borderRadius: 20, - borderWidth: 5, - className: "class", - colorCount: 42, - defaultSeriesType: "deprecated", - description: "an arbitrary description", - events: { - addSeries: () => { }, - afterPrint: () => { }, - beforePrint: () => { }, - click: () => { }, - drilldown: () => { }, - drillup: () => { }, - drillupall: () => { }, - load: () => { }, - redraw: () => { }, - selection: () => { } - }, - height: 200, - ignoreHiddenSeries: true, - inverted: true, - margin: [5, 5, 5, 5], - marginBottom: 10, - marginLeft: 10, - marginRight: 10, - marginTop: 10, - options3d: { - alpha: 20, - beta: 20, - depth: 50, - enabled: true, - frame: { - back: { - color: "black", - size: 2 - }, - bottom: { - color: "black", - size: 2 - }, - side: { - color: "black", - size: 2 - } - }, - viewDistance: 100 - }, - panKey: "a", - panning: true, - pinchType: "xy", - plotBackgroundColor: "white", - plotBackgroundImage: "http://image.url/image.jpg", - plotBorderColor: "grey", - plotBorderWidth: 5, - plotShadow: { - color: "magenta", - offsetX: 10, - offsetY: 10, - opacity: .5, - width: 5 - }, - polar: true, - reflow: false, - renderTo: "elementId", - resetZoomButton: { - position: { - align: "left", - verticalAlign: "top", - x: 5, - y: 5 - }, - relativeTo: "chart", - theme: { - display: "hidden", - fill: "black", - stroke: "white", - r: 2, - style: {} - } - }, - selectionMarkerFill: "rgba(100, 100, 100, .5)", - shadow: false, - showAxes: true, - spacing: [5, 5, 10, 5], - spacingBottom: 5, - spacingLeft: 5, - spacingRight: 5, - spacingTop: 5, - style: {}, - type: "spline", - typeDescription: "load accessibility module to read this", - width: 100, - zoomType: "x" - }; - - // alignticks example - $('#container').highcharts({ - chart: { - alignTicks: true, - type: 'line' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - yAxis: [{ - title: { - text: 'Primary Axis' - } - }, { - title: { - text: 'Secondary Axis' - }, - gridLineWidth: 0, - opposite: true - }], - legend: { - layout: 'vertical', - backgroundColor: '#FFFFFF', - floating: true, - align: 'left', - x: 100, - verticalAlign: 'top', - y: 70 - }, - tooltip: { - formatter() { - return ` ${this.series.name}
${this.x}: ${this.y}`; - } - }, - plotOptions: {}, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }, { - data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4], - yAxis: 1 - }] - }); - - // animation example - $('#container').highcharts({ - chart: { - animation: { - duration: 1500, - easing: 'easeOutBounce' - } - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - let i = 1; - $('#update').click(() => { - const chart = $('#container').highcharts(); - chart.series[0].data[0].update(i % 2 ? 200 : 0); - i += 1; - }); - - // background gradient example - $('#container').highcharts({ - chart: { - backgroundColor: { - linearGradient: [0, 0, 500, 500], - stops: [ - [0, 'rgb(255, 255, 255)'], - [1, 'rgb(200, 200, 255)'] - ] - }, - type: 'line' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - legend: { - layout: 'vertical', - backgroundColor: '#FFFFFF', - floating: true, - align: 'left', - x: 100, - verticalAlign: 'top', - y: 70 - }, - tooltip: { - formatter() { - return ` ${this.series.name}
${this.x}: ${this.y}`; - } - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // border example - $('#container').highcharts({ - chart: { - borderColor: '#EBBA95', - borderRadius: 20, - borderWidth: 2, - type: 'line' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - legend: { - layout: 'vertical', - backgroundColor: '#FFFFFF', - floating: true, - align: 'left', - x: 100, - verticalAlign: 'top', - y: 70 - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // events examples - $('#container').highcharts({ - chart: { - events: { - addSeries() { - const label = (this as Highcharts.ChartObject).renderer.label('A series was added, about to redraw chart', 100, 120) - .attr({ - fill: Highcharts.getOptions().colors[0], - padding: 10, - r: 5, - zIndex: 8 - }) - .css({ - color: '#FFFFFF' - }) - .add(); - - setTimeout(() => { - label.fadeOut(); - }, 1000); - } - } - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // activate the button - $('#button').click(() => { - const chart = $('#container').highcharts(); - - chart.addSeries({ - data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] - }); - - $(this).attr('disabled', 'true'); - }); - - // options3d examples - $('#container').highcharts({ - chart: { - type: 'column', - margin: 75, - options3d: { - enabled: true, - alpha: 15, - beta: 15, - depth: 50, - frame: { - bottom: { - size: 1, - color: '#C0C0C0' - }, - side: { - size: 1, - color: '#C0C0C0' - }, - back: { - size: 1, - color: '#D0D0D0' - } - } - }, - }, - plotOptions: { - column: { - depth: 25 - } - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // typedescription example - $('#container').highcharts({ - chart: { - borderColor: '#EBBA95', - borderRadius: 20, - borderWidth: 2, - type: 'line' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // zoom&pan example - $('#container').highcharts({ - chart: { - type: 'line', - zoomType: 'x', - panning: true, - panKey: 'shift' - }, - title: { - text: 'Zooming and panning' - }, - subtitle: { - text: 'Click and drag to zoom in. Hold down shift key to pan.' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // reset zoom example - $('#container').highcharts({ - chart: { - zoomType: 'x', - resetZoomButton: { - position: { - x: 0, - y: -30 - }, - theme: { - fill: 'white', - stroke: 'silver', - r: 0, - states: { - hover: { - fill: '#41739D', - style: { - color: 'white' - } - } - } - } - } - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // tooltip split example (incl. padding) - $('#container').highcharts({ - chart: { - type: 'spline' - }, - - title: { - text: 'Mountain house indoor temperatures' - }, - - subtitle: { - text: 'Split tooltips in Highcharts makes it easier to read overlapping line series' - }, - - tooltip: { - valueSuffix: '°C', - split: true, - padding: 5 - }, - - xAxis: { - }, - - yAxis: { - }, - - plotOptions: { - series: { - lineWidth: 1.5, - marker: { - radius: 2 - } - } - }, - - data: { - columns: [ - ["Time", 1451616120000, 1451865660000, 1451952060000, 1452038400000, 1452124800000, 1452211200000, - 1452297600000, 1452384000000, 1452470400000, 1452556800000, 1452643200000, 1452729600000, 1452816000000, - 1452902400000, 1452988800000, 1453075200000, 1453161600000, 1453248000000, 1453334400000, 1453420800000, - 1453507200000, 1453593600000, 1453680000000, 1453766400000, 1453852800000, 1453939200000, 1454025600000], - ["Kitchen", 5, 4, 5, 9, 6, 15, 19, 14, 6, 5, 6, 6, 15, 18, 15, 6, 6, 6, 6, 6, 6, 6, 16, 10, 6, 6, 6], - ["Living room", 9, 10, 16, 13, 6, 20, 24, 16, 7, 7, 6, 6, 20, 23, 18, 9, 7, 6, 6, 7, 6, 21, 20, 16, 6, 6, 6], - ["Hall", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5], - ["Bathroom", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5], - ["Bedroom 1", 6, 19, 19, 10, 5, 15, 21, 14, 6, 6, 5, 5, 17, 21, 16, 6, 5, 5, 5, 5, 5, 17, 18, 13, 5, 5, 5], - ["Bedroom 2", 7, 19, 19, 9, 5, 11, 19, 15, 6, 5, 6, 6, 16, 19, 17, 8, 9, 6, 5, 6, 5, 17, 19, 14, 6, 6, 6], - ["Shed", 6, 6, 5, 5, 6, 6, 6, 5, 5, 6, 6, 5, 6, 6, 6, 6, 6, 6, null, null, 6, 6, 6, 6, 6, 6, 6] - ] - } - }); -} - -function test_CreditsOptions() { - const allDefaults: Highcharts.CreditsOptions = {}; - - // custom url and text example - $('#container').highcharts({ - credits: { - text: 'Example.com', - href: 'http://www.example.com' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); -} - -function test_Data() { - // all defaults - const data: Highcharts.DataOptions = {}; - - // data from table example - $('#container').highcharts({ - data: { - table: 'datatable' - }, - chart: { - type: 'column' - }, - title: { - text: 'Data extracted from a HTML table in the page' - }, - yAxis: { - allowDecimals: false, - title: { - text: 'Units' - } - } - }); - - // data from csv example - $('#container').highcharts({ - data: { - csv: document.getElementById('csv').innerHTML - }, - plotOptions: { - series: { - marker: { - enabled: false - } - } - }, - series: [ - { - lineWidth: 1 - }, - { - type: 'areaspline', - color: '#c4392d', - negativeColor: '#5679c4', - fillOpacity: 0.5 - } as Highcharts.AreaSplineChartSeriesOptions - ] - }); - - // limited data example - $('#container').highcharts({ - data: { - csv: document.getElementById('csv').innerHTML, - startRow: 114, - endRow: 134, - endColumn: 1, - firstRowAsNames: false - }, - xAxis: { - allowDecimals: false - }, - series: [{ - name: 'Annual mean' - }] - }); - - // delimiter example - $('#container').highcharts({ - xAxis: { - type: 'category' - }, - data: { - csv: document.getElementById('csv').innerHTML, - itemDelimiter: ';', - lineDelimiter: '\n', - decimalPoint: ',' - } - }); -} - -function test_Drilldown() { - const allDefaults: Highcharts.DrilldownOptions = {}; - - // multiseries drilldown example - $('#container').highcharts({ - chart: { - type: 'column' - }, - xAxis: { - type: 'category' - }, - plotOptions: { - series: { - borderWidth: 0, - dataLabels: { - enabled: true - } - } as Highcharts.ColumnChart - }, - series: [{ - name: '2010', - data: [{ - name: 'Republican', - y: 5, - drilldown: 'republican-2010' - }, { - name: 'Democrats', - y: 2, - drilldown: 'democrats-2010' - }, { - name: 'Other', - y: 4, - drilldown: 'other-2010' - }] - }, { - name: '2014', - data: [{ - name: 'Republican', - y: 4, - drilldown: 'republican-2014' - }, { - name: 'Democrats', - y: 4, - drilldown: 'democrats-2014' - }, { - name: 'Other', - y: 4, - drilldown: 'other-2014' - }] - }], - drilldown: { - series: [{ - id: 'republican-2010', - data: [ - ['East', 4], - ['West', 2], - ['North', 1], - ['South', 4] - ] - }, { - id: 'democrats-2010', - data: [ - ['East', 6], - ['West', 2], - ['North', 2], - ['South', 4] - ] - }, { - id: 'other-2010', - data: [ - ['East', 2], - ['West', 7], - ['North', 3], - ['South', 2] - ] - }, { - id: 'republican-2014', - data: [ - ['East', 2], - ['West', 4], - ['North', 1], - ['South', 7] - ] - }, { - id: 'democrats-2014', - data: [ - ['East', 4], - ['West', 2], - ['North', 5], - ['South', 3] - ] - }, { - id: 'other-2014', - data: [ - ['East', 7], - ['West', 8], - ['North', 2], - ['South', 2] - ] - }] - } - }); - - // label and drillup example - $('#container').highcharts({ - chart: { - type: 'column' - }, - plotOptions: { - series: { - borderWidth: 0, - dataLabels: { - enabled: true - } - } as Highcharts.ColumnChart - }, - series: [{ - name: 'Things', - colorByPoint: true, - data: [{ - name: 'Animals', - y: 5, - drilldown: 'animals' - }, { - name: 'Fruits', - y: 2, - drilldown: 'fruits' - }, { - name: 'Cars', - y: 4 - }] - } as Highcharts.ColumnChartSeriesOptions], - drilldown: { - activeAxisLabelStyle: { - textDecoration: 'none', - fontStyle: 'italic' - }, - activeDataLabelStyle: { - textDecoration: 'none', - fontStyle: 'italic' - }, - drillUpButton: { - relativeTo: 'spacingBox', - position: { - y: 0, - x: 0 - }, - theme: { - fill: 'white', - 'stroke-width': 1, - stroke: 'silver', - r: 0, - states: { - hover: { - fill: '#bada55' - }, - select: { - stroke: '#039', - fill: '#bada55' - } - } - } - }, - series: [{ - id: 'animals', - data: [ - ['Cats', 4], - ['Dogs', 2], - ['Cows', 1], - ['Sheep', 2], - ['Pigs', 1] - ] - }, { - id: 'fruits', - data: [ - ['Apples', 4], - ['Oranges', 2] - ] - }] - } - }); -} - -function test_Exporting() { - const allDefaults: Highcharts.ExportingOptions = {}; - - // source size example - $('#container').highcharts({ - title: { - text: 'Highcharts sourceWidth and sourceHeight demo' - }, - subtitle: { - text: 'The on-screen chart is 600x400.
The exported chart is 800x400
(sourceWidth and sourceHeight multiplied by scale)', - floating: true, - align: 'left', - x: 60, - y: 50 - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }], - exporting: { - error: () => { - console.log('succesfully asserted exporting.error'); - }, - libURL: 'https://code.highcharts.com/{version}/lib', - sourceWidth: 400, - sourceHeight: 200, - scale: 2, - chartOptions: { - subtitle: null - } - } as Highcharts.ExportingOptions - }); -} - -function test_Loading() { - const allDefaults: Highcharts.LoadingOptions = {}; - - // examples - // the button handler - let isLoading = false; - const $button = $('#button'); - let chart: Highcharts.ChartObject; - - $button.click(() => { - if (!isLoading) { - chart.showLoading(); - $button.html('Hide loading'); - } else { - chart.hideLoading(); - $button.html('Show loading'); - } - isLoading = !isLoading; - }); - - // create the chart - $('#container').highcharts({ - loading: { - hideDuration: 1000, - showDuration: 1000, - labelStyle: { - color: 'white' - }, - style: { - backgroundColor: 'gray' - } - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - chart = $('#container').highcharts(); -} - -function test_Navigation() { - const allDefaults: Highcharts.NavigationOptions = {}; - - // examples - $('#container').highcharts({ - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }], - navigation: { - buttonOptions: { - align: 'center', - height: 40, - width: 48, - symbolFill: 'blue', - symbolStroke: 'blue', - symbolSize: 24, - symbolX: 23, - symbolY: 21, - symbolStrokeWidth: 2, - verticalAlign: 'bottom', - y: -20 - }, - menuItemStyle: { - borderLeft: '20px solid #E0E0E0', - fontWeight: 'normal', - background: 'none' - }, - menuItemHoverStyle: { - fontWeight: 'bold', - background: 'none', - color: 'black' - }, - menuStyle: { - background: '#E0E0E0' - } - } - }); -} - -function test_NoData() { - const allDefaults: Highcharts.NoDataOptions = {}; - - // example - $('#container').highcharts({ - title: { - text: 'No data in line chart - with custom options' - }, - series: [{ - type: 'line', - name: 'Random data', - data: [] - }], - lang: { - noData: "Nichts zu anzeigen" - }, - noData: { - style: { - fontWeight: 'bold', - fontSize: '15px', - color: '#303030' - } - } - }); -} - -function test_AreaOptions() { - const allDefaults: Highcharts.AreaChartSeriesOptions = {}; - - // examples - $('#container').highcharts({ - chart: { - type: 'area' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - plotOptions: { - series: { - fillColor: { - linearGradient: [0, 0, 0, 300], - stops: [ - [0, Highcharts.getOptions().colors[0]], - [1, ((Highcharts.Color(Highcharts.getOptions().colors[0])) as Highcharts.Gradient).setOpacity(0).get('rgba')] - ] - }, - fillOpacity: 0.1, - lineColor: '#303030', - negativeFillColor: 'red', - stacking: 'normal', - step: 'right', - threshold: 100, - trackByArea: true, - stickyTracking: false // to show the difference in tracking - } as Highcharts.AreaChartSeriesOptions - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); -} - -function test_AreaRange() { - const allDefaults: Highcharts.AreaRangeChartSeriesOptions = {}; - - // example - $('#container').highcharts({ - chart: { - type: "arearange", - zoomType: 'x' - }, - series: [{ - data: (((arr: number[], len: number) => { - for (let i = 0; i < len; i = i + 1) { - arr.push(i); - } - return arr; - })([], 50)) - }] - }); - - $('#setextremes').click(() => { - $('#container').highcharts().xAxis[0].setExtremes(10, 15); - }); - - $('#unsetextremes').click(() => { - $('#container').highcharts().xAxis[0].setExtremes(); - }); - - // datalabels example - $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', (data) => { - // Shorten the data - data = data.splice(181, 14); - $('#container').highcharts({ - chart: { - type: 'arearange' - }, - title: { - text: 'Temperature variation by day' - }, - xAxis: { - type: 'datetime' - }, - yAxis: { - title: { - text: null - } - }, - tooltip: { - crosshairs: true, - shared: true, - valueSuffix: '°C' - }, - legend: { - enabled: false - }, - series: [{ - name: 'Temperatures', - data, - dataLabels: { - enabled: true, - yHigh: 20, - yLow: -20 - } - } as Highcharts.AreaRangeChartSeriesOptions] - }); - }); -} - -function test_Bar() { - const allDefaults: Highcharts.BarChartSeriesOptions = {}; - - $('#container').highcharts({ - chart: { - type: 'bar' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - plotOptions: { - series: { - borderColor: '#303030', - borderRadius: 5, - borderWidth: 2, - colorByPoint: true, - colors: ["black", "red", "blue"], - groupPadding: 1, - maxPointWidth: 50, - minPointLength: 3, - pointRange: 24 * 3600 * 1000, - pointWidth: 20, - states: { - hover: { - brightness: -0.3, // darken - enabled: true, - halo: { - size: 9, - attributes: { - fill: Highcharts.getOptions().colors[2], - 'stroke-width': 2, - stroke: Highcharts.getOptions().colors[1] - } - } - } - } - } as Highcharts.BarChartSeriesOptions - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // 3d example - $('#container').highcharts({ - chart: { - type: 'column', - margin: 75, - options3d: { - enabled: true, - alpha: 15, - beta: 15, - depth: 50 - } - }, - plotOptions: { - column: { - depth: 25, - edgeColor: "black", - edgeWidth: 2, - groupZPadding: 2, - } - }, - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - // grouping example - Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, (color: string) => { - return (Highcharts.Color(color) as Highcharts.Gradient) - .setOpacity(0.5) - .get('rgba'); - }); - - $('#container').highcharts({ - chart: { - type: 'bar' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - yAxis: { - min: 0, - }, - legend: { - layout: 'vertical', - backgroundColor: '#FFFFFF', - align: 'left', - verticalAlign: 'top', - x: 100, - y: 70, - floating: true, - shadow: true - }, - tooltip: { - shared: true, - valueSuffix: ' mm' - }, - plotOptions: { - column: { - grouping: false, - shadow: false - } - }, - series: [{ - name: 'Tokyo', - data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], - pointPadding: 0 - } as Highcharts.BarChartSeriesOptions, { - name: 'New York', - data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], - pointPadding: 0.1 - }, { - name: 'London', - data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], - pointPadding: 0.2 - }, { - name: 'Berlin', - data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1], - pointPadding: 0.3 - }] - }); -} - -function test_BoxPlot() { - const allDefaults: Highcharts.BoxPlotChartSeriesOptions = {}; - - // boxplot example - $('#container').highcharts({ - chart: { - type: 'boxplot' - }, - title: { - text: 'Highcharts box plot styling' - }, - legend: { - enabled: false - }, - xAxis: { - categories: ['1', '2', '3', '4', '5'], - title: { - text: 'Experiment No.' - } - }, - yAxis: { - title: { - text: 'Observations' - } - }, - plotOptions: { - boxplot: { - fillColor: '#F0F0E0', - lineWidth: 2, - medianColor: '#0C5DA5', - medianWidth: 3, - stemColor: '#A63400', - stemDashStyle: 'dot', - stemWidth: 1, - whiskerColor: '#3D9200', - whiskerLength: '20%', - whiskerWidth: 3 - } - }, - series: [{ - name: 'Observations', - data: [ - 760, 801, 848, 895, 965, - 733, 853, 939, 980, 1080, - 714, 762, 817, 870, 918, - 724, 802, 806, 871, 950, - 834, 836, 864, 882, 910 - ] - }] - }); -} - -function test_Bubble() { - const allDefaults: Highcharts.BubbleChartSeriesOptions = {}; - - // bubble example - $('#container').highcharts({ - chart: { - type: 'bubble', - plotBorderWidth: 1, - zoomType: 'xy' - }, - title: { - text: 'Highcharts with negative bubbles' - }, - xAxis: { - gridLineWidth: 1 - }, - yAxis: { - startOnTick: false, - endOnTick: false - }, - plotOptions: { - bubble: { - minSize: 3, - maxSize: 50 - } - }, - series: [{ - data: [ - [9, 81, 13], - [98, 5, 39], - [51, 50, 23], - [41, 22, -36], - [58, 24, -30], - [78, 37, -16], - [55, 56, 3], - [18, 45, 20], - [42, 44, -22], - [3, 52, 9], - [31, 18, 47], - [79, 91, 13], - [93, 23, -27], - [44, 83, -28] - ], - displayNegative: true, - negativeColor: Highcharts.getOptions().colors[1], - sizeBy: "width", - zMin: 0, - zMax: 100, - zThreshold: 0 - } as Highcharts.BubbleChartSeriesOptions] - }); - - // size by absolute value example - $('#container').highcharts({ - chart: { - type: 'bubble' - }, - title: { - text: 'Size by absolute value' - }, - subtitle: { - text: 'Size is computed by absolute value on negative bubbles' - }, - series: [{ - data: [ - [-5, 0, -5], - [-4, 0, -4], - [-3, 0, -3], - [-2, 0, -2], - [-1, 0, -1], - [0, 0, 0], - [1, 0, 1], - [2, 0, 2], - [3, 0, 3], - [4, 0, 4], - [5, 0, 5] - ], - sizeByAbsoluteValues: true, - negativeColor: '#FF0000' - } as Highcharts.BubbleChartSeriesOptions] - }); -} - -function test_Column() { - const allDefaults: Highcharts.ColumnChartSeriesOptions = {}; - - // same options as bar chart -} - -function test_ColumnCrispFalse() { - // conform example: http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-crisp-false/ - const numbers = () => { - const arr = []; - for (let i = 0; i < 100; i++) { - arr.push(i); - } - return arr; - }; - const chart = new Highcharts.Chart({ - title: { - text: 'Crisp columns are disabled' - }, - - subtitle: { - text: 'Resulting in blurry, but evenly spaced columns' - }, - - series: [{ - data: numbers(), - type: 'column', - crisp: false - }] - }); -} - -function test_ColumnRange() { - const allDefaults: Highcharts.ColumnRangeChartSeriesOptions = {}; - - // same options as bar chart and datalabels from arearange -} - -function test_ErrorBar() { - const allDefaults: Highcharts.ErrorBarChartSeriesOptions = {}; - - // error bar styling example - $('#container').highcharts({ - chart: { - zoomType: 'x' - }, - title: { - text: 'Temperature' - }, - xAxis: [{ - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }], - yAxis: { - labels: { - format: '{value}°C' - }, - title: { - text: 'Temperature' - } - }, - tooltip: { - shared: true - }, - series: [{ - name: 'Temperature', - type: 'spline', - data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], - marker: { - enabled: false - }, - tooltip: { - pointFormat: ' {series.name} : {point.y:.1f}°C
' - } - } as Highcharts.SplineChartSeriesOptions, { - color: '#FF0000', - name: 'Temperature error', - type: 'errorbar', - data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]], - tooltip: { - pointFormat: 'Error range: {point.low}-{point.high}°C' - }, - stemColor: "grey", - stemDashStyle: "Solid", - stemWidth: 3, - whiskerLength: 0 - } as Highcharts.ErrorBarChartSeriesOptions] - }); -} - -function test_FindNearestPointBy() { - // conform example: http://jsfiddle.net/gh/get/library/pure/highslide-software/highcharts.com/tree/master/samples/highcharts/series/findnearestpointby/ - const chart = new Highcharts.Chart({ - title: { - text: 'The top series snaps hover along X axis' - }, - - plotOptions: { - line: { - marker: { - enabled: true - } - } - }, - - series: [{ - findNearestPointBy: 'x', - // Hover at [3.5, 6] to demo x-dimension search - // Compare to Series 2 behavior at [5.5, 3] - data: [ - [0, 6], - [1, 6], - [1, 7], - [2, 6], - [3, 6], - [3.5, 4], - [4, 6], - [5, 6], - [6, 6], - [7, 6] - ] - } as Highcharts.IndividualSeriesOptions, { - findNearestPointBy: 'xy', - // Hover at [1, 4] to demo xy-dimension search. - // Useful when having multiple points on the same x-value. - data: [ - [0, 3], - [1, 3], - [1, 4], - [2, 3], - [3, 3], - [4, 3], - [5, 3], - [5.5, 5.5], - [6, 3], - [7, 3] - ] - } as Highcharts.IndividualSeriesOptions] - }); -} - -function test_Funnel() { - const allDefaults: Highcharts.FunnelChartSeriesOptions = {}; - - // funnel demo - $('#container').highcharts({ - chart: { - type: 'funnel', - marginRight: 100 - }, - title: { - text: 'Sales funnel', - x: -50 - }, - plotOptions: { - series: { - dataLabels: { - enabled: true, - format: ' {point.name} ({point.y:,.0f})', - color: 'black', - softConnector: true - }, - neckWidth: '30%', - neckHeight: '25%', - reversed: false, - height: "10%", - width: 100 - } as Highcharts.FunnelChartSeriesOptions - }, - legend: { - enabled: false - }, - series: [{ - name: 'Unique users', - data: [ - ['Website visits', 15654], - ['Downloads', 4064], - ['Requested price list', 1987], - ['Invoice sent', 976], - ['Finalized', 846] - ] - }] - }); -} - -function test_Gauge() { - const allDefaults: Highcharts.GaugeChartSeriesOptions = {}; - - // example - $('#container').highcharts({ - chart: { - type: 'gauge' - }, - pane: { - center: ['50%', '85%'], - startAngle: -150, - endAngle: 150 - }, - yAxis: { - min: 0, - max: 100, - stops: [ - [0.1, '#DF5353'], - [0.5, '#DDDF0D'], - [0.9, '#55BF3B'], - ], - }, - plotOptions: { - gauge: { - dial: { - radius: '100%', - backgroundColor: 'silver', - borderColor: 'black', - borderWidth: 1, - baseWidth: 10, - topWidth: 1, - baseLength: '90%', // of radius - rearLength: '50%' - }, - pivot: { - radius: 4, - borderWidth: 0, - borderColor: '#1f9fd9', - backgroundColor: '#1f9fd9' - }, - dataLabels: { - borderWidth: 2, - borderColor: '#d3e9f7', - padding: 5, - borderRadius: 2, - verticalAlign: 'center', - y: 30, - style: { - fontWeight: 'normal' - } - } - } - }, - series: [{ - data: [80], - overshoot: 5 - } as Highcharts.GaugeChartSeriesOptions] - }); -} - -function test_HeatMap() { - const allDefaults: Highcharts.HeatMapSeriesOptions = {}; - - // heatmap demo - $('#container').highcharts({ - data: { - csv: document.getElementById('csv').innerHTML - }, - chart: { - type: 'heatmap', - inverted: true - }, - title: { - text: 'Highcharts heat map', - align: 'left' - }, - subtitle: { - text: 'Temperature variation by day and hour through May 2015', - align: 'left' - }, - xAxis: { - tickPixelInterval: 50, - min: Date.UTC(2015, 4, 1), - max: Date.UTC(2015, 4, 30) - }, - yAxis: { - title: { - text: null - }, - labels: { - format: '{value}:00' - }, - minPadding: 0, - maxPadding: 0, - startOnTick: false, - endOnTick: false, - tickPositions: [0, 6, 12, 18, 24], - tickWidth: 1, - min: 0, - max: 23 - }, - colorAxis: { - stops: [ - [0, '#3060cf'], - [0.5, '#fffbbc'], - [0.9, '#c4463a'] - ], - min: -5 - }, - series: [{ - borderWidth: 0, - colsize: 24 * 36e5, // one day - tooltip: { - headerFormat: 'Temperature
', - pointFormat: '{point.x:%e %b, %Y} {point.y}:00: {point.value} ℃ ' - } - } as Highcharts.HeatMapSeriesOptions] - }); -} - -function test_Line() { - const allDefaults: Highcharts.LineChartSeriesOptions = {}; - - // step example - $('#container').highcharts({ - title: { - text: 'Step line types, with null values in the series' - }, - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - series: [{ - data: [1, 2, 3, 4, null, 6, 7, null, 9], - step: 'right', - name: 'Right', - linecap: 'round' - } as Highcharts.LineChartSeriesOptions, { - data: [5, 6, 7, 8, null, 10, 11, null, 13], - step: 'center', - name: 'Center', - linecap: 'round' - }, { - data: [9, 10, 11, 12, null, 14, 15, null, 17], - step: 'left', - name: 'Left', - linecap: 'round' - }] - }); -} - -function test_Pie() { - const allDefaults: Highcharts.PieChartSeriesOptions = {}; - - // pie demo - $('#container').highcharts({ - chart: { - plotBackgroundColor: null, - plotBorderWidth: null, - plotShadow: false, - type: 'pie' - }, - title: { - text: 'Browser market shares January, 2015 to May, 2015' - }, - tooltip: { - pointFormat: '{series.name}: {point.percentage:.1f}% ' - }, - plotOptions: { - pie: { - allowPointSelect: true, - center: [100, 100], - cursor: 'pointer', - dataLabels: { - enabled: true, - format: ' {point.name} : {point.percentage:.1f} %', - style: { - color: 'black' - } - } - } - }, - series: [{ - name: "Brands", - colorByPoint: true, - data: [{ - name: "Microsoft Internet Explorer", - y: 56.33 - }, { - name: "Chrome", - y: 24.03, - sliced: true, - selected: true - }, { - name: "Firefox", - y: 10.38 - }, { - name: "Safari", - y: 4.77 - }, { - name: "Opera", - y: 0.91 - }, { - name: "Proprietary or Undetectable", - y: 0.2 - }] - } as Highcharts.PieChartSeriesOptions] - }); - - // semi circle - $('#container').highcharts({ - chart: { - plotBackgroundColor: null, - plotBorderWidth: 0, - plotShadow: false - }, - title: { - text: 'Browser
shares
2015', - align: 'center', - verticalAlign: 'middle', - y: 40 - }, - tooltip: { - pointFormat: '{series.name}: {point.percentage:.1f}% ' - }, - plotOptions: { - pie: { - dataLabels: { - enabled: true, - distance: -50, - style: { - fontWeight: 'bold', - color: 'white', - textOutline: '0px 1px 2px black' - } - }, - startAngle: -90, - endAngle: 90, - center: ['50%', '75%'] - } - }, - series: [{ - type: 'pie', - name: 'Browser share', - innerSize: '50%', - data: [ - ['Firefox', 10.38], - ['IE', 56.33], - ['Chrome', 24.03], - ['Safari', 4.77], - ['Opera', 0.91], - { - name: 'Proprietary or Undetectable', - y: 0.2, - dataLabels: { - enabled: false - } - } - ] - }] - }); - - // slice and size - $('#container').highcharts({ - chart: { - type: 'pie' - }, - plotOptions: { - pie: { - allowPointSelect: true, - innerSize: 10, - size: 80, - slicedOffset: 20 - } - }, - series: [{ - data: [ - { - name: 'Firefox', - y: 44.2, - selected: true, - sliced: true - }, - ['IE7', 26.6], - ['IE6', 20], - ['Chrome', 3.1], - ['Other', 5.4] - ] - }] - }); -} - -function test_Polygon() { - const allDefaults: Highcharts.PolygonChartSeriesOptions = {}; - - $('#container').highcharts({ - chart: { - type: 'polygon' - }, - xAxis: { - minPadding: 0.05, - maxPadding: 0.05 - }, - plotOptions: { - polygon: { - lineWidth: 5 - } - }, - series: [{ - data: [ - [34, 29.9], - [35, 144.0], - [43, 176.0], - [46, 71.5], - [12, 106.4], - [78, 129.2] - ] - }] - }); -} - -function test_Pyramid() { - const allDefaults: Highcharts.PyramidChartSeriesOptions = {}; - - // pyramid demo - $('#container').highcharts({ - chart: { - type: 'pyramid', - marginRight: 100 - }, - title: { - text: 'Sales pyramid', - x: -50 - }, - plotOptions: { - pyramid: { - dataLabels: { - enabled: true, - format: ' {point.name} ({point.y:,.0f})', - color: 'black', - softConnector: true - } - } - }, - legend: { - enabled: false - }, - series: [{ - name: 'Unique users', - data: [ - ['Website visits', 15654], - ['Downloads', 4064], - ['Requested price list', 1987], - ['Invoice sent', 976], - ['Finalized', 846] - ] - }] - }); -} - -function test_SolidGauge() { - const allDefaults: Highcharts.SolidGaugeChartSeriesOptions = {}; - - // partial solid gauge demo - const gaugeOptions: Highcharts.Options = { - chart: { - type: 'solidgauge' - }, - title: null, - pane: { - center: ['50%', '85%'], - size: '140%', - startAngle: -90, - endAngle: 90, - background: { - backgroundColor: '#EEE', - innerRadius: '60%', - outerRadius: '100%', - shape: 'arc' - } - }, - tooltip: { - enabled: false - }, - colorAxis: { - stops: [ - [0.1, '#55BF3B'], // green - [0.5, '#DDDF0D'], // yellow - [0.9, '#DF5353'] // red - ] - }, - yAxis: { - lineWidth: 0, - minorTickInterval: null, - tickPixelInterval: 400, - tickWidth: 0, - title: { - y: -70 - }, - labels: { - y: 16 - } - }, - plotOptions: { - solidgauge: { - dataLabels: { - y: 5, - borderWidth: 0, - useHTML: true - } - } - } - }; -} - -function test_TreeMap() { - const allDefaults: Highcharts.TreeMapChartSeriesOptions = {}; - - // allowDrillToNode - const treeMap: Highcharts.TreeMapChartSeriesOptions = { - type: "treemap", - layoutAlgorithm: 'squarified', - allowDrillToNode: true, - alternateStartingDirection: true, - interactByLeaf: true, - layoutStartingDirection: "horizontal", - levelIsConstant: true, - data: [{ - id: "id_1", - name: 'A' - }, { - id: "id_2", - name: 'A1', - value: 2, - parent: 'id_1' - }, { - id: "id_3", - name: 'A2', - value: 2, - parent: 'id_1' - }, { - id: "id_4", - name: 'A3', - value: 2, - parent: 'id_1' - }, { - name: 'B', - value: 6 - }, { - name: 'C', - value: 4 - }, { - name: 'D', - value: 3 - }, { - name: 'E', - value: 2 - }, { - name: 'F', - value: 2 - }, { - name: 'G', - value: 1 - }] - }; -} - -function test_Waterfall() { - const allDefaults: Highcharts.WaterFallChartSeriesOptions = {}; - - // partial waterfall demo - const series: Highcharts.WaterFallChartSeriesOptions = { - upColor: Highcharts.getOptions().colors[2], - color: Highcharts.getOptions().colors[3], - data: [{ - name: 'Start', - y: 120000 - }, { - name: 'Product Revenue', - y: 569000 - }, { - name: 'Service Revenue', - y: 231000 - }, { - name: 'Positive Balance', - isIntermediateSum: true, - color: Highcharts.getOptions().colors[1] - }, { - name: 'Fixed Costs', - y: -342000 - }, { - name: 'Variable Costs', - y: -233000 - }, { - name: 'Balance', - isSum: true, - color: Highcharts.getOptions().colors[1] - }], - dataLabels: { - enabled: true, - formatter() { - return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k'; - }, - style: { - color: '#FFFFFF', - fontWeight: 'bold', - textOutline: '0px 0px 3px black' - } - }, - pointPadding: 0 - }; -} - -function test_AccessibilityOptions() { - const accessibilityOptions: Highcharts.AccessibilityOptions = { - describeSingleSeries: true, - enabled: true, - keyboardNavigation: { - enabled: true, - skipNullPoints: true - }, - onTableAnchorClick: () => { }, - pointDateFormat: 'dd-MM-yyyy', - pointDateFormatter: () => { }, - pointDescriptionFormatter: () => { }, - pointDescriptionThreshold: false, - screenReaderSectionFormatter: () => { }, - seriesDescriptionFormatter: () => { } - }; - - const chart = new Highcharts.Chart({ - accessibility: accessibilityOptions - }); -} - -function test_AddAndUpdateCredits() { - // example based on: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/credits/credits-update/ - const chart = new Highcharts.Chart({ - title: { - text: 'Credits update' - }, - - credits: { - enabled: false - }, - - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - chart.addCredits({ - enabled: true - }); - - chart.credits.update({ - enabled: false - }); - - if (chart.credits) { - chart.credits.update({ - text: 'MyFancyCompany', - href: 'http://www.example.com', - position: { - align: 'left', - x: 10 - }, - style: { - fontSize: '2em', - color: 'blue' - } - }); - } - - if (chart.credits) { - chart.credits.update({ - text: 'Highcharts.com', - href: 'http://www.highcharts.com', - position: { - align: 'right', - x: -10 - }, - style: { - color: '#909090', - fontSize: '9px' - } - }); - } -} - -function test_AxisOptions() { - const allDefaults: Highcharts.AxisOptions = {}; - - const axis: Highcharts.AxisOptions = { - allowDecimals: false, - alternateGridColor: '#000000', - breaks: [{ - breakSize: 1, - from: 5, - to: 10, - repeat: 2 - }], - categories: ['A', 'B'], - ceiling: 100, - className: 'highcharts-axis', - dateTimeLabelFormats: { - millisecond: "ms format" - }, - endOnTick: false, - events: { - afterBreaks: () => { }, - afterSetExtremes: () => { }, - pointBreak: () => { }, - setExtremes: () => { } - }, - floor: 0, - gridLineColor: '#111111', - gridLineDashStyle: 'Solid', - gridLineWidth: 1, - gridZIndex: 1, - id: "axis1", - labels: { - align: "left", - autoRotation: [-45], - autoRotationLimit: 70, - distance: 10, - enabled: true, - format: "format", - formatter() { return String(this.value); }, - maxStaggerLines: 5, - overflow: false, - padding: 10, - rotation: 10, - staggerLines: 10, - step: 3, - style: {}, - useHTML: false, - x: 0, - y: 0 - }, - lineColor: "#C0D0E0", - lineWidth: 2, - linkedTo: 1, - max: 1200, - maxPadding: 5, - min: 0, - minPadding: 5, - minRange: 10, - minTickInterval: 5, - minorGridLineColor: "#E0E0E0", - minorGridLineDashStyle: 'Solid', - minorGridLineWidth: 2, - minorTickColor: '#A0A0A0', - minorTickInterval: 5, - minorTickLength: 3, - minorTickPosition: 'inside', - minorTickWidth: 0, - offset: 0, - opposite: false, - plotBands: [{ - borderColor: 'black', - borderWidth: 2, - color: 'gray', - events: { - click: () => { }, - mouseover: () => { }, - mouseout: () => { }, - mousemove: () => { } - }, - from: 0, - id: 'plotband1', - innerRadius: 10, - label: { - align: 'left', - rotation: 10, - style: {}, - text: 'text', - textAlign: 'left', - useHTML: false, - verticalAlign: 'bottom', - x: 0, - y: 0 - }, - outerRadius: 20, - thickness: 1, - to: 2, - zIndex: 2 - }], - plotLines: [{ - color: '#000000', - dashStyle: 'Solid', - events: { - click: () => { }, - mouseover: () => { }, - mouseout: () => { }, - mousemove: () => { } - }, - id: 'plotline1', - label: { - align: 'left', - rotation: 10, - style: {}, - text: 'text', - textAlign: 'left', - useHTML: false, - verticalAlign: 'bottom', - x: 0, - y: 0 - }, - value: 10, - width: 100, - zIndex: 2 - }], - reversed: false, - showEmpty: false, - showFirstLabel: true, - showLastLabel: true, - softMax: 2, - softMin: 1, - startOfWeek: 1, - startOnTick: false, - tickAmount: 10, - tickColor: 'black', - tickInterval: 1, - tickLength: 10, - tickPixelInterval: 100, - tickPosition: 'outside', - tickPositioner: () => { }, - tickPositions: [0, 1, 2], - tickWidth: 1, - tickmarkPlacement: 'between', - title: { - align: 'left', - rotation: 10, - style: {}, - text: 'text', - x: 0, - y: 0 - }, - type: 'linear', - units: [ - ['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]], - ['second', [1, 2, 5, 10, 15, 30]], - ['minute', [1, 2, 5, 10, 15, 30]]], - visible: true - }; - - const labelsOptionUnions: Highcharts.AxisOptions = { - labels: { - autoRotation: false - } - }; -} - -function test_AxisObject() { - const axis = $("#container").highcharts().xAxis[0]; - axis.addPlotBand({ - from: 5.5, - to: 7.5, - color: '#FCFFC5', - id: 'plot-band-1' - }); - axis.removePlotBand('plot-band-1'); - axis.addPlotLine({ - value: 5.5, - color: 'red', - width: 2, - id: 'plot-line-1' - }); - axis.removePlotLine('plot-line-1'); - const extremes = axis.getExtremes(); - console.log(`dataMax: ${extremes.dataMax}
` + - `dataMin: ${extremes.dataMin}
` + - `max: ${extremes.max}
` + - `min: ${extremes.min}
`); - axis.remove(); - axis.remove(false); - axis.setCategories(['A', 'B', 'C']); - axis.setCategories(['A', 'B', 'C', 'D'], false); - axis.setExtremes(); - axis.setExtremes(10, 20); - axis.setExtremes(10, 20, false); - axis.setExtremes(10, 20, false, false); - axis.setExtremes(10, 20, false, { duration: 50 }); - axis.setTitle({ text: 'text' }); - axis.setTitle({ text: 'text' }, false); - axis.toPixels(10); - axis.toPixels(10, true); - axis.toValue(10); - axis.toValue(10, true); - axis.update({}); - axis.update({}, true); -} - -function test_ChartObject() { - const chart = $("#container").highcharts(); - chart.addAxis({}); - chart.addAxis({}, true); - chart.addAxis({}, true, false); - chart.addAxis({}, true, true, false); - chart.addAxis({}, true, true, { duration: 50 }); - chart.addSeries({}); - chart.addSeries({}, false); - chart.addSeries({}, false, false); - chart.addSeries({}, false, { duration: 50 }); - chart.addSeriesAsDrilldown({} as Highcharts.PointObject, {}); - const container = chart.container; - console.log(container.id); - chart.destroy(); - chart.drillUp(); - chart.exportChart({}, {}); - chart.exportChartLocal({}, {}); - const object = chart.get('axisIdOrSeriesIdOrPointId'); - const svg1 = chart.getSVG(); - const svg2 = chart.getSVG({}); - const selectedPoints = chart.getSelectedPoints(); - const selectedSeries = chart.getSelectedSeries(); - chart.hideLoading(); - const options = chart.options; - chart.print(); - chart.redraw(); - chart.redraw(false); - chart.redraw({ duration: 50, easing: 'fadeIn' }); - chart.reflow(); - const series = chart.series; - chart.setSize(200, 200); - chart.setSize(200, 200, false); - chart.setSize(200, 200, { duration: 50 }); - chart.setTitle({}, {}); - chart.setTitle({}, {}, false); - chart.showLoading(); - chart.showLoading("Loading label"); - const firstXAxis = chart.xAxis[0]; - const firstYAxis = chart.yAxis[0]; - const legend = chart.legend; - chart.update({}); - chart.update({}, true); - chart.update({}, true, true); - chart.update({}, true, true, true); - chart.update({}, true, true, { - duration: 3000, - }); -} - -function test_ElementObject() { - const renderer = new Highcharts.Renderer($("#container")[0], 400, 400); - const group = renderer.g().add(); - renderer - .circle(200, 150, 100) - .attr({ - fill: '#FCFFC5', - stroke: 'black', - 'stroke-width': 1 - }) - .add(group); - const rect = renderer - .rect(90, 150, 100, 100, 5) - .attr({ - fill: '#C5FFC5', - stroke: 'black', - 'stroke-width': 1 - }) - .add(group); - rect.animate({ - x: 50, - y: 50, - width: 200, - height: 20, - 'stroke-width': 10 - }); - rect.destroy(); - const styledText = renderer - .text('Series 1', 140, 140) - .attr({ - rotation: -25 - }) - .css({ - color: '#4572A7', - fontSize: '16px' - }) - .add(); - const bbox = styledText.getBBox(); - styledText.on('click', () => { }); - group.toFront(); -} - -function test_NumericSymbolMagnitude() { - // conform example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/lang/numericsymbolmagnitude/ - - const chart = new Highcharts.Chart({ - title: { - text: 'Numeric symbols magnitude' - }, - - subtitle: { - text: 'Japanese uses ten thousands (万) as numeric symbol' - }, - - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', - 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - - series: [{ - data: [2990, 7150, 10640, 12920, 14400, 17600, - 13560, 14850, 21640, 19410, 9560, 5440], - type: 'column' - }] - }); - - chart.update({ - lang: { - numericSymbols: ['万', '億'], - numericSymbolMagnitude: 10000 - } - }); -} - -function test_PaneBackground() { - const pane = { - backgroundColor: 'blue', - borderColor: 'white', - borderWidth: 5, - className: 'good', - innerRadius: 10, - outerRadius: '110%', - shape: 'circle' - }; -} - -function test_PointObject() { - const point = $('#container').highcharts().get('point1') as Highcharts.PointObject; - const category = point.category; - const percentage = point.percentage; - point.index; - point.remove(); - point.remove(false); - point.remove(false, { duration: 50 }); - point.select(); - point.select(false); - point.select(false, true); - const isSelected = point.selected; - const series = point.series; - point.slice(); - point.slice(false); - point.slice(false, false); - point.slice(false, false, false); - point.slice(false, false, { duration: 50 }); - const total = point.total; - point.update(0); - point.update([0, 0]); - point.update({}); - point.update({}, false); - point.update({}, false, false); - point.update({}, false, { duration: 50 }); - const x = point.x; - const y = point.y; -} - -function test_RendererObject() { - const renderer = $('#container').highcharts().renderer; - renderer.arc(0, 0, 20, 10, 0, Math.PI); - renderer.circle(0, 0, 100); - renderer.definition({}); - renderer.g('groupName'); - renderer.image('http://source', 20, 20, 100, 100); - renderer.label('Label', 200, 100, 'rect', 0, 0, false, false, 'class'); - renderer.path(['M', 100, 100, 'L', 100, 200]); - renderer.rect(20, 20, 100, 100, 2); - renderer.text('text', 10, 10); -} - -function test_ResponsiveOptions() { - const responsiveOptions: Highcharts.ResponsiveOptions = { - rules: [ - { - chartOptions: { - chart: { - description: 'just a test' - } - }, - condition: { - callback: () => { }, - maxHeight: 420, - maxWidth: 420, - minHeight: 420, - minWidth: 420 - } - } - ] - }; - - const chart = new Highcharts.Chart({ - responsive: responsiveOptions - }); -} - -function test_SeriesObject() { - const series = $('#container').highcharts().get('series1') as Highcharts.SeriesObject; - series.addPoint(0); - series.addPoint([0, 0]); - series.addPoint({}); - series.addPoint({}, false); - series.addPoint({}, false, true); - series.addPoint({}, false, true, false); - series.addPoint({}, false, true, { duration: 50 }); - const chart = series.chart; - const data = series.data; - series.hide(); - const name = series.name; - const options = series.options; - series.remove(); - series.remove(false); - series.removePoint(0); - series.removePoint(0, false); - series.removePoint(0, false, false); - series.removePoint(0, false, { duration: 50 }); - series.select(); - series.select(true); - const isSelected = series.selected; - series.setData([0, 1, 2]); - series.setData([[0, 0], [1, 1], [2, 2]]); - series.setData([{}, {}, {}]); - series.setData([0, 1, 2], false); - series.setData([0, 1, 2], false, false); - series.setData([0, 1, 2], false, { duration: 50 }); - series.setData([0, 1, 2], false, false, false); - series.setVisible(); - series.setVisible(true); - series.setVisible(true, false); - series.show(); - const type = series.type; - series.update({}); - series.update({}, false); - const visible = series.visible; - const xAxis = series.xAxis; - const yAxis = series.yAxis; -} -function test_LegendObject() { - const legend = $('#container').highcharts().legend; - legend.update({}); - legend.update({}, false); -} - -function test_SeriesDataLabel() { - $('#container').highcharts({ - title: { - text: 'Styling data labels by CSS' - }, - - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr'] - }, - - plotOptions: { - series: { - dataLabels: { - enabled: true, - borderRadius: 2, - y: -10, - shape: 'callout' - } - } - }, - - series: [{ - data: [100, 300, { - y: 500, - dataLabels: { - className: 'highlight' - } - }, 400] - }] - }); -} - -function test_SoftMinSoftMax() { - // conform example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/softmin-softmax/ - const chart: Highcharts.ChartObject = new Highcharts.Chart({ - title: { - text: 'Y axis softMax is 100' - }, - - subtitle: { - text: 'Click the button to change data max' - }, - - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - - yAxis: { - softMax: 100, - title: { - text: 'Percentage' - } - }, - - series: [{ - data: [0, 1, 0, 2, 3, 5, 8, 5, 15, 14, 25, 54] - }] - }); - - chart.series[0].data[11].update(120); -} - -function test_StyledColorZones() { - $('#container').highcharts({ - title: { - text: 'Styled color zones' - }, - - yAxis: { - min: -10 - }, - - plotOptions: { - series: { - zones: [{ - value: 0, - className: 'zone-0' - }, { - value: 10, - className: 'zone-1' - }, { - className: 'zone-2' - }], - threshold: -10 - } - }, - - series: [{ - type: 'areaspline', - data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5] - }, { - type: 'column', - data: [1, 13, 2, -4, 6, 7, 5, 3, 2, -1, 2] - }] - }); -} - -function test_TitleUpdate() { - // conform example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/title-update/ - let i = 1; - - const chart = new Highcharts.Chart({ - subtitle: { - text: 'Subtitle' - }, - - xAxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }, - - series: [{ - data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] - }] - }); - - chart.title.update({ text: 'New title ' + i }); - i += 1; - - chart.subtitle.update({ text: 'New title ' + i }); - i += 1; - - chart.title.update({ - style: { - color: 'red' - } - }); - chart.subtitle.update({ - style: { - color: 'green' - } - }); -} - -function test_AddAndFireEvent() { - const chart = $('#container').highcharts(); - const type = 'drilldown'; - const evt = Highcharts.addEvent(chart, type, it => {}); - Highcharts.fireEvent(chart, type); -} - -function test_WordCloud() { - const allDefaults: Highcharts.WordCloudChartSeriesOptions = {}; - - // partial wordcloud demo - const series: Highcharts.WordCloudChartSeriesOptions = { - type: 'wordcloud', - data: [], - name: 'Occurrences', - rotation: { - to: 0 - }, - tooltip: { - headerFormat: null, - pointFormatter() { - return `${this.name}: Occurrence ${this.weight}`; - } - } - }; -} - -// Test wrapping the tooltip refresh behavior. -function test_WrapTooltipBehavior() { - Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', (proceed, points) => { - // When refresh is called, code inside this wrap is executed. - // Many prototype functions use this so arrow functions should only be used to replace behaviors. - }); -} - -// Tests Highcharts.ganttChart, which usings the Gantt module -function test_GanttChart() { - Highcharts.ganttChart('ganttChartContainer', { - xAxis: { - min: Date.UTC(2014, 9, 18), - max: Date.UTC(2014, 12, 20) - }, - series: [{ - name: 'Project 1', - data: [ - { - name: 'Lemon Tea', - start: Date.UTC(2014, 10, 18), - end: Date.UTC(2014, 11, 20) - }, - { - name: 'Stapler', - start: Date.UTC(2014, 11, 18), - end: Date.UTC(2014, 12, 20) - }, - { - name: 'Sierra', - start: Date.UTC(2014, 12, 18), - end: Date.UTC(2014, 12, 20) - }, - ], - }], - }); -} - -// Tests DataLabels types for Highcharts.ganttChart, which uses the Gantt module -function test_GanttChartDataLabels() { - Highcharts.ganttChart('ganttChartContainer', { - xAxis: { - min: Date.UTC(2014, 9, 18), - max: Date.UTC(2014, 12, 20) - }, - series: [{ - name: 'Project 1', - data: [ - { - name: 'Lemon Tea', - start: Date.UTC(2014, 10, 18), - end: Date.UTC(2014, 11, 20) - }, - { - name: 'Stapler', - start: Date.UTC(2014, 11, 18), - end: Date.UTC(2014, 12, 20) - }, - { - name: 'Sierra', - start: Date.UTC(2014, 12, 18), - end: Date.UTC(2014, 12, 20) - }, - ], - dataLabels: [{ - enabled: true, - format: 'Data Label Left', - useHTML: true, - align: 'left', - allowOverlap: true, - }, { - enabled: true, - format: 'Data Label Right', - useHTML: true, - align: 'right', - allowOverlap: true, - }] - }], - }); -} diff --git a/types/highcharts/test/more.ts b/types/highcharts/test/more.ts deleted file mode 100644 index e6e5e9af5c..0000000000 --- a/types/highcharts/test/more.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsMore(Highcharts); diff --git a/types/highcharts/test/no-data-to-display.ts b/types/highcharts/test/no-data-to-display.ts deleted file mode 100644 index 348d2a2ad7..0000000000 --- a/types/highcharts/test/no-data-to-display.ts +++ /dev/null @@ -1,8 +0,0 @@ -function test_NoDataToDisplay() { - const chart = $("#container").highcharts(); - const chartHasData = chart.hasData(); - chart.hideNoData(); - chart.showNoData("Custom no data message"); -} - -HighchartsNoDataToDisplay(Highcharts); diff --git a/types/highcharts/test/offline-exporting.ts b/types/highcharts/test/offline-exporting.ts deleted file mode 100644 index 22bced1b24..0000000000 --- a/types/highcharts/test/offline-exporting.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsExporting(Highcharts); diff --git a/types/highcharts/test/solid-gauge.ts b/types/highcharts/test/solid-gauge.ts deleted file mode 100644 index 3d5c2245dc..0000000000 --- a/types/highcharts/test/solid-gauge.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsSolidGauge(Highcharts); diff --git a/types/highcharts/test/treemap.ts b/types/highcharts/test/treemap.ts deleted file mode 100644 index c7772a4dbf..0000000000 --- a/types/highcharts/test/treemap.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsTreeMap(Highcharts); diff --git a/types/highcharts/test/wordcloud.ts b/types/highcharts/test/wordcloud.ts deleted file mode 100644 index 037d54eb7f..0000000000 --- a/types/highcharts/test/wordcloud.ts +++ /dev/null @@ -1 +0,0 @@ -HighchartsWordcloud(Highcharts); diff --git a/types/highcharts/tsconfig.json b/types/highcharts/tsconfig.json deleted file mode 100644 index e653734a03..0000000000 --- a/types/highcharts/tsconfig.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "compilerOptions": { - "module": "commonjs", - "lib": ["es6", "dom"], - "noImplicitAny": true, - "noImplicitThis": false, - "strictNullChecks": false, - "strictFunctionTypes": true, - "baseUrl": "../", - "typeRoots": ["../"], - "types": [], - "noEmit": true, - "forceConsistentCasingInFileNames": true - }, - "files": [ - "highcharts-more.d.ts", - "highstock.d.ts", - "index.d.ts", - "js/highcharts/index.d.ts", - "modules/boost.d.ts", - "modules/bullet.d.ts", - "modules/drilldown.d.ts", - "modules/exporting.d.ts", - "modules/heatmap.d.ts", - "modules/map/index.d.ts", - "modules/no-data-to-display.d.ts", - "modules/offline-exporting.d.ts", - "modules/solid-gauge.d.ts", - "modules/treemap.d.ts", - "modules/wordcloud.d.ts", - "test/boost.ts", - "test/bullet.ts", - "test/drilldown.ts", - "test/exporting.ts", - "test/heatmap.ts", - "test/highstock.ts", - "test/index.ts", - "test/more.ts", - "test/no-data-to-display.ts", - "test/offline-exporting.ts", - "test/solid-gauge.ts", - "test/treemap.ts", - "test/wordcloud.ts", - "test/datapoint.ts" - ] -} diff --git a/types/highcharts/tslint.json b/types/highcharts/tslint.json deleted file mode 100644 index 113c45ef94..0000000000 --- a/types/highcharts/tslint.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "dtslint/dt.json", - "rules": { - // TODOs - "ban-types": false, - "no-empty-interface": false, - "no-declare-current-package": false, - "no-object-literal-type-assertion": false, - "no-self-import": false, - "no-unnecessary-generics": false, - "no-angle-bracket-type-assertion": false - } -} diff --git a/types/react-highcharts/package.json b/types/react-highcharts/package.json new file mode 100644 index 0000000000..0c78c9b5a5 --- /dev/null +++ b/types/react-highcharts/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "@types/highcharts": "^5.0.44" + } +}