@carbon/charts
    Preparing search index...

    Interface CirclePackChartOptions

    Base chart options common to any chart

    interface CirclePackChartOptions {
        accessibility?: { svgAriaLabel?: string };
        animations?: boolean;
        canvasZoom?: { enabled?: boolean };
        circlePack?: {
            circles?: { fillOpacity: number };
            depth: number;
            padding?: { inner?: number; outer?: 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: "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;
        resizable?: boolean;
        style?: { prefix?: string };
        tabularRepModal?: TabularRepCustomizationOptions;
        theme?: string;
        title?: string;
        toolbar?: ToolbarOptions;
        tooltip?: TooltipOptions;
        width?: string;
    }

    Hierarchy (View Summary)

    Index

    Properties

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

    Properties

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

    boolean to disable animations (enabled by default)

    canvasZoom?: { enabled?: boolean }
    circlePack?: {
        circles?: { fillOpacity: number };
        depth: number;
        padding?: { inner?: number; outer?: number };
    }
    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' }
    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)

    height?: string

    Optionally specify a height for the chart

    legend?: LegendOptions

    legend configuration

    locale?: Locale

    Locale configuration

    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

    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

    Settings

    Member Visibility

    On This Page

    Properties