jscharting/dist/jscharting.d.ts

JavaScript charting library

/**
* The top level chart configuration API.
* var chart = new JSC.Chart({});
* See Also:
* {@link https://jscharting.com/tutorials/js-chart-bundle/}
*/
export declare interface JSCChartConfig {

    /**
     * Used to enable and disable accessibility or to assign an initial tabIndex for the chart.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-accessibility/}
     * @since 2.8
     */
    tabIndex?: number | string;

    /**
     * Animation settings for all animations such as real-time data updates.
     */
    animation?: JSCAnimationConfig;

    /**
     * The fundamental {@link https://jscharting.com/documentation/#node=Home.API.json.Enums.chartType | chart type} such as horizontal or vertical. You can include additional {@link https://jscharting.com/documentation/#node=Home.API.json.Enums.seriesType | seriesType enum} values for line, bar, area, and other varieties. For example:"horizontal column" creates a bar chart.
     * @remarks This can be set through <a href="Types.series.type">chart.defaultSeries.type</a> as well.
     * See Also:
     * {@link https://jscharting.com/tutorials/types/ | Describes how to define specific chart types.}
     * {@link https://jscharting.com/documentation/#node=Home.API.json.Enums.chartType | A list of chart type settings.}
     * {@link https://jscharting.com/documentation/#node=Home.API.json.Enums.seriesType | A list of series type settings.}
     */
    type?: string;

    /**
     * Default chart options for this chart to use.
     * @remarks Default chart options you can share across multiple charts. Use this to maintain the same look and feel across multiple charts.
     */
    template?: JSCChartConfig;

    /**
     * Default options for all annotations.
     */
    defaultAnnotation?: JSCAnnotationConfig;

    /**
     * Default options for all axes on the chart.
     * @since 2.9
     */
    defaultAxis?: JSCAxisConfig;

    /**
     * Default culture name used when formatting values.
     * @def 'en-US'
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-labels/formatting/}
     */
    defaultCultureName?: string;

    /**
     * Default point options.
     */
    defaultPoint?: JSCPointConfig;

    /**
     * Default series options. Use this property to avoid duplicate settings across multiple series.
     */
    defaultSeries?: JSCSeriesConfig;

    /**
     * Colors assigned to each series sequentially. Can be a {@link https://jscharting.com/documentation/#node=Home.API.json.Enums.palette | palette name}, array of colors, or a smart palette options object.
     */
    palette?: string | JSCSmartPaletteConfig | JSCColorConfig[];

    /**
     * Set true to apply a default list of hatch patterns to each series of points, or an array of specific {@link https://jscharting.com/documentation/#node=Home.API.json.Enums.hatchStyle | hatchStyles}.
     * @since 2.0
     */
    hatchPalette?: boolean | string[];

    /**
     * Width of the chart in pixels or percentage of container. When not specified, chart will fill container size.
     * @def 640
     */
    width?: number | string;

    /**
     * Height of the chart in pixels or percentage of container.
     */
    height?: number | string;

    /**
     * An array of text annotations placed anywhere on the chart.
     */
    annotations?: JSCAnnotationConfig[];

    /**
     * Visual properties of the background box surrounding the chart image.
     */
    box?: Box;

    /**
     * Default box properties that apply to virtually all box visuals on the chart such as annotations, legend, etc. Most boxes on the chart use the boxVisible:false setting, which can be globally reverted through this property.
     * @since 2.5
     */
    defaultBox?: DefaultBox;

    /**
     * Specifies the margin between the chart visual bounds and image edges.
     * @remarks Use negative margins to clip the chart visual if needed.
     */
    margin?: JSCMarginConfig;

    /**
     * Enables or disables warning messages in the browser console. Disabled by default.
     */
    debug?: boolean;

    /**
     * The main X axis or array of X axes used by this chart.
     * @remarks Additional X axes will sync their scale ranges with the main (first) X axis by default.
     */
    xAxis?: JSCAxisConfig | JSCAxisConfig[];

    /**
     * The main Y axis or array of Y axes used by this chart.
     * @remarks Additional axes will sync their scale ranges with the main (first) Y axis by default.
     */
    yAxis?: JSCAxisConfig[] | JSCAxisConfig;

    /**
     * The Z axis options.
     * @remarks Use zAxis_scale_type: "stacked" to make column-based series overlap points with the same x value rather than cluster in groups. Useful with Gantt charts.
     */
    zAxis?: JSCAxisConfig;

    /**
     * Legend options.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-legend/}
     */
    legend?: JSCLegendConfig;

    /**
     * Chart title box options.
     */
    title?: JSCTitleBoxConfig;

    /**
     * Chart area related settings.
     */
    chartArea?: JSCChartAreaConfig;

    /**
     * An array of data series visualized on the chart.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-data/}
     */
    series?: JSCSeriesConfig[];

    /**
     * A csv file name, csv text content, or values separated into arrays of rows and column. Used mainly with the calendar chart type but can also be used to populate a series of any other chart type automatically. Csv data must be in [date, value] format for use with calendar type.
     * @since 2.6
     */
    data?: string | [(string | number | Date)][];

    /**
     * Grid options that enable switching between chart and grid view for the charted data.
     * @since 2.8
     */
    grid?: JSCGridConfig;

    /**
     * Chart and chart area specific events.
     */
    events?: ChartEvents;

    /**
     * Point tooltip options.
     */
    defaultTooltip?: JSCTooltipConfig;

    /**
     * Export and Print button toolbar settings.
     */
    toolbar?: JSCToolbarConfig;

    /**
     * A shortcut to enable export menu items visibility. It maps to the toolbar.items.export.visible property.
     * @since 3.0
     */
    export?: boolean;

    /**
     * Specifies which axis has interactive zooming enabled.
     */
    axisToZoom?: ("x" | "y" | "xy" | "none");

    /**
     * Map chart type related settings.
     * See Also:
     * {@link https://jscharting.com/tutorials/types/js-map-chart/}
     * @since 2.1
     */
    mapping?: Mapping;

    /**
     * Encompasses options for the calendar chart type.
     * @since 2.6
     */
    calendar?: JSCCalendarConfig;

    /**
     * Default calendar highlight options applied to all other highlights on the chart.
     * @since 2.6
     */
    defaultHighlight?: JSCHighlightConfig;

    /**
     * An array of calendar highlight options used to emphasize groupings of points in a calendar chart.
     * See Also:
     * {@link https://jscharting.com/samples/Javascript_CalendarWeekStart_Chart.htm}
     * @since 2.6
     */
    highlights?: JSCHighlightConfig[];

    /**
     * Several strings used on the chart.
     */
    languageStrings?: JSCLanguageStringsConfig;

    /**
     * Manually specifies the location where the jscharting.js and its resources are located. It is not necessary to set if a script tag referencing jscharting.js exists on a page.
     * @remarks This URL can be set globally using <a href="iObject.JSC.defaults()">JSC.defaults()</a> and is useful when using jscharting.js as a module.
     * @since 2.9
     */
    baseUrl?: string;

    /**
     * Set to true to overlap the JSCharting branding at the bottom left of the chart. By default, branded charts add 20px bottom margin to the chart. This prevents the margin from being added.
     * @since 3.4
     */
    overlapBranding?: boolean;
    [any: string]: any;
}

/**
* Encapsulates a box with a label that can be placed arbitrarily on the chart.
*/
export declare interface JSCAnnotationConfig {

    /**
     * Used to enable and disable accessibility or to assign an initial tabIndex for the chart item.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-accessibility/}
     * @since 2.8
     */
    tabIndex?: number | string;

    /**
     * The ID of this annotation. Used to easily reference the annotation with chart.annotations(ID) api.
     * @since 2.5
     */
    id?: string;

    /**
     * Label displayed inside the annotation.
     */
    label?: JSCLabelConfig;

    /**
     * Alignment or pixel position in or around the chartArea. The position can be prefixed with "inside" meaning inside the chartArea.
     * 
     * Alignment based position can be specified with two alignment values where their order is significant. First value specifies the side to align to such as top, right, bottom, left. The second value is the alignment on that side. For example, 'top left' will place the annotation on top of the chart and align left whereas 'left top' places it on the left side and aligns to top. Inside the chartArea these two settings will have the same meaning.
     * 
     * Pixel position of the annotation where 0,0 is the top left corner of the chart image. Prefixing this setting with "inside " like: "inside 10,10" will make the 0,0 position refer to the top left corner of the chartArea. Items will stack  when using the same positions such as "inside top left" for multiple items.
     * 
     * @since 2.6
     */
    position?: string;

    /**
     * Background fill of this annotation.
     */
    fill?: JSCFillConfig;

    /**
     * Annotation box outline settings.
     */
    outline?: JSCOutlineConfig;

    /**
     * Describes the type or each individual corner of the box.
     * @since 2.0
     */
    corners?: any | [("square" | "cut" | "round"), ("square" | "cut" | "round"), ("square" | "cut" | "round"), ("square" | "cut" | "round")] | string;

    /**
     * Enables or disables the annotation shadow.
     * @since 2.0
     */
    shadow?: boolean;

    /**
     * Opacity from 0 to 1, where 0 is transparent and 1 is solid (default).
     * @since 1.4
     * @max 1
     */
    opacity?: number;

    /**
     * Whether the annotation box is visible. Setting this property to false leaves only the annotation label visible. This property offers a shortcut to hide the annotation background box with one setting.
     * @def true
     */
    boxVisible?: boolean;

    /**
     * Annotation box corner radius.
     * @def 5
     * @max 50
     */
    radius?: number;

    /**
     * Space between box edges and the annotation label in pixels.
     * @since 2.0
     */
    padding?: JSCMarginConfig;

    /**
     * Annotation width (automatic if not defined)
     * @example 120
     */
    width?: number;

    /**
     * Annotation height (automatic if not defined)
     * @example 60
     */
    height?: number;

    /**
     * Annotation margin.
     * @since 2.0
     */
    margin?: JSCMarginConfig;

    /**
     * When true, the annotation and label will be rendered using HTML.
     * @since 2.0
     */
    asHTML?: boolean;
    [any: string]: any;
}

/**
* Represents a chart axis.
*/
export declare interface JSCAxisConfig {

    /**
     * Used to enable and disable accessibility or to assign an initial tabIndex for the chart item.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-accessibility/}
     * @since 2.8
     */
    tabIndex?: number | string;

    /**
     * The ID of this axis. Used to reference the axis programmatically at run-time.
     */
    id?: string;

    /**
     * Main axis label configuration.
     * @remarks This label's text is also used to describe data associated with this axis. For example, if the Y axis label reads "cost", the tooltip for a data point may show "cost: 123" based on this label.
     */
    label?: JSCLabelConfig;

    /**
     * The possible rotation of tick labels in degrees used when labels overlap without rotation.
     * @remarks Applies to horizontal axes. Setting a value of 0 will disable angled ticks.
     * @since 2.0
     */
    autoRotate?: number;

    /**
     * Fill used on the area between every other two grid lines.
     */
    alternateGridFill?: JSCFillConfig;

    /**
     * Axis orientation.
     */
    orientation?: ("none" | "left" | "right" | "top" | "bottom" | "topLeft" | "topleft" | "topRight" | "topright" | "bottomRight" | "bottomright" | "bottomLeft" | "bottomleft" | "opposite");

    /**
     * The default settings used by all major axis ticks on the axis.
     */
    defaultTick?: JSCAxisTickConfig;

    /**
     * The default settings used by all minor axis ticks on the axis.
     */
    defaultMinorTick?: JSCAxisTickConfig;

    /**
     * The default settings used by ticks that are hidden due to overlaps.
     * @since 3.1
     */
    defaultHiddenTick?: JSCAxisTickConfig;

    /**
     * Default setting applied to all axis markers on this axis.
     * See Also:
     * {@link https://jscharting.com/samples/Javascript_LegendAxisMarkers_Chart.htm}
     * @since 2.1
     */
    defaultMarker?: JSCAxisMarkerConfig;

    /**
     * A custom tick representing the axis origin. For example, on numeric axes the default origin is the value 0.
     * @remarks To disable the originTick, set originTick.enabled=false
     * @since 2.0
     */
    originTick?: JSCAxisTickConfig;

    /**
     * An array of custom ticks or tick values added to this axis.
     * @since 1.5
     */
    customTicks?: (JSCAxisTickConfig[] | number[]);

    /**
     * An array of string category names used on this axis instead of numeric or date values. Point x or name values can be omitted when categories are defined.
     * @remarks If point x or name values are not specified, each category name will be assigned to each data point x value sequentially. If point strings x values or names are defined, the axis category array will define their sort order. If numeric point x values are defined, they represent the index of the axis category array. Point objects the chart returns through the FP API will have point.name properties set to an X axis category name if used.
     * @since 3.3
     */
    categories?: string[];

    /**
     * Styling options for the axis line.
     */
    line?: Line;

    /**
     * Axis markers drawn on this axis.
     */
    markers?: JSCAxisMarkerConfig[];

    /**
     * Format string used for values on this axis. Values associated with this axis including axis ticks, point labels, among others will inherit this format by default.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-labels/formatting/}
     * {@link https://jscharting.com/samples/Javascript_AxisFormatting_Chart.htm}
     */
    formatString?: string;

    /**
     * Culture name used for formatting values on the axis.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-labels/formatting/}
     */
    cultureName?: string;

    /**
     * A number between 0 and 1 that sets the spacing percentage between column or bar groups. This setting applies when used with the X axis. The default spacingPercentage value is 0.2.
     * @max 1
     */
    spacingPercentage?: number;

    /**
     * Pixel width of columns stemming from this axis. This setting applies when used with the X axis.
     */
    staticColumnWidth?: number;

    /**
     * Scale related settings such as intervals, range and the like.
     * @since 1.1
     */
    scale?: Scale;

    /**
     * Whether the axis is visible.
     * @since 1.5
     */
    visible?: boolean;

    /**
     * When true and used with circular or radial charts, grid lines will render on top of data.
     * @since 2.5
     */
    onTop?: boolean;

    /**
     * Specifies the distance the of the axis from the related chartArea. A value of 0 will force the axis to touch the chart area even if it overlaps other axes. Negative values move the axis inside the chart area.
     * @since 2.8
     */
    caOffset?: number;

    /**
     * When set to 'hidden' the tick labels get clipped instead of affecting layout of the chart.
     * @remarks This is useful with live charts to prevent chartArea resizing due to axis tick labels.
     * @since 2.0
     */
    overflow?: string;

    /**
     * An axis tick that follows the mouse cursor and invokes combined tooltips or if x crosshair is combined with Y axis crosshair, the Y axis will show multiple crosshairs for all point values at the given x position.
     * @remarks Also used as colorBar visual that indicates the value of the hovered element
     * @since 2.7
     */
    crosshair?: JSCAxisTickConfig;
    [any: string]: any;
}

/**
* Options for adding gaps to the axis line at tick positions. This is an aesthetic feature that gives gauge types an improved visual quality in some cases. It can also be used with smartPalette line fill and represent ranges defined by the palette.
* @since 2.5
*/
export declare interface JSCLineBreaksConfig {

    /**
     * A numeric value between 0-.1 that controls the gap size at break positions.
     * @def 0.01
     */
    gap?: number;

    /**
     * When true,  gaps and fills are reversed.
     */
    invert?: boolean;

    /**
     * When true,  gaps and fills are reversed.
     */
    custom?: number[];
    [any: string]: any;
}

/**
* Represents an axis tick that encapsulates the tick label, gridLine, line styling settings.
* See Also:
* {@link https://jscharting.com/tutorials/js-chart-axis/ticks-markers/}
*/
export declare interface JSCAxisTickConfig {

    /**
     * Line drawn on the chart area at the axis tick position.
     * @remarks Setting gridLine.visible='auto' will hide the grid lines if there are few gridlines used.
     * @since 2.5
     */
    gridLine?: JSCLineConfig;

    /**
     * The tick line of this AxisTick. The line.length property controls the length of this tick mark. With range ticks it controls the range shape (curly braces or arrows).
     * @remarks Setting line.visible = false will hide the range tick connector lines as well.
     */
    line?: JSCLineConfig;

    /**
     * Background fill of the axisTick label.
     * @since 2.7
     */
    fill?: JSCFillConfig;

    /**
     * AxisTick label box outline settings.
     * @since 2.7
     */
    outline?: JSCOutlineConfig;

    /**
     * Describes the type or each individual corner of the axis tick label box. Visible automatically when used with crosshairs. Set a fill or outline to use corners with regular axis ticks.
     * @since 2.7
     */
    corners?: any | [("square" | "cut" | "round"), ("square" | "cut" | "round"), ("square" | "cut" | "round"), ("square" | "cut" | "round")] | string;

    /**
     * Axis tick label box corner radius.
     * @def 3
     * @since 2.7
     */
    radius?: number;

    /**
     * Axis tick label.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-labels/token-reference/ | Label Token Reference}
     * {@link https://jscharting.com/samples/Javascript_LabelTokens_Chart.htm}
     */
    label?: JSCLabelConfig;

    /**
     * (Custom Ticks) The axis value this tick represents.
     * @since 1.5
     */
    value?: number | string | Date | [(number | string | Date), (number | string | Date)] | Value;

    /**
     * Whether the axis tick(s) is enabled and rendered. Also used with defaultTick to disable automatically generated ticks.
     * @since 1.5
     */
    enabled?: boolean;

    /**
     * Whether the axis range is adjusted to include this tick.
     * See Also:
     * {@link https://jscharting.com/samples/Javascript_AxisMarkerGoal_Chart.htm}
     * @since 1.5
     */
    includeInScale?: boolean;

    /**
     * Space between the tick label and tick mark.
     * @since 2.0
     */
    padding?: number;

    /**
     * Can be used with regular or circular outer axes to place ticks inside or outside the related chart area.
     * @since 2.5
     */
    placement?: ("auto" | "inside" | "outside");

    /**
     * Controls the visualization when the tick has a range value.
     * @def auto
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-axis/range-ticks/}
     * @since 2.8
     */
    rangeMode?: ("auto" | "curly" | "measure");

    /**
     * Event functions fired when for specific mouse interactions with this axis tick.
     * @since 3.0
     */
    events?: AxisTickEvents;

    /**
     * When used with point.x/yAxisTick, this property can be used to disable the default series highlighting on hover behavior. Set this option to false or 'none' to disable.
     * @remarks The default action when hovering a point axis tick is to mute other series to highlight the series of this point.
     * @since 3.0
     */
    hoverAction?: boolean | string;

    /**
     * When true and used with circular or radial charts, all tick visuals will render on top of data.
     * @since 2.5
     */
    onTop?: boolean;

    /**
     * With multiple X or Y axes, this property can be used with point.(x/y)AxisTick to specify the ID of the axis the point axis tick should be added to.
     * @since 2.9
     */
    axisId?: string;
    [any: string]: any;
}

/**
* Defines styles and positions used to mark a specified section or position on an axis.
* See Also:
* {@link https://jscharting.com/samples/Javascript_AxisMarkersInFront_Chart.htm}
*/
export declare interface JSCAxisMarkerConfig {

    /**
     * The axis marker ID
     */
    id?: string;

    /**
     * Axis marker value.
     */
    value?: number | string | any | [(number | Date | string), (number | Date | string)];

    /**
     * Whether the axis range is adjusted to always include this marker.
     * @since 1.5
     */
    includeInScale?: boolean;

    /**
     * Axis marker color.
     */
    color?: JSCFillConfig;

    /**
     * Single value axis marker line options.
     */
    line?: JSCLineConfig;

    /**
     * When true, the axis marker will appear in front of the data.
     */
    onTop?: boolean;

    /**
     * Opacity from 0 to 1, where 0 is transparent and 1 is solid (default).
     * @def 1
     * @since 1.4
     * @max 1
     */
    opacity?: number;

    /**
     * Label object drawn next to the axis marker.
     */
    label?: JSCLabelConfig;

    /**
     * This marker's legend entry settings.
     * See Also:
     * {@link https://jscharting.com/samples/Javascript_LegendAxisMarkers_Chart.htm}
     * @since 2.1
     */
    legendEntry?: JSCLegendEntryConfig;
    [any: string]: any;
}
/**
* Represents a color that can be set in several ways. Possible options are:
* The color name: "red"
* Hex color value: "#FF0000"
* RGB values syntax: rgb(20,20,20)
* RGBA values syntax: rgba(20,20,20,.5)
* Array of [color, opacity]: ["blue",.5]
*/
type JSCColorConfig = string | [any, number];

/**
* Represents a color with default shading effect disabled, a simple array based linear gradient fill, or complex linear gradient fill with stops.
*/
export declare type JSCFillConfig = JSCColorConfig | ([JSCColorConfig, (boolean | number)] | [JSCColorConfig, JSCColorConfig, number]) | JSCFillConfig_object;
export declare interface JSCFillConfig_object {

    /**
     * Gradient angle.
     */
    angle?: number;

    /**
     * Defines gradient color stops for this fill.
     */
    stops?: [number, JSCColorConfig][];

    /**
     * URL of an image that fills the area.
     */
    image?: string;
    [any: string]: any;
}

/**
* Describes a hatch pattern fill.
*/
export declare interface JSCHatchConfig {

    /**
     * Hatch pattern name
     */
    style?: string;

    /**
     * Color of the hatch pattern
     */
    color?: JSCColorConfig;
    [any: string]: any;
}

/**
* Percent complete values and styling options
* @since 2.0
*/
export declare type JSCCompleteConfig = JSCCompleteConfig_object | number;
export declare interface JSCCompleteConfig_object {

    /**
     * Percent of (Y) complete.
     * @remarks Applies to data point visuals that draw a rectangle.
     */
    y?: number | [number, number];

    /**
     * Percent of (X) complete
     * @since 2.0
     */
    x?: number | [number, number];

    /**
     * Fill options for the area.
     */
    fill?: JSCFillConfig;

    /**
     * Hatch styling for the area.
     */
    hatch?: JSCHatchConfig;
    [any: string]: any;
}

/**
* A color range specifying a value range and color. It is used with {@link https://jscharting.com/documentation/#node=Home.API.json.Types.smartPalette | smartPalette} objects.
* See Also:
* {@link https://jscharting.com/samples/Javascript_SmartPaletteRanges_Chart.htm}
* {@link https://jscharting.com/tutorials/js-chart-gradient-palette/}
* @since 2.1
*/
export declare interface JSCColorRangeConfig {

    /**
     * Range value.
     */
    value?: number | [(number | string), (number | string)];

    /**
     * The color associated with this color range.
     */
    color?: JSCColorConfig;

    /**
     * The legend entry associated with this range.
     */
    legendEntry?: JSCLegendEntryConfig;
    [any: string]: any;
}

/**
* Takes an object which determines the range values automatically, an array of ranges, or an array of numbers
*/
export declare type JSCSpRangeConfig = JSCSpRangeConfig_object | (JSCColorRangeConfig[] | number[]);
export declare interface JSCSpRangeConfig_object {

    /**
     * The starting value of the ranges.
     */
    min?: number;

    /**
     * The ending or max value to generate ranges for.
     */
    max?: number;

    /**
     * Interval of the ranges generated.
     */
    interval?: number;
    [any: string]: any;
}

/**
* A smartPalette defines a gradient range of colors and how point values are mapped to it.
* See Also:
* {@link https://jscharting.com/samples/Javascript_SmartPaletteGallery_Chart.htm}
* {@link https://jscharting.com/tutorials/js-chart-gradient-palette/}
* @since 2.1
*/
export declare interface JSCSmartPaletteConfig {

    /**
     * The smartPalette ID.
     * @since 2.5
     */
    id?: string;

    /**
     * Specifies a token expression evaluated for each point that maps to the colors.
     */
    pointValue?: string | ((point: Point) => any);

    /**
     * An array of value ranges and the associated colors.
     */
    ranges?: JSCSpRangeConfig;

    /**
     * Default settings that are applied to each range. This can be used to specify a single legend entry config for all ranges.
     */
    defaultRange?: JSCColorRangeConfig;

    /**
     * An array of values and colors like linear gradient stops.
     */
    stops?: ([(number | string), JSCColorConfig, number, number] | [(number | string), JSCColorConfig, number] | [(number | string), JSCColorConfig])[];

    /**
     * .
     */
    colors?: JSCColorConfig[];

    /**
     * Option can be used with colors array to explicitly define the value range those colors should apply to.
     * @since 2.6
     */
    colorsValueRange?: [(number | string), (number | string)];

    /**
     * Indicates whether the color stops are reversed. If so, the values will also invert.
     */
    invert?: boolean;

    /**
     * A gradient range of colors that appears in the legend when used with a smartPalette set on the chart level palette property
     * @since 2.1
     */
    colorBar?: ColorBar;
    [any: string]: any;
}

/**
* Represents a label containing text, font styling, color, and other options.
*/
export declare interface JSCLabelConfig {

    /**
     * The label text.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-labels/token-reference/ | Label Token Reference}
     * {@link https://jscharting.com/samples/Javascript_LabelTokens_Chart.htm}
     */
    text?: string | ((arg: any) => string);

    /**
     * label color
     */
    color?: JSCColorConfig;

    /**
     * Opacity of this label. 0 = transparent, 1 = solid.
     * @since 3.1
     */
    opacity?: number;

    /**
     * Label outline settings.
     * @since 3.0
     */
    outline?: JSCLabelOutlineConfig;

    /**
     * Whether the label is visible.
     * @def true
     */
    visible?: boolean;

    /**
     * Horizontal alignment of this label.
     */
    align?: ("center" | "left" | "right");

    /**
     * Vertical alignment of this label.
     */
    verticalAlign?: ("top" | "middle" | "bottom");

    /**
     * Label offset from the initial position in pixels.
     */
    offset?: string | number;

    /**
     * Label style options.
     */
    style?: JSCLabelStyleConfig;

    /**
     * Label rotation in degrees.
     */
    rotate?: number;

    /**
     * Margin of this label.
     * @since 2.0
     */
    margin?: JSCMarginConfig;

    /**
     * Used to disable automatic label wrapping.
     * @remarks If the string contains &lt;br&gt; tags, automatic wrapping is disabled as well.
     * @since 2.6
     */
    autoWrap?: boolean;

    /**
     * Set to "ellipsis" in combination with autoWrap:false and width to limit the width of this label.
     * @since 3.4
     */
    textOverflow?: string;

    /**
     * Max width of this label.
     * @since 2.9
     */
    maxWidth?: number;

    /**
     * When animation options are defined at the label level, it can be used to control the string character animation. To disable it for example.
     * @since 3.2
     */
    animation?: JSCAnimationConfig;
    [any: string]: any;
}

/**
* Represents label outline settings
*/
export declare interface JSCLabelOutlineConfig {

    /**
     * Outline color.
     */
    color?: JSCColorConfig;

    /**
     * Outline width
     */
    width?: number;
    [any: string]: any;
}

/**
* Represents outline settings
*/
export declare type JSCOutlineConfig = JSCOutlineConfig_object | string;
export declare interface JSCOutlineConfig_object {

    /**
     * Outline color.
     */
    color?: JSCColorConfig;

    /**
     * Opacity from 0 to 1, where 0 is transparent and 1 is solid (default).
     * @since 3.4
     * @max 1
     */
    opacity?: number;

    /**
     * Line dash style
     * @since 1.4
     */
    dashStyle?: ("Solid" | "solid" | "ShortDash" | "shortdash" | "ShortDot" | "shortdot" | "ShortDashDot" | "shortdashdot" | "ShortDashDotDot" | "shortdashdotdot" | "Dot" | "dot" | "Dash" | "dash" | "LongDash" | "longdash" | "DashDot" | "dashdot" | "DashDotDot" | "dashdotdot" | "LongDashDot" | "longdashdot" | "LongDashDotDot" | "longdashdotdot");

    /**
     * Outline width
     */
    width?: number;

    /**
     * Specifies whether the line is visible.
     * @since 2.5
     */
    visible?: boolean;
    [any: string]: any;
}

/**
* Defines styling used to draw a line or curve.
*/
export declare interface JSCLineConfig {

    /**
     * Line color.
     */
    color?: JSCColorConfig;

    /**
     * Line width in pixels.
     * @example "5px" || 5
     */
    width?: number | string;

    /**
     * Line dash style
     */
    dashStyle?: ("Solid" | "solid" | "ShortDash" | "shortdash" | "ShortDot" | "shortdot" | "ShortDashDot" | "shortdashdot" | "ShortDashDotDot" | "shortdashdotdot" | "Dot" | "dot" | "Dash" | "dash" | "LongDash" | "longdash" | "DashDot" | "dashdot" | "DashDotDot" | "dashdotdot" | "LongDashDot" | "longdashdot" | "LongDashDotDot" | "longdashdotdot");

    /**
     * Length of the line when applicable.
     */
    length?: number;

    /**
     * Opacity of this line. 0 = transparent, 1 = solid.
     * @since 2.0
     */
    opacity?: number;

    /**
     * Specifies whether the line is visible.
     * @since 2.5
     */
    visible?: boolean;

    /**
     * Line cap options that provide control over line cap shapes such as arrows. The 'arrow' line cap type is a specialized shape that is available in addition to other shape types.
     * @since 2.8
     */
    caps?: JSCLineCapsConfig;
    [any: string]: any;
}

/**
* Represents an area on which series and elements are plotted.
*/
export declare interface JSCChartAreaConfig {

    /**
     * Used to enable and disable accessibility or to assign an initial tabIndex for the chart item.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-accessibility/}
     * @since 2.8
     */
    tabIndex?: number | string;

    /**
     * The fundamental Chart Type such as horizontal or vertical. See {@link https://jscharting.com/documentation/#node=Home.API.json.Enums.seriesType | seriesType enum} for line, bar, area varieties. This can be set through {@link https://jscharting.com/documentation/#node=Home.API.json.Types.series.type | chart.defaultSeries.type}
     * See Also:
     * {@link https://jscharting.com/tutorials/types/ | Describes how to define specific chart types.}
     * @since 2.0
     */
    type?: string;

    /**
     * Fill settings used to fill the interior of this chart area.
     */
    fill?: JSCFillConfig;

    /**
     * Whether the annotation box is visible. Setting this property to false leaves only the annotation label visible. This property offers a shortcut to hide the annotation background box with one setting.
     * @def true
     * @since 2.0
     */
    boxVisible?: boolean;

    /**
     * Opacity from 0 to 1, where 0 is transparent and 1 is solid (default).
     * @def 1
     * @since 1.4
     * @max 1
     */
    opacity?: number;

    /**
     * Chart area box outline settings.
     */
    outline?: JSCOutlineConfig;

    /**
     * Enables or disables the chart area shadow.
     * @since 2.0
     */
    shadow?: boolean;

    /**
     * Controls whether series visuals are clipped when they go outside the chartArea rectangle.
     * @since 2.6
     */
    clipContent?: boolean;

    /**
     * 
     */
    series?: JSCSeriesConfig[];

    /**
     * The chart area's Y axis or array of Y axes.
     */
    yAxis?: JSCAxisConfig | JSCAxisConfig[];

    /**
     * The chart area's Y axis or array of Y axes.
     * @since 2.0
     */
    xAxis?: JSCAxisConfig | JSCAxisConfig[];

    /**
     * ChartArea's title box options.
     * @since 2.0
     */
    title?: JSCTitleBoxConfig;
    [any: string]: any;
}

/**
* Represents a series of data points and series related options.
*/
export declare interface JSCSeriesConfig {

    /**
     * Used to enable and disable accessibility or to assign an initial tabIndex for the chart item.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-accessibility/}
     * @since 2.8
     */
    tabIndex?: number | string;

    /**
     * Series object ID.
     */
    id?: string;

    /**
     * Specifies the series type or a chart type such as pie, radar, or gauge.
     * See Also:
     * {@link https://jscharting.com/tutorials/types/ | Describes how to define specific chart types.}
     * @since 1.1
     */
    type?: string;

    /**
     * Specifies the initial animation of the series.
     */
    animation?: JSCAnimationConfig;

    /**
     * Name of this series.
     */
    name?: string;

    /**
     * Point options applied to all points in this series.
     */
    defaultPoint?: JSCPointConfig;

    /**
     * Point options applied to all leaf points within this hierarchy. A leaf point is a hierarchical point that has no child points.
     * @remarks This can be useful to adjust all vertically stacked leaf points at the same time.
     * @since 3.4
     */
    defaultLeafPoint?: JSCPointConfig;

    /**
     * Point options applied to the first point in this series.
     * @since 2.9
     */
    firstPoint?: JSCPointConfig;

    /**
     * Point options applied to the last point in this series.
     * @since 2.9
     */
    lastPoint?: JSCPointConfig;

    /**
     * An array of points or point data object associated with this series.
     */
    points?: JSCPointConfig[] | Points;

    /**
     * Series attributes  containing additional metadata as key value pairs that can be referenced in label text or other series related properties using tokens such as %attributeKey.
     * @since 2.5
     */
    attributes?: [string, (string | number | Date)][] | Attributes;

    /**
     * The default series color. Same as the defaultPoint.Color setting.
     */
    color?: JSCColorConfig;

    /**
     * The fill of series area used with area series type.
     * @since 2.9
     */
    fill?: JSCFillConfig;

    /**
     * Specifies the amount of opacity of this series from 0 to 1, where 0 is transparent and 1 is solid.
     * @since 1.4
     * @max 1
     */
    opacity?: number;

    /**
     * Palette used for elements in this series.
     */
    palette?: string | JSCSmartPaletteConfig | JSCColorConfig[];

    /**
     * Indicates whether a default palette should be used with a boolean setting, or an array of hatchStyles that define the palette.
     * @since 2.0
     */
    hatchPalette?: boolean | string[];

    /**
     * Line options used when the series type property is a line or spline.
     */
    line?: JSCLineConfig;

    /**
     * Specifies the behavior of the series if empty points are included. Empty points have y values set to null.
     */
    emptyPointMode?: ("default" | "ignore" | "treatAsZero" | "treataszero");

    /**
     * Specifies whether point selection is enabled, the pointSelectionMode, or the maximum number of points that can be selected at a time. Setting true boolean is same as "auto" selection mode.
     * @remarks When designing charts for mobile usage where CTRL keys are not available, specific selection modes like "single" or "multiple" can be used for consistent selection behavior across devices.
     * @since 3.0
     */
    pointSelection?: boolean | string | PointSelection;

    /**
     * Specifies mouse tracking options for this series. When using crosshairs and combined tooltips, disabling mouse tracking will exclude points of this series from being highlighted (Point.focusGlow) by the crosshair or included in combined tooltips.
     * @remarks Disabling mouse tracking can improve client-side performance.
     */
    mouseTracking?: MouseTracking | boolean;

    /**
     * Legend entry settings associated with this series.
     */
    legendEntry?: JSCLegendEntryConfig;

    /**
     * Specifies the X axis associated with this series, or a new axis used only by this series.
     */
    xAxis?: number | string | JSCAxisConfig;

    /**
     * Specifies the Y axis associated with this series, or a new axis used only by this series.
     */
    yAxis?: number | string | JSCAxisConfig;

    /**
     * Specifies the number of pixels by which pie slices are exploded (offset) from the pie center when points are in the selected state.
     * See Also:
     * {@link https://jscharting.com/documentation/#node=Home.API.json.Types.Point.selected | Point selected state option.}
     */
    explodeOffset?: number;

    /**
     * Specifies the series states
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-interactivity/states/}
     */
    states?: States;

    /**
     * Event functions fired for specific mouse interactions with this series.
     */
    events?: SeriesEvents;

    /**
     * Indicates whether the series is in the mute state.
     * @since 3.0
     */
    muted?: boolean;

    /**
     * Indicates whether the series is in the select state.
     * @since 3.0
     */
    selected?: boolean;

    /**
     * The starting angle or arc of pie, gauge, or radar series type.
     * @since 1.1
     */
    angle?: JSCAngleArcConfig;

    /**
     * Styling and position info for the series when it is a pie, gauge or radar series type
     * @since 1.1
     */
    shape?: JSCShapeConfig;

    /**
     * Specifies the minimum and maximum sizes of points. The minimum size can be set to limit bar height, and both can be used to specify bubble size limits.
     * @since 1.1
     */
    size?: Size | [(number | string), (number | string)];

    /**
     * Specifies a map by code, a file name or a map features defined in a map file that is specified in baseLayers
     * See Also:
     * {@link https://jscharting.com/tutorials/types/js-map-chart/maps-mapcodes/}
     * {@link https://jscharting.com/tutorials/types/js-map-chart/}
     * @since 2.1
     */
    map?: string | JSCMapFileDataConfig;

    /**
     * Indicates whether the series is visible.
     * @since 2.6
     */
    visible?: boolean;
    [any: string]: any;
}

/**
* Represents a data point and related options.
*/
export declare type JSCPointConfig = ([number, (number | [(number | Date), (number | Date)])] | [Date, (number | [(number | Date), (number | Date)])] | [string, (number | [(number | Date), (number | Date)])] | [(string | number), (string | number), number] | [(Date | string), number, number, number, number]) | number | JSCPointConfig_object;
export declare interface JSCPointConfig_object {

    /**
     * Point object ID.
     */
    id?: string;

    /**
     * Identifies a single or multiple parent points by ID. If used as an array of pointConnector objects, each connector line can be styled individually. The point.connectorLine properties are the defaults for these lines.
     * @remarks This property allows defining nested hierarchies of points currently used with treemap data.
     * @since 3.3
     * @inline true
     */
    parent?: string | JSCPointConnectorConfig | JSCPointConnectorConfig[];

    /**
     * The default parent point connector line styling.
     * @since 3.3
     */
    connectorLine?: JSCLineConfig;

    /**
     * Organizational layout applied to children of this point if all its children are leaf points. A leaf point is a point in the hierarchy that has no children.
     * @remarks Set "vertical" to stack points vertically when used with the organizational chart type and the default down orientation.
     * @since 3.4
     */
    leafPointLayout?: string;

    /**
     * Point options applied to all leaf points that are children of this point. A leaf point is a point in the hierarchy that has no children.
     * @remarks This can be useful to adjust this point's child leaf points at the same time.
     * @since 3.4
     */
    defaultLeafPoint?: JSCPointConfig;

    /**
     * Specifies only the point visual fill color and does not affect other point related color.
     * @since 2.9
     */
    fill?: JSCColorConfig;

    /**
     * This point's color.
     */
    color?: JSCColorConfig;

    /**
     * The point's alternate color used with candlestick and OHLC bars when the close price is lower than the open price. Also used with circular columns to define the alternate color when the column overlaps itself.
     * @remarks Using the setting 'currentColor' with circular bars disables the color changes. Other color adjustment keywords are supported as well.
     * @since 3.0
     */
    altColor?: JSCColorConfig;

    /**
     * Point's outline options. Applies to marker, bar, or pie series types.
     */
    outline?: JSCOutlineConfig;

    /**
     * The hatch style to fill the point visual.
     * @def none
     * @since 2.0
     */
    hatch?: JSCHatchConfig;

    /**
     * Numeric corner radius of column series type or "auto".
     * @def auto
     * @since 3.1
     */
    radius?: string | number;

    /**
     * A glow effect when the point is hovered or highlighted by combined tooltip and crosshair
     * @since 2.7
     */
    focusGlow?: FocusGlow | boolean;

    /**
     * Opacity from 0 to 1, where 0 is transparent and 1 is solid.
     * @def 1
     * @since 1.4
     * @max 1
     */
    opacity?: number;

    /**
     * Point marker options used when the parent series type is set to marker
     */
    marker?: JSCPointMarkerConfig;

    /**
     * Annotation of this point. Used in organizational charts to set options for node visualizations.
     * @since 2.1
     */
    annotation?: JSCAnnotationConfig;

    /**
     * Point label options.
     * @remarks Point labels include smart layout logic that will attempt to position them efficiently and without overlapping other labels or points. Specifying settings for align, verticalAlign, and placement will limit the range of possible label positions, but the chart will try to find the best settings for any other properties that are not set explicitly.
     */
    label?: JSCLabelConfig;

    /**
     * Tooltip string for this element. Point related tokens can be used.
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-labels/token-reference/ | Label Token Reference}
     * {@link https://jscharting.com/samples/Javascript_LabelTokens_Chart.htm}
     */
    tooltip?: string | ((point: Point) => string);

    /**
     * When false, the point will not respond to mouse events. The points will not be highlighted by axis crosshairs and will be excluded from combined tooltips.
     * @def true
     * @since 2.6
     */
    mouseTracking?: boolean;

    /**
     * The mouse cursor type when hovering this data point.
     * @since 3.0
     */
    cursor?: ("none" | "default" | "pointer" | "help" | "crosshair" | "wait" | "progress" | "text" | "n-resize" | "ne-resize" | "nw-resize" | "e-resize" | "s-resize" | "se-resize" | "sw-resize" | "w-resize");

    /**
     * Specifies point state options
     * See Also:
     * {@link https://jscharting.com/tutorials/js-chart-interactivity/states/}
     */
    states?: PointStates;

    /**
     * Event functions fired when for specific mouse interactions with this point.
     */
    events?: PointEvents;

    /**
     * Name of this point
     */
    name?: string;

    /**
     * X value of this point.
     */
    x?: number | [(number | string | Date), (number | string | Date)] | Date | string;

    /**
     * Y value of this point.
     */
    y?: number | [(number | string | Date), (number | string | Date)] | string | Date;

    /**
     * Z value of this point. Used in bubble charts and as gauge needle length from 0 to 1, and as pie slide lengths.
     * See Also:
     * {@link https://jscharting.com/tutorials/types/}
     * @since 1.1
     */
    z?: number;

    /**
     * Open price value used with finance charts.
     */
    open?: number;

    /**
     * High price value used with finance charts.
     */
    high?: number;

    /**
     * Low price value used with finance charts.
     */
    low?: number;

    /**
     * Close price value used with finance charts.
     */
    close?: number;

    /**
     * Used with Venn diagrams.
     * @since 3.0
     */
    sets?: string[];

    /**
     * Used to specify error bar data for this series.
     * @since 1.1
     */
    subvalue?: JSCSubvalueConfig;

    /**
     * Used to specify error bar data for this series on the X axis.
     * @since 2.0
     */
    subvalueX?: JSCSubvalueConfig;

    /**
     * Styling of the complete area.
     * @since 2.0
     */
    complete?: JSCCompleteConfig;

    /**
     * Used with calendar charts to specify a date, date range, or calendar pattern to bind to.
     * See Also:
     * {@link https://jscharting.com/tutorials/types/js-calendar-chart/}
     * @since 2.6
     */
    date?: number | [(number | string), (number | string | Date)] | string | JSCCalendarPatternConfig;

    /**
     * Point attributes which hold additional information about the point and can be referenced within label text with tokens such as %attributeKey.
     * @remarks With calendar charts, wrapping a string value attribute in an array like ["attribute string value"] allows merging attributes of multiple points. See the events calendar example in the <a href="Tutorials.calendar">Calendar tutorial</a> for more details.
     * @since 2.6
     */
    attributes?: [string, (string | number | Date)][] | any;

    /**
     * Indicates whether this point is selected. With pie series, selection offsets pie slice from the main pie by series.explodeOffset in pixels.
     * See Also:
     * {@link https://jscharting.com/documentation/#node=Home.API.json.Types.Series.explodeOffset | Pie series selected state modifier.}
     */
    selected?: boolean;

    /**
     * Indicates whether this point is muted due to other series or points being highlighted.
     * @since 3.0
     */
    muted?: boolean;

    /**
     * Used to define a highlighting action when hovering this data point.
     * @since 3.0
     */
    hoverAction?: boolean | string;

    /**
     * Legend entry settings associated with this point.
     * @since