Interface AreaChartOptions

options specific to area charts

interface AreaChartOptions {
    accessibility?: {
        svgAriaLabel?: string;
    };
    animations?: boolean;
    axes?: AxesOptions<AxisOptions>;
    bounds?: {
        lowerBoundMapsTo?: string;
        upperBoundMapsTo?: string;
    };
    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 full)

Properties

accessibility? animations? axes? bounds? 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

Optionalaccessibility

accessibility?: {
    svgAriaLabel?: string;
}

Optionalanimations

animations?: boolean

boolean to disable animations (enabled by default)

Optionalaxes

axes?: AxesOptions<AxisOptions>

Optionalbounds

bounds?: {
    lowerBoundMapsTo?: string;
    upperBoundMapsTo?: string;
}

options to bound the area of the chart

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

Optionalcurve

curve?: string | {
    name: string;
}

options for the curve of the line

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)

Optionalgrid

grid?: GridOptions

Optionalheight

height?: string

Optionally specify a height for the chart

Optionallegend

legend?: LegendOptions

legend configuration

Optionallocale

locale?: Locale

Locale configuration

Optionalpoints

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

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

options related to table data customization

Optionaltheme

theme?: string

Optionally specify a theme for the chart

OptionaltimeScale

timeScale?: TimeScaleOptions

Optionaltitle

title?: string

Optionally specify a title for the chart

Optionaltoolbar

toolbar?: ToolbarOptions

toolbar configurations

Optionaltooltip

tooltip?: TooltipOptions

tooltip configuration

Optionalwidth

width?: string

Optionally specify a width for the chart

OptionalzoomBar

zoomBar?: ZoomBarsOptions

zoombar configuration

Settings

Member Visibility

On This Page

Properties