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