@highcharts/dashboards/es-modules/Dashboards/Components/KPIComponent/KPIComponentOptions.d.ts

Highcharts Dashboards framework

import type { ConnectorOptions as ComponentConnectorOptions, Options as ComponentOptions } from '../Component';
import type CSSObject from '../../../Core/Renderer/CSSObject';
import type { FormulaType } from './KPIComponent';
import type { Options as HighchartsOptions } from '../../Plugins/HighchartsTypes';
import type { OptionsEntry as SyncOptionsEntry, OptionsRecord as SyncOptionsRecord, RawOptionsRecord as SyncRawOptionsRecord } from '../Sync/Sync';
export interface Options extends ComponentOptions {
    columnId: string;
    /**
     * Connector options
     */
    connector?: ComponentConnectorOptions;
    /**
     * A full set of chart options applied into KPI chart that is displayed
     * below the value.
     *
     * Some of the chart options are already set, you can find them in {@link KPIComponent.defaultChartOptions}
     *
     * [Highcharts API](https://api.highcharts.com/highcharts/)
     */
    chartOptions?: HighchartsOptions;
    style?: CSSObject;
    /**
     * The threshold declares the value when color is applied
     * (according to the `thresholdColors`).
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/threshold/ | Set a threshold}
     *
     */
    threshold?: number | Array<number>;
    /**
     * Array of two colors strings that are applied when threshold is
     * achieved.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/threshold/ | Threshold colors}
     *
     */
    thresholdColors?: Array<string>;
    type: 'KPI';
    /**
     * The value that is displayed in KPI component.
     */
    value?: number | string;
    /**
     * The minimal value of the font size, that KPI component should have.
     */
    minFontSize: number;
    /**
     * The KPI's component subtitle. This can be used both to display
     * a subtitle below the main title.
     */
    subtitle?: string | SubtitleOptions;
    /**
     * Sync options for the component.
     */
    syncHandlers?: SyncOptionsRecord;
    /**
     * A format string for the value text.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/value-format/ | Add a value format}
     *
     */
    valueFormat?: string;
    /**
     * Callback function to format the text of the value from scratch.
     */
    valueFormatter?: ValueFormatterCallbackFunction;
    /**
     * This option allows user to toggle the KPI value connection with the
     * chart and set the specific point for the connection.
     *
     * Linking is enabled by default for the first point of the first
     * series.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/linked-value-to | Linking KPI value to a specific point}
     *
     * @example
     * ```js
     * linkedValueTo: {
     *     seriesIndex: 1,
     *     pointIndex: 2
     * }
     * ```
     */
    linkedValueTo: LinkedValueToOptions;
    /**
     * Defines which elements should be synced.
     * ```
     * Example:
     * {
     *     extremes: true
     * }
     * ```
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/demo/sync-extremes/ | Extremes Sync }
     *
     */
    sync?: SyncOptions;
    /**
     * Sets the formula method key for the KPI component value or the callback
     * function (updates the value internally).
     *
     * If not declared, the KPI component displays the last column value.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/formula/ | KPI value formula}
     *
     */
    formula?: FormulaType | FormulaCallbackFunction;
}
/**
 * Options for linking KPI value to the chart point.
 *
 * Try it:
 *
 * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/linked-value-to | Linking KPI value to a specific point}
 */
export interface LinkedValueToOptions {
    /**
     * Enable or disable linking KPI value to a point on the chart.
     *
     * @default true
     */
    enabled?: boolean;
    /**
     * Index of the point that is to receiving the KPI value as its Y.
     *
     * @default 0
     */
    pointIndex?: number;
    /**
     * Index of the series with the point receiving the KPI value.
     *
     * @default 0
     */
    seriesIndex?: number;
}
/**
 * Sync options available for the KPI component.
 *
 * Example:
 * ```
 * {
 *     extremes: true
 * }
 * ```
 */
export interface SyncOptions extends SyncRawOptionsRecord {
    /**
     * Extremes sync is available for Highcharts, KPI, Grid and
     * Navigator components. Sets a common range of displayed data. For the
     * KPI Component sets the last value.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/demo/sync-extremes/ | Extremes Sync }
     *
     * @default false
     */
    extremes?: boolean | SyncOptionsEntry;
}
export default Options;