Interface MeterChartOptions

Base chart options common to any chart

interface MeterChartOptions {
    accessibility?: {
        svgAriaLabel?: string;
    };
    animations?: boolean;
    canvasZoom?: {
        enabled?: boolean;
    };
    color?: {
        gradient?: {
            colors?: string[];
            enabled?: boolean;
        };
        pairing?: {
            numberOfVariants?: number;
            option?: number;
        };
        scale?: object;
    };
    data?: {
        groupMapsTo?: string;
        loading?: boolean;
        selectedGroups?: string[];
    };
    experimental?: boolean;
    fileDownload?: {
        fileName?: string | ((type: "jpg" | "png" | "csv") => string);
    };
    getFillColor?: ((group: string, label?: string, data?: any, defaultFillColor?: string) => string);
    getIsFilled?: ((datasetLabel: string, label?: string, data?: any, defaultFilled?: boolean) => boolean);
    getStrokeColor?: ((group: string, label?: string, data?: any, defaultStrokeColor?: string) => string);
    height?: string;
    legend?: LegendOptions;
    locale?: Locale;
    meter?: {
        height?: number;
        peak?: number;
        proportional?: {
            breakdownFormatter?: ((x: any) => string);
            total?: number;
            totalFormatter?: ((total: number) => string);
            unit?: string;
        };
        showLabels?: boolean;
        status?: {
            ranges: {
                range: [number, number];
                status: string;
            }[];
        };
        title?: {
            percentageIndicator?: {
                enabled?: boolean;
            };
        };
    };
    resizable?: boolean;
    style?: {
        prefix?: string;
    };
    tabularRepModal?: TabularRepCustomizationOptions;
    theme?: string;
    title?: string;
    toolbar?: ToolbarOptions;
    tooltip?: TooltipOptions;
    width?: string;
}

Hierarchy (view full)

Properties

accessibility? animations? canvasZoom? color? data? experimental? fileDownload? getFillColor? getIsFilled? getStrokeColor? height? legend? locale? meter? resizable? style? tabularRepModal? theme? title? toolbar? tooltip? width?

Properties

Optionalaccessibility

accessibility?: {
    svgAriaLabel?: string;
}

Optionalanimations

animations?: boolean

boolean to disable animations (enabled by default)

OptionalcanvasZoom

canvasZoom?: {
    enabled?: boolean;
}

Optionalcolor

color?: {
    gradient?: {
        colors?: string[];
        enabled?: boolean;
    };
    pairing?: {
        numberOfVariants?: number;
        option?: number;
    };
    scale?: object;
}

options related to color scales

Type declaration

  • Optionalgradient?: {
        colors?: string[];
        enabled?: boolean;
    }
    • Optionalcolors?: string[]

      hex color array e.g. ['#fff', '#000', ...]

    • Optionalenabled?: boolean
  • Optionalpairing?: {
        numberOfVariants?: number;
        option?: number;
    }

    use a carbon dataviz preset color palette put the index (selection of which variant)

    • OptionalnumberOfVariants?: number

      the number of color variants in the palette (defaults to using the number of data groups in the given data)

    • Optionaloption?: number

      the option number of the color paring

  • Optionalscale?: object

    Example

    { 'Dataset 1': 'blue' }

Optionaldata

data?: {
    groupMapsTo?: string;
    loading?: boolean;
    selectedGroups?: string[];
}

options related to charting data

Type declaration

  • OptionalgroupMapsTo?: string

    identifier for data groups

  • Optionalloading?: boolean

    used to simulate data loading in skeleton way

  • OptionalselectedGroups?: string[]

    options related to pre-selected data groups Remains empty if every legend item is active or dataset doesn't have the data groups.

Optionalexperimental

experimental?: boolean

whether this type of chart is experimental

OptionalfileDownload

fileDownload?: {
    fileName?: string | ((type: "jpg" | "png" | "csv") => string);
}

Type declaration

  • OptionalfileName?: string | ((type: "jpg" | "png" | "csv") => string)

    the number of color variants in the palette (defaults to using the number of data groups in the given data)

OptionalgetFillColor

getFillColor?: ((group: string, label?: string, data?: any, defaultFillColor?: string) => string)

Optional function to generate the fill color based on datasetLabel, label, and/or data

OptionalgetIsFilled

getIsFilled?: ((datasetLabel: string, label?: string, data?: any, defaultFilled?: boolean) => boolean)

Optional function to determine whether is filled based on datasetLabel, label, and/or data

OptionalgetStrokeColor

getStrokeColor?: ((group: string, label?: string, data?: any, defaultStrokeColor?: string) => string)

Optional function to generate the stroke color based on datasetLabel, label, and/or data (note) - not all chart types support the stroke color (e.g. wordcloud)

Optionalheight

height?: string

Optionally specify a height for the chart

Optionallegend

legend?: LegendOptions

legend configuration

Optionallocale

locale?: Locale

Locale configuration

Optionalmeter

meter?: {
    height?: number;
    peak?: number;
    proportional?: {
        breakdownFormatter?: ((x: any) => string);
        total?: number;
        totalFormatter?: ((total: number) => string);
        unit?: string;
    };
    showLabels?: boolean;
    status?: {
        ranges: {
            range: [number, number];
            status: string;
        }[];
    };
    title?: {
        percentageIndicator?: {
            enabled?: boolean;
        };
    };
}

Type declaration

  • Optionalheight?: number
  • Optionalpeak?: number
  • Optionalproportional?: {
        breakdownFormatter?: ((x: any) => string);
        total?: number;
        totalFormatter?: ((total: number) => string);
        unit?: string;
    }
    • OptionalbreakdownFormatter?: ((x: any) => string)
        • (x): string

        • Parameters

          • x: any

          Returns string

    • Optionaltotal?: number
    • OptionaltotalFormatter?: ((total: number) => string)
        • (total): string

        • Parameters

          • total: number

          Returns string

    • Optionalunit?: string
  • OptionalshowLabels?: boolean
  • Optionalstatus?: {
        ranges: {
            range: [number, number];
            status: string;
        }[];
    }
    • ranges: {
          range: [number, number];
          status: string;
      }[]
  • Optionaltitle?: {
        percentageIndicator?: {
            enabled?: boolean;
        };
    }
    • OptionalpercentageIndicator?: {
          enabled?: boolean;
      }
      • Optionalenabled?: boolean

        rendering of the percentage value relative to the dataset within title

Optionalresizable

resizable?: boolean

boolean to prevent the container from resizing

Optionalstyle

style?: {
    prefix?: string;
}

stylesheet options

Type declaration

  • Optionalprefix?: string

    optional prefixing string for css classes (defaults to 'cc')

OptionaltabularRepModal

tabularRepModal?: TabularRepCustomizationOptions

options related to table data customization

Optionaltheme

theme?: string

Optionally specify a theme for the chart

Optionaltitle

title?: string

Optionally specify a title for the chart

Optionaltoolbar

toolbar?: ToolbarOptions

toolbar configurations

Optionaltooltip

tooltip?: TooltipOptions

tooltip configuration

Optionalwidth

width?: string

Optionally specify a width for the chart

Settings

Member Visibility

On This Page

Properties