Merge pull request #419 from plotly/add-new-docs

Docs for 3.4

Author: LiamConnors

_posts/plotly_js/fundamentals/legends/2025-02-23-legend-title-click.html

@@ -0,0 +1,56 @@
+---
+name: Legend Title Click Behavior
+language: plotly_js
+suite: legends
+order: 12
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+  x: [1, 2, 3],
+  y: [2, 1, 3],
+  name: 'Trace 1',
+  type: 'scatter'
+};
+
+var trace2 = {
+  x: [1, 2, 3],
+  y: [1, 3, 2],
+  name: 'Trace 2',
+  type: 'scatter'
+};
+
+var trace3 = {
+  x: [1, 2, 3],
+  y: [3, 2, 1],
+  name: 'Trace 3',
+  legend: 'legend2',
+  type: 'scatter'
+};
+
+var trace4 = {
+  x: [1, 2, 3],
+  y: [2, 3, 1],
+  name: 'Trace 4',
+  legend: 'legend2',
+  type: 'scatter'
+};
+
+var data = [trace1, trace2, trace3, trace4];
+
+var layout = {
+  legend: {
+    title: {text: 'First Legend'},
+    titleclick: 'toggleothers',
+    titledoubleclick: 'toggle'
+  },
+  legend2: {
+    title: {text: 'Second Legend'},
+    titleclick: 'toggleothers',
+    titledoubleclick: 'toggle',
+    y: 0.5
+  }
+};
+
+Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/fundamentals/marker-style/2018-03-15-color-opacity.html

@@ -2,7 +2,7 @@
 name: Color Opacity
 language: plotly_js
 suite: marker-style
-order: 5
+order: 7
 sitemap: false
 arrangement: horizontal
 markdown_content: |

_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opacity.html

@@ -2,7 +2,7 @@
 name: Marker Opacity
 language: plotly_js
 suite: marker-style
-order: 4
+order: 6
 sitemap: false
 arrangement: horizontal
 markdown_content: |

_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opaque.html

@@ -2,7 +2,7 @@
 name: Fully Opaque
 language: plotly_js
 suite: marker-style
-order: 2
+order: 4
 sitemap: false
 arrangement: horizontal
 markdown_content: |

_posts/plotly_js/fundamentals/marker-style/2018-03-15-trace-opacity.html

@@ -2,7 +2,7 @@
 name: Trace Opacity
 language: plotly_js
 suite: marker-style
-order: 3
+order: 5
 sitemap: false
 arrangement: horizontal
 markdown_content: |

_posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash-array.html

@@ -0,0 +1,32 @@
+---
+name: Dashed Marker Borders - Array
+language: plotly_js
+suite: marker-style
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+  You can also pass an array of dash styles to set different styles per marker.
+---
+
+var styles = ['solid', 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot'];
+
+var data = [{
+  x: [0, 1, 2, 3, 4, 5],
+  y: [0, 0, 0, 0, 0, 0],
+  type: 'scatter',
+  mode: 'markers+text',
+  text: styles,
+  textposition: 'bottom center',
+  marker: {
+    size: 30,
+    color: 'white',
+    line: {
+      color: 'blue',
+      width: 2,
+      dash: styles
+    }
+  }
+}];
+
+Plotly.newPlot('myDiv', data);

_posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash.html

@@ -0,0 +1,32 @@
+---
+name: Dashed Marker Borders
+language: plotly_js
+suite: marker-style
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+  *New in 3.4*
+
+  Set `dash` on `marker.line` to control the dash pattern of marker borders. Supported values are: `'solid'` (default), `'dot'`, `'dash'`, `'longdash'`, `'dashdot'`, `'longdashdot'`, or a custom dash length list in px (for example, `'12px,6px'`).
+
+  The `marker.line.dash` attribute is available on `scatter`, `scatterpolar`, `scattergeo`, `scatterternary`, `scattercarpet`, and `scattersmith` traces.
+---
+
+var data = [{
+  x: [1, 2, 3, 4, 5],
+  y: [2, 4, 3, 5, 4],
+  type: 'scatter',
+  mode: 'markers',
+  marker: {
+    size: 25,
+    color: 'white',
+    line: {
+      color: 'blue',
+      width: 2,
+      dash: 'dot'
+    }
+  }
+}];
+
+Plotly.newPlot('myDiv', data)

_posts/plotly_js/fundamentals/shapes/2025-02-11-path-shapes-spanning-subplots.html

@@ -0,0 +1,47 @@
+---
+name: Path Shapes Spanning Subplots
+language: plotly_js
+suite: shape
+order: 13
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+  For `path` shapes, the array must have one entry for each coordinate in the path string. Each coordinate in the path maps to the corresponding element in the `xref`/`yref` array, in order.
+---
+
+var trace1 = {
+    x: [1, 2, 3],
+    y: [1, 2, 3],
+    mode: 'markers',
+    xaxis: 'x',
+    yaxis: 'y'
+};
+
+var trace2 = {
+    x: [1, 2, 3],
+    y: [3, 2, 1],
+    mode: 'markers',
+    xaxis: 'x2',
+    yaxis: 'y2'
+};
+
+var layout = {
+    grid: {rows: 1, columns: 2, pattern: 'independent'},
+    shapes: [
+        {
+            type: 'path',
+            // Chevron shape spanning both subplots
+            // Path coordinates map to axis refs in order:
+            //   M 2.5 1.5  -> xref[0]=x,  yref[0]=y   (start in subplot 1)
+            //   L 1.5 2    -> xref[1]=x2, yref[1]=y2  (tip in subplot 2)
+            //   L 2.5 2.5  -> xref[2]=x,  yref[2]=y   (end in subplot 1)
+            path: 'M 2.5 1.5 L 1.5 2 L 2.5 2.5',
+            xref: ['x', 'x2', 'x'],
+            yref: ['y', 'y2', 'y'],
+            line: {color: 'purple', width: 3}
+        }
+    ],
+    showlegend: false
+};
+
+Plotly.newPlot('myDiv', [trace1, trace2], layout);

_posts/plotly_js/fundamentals/shapes/2025-02-11-shapes-spanning-subplots.html

@@ -0,0 +1,54 @@
+---
+name: Shapes Spanning Subplots
+language: plotly_js
+suite: shape
+order: 12
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+  *New in 3.4*
+
+  You can create shapes that span multiple subplots by passing an array of axis references to `xref` and `yref`. Each element in the array specifies which axis the corresponding coordinate refers to. For example, with `xref: ['x', 'x2']`, `x0` refers to the `x` axis and `x1` refers to the `x2` axis.
+
+  **Note:** When using arrays with `xref` and `yref`, `xsizemode: 'pixel'` and `ysizemode: 'pixel'` are not supported.
+---
+
+var trace1 = {
+    x: [1, 2, 3],
+    y: [4, 5, 6],
+    mode: 'markers',
+    marker: {size: 10},
+    xaxis: 'x',
+    yaxis: 'y'
+};
+
+var trace2 = {
+    x: [1, 2, 3],
+    y: [6, 5, 4],
+    mode: 'markers',
+    marker: {size: 10},
+    xaxis: 'x2',
+    yaxis: 'y2'
+};
+
+var layout = {
+    grid: {rows: 1, columns: 2, pattern: 'independent'},
+    shapes: [
+        {
+            type: 'rect',
+            // x0 uses x-axis (subplot 1), x1 uses x2-axis (subplot 2)
+            xref: ['x', 'x2'],
+            // y0 uses y-axis (subplot 1), y1 uses y2-axis (subplot 2)
+            yref: ['y', 'y2'],
+            x0: 2,
+            y0: 4.5,
+            x1: 3,
+            y1: 5.5,
+            fillcolor: 'rgba(255, 0, 0, 0.2)',
+            line: {color: 'red', width: 2}
+        }
+    ],
+    showlegend: false
+};
+
+Plotly.newPlot('myDiv', [trace1, trace2], layout);