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