Interface DonutChartOptions

options specific to donut charts

interface DonutChartOptions {
    animations?: 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) => string | number);
            numberFormatter?: ((value) => string);
            titleFontSize?: ((value) => string | number);
            titleYPosition?: ((value) => number);
        };
    };
    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);
    height?: string;
    legend?: LegendOptions;
    locale?: Locale;
    pie?: {
        alignment?: string;
        labels?: {
            enabled?: boolean;
            formatter?: ((data) => string);
        };
        sortFunction?: ((a, b) => number);
        valueMapsTo?: string;
    };
    resizable?: boolean;
    style?: {
        prefix?: string;
    };
    tabularRepModal?: TabularRepCustomizationOptions;
    theme?: string;
    title?: string;
    toolbar?: ToolbarOptions;
    tooltip?: TooltipOptions;
    width?: string;
}

Hierarchy (view full)

Properties

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

Properties

Optional animations

animations?: boolean

boolean to disable animations (enabled by default)

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 donut

donut?: {
    alignment?: string;
    center?: {
        label?: string;
        number?: number;
        numberFontSize?: ((value) => string | number);
        numberFormatter?: ((value) => string);
        titleFontSize?: ((value) => string | number);
        titleYPosition?: ((value) => number);
    };
}

Type declaration

  • Optional alignment?: string
  • Optional center?: {
        label?: string;
        number?: number;
        numberFontSize?: ((value) => string | number);
        numberFormatter?: ((value) => string);
        titleFontSize?: ((value) => string | number);
        titleYPosition?: ((value) => number);
    }
    • Optional label?: string
    • Optional number?: number
    • Optional numberFontSize?: ((value) => string | number)
        • (value): string | number

        • Parameters

          • value: number

          Returns string | number

    • Optional numberFormatter?: ((value) => string)
        • (value): string

        • Parameters

          • value: number

          Returns string

    • Optional titleFontSize?: ((value) => string | number)
        • (value): string | number

        • Parameters

          • value: number

          Returns string | number

    • Optional titleYPosition?: ((value) => number)
        • (value): number

        • Parameters

          • value: number

          Returns number

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 height

height?: string

Optionally specify a height for the chart

Optional legend

legend?: LegendOptions

legend configuration

Optional locale

locale?: Locale

Locale configuration

Optional pie

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

Type declaration

  • Optional alignment?: string
  • Optional labels?: {
        enabled?: boolean;
        formatter?: ((data) => string);
    }
    • Optional enabled?: boolean
    • Optional formatter?: ((data) => string)
        • (data): string

        • Parameters

          • data: any

          Returns string

  • Optional sortFunction?: ((a, b) => number)
      • (a, b): number

      • Parameters

        • a: {
              group: string;
              value: number;
          }
          • group: string
          • value: number
        • b: {
              group: string;
              value: number;
          }
          • group: string
          • value: number

        Returns number

  • Optional valueMapsTo?: string

    identifier for value key in your charting data defaults to value

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

Settings

Member Visibility

Theme

On This Page

animationscolordatadonutexperimentalfileDownloadgetFillColorgetIsFilledgetStrokeColorheightlegendlocalepieresizablestyletabularRepModalthemetitletoolbartooltipwidth