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