@carbon/charts
    Preparing search index...

    Interface DonutChartOptions

    options specific to donut charts

    interface DonutChartOptions {
        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[];
        };
        donut?: {
            alignment?: string;
            center?: {
                label?: string;
                number?: number;
                numberFontSize?: (value: number) => string | number;
                numberFormatter?: (value: number) => string;
                titleFontSize?: (value: number) => string | number;
                titleYPosition?: (value: number) => number;
            };
        };
        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;
        pie?: {
            alignment?: string;
            labels?: { enabled?: boolean; formatter?: (data: any) => string };
            sortFunction?: (
                a: { group: string; value: number },
                b: { group: string; value: number },
            ) => number;
            valueMapsTo?: string;
        };
        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? color? data? donut? experimental? fileDownload? getFillColor? getIsFilled? getStrokeColor? height? legend? locale? pie? resizable? style? tabularRepModal? theme? title? toolbar? tooltip? width?

    Properties

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

    boolean to disable animations (enabled by default)

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

    donut?: {
        alignment?: string;
        center?: {
            label?: string;
            number?: number;
            numberFontSize?: (value: number) => string | number;
            numberFormatter?: (value: number) => string;
            titleFontSize?: (value: number) => string | number;
            titleYPosition?: (value: number) => number;
        };
    }
    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

    pie?: {
        alignment?: string;
        labels?: { enabled?: boolean; formatter?: (data: any) => string };
        sortFunction?: (
            a: { group: string; value: number },
            b: { group: string; value: number },
        ) => number;
        valueMapsTo?: string;
    }

    Type declaration

    • Optionalalignment?: string
    • Optionallabels?: { enabled?: boolean; formatter?: (data: any) => string }
    • OptionalsortFunction?: (
          a: { group: string; value: number },
          b: { group: string; value: number },
      ) => number
    • OptionalvalueMapsTo?: string

      identifier for value key in your charting data defaults to value

    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