Highcharts Dashboards
    Preparing search index...

    Interface Options

    interface Options {
        caption?: TextOptionsType;
        chartOptions?: Options;
        className?: string;
        columnId: string;
        connector?: ConnectorOptions;
        editableOptions?: Options[];
        events?: Record<string, Function>;
        formula?:
            | "SUM"
            | "AVERAGE"
            | "MEDIAN"
            | "MAX"
            | "MIN"
            | "COUNT"
            | "PRODUCT"
            | FormulaCallbackFunction;
        id?: string;
        linkedValueTo: LinkedValueToOptions;
        minFontSize: number;
        renderTo?: string;
        states?: StatesOptions;
        style?: CSSObject;
        subtitle?: string
        | SubtitleOptions;
        sync?: SyncOptions;
        syncHandlers?: OptionsRecord;
        threshold?: number | number[];
        thresholdColors?: string[];
        title?: TextOptionsType;
        type: "KPI";
        value?: string | number;
        valueFormat?: string;
        valueFormatter?: ValueFormatterCallbackFunction;
    }

    Hierarchy (View Summary)

    Index

    Properties

    caption? chartOptions? className? columnId connector? editableOptions? events? formula? id? linkedValueTo minFontSize renderTo? states? style? subtitle? sync? syncHandlers? threshold? thresholdColors? title? type value? valueFormat? valueFormatter?

    Properties

    caption?: TextOptionsType

    The component's caption, which will render at the bottom.

    Try it:

    Changed captions

    chartOptions?: Options

    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 KPIComponent.defaultChartOptions

    Highcharts API

    className?: string

    The name of class that is applied to the component's container.

    columnId: string
    connector?: ConnectorOptions

    Connector options

    editableOptions?: Options[]

    Set of options that are available for editing through sidebar.

    events?: Record<string, Function>

    Events attached to the component : mount, unmount, resize, update.

    Try it:

    Mount event

    formula?:
        | "SUM"
        | "AVERAGE"
        | "MEDIAN"
        | "MAX"
        | "MIN"
        | "COUNT"
        | "PRODUCT"
        | FormulaCallbackFunction

    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:

    KPI value formula

    id?: string

    Sets an ID for the component's container.

    linkedValueTo: LinkedValueToOptions

    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:

    Linking KPI value to a specific point

    linkedValueTo: {
        seriesIndex: 1,
        pointIndex: 2
    }
    minFontSize: number

    The minimal value of the font size, that KPI component should have.

    renderTo?: string

    Cell id, where component is attached.

    states?: StatesOptions

    States for the component.

    style?: CSSObject
    subtitle?: string | SubtitleOptions

    The KPI's component subtitle. This can be used both to display a subtitle below the main title.

    sync?: SyncOptions

    Defines which elements should be synced.

    Example:
    {
        extremes: true
    }

    Try it:

    Extremes Sync

    syncHandlers?: OptionsRecord

    Sync options for the component.

    threshold?: number | number[]

    The threshold declares the value when color is applied (according to the thresholdColors).

    Try it:

    Set a threshold

    thresholdColors?: string[]

    Array of two colors strings that are applied when threshold is achieved.

    Try it:

    Threshold colors

    title?: TextOptionsType

    The component's title, which will render at the top.

    Try it:

    Changed captions

    type: "KPI"

    The type of component like: HTML, KPI, Highcharts, Grid, Navigator.

    value?: string | number

    The value that is displayed in KPI component.

    valueFormat?: string

    A format string for the value text.

    Try it:

    Add a value format

    valueFormatter?: ValueFormatterCallbackFunction

    Callback function to format the text of the value from scratch.

    Settings

    On This Page

    Properties