declarations/highcharts/highcharts.d.ts

[](https://www.npmjs.com/package/declarations)

// Type definitions for Highcharts 4.2.5
// Project: http://www.highcharts.com/
// Definitions by: Damiano Gambarotto <http://github.com/damianog>, Dan Lewi Harkestad <http://github.com/baltie>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

interface HighchartsPosition {
    align?: string;
    verticalAlign?: string;
    x?: number;
    y?: number;
}

interface HighchartsDateTimeFormats {
    /**
     * @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 HighchartsAxisEvent extends Event {
    min: number;
    max: number;
}

interface HighchartsAxisLabels {
    /**
     * 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[];
    /**
     * 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.
     * @default function() {return this.value;}
     */
    formatter?: () => 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?: HighchartsCSSObject;
    /**
     * 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;
    /**
     * The Z index for the axis labels.
     * @default 7
     */
    zIndex?: number;
}

interface HighchartsMousePlotEvents {
    click?: (event: Event) => void;
    mouseover?: (event: Event) => void;
    mouseout?: (event: Event) => void;
    mousemove?: (event: Event) => void;
}

/**
 * Text labels for the plot bands
 */
interface HighchartsPlotLabel {
    /**
     * 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?: HighchartsCSSObject;
    /**
     * 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 HighchartsPlotBands {
    /**
     * Border color for the plot band. Also requires borderWidth to be set.
     * @default null
     */
    borderColor?: string | HighchartsGradient;
    /**
     * Border width for the plot band. Also requires borderColor to be set.
     * @default 0
     */
    borderWidth?: number;
    /**
     * The color of the plot band.
     */
    color?: string | HighchartsGradient;
    /**
     * 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?: HighchartsMousePlotEvents;
    /**
     * 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;
    /**
     * Text labels for the plot bands
     */
    label?: HighchartsPlotLabel;
    /**
     * 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 HighchartsPlotLines {
    /**
     * The color of the line.
     */
    color?: string | HighchartsGradient;
    /**
     * 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?: HighchartsMousePlotEvents;
    /**
     * An id used for identifying the plot line in Axis.removePlotLine.
     */
    id?: string;
    /**
     * Text labels for the plot lines
     */
    label?: HighchartsPlotLabel;
    /**
     * 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 HighchartsAxisTitle {
    /**
     * 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;
    /**
     * 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?: HighchartsCSSObject;
    /**
     * The actual text of the axis title. It can contain basic HTML text markup like <b>, <i> and spans with style.
     * @default xAxis: null, yAxis: 'Values'
     */
    text?: string;
    /**
     * 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 HighchartsAxisBreak {
    /**
     * 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 HighchartsAxisOptions {
    /**
     * 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?: HighchartsAxisBreak[];
    /**
     * 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?: string[];
    /**
     * The highest allowed value for automatically computed axis extremes.
     * @since 4.0
     */
    ceiling?: number;
    /**
     * Configure a crosshair that follows either the mouse pointer or the hovered point.
     */
    crosshair?: HighchartsCrosshairObject | 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?: HighchartsDateTimeFormats;
    /**
     * 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 HighchartsAxisObject|Axis} object.
         * @since 2.3
         */
        afterSetExtremes?: (event: HighchartsAxisEvent) => void;
        /**
         * An event fired when a break from this axis occurs on a point.
         * The this keyword refers to the {@link HighchartsAxisObject|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 HighchartsAxisObject|Axis} object.
         * @since 1.2.0
         */
        setExtremes?: (event: HighchartsAxisEvent) => void;
    };
    /**
     * The lowest allowed value for automatically computed axis extremes.
     * @default null
     * @since 4.0
     */
    floor?: number;
    /**
     * 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;
    /**
     * 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?: HighchartsAxisLabels;
    /**
     * The color of the line marking the axis itself.
     * @default '#C0D0E0'.
     */
    lineColor?: string | HighchartsGradient;
    /**
     * 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;
    /**
     * 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;
    /**
     * 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;
    /**
     * 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?: HighchartsPlotBands[];
    /**
     * An array of lines stretching across the plot area, marking a specific value on one of the axes.
     */
    plotLines?: HighchartsPlotLines[];
    /**
     * 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;
    /**
     * 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;
    /**
     * 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;
    /**
     * 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;
    /**
     * 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;
    /**
     * 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;
    /**
     * The axis title, showing next to the axis line.
     */
    title?: HighchartsAxisTitle;
    /**
     * 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?: [[string, [number]]];
    /**
     * Whether axis, including axis title, line, ticks and labels, should be visible.
     * @default true
     * @since 4.1.9
     */
    visible?: boolean;
}

interface HighchartsColorAxisDataClass {
    from?: number;
    to?: number;
    color?: string | HighchartsGradient;
    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 HighchartsColorAxisOptions {
    /**
     * 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?: HighchartsColorAxisDataClass[];
    /**
     * 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 HighchartsAxisObject|Axis} object.
         */
        afterSetExtremes?: (event: HighchartsAxisEvent) => 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 HighchartsAxisObject|Axis} object.
         */
        setExtremes?: (event: HighchartsAxisEvent) => 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?: HighchartsAxisLabels;
    /**
     * The color of the line marking the axis itself.
     * @default '#C0D0E0'
     */
    lineColor?: string | HighchartsGradient;
    /**
     * 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 | HighchartsAnimation;
        /**
         * The color of the marker.
         * @default 'gray'
         */
        color?: string | HighchartsGradient;
    };
    /**
     * 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;
    /**
     * 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;
    /**
     * 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;
    /**
     * 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?: [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;
    /**
     * 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;
    /**
     * 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 HighchartsExtremes {
    /**
     * 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 HighchartsAnimation {
    /**
     * 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 HighchartsAddSeriesEvent extends Event {
    /**
     * The series options that was passed to the addSeries method.
     */
    options: HighchartsChartOptions;
}

interface HighchartsAxisValueOptions extends HighchartsAxisOptions {
    /**
     * The axis value at the clicked spot
     */
    value: number;
}

interface HighchartsChartClickEvent extends Event {
    /**
     * Array containing the axes of each dimension and each axis' value at the clicked spot
     */
    xAxis: HighchartsAxisValueOptions[];
    /**
     * Array containing the axes of each dimension and each axis' value at the clicked spot
     */
    yAxis: HighchartsAxisValueOptions[];
}

interface HighchartsChartDrilldownEvent extends Event {
    /**
     * If a category label was clicked, which index.
     */
    category?: number;
    /**
     * The originating point.
     */
    point?: HighchartsPointObject;
    /**
     * If a category label was clicked, this array holds all points corresponing to the category.
     */
    points?: HighchartsPointObject[];
    /**
     * Options for the new series.
     */
    seriesOptions?: HighchartsIndividualSeriesOptions;
}

interface HighchartsChartSelectionEvent extends Event {
    /**
     * Array containing the axes of each dimension and each axis' min and max values
     */
    xAxis: HighchartsAxisOptions[];
    /**
     * Array containing the axes of each dimension and each axis' min and max values
     */
    yAxis: HighchartsAxisOptions[];
}

interface HighchartsChartEvents {
    /**
     * 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: HighchartsAddSeriesEvent) => 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: HighchartsChartClickEvent) => void;
    /**
     * Fires when a drilldown point is clicked, before the new series is added.
     * @since 3.0.8
     */
    drilldown?: (event: HighchartsChartDrilldownEvent) => void;
    /**
     * Fires when drilling up from a drilldown series.
     * @since 3.0.8
     */
    drillup?: (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 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: HighchartsChartSelectionEvent) => void;
}

interface HighchartsLinearGradient {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
}

interface HighchartsGradient {
    linearGradient?: HighchartsLinearGradient | number[];
    radialGradient?: {
        cx: number; cy: number; r: number;
    };
    stops?: any[][];
    /**
     * Brighten the color
     * @param {number} alpha
     */
    brighten?(alpha: number): HighchartsGradient;
    /**
     * Return the color a specified format
     * @param {string} format
     */
    get?(format: string): string;
    /**
     * The raw input
     */
    raw?: string;
    /**
     * rgba array
     */
    rgba?: number[];
    /**
     * Set the color's opacity to a given alpha value
     * @param  {number} alpha
     * @return {HighchartsGradient}
     */
    setOpacity?(alpha: number): HighchartsGradient;
}

interface HighchartsChartOptions3dFrame {
    /**
     * The color of the panel.
     * @default 'transparent'
     * @since 4.0
     */
    color?: string | HighchartsGradient;
    /**
     * Thickness of the panel.
     * @default 1
     * @since 4.0
     */
    size?: number;
}

interface HighchartsChartOptions3d {
    /**
     * 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?: HighchartsChartOptions3dFrame;
        /**
         * The bottom of the frame around a 3D chart.
         * @since 4.0
         */
        bottom?: HighchartsChartOptions3dFrame;
        /**
         * The side for the frame around a 3D chart.
         * @since 4.0
         */
        side?: HighchartsChartOptions3dFrame;
    };
    /**
     * 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 HighchartsShadow {
    /**
     * @default 'black'
     */
    color?: string | HighchartsGradient;
    /**
     * @default 1
     */
    offsetX?: number;
    /**
     * @default 1
     */
    offsetY?: number;
    /**
     * @default 0.15 / width
     */