Importing the libray

<script src="https://cdn.plot.ly/
plotly-latest.min.js"></script>
        

Use the plotly CDN

Standard structure

var traces = [ ... ];
var layout = { ... };
Plotly.plot("divID",traces,layout);

Typical layout

layout = {margin:{        t:1,
                    l:20,      r:2,
                          b:30
}};

Default margins are wide.

Lines

var traces = [{
             x:[1,2,3,4],
             y:[10,3,5,7],
             type:"scatter"}];

Dots

var traces = [{
             x:[1,2,3,4],
             y:[10,3,5,7],
             type:"scatter",
             mode:"markers",
             }];

Mode can be any combination of "lines", "markers", "text" joined with a "+" OR "none".

Bars

var traces = [{
             x:['A','B','C','D'],
             y:[10,3,5,7],
             type:"bar"}];

Horizontal Bars

var traces = [{
    y:['A','B','C','D'],
    x:[10,3,5,7],
    orientation:"h", // default: "v"
    type:"bar"}];

Boxplots

var traces = [{
       x:['A','A','A',  'B','B','B'],
       y:[10,  3,  5,    7,  5,  4],
    type:"box"}];

Histogram

var traces = [{
    x:[5, 3, 5, 3, 5, 4, 6, 6],
    type:"histogram"}];

Use y to have it horizontal.

Multiple data series

var traces = [{name:"First",
             x:[1,2,3,4],
             y:[10,3,5,7],
             type:"scatter",
             },
             {name:"Second",
             x:[.5,2,4.5,6],
             y:[3,2,5,8],
             type:"scatter",
             }];

Multiple graph types

var traces = [{name:"First",
             x:[1,2,3,4],
             y:[10,3,5,7],
             type:"bar",
             },
             {name:"Second",
             x:[.5,2,4.5,6],
             y:[3,2,5,8],
             type:"scatter",
             }];

Area

var traces = [{name:"First",
             x:[1,2,3,4],
             y:[10,3,5,7],
             type:"scatter",
             fill:"tozeroy",
             mode:"lines"
             },{name:"Second",
             x:[1,2,3,4],
             y:[5,6,8,9],
             type:"scatter",
             fill:"tonexty",
             mode:"lines"
             }];

fill can be tozero x or y, tonext x or y or none

Scatter Geo

var traces = [{
  lat:[41.883,45.066],
  lon:[12.466,7.700],
  text:['Rome','Turin'],
    type:'scattergeo',
  mode:'markers'}];
var layout = {
geo : {
  projection: {type:"equirectangular"},
  showocean: true, oceancolor: "navy",
  showrivers: true, scope:"europe",
  resolution: 50,
  lataxis:{range:[35,48]},
  lonaxis:{range:[6,19]}
}}

Choropleth Map

var traces = [{
  type: 'choropleth',
  locations: ['ITA','DEU','FRA',
              'USA','CHN'],
  z: [2129,3820,2902,17420,10360],
  text: ['Italy','Germany','France',
         'USA','China'],
  autocolorscale: true,
  hoverinfo: 'z+text',
  colorbar: {
    tickprefix: '$',
    title: 'GDP<br>10^9 US$'
  }}];

Lines and dots

var traces = [{
        x: ['A', 'l', 'p', 'h', 'a'],
      	y: [1, 2, 4, 8, 3],
        type : "scatter",
        marker: {
              color: "orange",
              size: [10,20,30,20,10],
              line: {
                color:"purple",
                width: 2
              }
        },
        line: {
             color: "green",
             width: 1
        }
       }];

Coloring bars

var traces = [{
        x: ['A', 'l', 'p', 'h', 'a'],
      	y: [1, 2, 4, 8, 3],
        type : "bar",
        marker: {
            color: "orange",
            line:{
                color:"purple",
                width: 2
            }
        }
       }];

Line shapes

var traces = [{name:"spline",
    y: [1, 2, 4, 8, 3],
    type : "scatter",
    line: {
        color:"green", shape: "spline"
    }},
    {name:"line",
    y: [10, 9, 8, 2, 1],
    type : "scatter",
    line: {
        color: "navy", shape: "line"
    }},
    {name:"hv",
    y: [3, 4, 6, 8, 10],
    type : "scatter",
    line: {
        color: "orange", shape: "hv"
    }},
    {name:"vh",
    y: [0,2, 1, 3, 5],
    type : "scatter",
    line: {
        color: "purple", shape: "vh"
    }       }];

Titles

var traces = [{type:"scatter",
  x:[1,2,3,4],y:[10,3,5,7],}];
var layout = {
	title: "Sample graph",
	xaxis: {title:"X axis"},
	yaxis: {title:"Vertical axis"},
	margin : {t:40,b:40,r:2,l:40}
}

Margin must be large enough to avoid overlap with the graph.

Ranges

var traces = [{type:"scatter",
  x:[1,2,3,4],y:[10,3,5,7],}];
var layout = {
	xaxis: {range:[0,5]},
	yaxis: {range:[-1,11]},
}

Ticks

var traces = [{type:"bar",
  x:["A","B","C","D"],
  y:[.10,.3,.45,.15],}];
var layout = {
    xaxis: {tickprefix:"cat ",
            showtickprefix:"first"},
    yaxis: {tickformat:"%"},
    margin : {t:10,b:30,r:10,l:40}
}

Reverse axis

var traces = [{
         y:['A','B','C','D'],
         x:[10,3,5,7],
         orientation:"h",
         type:"bar"}
    ];
var layout = {
	yaxis: {autorange:'reversed'}
}

Multiples

var traces = [{type:"bar",
        x:["A","B","C","D"],
        y:[.10,.3,.45,.15],},
  { type:"scatter",
        yaxis:"y2",
        x:["A","B","C","D"],
        y:[20,50,90,30],}
  ];
  
var layout = {
    xaxis: {title:"Category",
            anchor:"y"},
    yaxis: {title:"Proportion",
           tickformat:"%",
           domain:[0,0.49]},
    yaxis2:{title:"Absolute",
            domain:[0.51,1]},
    margin:{t:1,b:35,r:1,l:60},
    showlegend: false
}

The trace with y axis y2 is define by yaxis2.

The domain property defines where the axis will be mapped.

Hover info

var traces = [{
        x: ['A', 'l', 'p', 'h', 'a'],
      	y: [1, 2, 4, 8, 3],
        text : ["Alpha","Lambda","Pi",
      	        "Theta","alpha"],
        type : "scatter",
        hoverinfo:"text"
       }];

Annotations

var traces = [{
         x:[1,2,3,4],
         y:[10,3,5,7],
         type:"scatter"}];
var layout = {
    annotations:[{
    text:"This a multiline<br>"+
         "annotation",
    x:3, y:5, ax:-50, ay:-50
    }],
    margin:{l:20,r:2,t:1,b:30}};

By default, x and y are in graph coordinates, while ax and ay are in pixels.

Legends

var traces = [{name:"First",
     x:[1,2,3,4], y:[10,3,5,7],
     type:"scatter",},
    {name:"Second",
     x:[.5,2,4.5,6], y:[3,2,5,8],
     type:"scatter",
     }];
var layout = {legend:{
            y:1,x:0,
            yanchor:"bottom",
            orientation:"h"
            },
    margin:{l:20,r:2,t:1,b:30}};

x and y are expressed in graph normalized units, 0 means left (bottom) side and 1 means right (top) side of the graph

Numbers as categories

var traces = [{name:"Vendite",
     x:[2013,2014,2015],
     y:[10,3,5],
     type:"scatter",}];
var layout = {
        xaxis:{title:"Year",
               type:'category'},
        margin:{l:20,r:2,t:1,b:40}};

Without the type:'category', x values even when reported as strings would be considered as numbers and the x axis would include meaningless mid values e.g. 2013.5

Diverging bar plot

var traces = [{
  name:"Males",
  x:[8686278,12731431,7427114,236912],
  y:["0-29","30-59","60-89","90-"],
  type:"bar",orientation: "h"
  },{
  name:"Females",
  x:[8247164,12808134,9073016,590955],
  y:["0-29","30-59","60-89","90-"],
  type:"bar",orientation: "h",
         xaxis: "x2"}];
var layout = {
  xaxis: { domain: [0, 0.43],
        autorange: 'reversed' },
  xaxis2: { domain: [0.57, 1] },
  yaxis : { position: 0.56 },
  legend:{ y:1,x:0.5,
    yanchor:"bottom",
    xanchor:"center",
    orientation:"h"
} };

Slope plot

traces = [{
    name: "Over 40",
    x: ["Associate","Full"],
    y: [30,70],
    type:"scatter",
    hoverinfo: "x+y"
},{
    name: "Under 40",
    x: ["Associate","Full"],
    y: [90,10],
    type:"scatter",
    hoverinfo: "x+y"
}];

layout = {
annotations : [
{x:"Associate",y:30,text:"Over 40",
    xanchor:"right", xshift:-3,
        showarrow:false },
{x:"Associate",y:90,text:"Under 40",
    xanchor:"right", xshift:-3,
        showarrow:false },
{x:"Full",y:70,text:"Over 40",
    xanchor:"left", xshift: 3,
        showarrow:false},
{x:"Full",y:10,text:"Under 40",
    xanchor:"left", xshift: 3,
        showarrow:false}
],
showlegend: false
};