@carbon/charts
    Preparing search index...

    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 Summary)

    Index

    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

    accessibility?: { svgAriaLabel?: string }
    animations?: boolean

    boolean to disable animations (enabled by default)

    axes?: AxesOptions<AxisOptions>
    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

    canvasZoom?: { enabled?: boolean }
    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
      { 'Dataset 1': 'blue' }
    curve?: string | { name: string }

    options for the curve of the line

    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.

    experimental?: boolean

    whether this type of chart is experimental

    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)

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

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

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

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

    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)

    grid?: GridOptions
    height?: string

    Optionally specify a height for the chart

    legend?: LegendOptions

    legend configuration

    locale?: Locale

    Locale configuration

    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

    resizable?: boolean

    boolean to prevent the container from resizing

    style?: { prefix?: string }

    stylesheet options

    Type declaration

    • Optionalprefix?: string

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

    tabularRepModal?: TabularRepCustomizationOptions

    options related to table data customization

    theme?: string

    Optionally specify a theme for the chart

    timeScale?: TimeScaleOptions
    title?: string

    Optionally specify a title for the chart

    toolbar?: ToolbarOptions

    toolbar configurations

    tooltip?: TooltipOptions

    tooltip configuration

    width?: string

    Optionally specify a width for the chart

    zoomBar?: ZoomBarsOptions

    zoombar configuration

    Settings

    Member Visibility

    On This Page

    Properties