Interface PlotlyConfig

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;
    displaylogo?: boolean;
    displayModeBar?: boolean | "hover";
    doubleClick?:
        | false
        | "reset"
        | "autosize"
        | "reset+autosize";
    doubleClickDelay?: number;
    editable?: boolean;
    edits?: Partial<Edits>;
    fillFrame?: boolean;
    frameMargins?: number;
    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? className? debug? displaylogo? displayModeBar? doubleClick? doubleClickDelay? editable? edits? fillFrame? frameMargins? linkText? locale? locales? logging? mapboxAccessToken? modeBarButtons? modeBarButtonsToAdd? modeBarButtonsToRemove? plotGlPixelRatio? plotlyServerURL? queueLength? responsive? revision? scrollZoom? sendData? setBackground? showAxisDragHandles? showAxisRangeEntryBoxes? showEditInChartStudio? showLink? showSendToCloud? showSources? showTips? staticPlot? style? toImageButtonOptions? topojsonURL? typesetMath? updateOnDataChange? updateOnLayoutChange? updateOnlyWithRevision? useResizeHandler? watermark?

Properties

Optionalautosizable

autosizable?: boolean

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

OptionalclassName

className?: string | string[]

Optionaldebug

debug?: boolean

Optionaldisplaylogo

displaylogo?: boolean

add the plotly logo on the end of the mode bar

OptionaldisplayModeBar

displayModeBar?: boolean | "hover"

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

OptionaldoubleClick

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

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

OptionaldoubleClickDelay

doubleClickDelay?: number

sets the delay for registering a double-click in ms

Optionaleditable

editable?: boolean

we can edit titles, move annotations, etc

Optionaledits

edits?: Partial<Edits>

OptionalfillFrame

fillFrame?: boolean

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

OptionalframeMargins

frameMargins?: number

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

OptionallinkText

linkText?: string

text appearing in the sendData link

Optionallocale

locale?: string

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

Optionallocales

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.

Optionallogging

logging?:
    | boolean
    | 0
    | 2
    | 1

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

OptionalmapboxAccessToken

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.

OptionalmodeBarButtons

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)

OptionalmodeBarButtonsToAdd

modeBarButtonsToAdd?: ModeBarButtonAny[]

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

OptionalmodeBarButtonsToRemove

modeBarButtonsToRemove?: ModeBarDefaultButtons[]

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

OptionalplotGlPixelRatio

plotGlPixelRatio?: number

increase the pixel ratio for Gl plot images

OptionalplotlyServerURL

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.

Default

''

OptionalqueueLength

queueLength?: number

set the length of the undo/redo queue

Optionalresponsive

responsive?: boolean

Make the chart responsive to window size

Optionalrevision

revision?: number

OptionalscrollZoom

scrollZoom?: boolean

mousewheel or two-finger scroll zooms the plot

OptionalsendData

sendData?: boolean

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

OptionalsetBackground

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

OptionalshowAxisDragHandles

showAxisDragHandles?: boolean

enable axis pan/zoom drag handles

OptionalshowAxisRangeEntryBoxes

showAxisRangeEntryBoxes?: boolean

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

OptionalshowEditInChartStudio

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.

Default

false

OptionalshowLink

showLink?: boolean

link to open this plot in plotly

OptionalshowSendToCloud

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

Default

false

OptionalshowSources

showSources?: boolean

false or function adding source(s) to linkText

OptionalshowTips

showTips?: boolean

new users see some hints about interactivity

OptionalstaticPlot

staticPlot?: boolean

no interactivity, for export or image generation

Optionalstyle

style?: {
    [key: string]: string;
}

OptionaltoImageButtonOptions

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

override the defaults for the toImageButton

OptionaltopojsonURL

topojsonURL?: string

URL to topojson files used in geo charts

OptionaltypesetMath

typesetMath?: boolean

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

OptionalupdateOnDataChange

updateOnDataChange?: boolean

OptionalupdateOnLayoutChange

updateOnLayoutChange?: boolean

OptionalupdateOnlyWithRevision

updateOnlyWithRevision?: boolean

OptionaluseResizeHandler

useResizeHandler?: boolean

Optionalwatermark

watermark?: boolean

Watermark the images with the company's logo

Settings

Member Visibility

On This Page

Properties