Merge pull request #1110 from plotly/subplots-with-layout-grids

Subplots with layout grids

Author: michaelbabyn

_posts/plotly_js/basic/pie/2015-08-10-donut-chart.html

@@ -11,9 +11,7 @@
 var data = [{
   values: [16, 15, 12, 6, 5, 4, 42],
   labels: ['US', 'China', 'European Union', 'Russian Federation', 'Brazil', 'India', 'Rest of World' ],
-  domain: {
-    x: [0, .48]
-  },
+  domain: {column: 0},
   name: 'GHG Emissions',
   hoverinfo: 'label+percent+name',
   hole: .4,
@@ -23,7 +21,7 @@
   labels: ['US', 'China', 'European Union', 'Russian Federation', 'Brazil', 'India', 'Rest of World' ],
   text: 'CO2',
   textposition: 'inside',
-  domain: {x: [.52, 1]},
+  domain: {column: 1},
   name: 'CO2 Emissions',
   hoverinfo: 'label+percent+name',
   hole: .4,
@@ -52,8 +50,10 @@
       y: 0.5
     }
   ],
-  height: 600,
-  width: 600
+  height: 400,
+  width: 600,
+  showlegend: false,
+  grid: {rows: 1, columns: 2}
 };
 
 Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html

@@ -7,7 +7,7 @@
 sitemap: false
 arrangement: horizontal
 markdown_content: |
-  In order to create pie chart subplots, you need to use the [domain](https://plot.ly/javascript/reference/#pie-domain) attribute. It is important to note, that the `X` array sets the horizontal position whilst the `Y` array sets the vertical. For example, `x: [0,0.5], y : [0,0.5]` would mean the bottom left position of the plot. 
+  In order to create pie chart subplots, you need to use the [domain](https://plot.ly/javascript/reference/#pie-domain) attribute. `domain` allows you to place each trace on a [grid](https://plot.ly/javascript/reference/#layout-grid) of rows and columns defined in the layout or within a rectangle defined by `X` and `Y` arrays. The example below uses the `grid` method (with a 2 x 2 grid defined in the layout) for the first three traces and the X and Y method for the fourth trace.
 ---
 
 var allLabels = ['1st', '2nd', '3rd', '4th', '5th'];
@@ -35,8 +35,8 @@
     colors: ultimateColors[0]
   },
   domain: {
-    x: [0, .48],
-    y: [0, .49]
+    row: 0,
+    column: 0
   },
   hoverinfo: 'label+percent+name',
   textinfo: 'none'
@@ -49,8 +49,8 @@
     colors: ultimateColors[1]
   },
   domain: {
-    x: [0.52, 1],
-    y: [0, .49]
+    row: 1,
+    column: 0
   },
   hoverinfo: 'label+percent+name',
   textinfo: 'none'
@@ -63,8 +63,8 @@
     colors: ultimateColors[2]
   },
   domain: {
-    x: [0, .48],
-    y: [.51, 1]
+    row: 0,
+    column: 1
   },
   hoverinfo: 'label+percent+name',
   textinfo: 'none'
@@ -77,16 +77,17 @@
     colors: ultimateColors[3]
   },
   domain: {
-    x: [0.52, 1],
-    y: [0.52, 1]
+    x: [0.52,1],
+    y: [0, 0.48]
   },
   hoverinfo: 'label+percent+name',
   textinfo: 'none'
 }];
 
 var layout = {
   height: 400,
-  width: 500
+  width: 500,
+  grid: {rows: 2, columns: 2}
 };
 
 Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/redirects/2018-10-02-js-subplots.html

@@ -0,0 +1,6 @@
+---
+permalink: javascript/subplot-charts/
+redirect_to: javascript/#multiple-axes-subplots-and-insets
+sitemap: false
+---
+

_posts/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html

@@ -40,26 +40,7 @@
 var data = [trace1, trace2, trace3, trace4];
 
 var layout = {
-  xaxis: {domain: [0, 0.45]},
-  yaxis: {domain: [0, 0.45]},
-  xaxis4: {
-    domain: [0.55, 1],
-    anchor: 'y4'
-  },
-  xaxis3: {
-    domain: [0, 0.45],
-    anchor: 'y3'
-  },
-  xaxis2: {domain: [0.55, 1]},
-  yaxis2: {
-    domain: [0, 0.45],
-    anchor: 'x2'
-  },
-  yaxis3: {domain: [0.55, 1]},
-  yaxis4: {
-    domain: [0.55, 1],
-    anchor: 'x4'
-  }
+  grid: {rows: 2, columns: 2, pattern: 'independent'},
 };
 
 Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html

@@ -41,17 +41,11 @@
 var data = [trace1, trace2, trace3, trace4];
 
 var layout = {
-  xaxis: {domain: [0, 0.45]},
-  yaxis: {domain: [0, 0.45]},
-  xaxis4: {
-    domain: [0.55, 1],
-    anchor: 'y4'
-  },
-  xaxis2: {domain: [0.55, 1]},
-  yaxis3: {domain: [0.55, 1]},
-  yaxis4: {
-    domain: [0.55, 1],
-    anchor: 'x4'
+  grid: {
+    rows: 2,
+    columns: 2,
+    subplots:[['xy','x2y'], ['xy3','x4y4']],
+    roworder:'bottom to top'
   }
 };
 

_posts/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html

@@ -25,9 +25,7 @@
 var data = [trace1, trace2];
 
 var layout = {
-  xaxis: {domain: [0, 0.45]},
-  yaxis2: {anchor: 'x2'},
-  xaxis2: {domain: [0.55, 1]}
+  grid: {rows: 1, columns: 2, pattern: 'independent'},
 };
 
 Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html

@@ -32,12 +32,11 @@
 var data = [trace1, trace2, trace3];
 
 var layout = {
-  yaxis: {domain: [0, 0.266]},
-  legend: {traceorder: 'reversed'},
-  xaxis3: {anchor: 'y3'},
-  xaxis2: {anchor: 'y2'},
-  yaxis2: {domain: [0.366, 0.633]},
-  yaxis3: {domain: [0.733, 1]}
+grid: {
+    rows: 3,
+    columns: 1,
+    pattern: 'independent',
+    roworder: 'bottom to top'}
 };
 
 Plotly.newPlot('myDiv', data, layout);