The plot config.

See https://github.com/plotly/angular-plotly.js#basic-props for added properties to Plotly config.

interface PlotlyConfig {
    autosizable?: boolean;
    className?: string | string[];
    debug?: boolean;
    displayModeBar?: boolean | "hover";
    displaylogo?: boolean;
    doubleClick?:
        | false
        | "reset"
        | "autosize"
        | "reset+autosize";
    doubleClickDelay?: number;
    editable?: boolean;
    edits?: Partial<Edits>;
    fillFrame?: boolean;
    frameMargins?: number;
    globalTransforms?: any[];
    linkText?: string;
    locale?: string;
    locales?: {};
    logging?:
        | boolean
        | 0
        | 2
        | 1;
    mapboxAccessToken?: string;
    modeBarButtons?: false | ModeBarButtonAny[][];
    modeBarButtonsToAdd?: ModeBarButtonAny[];
    modeBarButtonsToRemove?: ModeBarDefaultButtons[];
    plotGlPixelRatio?: number;
    plotlyServerURL?: string;
    queueLength?: number;
    responsive?: boolean;
    revision?: number;
    scrollZoom?: boolean;
    sendData?: boolean;
    setBackground?: "transparent" | "opaque" | ((gd: PlotlyHTMLElement, bgColor: string) => void);
    showAxisDragHandles?: boolean;
    showAxisRangeEntryBoxes?: boolean;
    showEditInChartStudio?: boolean;
    showLink?: boolean;
    showSendToCloud?: boolean;
    showSources?: boolean;
    showTips?: boolean;
    staticPlot?: boolean;
    style?: {
        [key: string]: string;
    };
    toImageButtonOptions?: Partial<{
        filename: string;
        format:
            | "svg"
            | "jpeg"
            | "png"
            | "webp";
        height: number;
        scale: number;
        width: number;
    }>;
    topojsonURL?: string;
    typesetMath?: boolean;
    updateOnDataChange?: boolean;
    updateOnLayoutChange?: boolean;
    updateOnlyWithRevision?: boolean;
    useResizeHandler?: boolean;
    watermark?: boolean;
}

Hierarchy

  • Partial<Config>
    • PlotlyConfig

Properties

autosizable?: boolean

DO autosize once regardless of layout.autosize (use default width or height values otherwise)

className?: string | string[]
debug?: boolean
displayModeBar?: boolean | "hover"

display the mode bar (true, false, or 'hover')

displaylogo?: boolean

add the plotly logo on the end of the mode bar

doubleClick?:
    | false
    | "reset"
    | "autosize"
    | "reset+autosize"

double click interaction (false, 'reset', 'autosize' or 'reset+autosize')

doubleClickDelay?: number

sets the delay for registering a double-click in ms

editable?: boolean

we can edit titles, move annotations, etc

edits?: Partial<Edits>
fillFrame?: boolean

if we DO autosize, do we fill the container or the screen?

frameMargins?: number

if we DO autosize, set the frame margins in percents of plot size

globalTransforms?: any[]

Set global transform to be applied to all traces with no specification needed

linkText?: string

text appearing in the sendData link

locale?: string

Which localization should we use? Should be a string like 'en' or 'en-US'

locales?: {}

Localization definitions Locales can be provided either here (specific to one chart) or globally by registering them as modules. Should be an object of objects {locale: {dictionary: {...}, format: {...}}} { da: { dictionary: {'Reset axes': 'Nulstil aksler', ...}, format: {months: [...], shortMonths: [...]} }, ... } All parts are optional. When looking for translation or format fields, we look first for an exact match in a config locale, then in a registered module. If those fail, we strip off any regionalization ('en-US' -> 'en') and try each (config, registry) again. The final fallback for translation is untranslated (which is US English) and for formats is the base English (the only consequence being the last fallback date format %x is DD/MM/YYYY instead of MM/DD/YYYY). Currently grouping and currency are ignored for our automatic number formatting, but can be used in custom formats.

logging?:
    | boolean
    | 0
    | 2
    | 1

Turn all console logging on or off (errors will be thrown) This should ONLY be set via Plotly.setPlotConfig

mapboxAccessToken?: string

Mapbox access token (required to plot mapbox trace types) If using an Mapbox Atlas server, set this option to '', so that plotly.js won't attempt to authenticate to the public Mapbox server.

modeBarButtons?: false | ModeBarButtonAny[][]

fully custom mode bar buttons as nested array, where the outer arrays represents button groups, and the inner arrays have buttons config objects or names of default buttons (see ./components/modebar/buttons.js for more info)

modeBarButtonsToAdd?: ModeBarButtonAny[]

add mode bar button using config objects (see ./components/modebar/buttons.js for list of arguments)

modeBarButtonsToRemove?: ModeBarDefaultButtons[]

remove mode bar button by name (see ./components/modebar/buttons.js for the list of names)

plotGlPixelRatio?: number

increase the pixel ratio for Gl plot images

plotlyServerURL?: string

When set it determines base URL for the 'Edit in Chart Studio' showEditInChartStudio/showSendToCloud mode bar button and the showLink/sendData on-graph link. To enable sending your data to Chart Studio Cloud, you need to set both plotlyServerURL to 'https://chart-studio.plotly.com' and also set showSendToCloud to true.

''
queueLength?: number

set the length of the undo/redo queue

responsive?: boolean

Make the chart responsive to window size

revision?: number
scrollZoom?: boolean

mousewheel or two-finger scroll zooms the plot

sendData?: boolean

if we show a link, does it contain data or just link to a plotly file?

setBackground?: "transparent" | "opaque" | ((gd: PlotlyHTMLElement, bgColor: string) => void)

function to add the background color to a different container or 'opaque' to ensure there's white behind it

showAxisDragHandles?: boolean

enable axis pan/zoom drag handles

showAxisRangeEntryBoxes?: boolean

enable direct range entry at the pan/zoom drag points (drag handles must be enabled above)

showEditInChartStudio?: boolean

Same as showSendToCloud, but use a pencil icon instead of a floppy-disk. Note that if both showSendToCloud and showEditInChartStudio are turned, only showEditInChartStudio will be honored.

false
showLink?: boolean

link to open this plot in plotly

showSendToCloud?: boolean

Should we include a ModeBar button, labeled "Edit in Chart Studio", that sends this chart to chart-studio.plotly.com (formerly plot.ly) or another plotly server as specified by plotlyServerURL for editing, export, etc? Prior to version 1.43.0 this button was included by default, now it is opt-in using this flag. Note that this button can (depending on plotlyServerURL being set) send your data to an external server. However that server does not persist your data until you arrive at the Chart Studio and explicitly click "Save".

false
showSources?: boolean

false or function adding source(s) to linkText

showTips?: boolean

new users see some hints about interactivity

staticPlot?: boolean

no interactivity, for export or image generation

style?: {
    [key: string]: string;
}
toImageButtonOptions?: Partial<{
    filename: string;
    format:
        | "svg"
        | "jpeg"
        | "png"
        | "webp";
    height: number;
    scale: number;
    width: number;
}>

override the defaults for the toImageButton

topojsonURL?: string

URL to topojson files used in geo charts

typesetMath?: boolean

Determines whether math should be typeset or not, when MathJax (either v2 or v3) is present on the page.

updateOnDataChange?: boolean
updateOnLayoutChange?: boolean
updateOnlyWithRevision?: boolean
useResizeHandler?: boolean
watermark?: boolean

Watermark the images with the company's logo