Interface BubbleChartOptions

options specific to bubble charts

interface BubbleChartOptions {
    animations?: boolean;
    axes?: AxesOptions<AxisOptions>;
    bubble?: {
        enabled?: boolean;
        fillOpacity?: number;
        radiusLabel?: string;
        radiusMapsTo?: string;
        radiusRange?: ((min, max) => number[]);
    };
    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) => string);
    };
    getFillColor?: ((group, label?, data?, defaultFillColor?) => string);
    getIsFilled?: ((datasetLabel, label?, data?, defaultFilled?) => boolean);
    getStrokeColor?: ((group, label?, data?, defaultStrokeColor?) => string);
    grid?: GridOptions;
    height?: string;
    legend?: LegendOptions;
    locale?: Locale;
    resizable?: boolean;
    style?: {
        prefix?: string;
    };
    tabularRepModal?: TabularRepCustomizationOptions;
    theme?: string;
    timeScale?: TimeScaleOptions;
    title?: string;
    toolbar?: ToolbarOptions;
    tooltip?: TooltipOptions;
    width?: string;
    zoomBar?: ZoomBarsOptions;
}

Hierarchy (view full)

Properties

animations? axes? bubble? color? data? experimental? fileDownload? getFillColor? getIsFilled? getStrokeColor? grid? height? legend? locale? resizable? style? tabularRepModal? theme? timeScale? title? toolbar? tooltip? width? zoomBar?

Properties

Optional animations

animations?: boolean

boolean to disable animations (enabled by default)

Optional axes

axes?: AxesOptions<AxisOptions>

Optional bubble

bubble?: {
    enabled?: boolean;
    fillOpacity?: number;
    radiusLabel?: string;
    radiusMapsTo?: string;
    radiusRange?: ((min, max) => number[]);
}

options for the individual bubbles

Type declaration

  • Optional enabled?: boolean

    enabled scatter dot or not

  • Optional fillOpacity?: number

    Opacity of the fills used within each circle

  • Optional radiusLabel?: string

    options for what the bubble radius value maps to

  • Optional radiusMapsTo?: string

    the key to lookup in charting data for the bubble radius value

  • Optional radiusRange?: ((min, max) => number[])

    A function that would determine the range of the bubble radius to use Returns an array with the 1st value being the min and the 2nd value being the max radius

      • (min, max): number[]

      • Parameters

        • min: number
        • max: number

        Returns number[]

Optional color

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

options related to color scales

Type declaration

  • Optional gradient?: {
        colors?: string[];
        enabled?: boolean;
    }
    • Optional colors?: string[]

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

    • Optional enabled?: boolean
  • Optional pairing?: {
        numberOfVariants?: number;
        option?: number;
    }

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

    • Optional numberOfVariants?: number

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

    • Optional option?: number

      the option number of the color paring

  • Optional scale?: object

    Example

    { 'Dataset 1': 'blue' }

Optional data

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

options related to charting data

Type declaration

  • Optional groupMapsTo?: string

    identifier for data groups

  • Optional loading?: boolean

    used to simulate data loading in skeleton way

  • Optional selectedGroups?: string[]

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

Optional experimental

experimental?: boolean

whether this type of chart is experimental

Optional fileDownload

fileDownload?: {
    fileName?: string | ((type) => string);
}

Type declaration

  • Optional fileName?: string | ((type) => string)

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

Optional getFillColor

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

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

Type declaration

    • (group, label?, data?, defaultFillColor?): string

    • Parameters

      • group: string
      • Optional label: string
      • Optional data: any
      • Optional defaultFillColor: string

      Returns string

Optional getIsFilled

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

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

Type declaration

    • (datasetLabel, label?, data?, defaultFilled?): boolean

    • Parameters

      • datasetLabel: string
      • Optional label: string
      • Optional data: any
      • Optional defaultFilled: boolean

      Returns boolean

Optional getStrokeColor

getStrokeColor?: ((group, label?, data?, defaultStrokeColor?) => 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)

Type declaration

    • (group, label?, data?, defaultStrokeColor?): string

    • Parameters

      • group: string
      • Optional label: string
      • Optional data: any
      • Optional defaultStrokeColor: string

      Returns string

Optional grid

grid?: GridOptions

Optional height

height?: string

Optionally specify a height for the chart

Optional legend

legend?: LegendOptions

legend configuration

Optional locale

locale?: Locale

Locale configuration

Optional resizable

resizable?: boolean

boolean to prevent the container from resizing

Optional style

style?: {
    prefix?: string;
}

stylesheet options

Type declaration

  • Optional prefix?: string

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

Optional tabularRepModal

tabularRepModal?: TabularRepCustomizationOptions

options related to table data customization

Optional theme

theme?: string

Optionally specify a theme for the chart

Optional timeScale

timeScale?: TimeScaleOptions

Optional title

title?: string

Optionally specify a title for the chart

Optional toolbar

toolbar?: ToolbarOptions

toolbar configurations

Optional tooltip

tooltip?: TooltipOptions

tooltip configuration

Optional width

width?: string

Optionally specify a width for the chart

Optional zoomBar

zoomBar?: ZoomBarsOptions

zoombar configuration

Settings

Member Visibility

Theme

On This Page

animationsaxesbubblecolordataexperimentalfileDownloadgetFillColorgetIsFilledgetStrokeColorgridheightlegendlocaleresizablestyletabularRepModalthemetimeScaletitletoolbartooltipwidthzoomBar