Any Chart Cheat Sheet
Last modified: August 20, 2024
Introduction
This cheat sheet lists the most common chart types, together with a visual sample and the json required to create them. More chart types can be found at https://plot.ly/javascript/.
Basic Charts
Line Chart

[
{
"x": [ 1, 2 ],
"y": [ 1, 2 ],
"type": "scatter"
},
{
"x": [ 3, 4 ],
"y": [ 9, 14 ],
"type": "scatter"
}
]
Bubble Chart

[ {
"x": [ 1, 2, 3 ],
"y": [ 1, 2, 3 ],
"marker": {
"color": [ "red", "blue", "green" ],
"size": [ 20, 50, 80 ]
},
"mode": "markers"
} ]
Scatter Chart

[ {
"x": [ 1, 2, 3 ],
"y": [ 1, 2, 3 ],
"text": [ "A", "B", "C" ],
"textposition": "left center",
"mode": "markers+text"
} ]
Heatmap

[ {
"z": [ [ 1, 2 ], [ 3, 4 ] ],
"type": "heatmap"
} ]
Bar Chart

[ {
"y": [ "giraffe", "elephant" ],
"x": [ 2, 4 ],
"type": "bar",
"orientation": "h"
} ]
Column Chart

[ {
"x": [ "giraffe", "elephant" ],
"y": [ 2, 4 ],
"type": "bar",
"orientation": "v"
} ]
Pie Chart

[ {
"values": [ 10, 20, 30 ],
"labels": [ "Uganda", "Netherlands", "US" ],
"type": "pie"
} ]
Doughnut Chart

[ {
"values": [ 10, 20, 30 ],
"labels": [ "Uganda", "Netherlands", "US" ],
"hole": 0.4,
"type": "pie"
} ]
Area Chart

[ {
"x": [ 1, 2, 3 ],
"y": [ 1, 2, 3 ],
"mode": "scatter",
"fill": "tonexty"
} ]
Statistical Charts
Histograms

[ {
"x": [ 0, 2, 1, 3, 4, 2 ],
"type": "histogram"
} ]
Box Chart

[ {
"x": [ 1, 2, 3, 4, 5 ],
"type": "box"
} ]
2D Histogram

[ {
"x": [ 1, 2, 3, 4, 5 ],
"y": [ 1, 2, 3, 4, 5 ],
"type": "histogram2d"
} ]
Maps
Bubble Map

[ {
"lon": [ 100, 400 ],
"lat": [ 0, 0 ],
"type": "scattergeo",
"marker": {
"color": [ "red", "blue" ],
"size": [ 20, 50 ]
},
"mode": "marker"
} ]
Choropleth Map

Choropleth Map Data
[ {
"type": "choropleth",
"locations": ["AZ", "CA", "VT"],
"locationmode": "USA-states",
"z": [10,20,40],
"name": "Choropleth data"
} ]
Choropleth Map Layout
{
"geo": {
"scope": "usa"
}
}
Scatter Map

[ {
"lon": [ 12, 22 ],
"lat": [ 42, 39 ],
"type": "scattergeo",
"text": [ "Rome", "Greece" ],
"mode": "marker"
} ]
3D Charts
3D Surface Chart

[ {
"colorscale": "Viridis",
"z": [ [ 3, 5, 7, 9 ], [ 21, 13, 8, 5 ] ],
"type": "surface"
} ]
3D Line Chart

[ {
"x": [ 9, 8, 5, 1 ],
"y": [ 1, 2, 4, 8 ],
"z": [ 11, 8, 15, 3 ],
"mode": "lines",
"type": "scatter3d"
} ]
3D Scatter Chart

[ {
"x": [ "9", "8", "5", "1" ],
"y": [ "1", "2", "4", "8" ],
"z": [ "11", "8", "15", "3" ],
"mode": "markers",
"type": "scatter3d"
} ]
Other Charts
Contour Chart

[ {
"z": [ [ 2, 2, 4, 11 ], [ 5, 14, 8, 11 ] ],
"type": "contour"
} ]
Time Series

[ {
"type": "scatter",
"mode": "lines",
"x": [ "2018-09-04", "2018-10-04", "2018-11-04", "2018-12-04", "2018-12-04" ],
"y": [ 5, 2, 7, 10 ]
} ]
Group By Chart

[ {
"type": "scatter",
"x": [ "Arthur","Jolly","Daphine","Arthur","Jolly","Daphine" ],
"y": [ 1, 6, 2, 5, 8, 1 ],
"mode": "markers"
} ]
Symmetric Error Bar

[ {
"x": [ 0, 1, 2 ],
"y": [ 6, 10, 2 ],
"error_y": {
"type": "data",
"array": [ 4, 2, 3 ]
},
"type": "scatter"
} ]
Polar Chart

[ {
"type": "scatterpolar",
"r": [ 34, 11, 39, 37, 34 ],
"theta": [ "A", "B", "C", "D", "A" ],
"fill": "toself"
} ]
Ternary Plot

Ternary Plot Data
[{
"type": "scatterternary",
"mode": "markers",
"a": [ 5, 4, 5, 2, 10 ],
"b": [ 2, 1, 15, 20, 8 ],
"c": [ 1, 20, 5, 15, 10 ],
"text":[ "point 1", "point 2", "point 3", "point 4", "point 5" ]
}]
Ternary Plot Layout
{
"ternary": {
"sum":100
}
}
Read More
- Full chart documentation is here: https://plot.ly/javascript/
- Any Chart Widget
- How to Use Any Chart