update examples to use title.text

LiamConnors · LiamConnors · commit 1ef91089da43 · 2024-11-06T16:30:08.000-05:00
diff --git a/_posts/plotly_js/2015-04-05-plotly_js-index.html b/_posts/plotly_js/2015-04-05-plotly_js-index.html
@@ -51,9 +51,25 @@ <h1>Plotly JavaScript Open Source Graphing Library</h1>
                     reversescale: true, zmax: 2.5, zmin: -2.5
                   };
                   var layout = {
-                    title: 'turbulence simulation',
-                    xaxis: {title: 'radial direction', showline: true, mirror: 'allticks', ticks: 'inside'},
-                    yaxis: {title: 'vertical direction', showline: true, mirror: 'allticks', ticks: 'inside'},
+                    title: {
+                      text: 'turbulence simulation'
+                  },
+                    xaxis: {
+                      title: {
+                          text: 'radial direction'
+                      },
+                      showline: true,
+                      mirror: 'allticks',
+                      ticks: 'inside'
+                    },
+                    yaxis: {
+                        title: {
+                            text: 'vertical direction'
+                        },
+                        showline: true,
+                        mirror: 'allticks',
+                        ticks: 'inside'
+                    },
                     margin: {l: 40, b: 40, t: 60},
                     annotations: [{
                       showarrow: false,
@@ -97,7 +113,11 @@ <h1>Plotly JavaScript Open Source Graphing Library</h1>
                     };
 
                     var layout = {
-                      yaxis: {title: "Wind Speed"},       // set the y axis title
+                      yaxis: {
+                        title: {
+                          text: "Wind Speed"
+                        }
+                      },       // set the y axis title
                       xaxis: {
                         showgrid: false,                  // remove the x-axis grid lines
                         tickformat: "%B, %Y"              // customize the date format to "month, day"
diff --git a/_posts/plotly_js/2016-06-03-plotly_js_function_ref.html b/_posts/plotly_js/2016-06-03-plotly_js_function_ref.html
@@ -84,14 +84,20 @@ <h4 id="plotly-newplot"><a href="{{ BASE_URL }}/javascript/plotlyjs-function-ref
 }];
 
 var layout = {
-  title: 'Sales Growth',
+  title: {
+    text: 'Sales Growth'
+  },
   xaxis: {
-    title: 'Year',
+    title: {
+      text: 'Year'
+    },
     showgrid: false,
     zeroline: false
   },
   yaxis: {
-    title: 'Percent',
+    title: {
+      text: 'Percent'
+    },
     showline: false
   }
 };
@@ -252,7 +258,7 @@ <h4 id="plotly-relayout"><a href="{{ BASE_URL }}/javascript/plotlyjs-function-re
 <pre><code class="language-javascript hljs" data-lang="javascript">
 // update only values within nested objects
 var update = {
-    title: 'some new title', // updates the title
+    title: {text: 'some new title'}, // updates the title
     'xaxis.range': [0, 5],   // updates the xaxis range
     'yaxis.range[1]': 15     // updates the end of the yaxis range
 };
@@ -290,7 +296,7 @@ <h4 id="plotly-update"><a href="{{ BASE_URL }}/javascript/plotlyjs-function-refe
 <pre><code class="language-javascript hljs" data-lang="javascript">
 //update the layout and all the traces
 var layout_update = {
-    title: 'some new title', // updates the title
+    title: {text: 'some new title'}, // updates the title
 };
 var data_update = {
     'marker.color': 'red'
@@ -299,7 +305,7 @@ <h4 id="plotly-update"><a href="{{ BASE_URL }}/javascript/plotlyjs-function-refe
 
 //update the layout and a single trace
 var layout_update = {
-    title: 'some new title', // updates the title
+    title: {text: 'some new title'}, // updates the title
 };
 var data_update = {
     'marker.color': 'red'
@@ -308,7 +314,7 @@ <h4 id="plotly-update"><a href="{{ BASE_URL }}/javascript/plotlyjs-function-refe
 
 //update the layout and two specific traces
 var layout_update = {
-    title: 'some new title', // updates the title
+    title: {text: 'some new title'}, // updates the title
 };
 var data_update = {
     'marker.color': 'red'
@@ -380,7 +386,9 @@ <h4 id="plotly-makeTemplate"><a href="{{ BASE_URL }}/javascript/plotlyjs-functio
     y: [2, 1, 3, 2],
   }],
   layout:{
-    title: 'Quarterly Earnings'
+    title: {
+      text: 'Quarterly Earnings'
+    }
   }
 };
 
diff --git a/_posts/plotly_js/3d/3d-cluster/2015-08-10-3d-point-cluster.html b/_posts/plotly_js/3d/3d-cluster/2015-08-10-3d-point-cluster.html
@@ -70,7 +70,9 @@
                 zeroline: false
             }
         },
-        title: '3d point clustering',
+        title: {
+            text: '3d point clustering'
+        },
         width: 477
     };
 
diff --git a/_posts/plotly_js/3d/3d-line/2015-04-09-random-walk.html b/_posts/plotly_js/3d/3d-line/2015-04-09-random-walk.html
@@ -74,7 +74,9 @@
 
 var data = [trace1, trace2, trace3];
 var layout = {
-  title: '3D Line Plot',
+  title: {
+    text: '3D Line Plot'
+  },
   autosize: false,
   width: 500,
   height: 500,
diff --git a/_posts/plotly_js/3d/3d-surface/2015-04-09-elevations-3d-surface.html b/_posts/plotly_js/3d/3d-surface/2015-04-09-elevations-3d-surface.html
@@ -24,7 +24,9 @@
         }];
 
 var layout = {
-  title: 'Mt Bruno Elevation',
+  title: {
+    text: 'Mt Bruno Elevation'
+  },
   autosize: false,
   width: 500,
   height: 500,
diff --git a/_posts/plotly_js/3d/3d-surface/2018-10-09-surface-contours.html b/_posts/plotly_js/3d/3d-surface/2018-10-09-surface-contours.html
@@ -34,7 +34,9 @@
 }];
 
 var layout = {
-  title: 'Mt Bruno Elevation With Projected Contours',
+  title: {
+    text: 'Mt Bruno Elevation With Projected Contours'
+  },
   scene: {camera: {eye: {x: 1.87, y: 0.88, z: -0.64}}},
   autosize: false,
   width: 500,
diff --git a/_posts/plotly_js/3d/ribbon-plots/2015-08-12-ribbon-plot-example.html b/_posts/plotly_js/3d/ribbon-plots/2015-08-12-ribbon-plot-example.html
@@ -57,15 +57,17 @@
   var data = [trace1, trace2, trace3, trace4, trace5, trace6, trace7];
 
   var layout = {
-    title: 'Ribbon Plot',
+    title: {
+      text: 'Ribbon Plot'
+    },
     showlegend: false,
     autosize: true,
     width: 600,
     height: 600,
     scene: {
-      xaxis: {title: 'Sample #'},
-      yaxis: {title: 'Wavelength'},
-      zaxis: {title: 'OD'}
+      xaxis: {title: {text: 'Sample #'}},
+      yaxis: {title: {text: 'Wavelength'}},
+      zaxis: {title: {text: 'OD'}}
     }
   };
   Plotly.newPlot('myDiv', data, layout);
diff --git a/_posts/plotly_js/animations/animations-slider/2017-08-22-adding-sliders.html b/_posts/plotly_js/animations/animations-slider/2017-08-22-adding-sliders.html
@@ -106,11 +106,11 @@
 
   var layout = {
     xaxis: {
-      title: 'Life Expectancy',
+      title: {text: 'Life Expectancy'},
       range: [30, 85]
     },
     yaxis: {
-      title: 'GDP per Capita',
+      title: {text: 'GDP per Capita'},
       type: 'log'
     },
     hovermode: 'closest',
diff --git a/_posts/plotly_js/animations/filled-area-animations/2017-08-22-filled-area-animations.html b/_posts/plotly_js/animations/filled-area-animations/2017-08-22-filled-area-animations.html
@@ -33,7 +33,9 @@
     mode: 'lines',
     line: {color: 'green'}
   }], {
-    title: "Filled-Area Animation",
+    title: {
+      text: "Filled-Area Animation"
+    },
     xaxis: {
       type: 'date',
       range: [
diff --git a/_posts/plotly_js/animations/filled-area-animations/2017-08-22-multiple-filled-area-animations.html b/_posts/plotly_js/animations/filled-area-animations/2017-08-22-multiple-filled-area-animations.html
@@ -51,7 +51,9 @@
   var data = [trace1,trace2];
 
   var layout = {
-    title: 'Multiple Trace Filled-Area Animation',
+    title: {
+      text: 'Multiple Trace Filled-Area Animation'
+    },
     xaxis: {
       range: [frames[99].data[0].x[0], frames[99].data[0].x[99]],
       showgrid: false
diff --git a/_posts/plotly_js/animations/map-animations/2017-08-22-choropleth-animation.html b/_posts/plotly_js/animations/map-animations/2017-08-22-choropleth-animation.html
@@ -47,7 +47,9 @@
 
 }];
 var layout = {
-    title: 'World Life Expectency<br>1952 - 2007',
+    title: {
+      text: 'World Life Expectency<br>1952 - 2007'
+    },
     geo:{
        scope: 'world',
        countrycolor: 'rgb(255, 255, 255)',
diff --git a/_posts/plotly_js/basic/area/2015-04-09-hoveron.html b/_posts/plotly_js/basic/area/2015-04-09-hoveron.html
@@ -34,7 +34,9 @@
   }]
 
 var layout = {
-  title: 'Hover on <i>points</i> or <i>fill</i>',
+  title: {
+    text: 'Hover on <i>points</i> or <i>fill</i>'
+  },
   xaxis: {
     range: [0,5]
   },
@@ -43,4 +45,4 @@
   }
 }
 
-Plotly.newPlot('myDiv', data, layout) 
+Plotly.newPlot('myDiv', data, layout)
diff --git a/_posts/plotly_js/basic/area/2015-08-10-overlaid-area-char-without-boundary-lines.html b/_posts/plotly_js/basic/area/2015-08-10-overlaid-area-char-without-boundary-lines.html
@@ -24,7 +24,9 @@
 };
 
 var layout = {
-  title: 'Overlaid Chart Without Boundary Lines'
+  title: {
+    text: 'Overlaid Chart Without Boundary Lines'
+  }
 };
 
 var data = [trace1, trace2];
diff --git a/_posts/plotly_js/basic/bar/2015-04-09-bar-marker-array.html b/_posts/plotly_js/basic/bar/2015-04-09-bar-marker-array.html
@@ -18,7 +18,9 @@
 var data = [trace1];
 
 var layout = {
-  title: 'Least Used Feature'
+  title: {
+    text: 'Least Used Feature'
+  }
 };
 
 Plotly.newPlot('myDiv', data, layout);
diff --git a/_posts/plotly_js/basic/bar/2015-07-08-colored-and-styled-bar-chart.html b/_posts/plotly_js/basic/bar/2015-07-08-colored-and-styled-bar-chart.html
@@ -26,7 +26,9 @@
 var data = [trace1, trace2];
 
 var layout = {
-  title: 'US Export of Plastic Scrap',
+  title: {
+    text: 'US Export of Plastic Scrap'
+  },
   xaxis: {tickfont: {
       size: 14,
       color: 'rgb(107, 107, 107)'
diff --git a/_posts/plotly_js/basic/bar/2015-08-07-Rotated-bar-chart-labels.html b/_posts/plotly_js/basic/bar/2015-08-07-Rotated-bar-chart-labels.html
@@ -32,7 +32,9 @@
 var data = [trace1, trace2];
 
 var layout = {
-  title: '2013 Sales Report',
+  title: {
+    text: '2013 Sales Report'
+  },
   xaxis: {
     tickangle: -45
   },
diff --git a/_posts/plotly_js/basic/bar/2015-08-07-bar-chart-with-hover-text.html b/_posts/plotly_js/basic/bar/2015-08-07-bar-chart-with-hover-text.html
@@ -20,7 +20,9 @@
 var data = [trace1];
 
 var layout = {
-  title: 'Number of Graphs Made this Week',
+  title: {
+    text: 'Number of Graphs Made this Week'
+  },
   font:{
     family: 'Raleway, sans-serif'
   },
diff --git a/_posts/plotly_js/basic/bar/2015-08-07-barchart-direct-labels.html b/_posts/plotly_js/basic/bar/2015-08-07-barchart-direct-labels.html
@@ -31,7 +31,9 @@
 var data = [trace1];
 
 var layout = {
-  title: 'January 2013 Sales Report',
+  title: {
+    text: 'January 2013 Sales Report'
+  },
   barmode: 'stack'
 };
 
diff --git a/_posts/plotly_js/basic/bar/2015-08-07-waterfall-bar-chart.html b/_posts/plotly_js/basic/bar/2015-08-07-waterfall-bar-chart.html
@@ -77,7 +77,9 @@
 var data = [trace1, trace2, trace3, trace4];
 
 var layout = {
-  title: 'Annual Profit 2015',
+  title: {
+    text: 'Annual Profit 2015'
+  },
   barmode: 'stack',
   paper_bgcolor: 'rgba(245,246,249,1)',
   plot_bgcolor: 'rgba(245,246,249,1)',
diff --git a/_posts/plotly_js/basic/bar/2016-06-15-barmode-relative.html b/_posts/plotly_js/basic/bar/2016-06-15-barmode-relative.html
@@ -35,10 +35,20 @@
 
 var data = [trace1, trace2, trace3, trace4];
 var layout = {
-  xaxis: {title: 'X axis'},
-  yaxis: {title: 'Y axis'},
+  xaxis: {
+    title: {
+      text: 'X axis'
+    }
+  },
+  yaxis: {
+    title: {
+      text: 'Y axis'
+    }
+  },
   barmode: 'relative',
-  title: 'Relative Barmode'
+  title: {
+    text: 'Relative Barmode'
+  }
 };
 
-Plotly.newPlot('myDiv', data, layout);
+Plotly.newPlot('myDiv', data, layout);
diff --git a/_posts/plotly_js/basic/bar/2017-08-30-barchart-direct-labels-grouped.html b/_posts/plotly_js/basic/bar/2017-08-30-barchart-direct-labels-grouped.html
@@ -48,7 +48,9 @@
 var data = [trace1,trace2];
 
 var layout = {
-  title: 'January 2013 Sales Report'
+  title: {
+    text: 'January 2013 Sales Report'
+  }
 };
 
 Plotly.newPlot('myDiv', data, layout);
diff --git a/_posts/plotly_js/basic/bar/2024-02-02-rounded-bars.html b/_posts/plotly_js/basic/bar/2024-02-02-rounded-bars.html
@@ -5,9 +5,9 @@
 order: 9
 sitemap: false
 arrangement: horizontal
-markdown_content: | 
-  To create rounded corners on bars, set `barcornerradius` on the layout to a number of pixels, or a string with a percentage of the bar width, for example, 25%. 
-  You can also configure traces individually with `marker.cornerradius` on the trace. 
+markdown_content: |
+  To create rounded corners on bars, set `barcornerradius` on the layout to a number of pixels, or a string with a percentage of the bar width, for example, 25%.
+  You can also configure traces individually with `marker.cornerradius` on the trace.
 ---
 
 var trace1 = {
@@ -35,9 +35,19 @@
 
 var layout = {
   scattermode: 'group',
-  title: 'Grouped by Country',
-  xaxis: {title: 'Country'},
-  yaxis: {title: 'Medals'},
+  title: {
+    text: 'Grouped by Country'
+  },
+  xaxis: {
+    title: {
+      text: 'Country'
+    }
+  },
+  yaxis: {
+    title: {
+      text: 'Medals'
+    }
+  },
   barcornerradius: 15,
 };
 
diff --git a/_posts/plotly_js/basic/bubble/2015-08-10-hover-text-bubblechart.html b/_posts/plotly_js/basic/bubble/2015-08-10-hover-text-bubblechart.html
diff --git a/_posts/plotly_js/basic/bubble/2015-08-10-marker-size-and-color.html b/_posts/plotly_js/basic/bubble/2015-08-10-marker-size-and-color.html
diff --git a/_posts/plotly_js/basic/bubble/2015-08-10-markersize-bubblechart.html b/_posts/plotly_js/basic/bubble/2015-08-10-markersize-bubblechart.html
diff --git a/_posts/plotly_js/basic/bubble/2015-08-10-size-scaling-bubblechart.html b/_posts/plotly_js/basic/bubble/2015-08-10-size-scaling-bubblechart.html
diff --git a/_posts/plotly_js/basic/horizontal-bar/2015-07-08-colored-bar-chart.html b/_posts/plotly_js/basic/horizontal-bar/2015-07-08-colored-bar-chart.html
