Interface BubbleChartOptions

options specific to bubble charts

interface BubbleChartOptions {
    accessibility?: {
        svgAriaLabel?: string;
    };
    animations?: boolean;
    axes?: AxesOptions<AxisOptions>;
    bubble?: {
        enabled?: boolean;
        fillOpacity?: number;
        radiusLabel?: string;
        radiusMapsTo?: string;
        radiusRange?: ((min: number, max: number) => number[]);
    };
    canvasZoom?: {
        enabled?: boolean;
    };
    color?: {
        gradient?: {
            colors?: string[];
            enabled?: boolean;
        };
        pairing?: {
            numberOfVariants?: number;
            option?: number;
        };
        scale?: object;
    };
    curve?: string | {
        name: string;
    };
    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);
    grid?: GridOptions;
    height?: string;
    legend?: LegendOptions;
    locale?: Locale;
    points?: {
        enabled?: boolean;
        filled?: boolean;
        fillOpacity?: number;
        radius?: number;
    };
    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

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

Properties

Optionalaccessibility

accessibility?: {
    svgAriaLabel?: string;
}

Optionalanimations

animations?: boolean

boolean to disable animations (enabled by default)

Optionalaxes

axes?: AxesOptions<AxisOptions>

Optionalbubble

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

options for the individual bubbles

Type declaration

  • Optionalenabled?: boolean

    enabled scatter dot or not

  • OptionalfillOpacity?: number

    Opacity of the fills used within each circle

  • OptionalradiusLabel?: string

    options for what the bubble radius value maps to

  • OptionalradiusMapsTo?: string

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

  • OptionalradiusRange?: ((min: number, max: number) => 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[]

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' }

Optionalcurve

curve?: string | {
    name: string;
}

options for the curve of the line

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)

Optionalgrid

grid?: GridOptions

Optionalheight

height?: string

Optionally specify a height for the chart

Optionallegend

legend?: LegendOptions

legend configuration

Optionallocale

locale?: Locale

Locale configuration

Optionalpoints

points?: {
    enabled?: boolean;
    filled?: boolean;
    fillOpacity?: number;
    radius?: number;
}

options for the points

Type declaration

  • Optionalenabled?: boolean
  • Optionalfilled?: boolean
  • OptionalfillOpacity?: number
  • Optionalradius?: number

    sets the radius of the point

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

OptionaltimeScale

timeScale?: TimeScaleOptions

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

OptionalzoomBar

zoomBar?: ZoomBarsOptions

zoombar configuration

Settings

Member Visibility

On This Page

Properties