Interface AlluvialChartOptions

options specific to Alluvial charts

interface AlluvialChartOptions {
    accessibility?: { svgAriaLabel?: string };
    alluvial: {
        monochrome?: boolean;
        nodeAlignment?: string;
        nodePadding?: number;
        nodes: { category?: string; name: string }[];
        units?: 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[];
    };
    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?: interfaces.LegendOptions;
    locale?: interfaces.Locale;
    resizable?: boolean;
    style?: { prefix?: string };
    tabularRepModal?: interfaces.TabularRepCustomizationOptions;
    theme?: string;
    title?: string;
    toolbar?: interfaces.ToolbarOptions;
    tooltip?: interfaces.TooltipOptions;
    width?: string;
}

Hierarchy (View Summary)

Properties

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

Properties

Optionalaccessibility

accessibility?: { svgAriaLabel?: string }

alluvial

alluvial: {
    monochrome?: boolean;
    nodeAlignment?: string;
    nodePadding?: number;
    nodes: { category?: string; name: string }[];
    units?: string;
}

Type declaration

  • Optionalmonochrome?: boolean

    Enable single color usage for lines

  • OptionalnodeAlignment?: string

    Node alignment (Default is center)

  • OptionalnodePadding?: number

    Set the node padding

  • nodes: { category?: string; name: string }[]

    List of nodes to draw

  • Optionalunits?: string

Optionalanimations

animations?: boolean

boolean to disable animations (enabled by default)

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

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)

Optionalheight

height?: string

Optionally specify a height for the chart

Optionallegend

legend?: interfaces.LegendOptions

legend configuration

Optionallocale

locale?: interfaces.Locale

Locale configuration

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?: interfaces.TabularRepCustomizationOptions

options related to table data customization

Optionaltheme

theme?: string

Optionally specify a theme for the chart

Optionaltitle

title?: string

Optionally specify a title for the chart

Optionaltoolbar

toolbar?: interfaces.ToolbarOptions

toolbar configurations

Optionaltooltip

tooltip?: interfaces.TooltipOptions

tooltip configuration

Optionalwidth

width?: string

Optionally specify a width for the chart

Settings

Member Visibility

On This Page

Properties