Black Lives Matter. Please consider donating to Black Girls Code today.

JavaScript Figure Reference


The pages linked in the sidebar together form the exhaustive reference for all of the attributes in the core figure data structure that the plotly library operates on. They are automatically-generated from the machine-readable Plotly.js schema reference.

How are Plotly attributes organized?

plotly.js charts are described declaratively as JSON objects. Every aspect of a plotly chart (the colors, the grids, the data, and so on) has a corresponding JSON attribute. This page contains an extensive list of these attributes.

Plotly's graph description places attributes into two categories: traces (objects that describe a single series of data in a graph) and layout (attributes that apply to the rest of the chart, like the title, xaxis, or annotations). Traces are categorized by chart type (e.g. scatter, heatmap).

Here is a simple example of a plotly chart inlined with links to each attribute's reference section.

    data = [
        {
            type: 'scatter',  // all "scatter" attributes: https://plotly.com/javascript/reference/#scatter
            x: [1, 2, 3],     // more about "x": #scatter-x
            y: [3, 1, 6],     // #scatter-y
            marker: {         // marker is an object, valid marker keys: #scatter-marker
                color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
            }
        },
        {
            type: 'bar',      // all "bar" chart attributes: #bar
            x: [1, 2, 3],     // more about "x": #bar-x
            y: [3, 1, 6],     // #bar-y
            name: 'bar chart example' // #bar-name
        }
    ];

    layout = {                     // all "layout" attributes: #layout
        title: 'simple example',  // more about "layout.title": #layout-title
        xaxis: {                  // all "layout.xaxis" attributes: #layout-xaxis
            title: 'time'         // more about "layout.xaxis.title": #layout-xaxis-title
        },
        annotations: [            // all "annotation" attributes: #layout-annotations
            {
                text: 'simple annotation',    // #layout-annotations-text
                x: 0,                         // #layout-annotations-x
                xref: 'paper',                // #layout-annotations-xref
                y: 0,                         // #layout-annotations-y
                yref: 'paper'                 // #layout-annotations-yref
            }
        ]
    }