Any Chart Cheat Sheet

Last modified: March 28, 2025

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

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

Bubble Chart

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

Scatter Chart

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

Heatmap

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

Bar Chart

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

Column Chart

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

Pie Chart

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

Doughnut Chart

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

Area Chart

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

Statistical Charts

Histograms

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

Box Chart

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

2D Histogram

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

Maps

Bubble Map

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

Choropleth Map

ChoroplethMapProperties

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

ScatterMapProperties 
[ {  "lon": [ 12, 22 ],  "lat": [ 42, 39 ],  "type": "scattergeo",  "text": [ "Rome", "Greece" ],  "mode": "marker" } ]

3D Charts

3D Surface Chart

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

3D Line Chart

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

3D Scatter Chart

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

Other Charts

Contour Chart

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

Time Series

TimeSeriesProperties 
[ {  "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

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

Symmetric Error Bar

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

Polar Chart

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

Ternary Plot

TernaryPlotProperties

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