From eb73aa50413fc2f344095f7573a713001c473d6c Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Wed, 18 Feb 2026 14:55:47 -0500 Subject: [PATCH 1/3] add examples --- ...5-02-11-path-shapes-spanning-subplots.html | 47 ++++++++++++++++ .../2025-02-11-shapes-spanning-subplots.html | 54 +++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 _posts/plotly_js/fundamentals/shapes/2025-02-11-path-shapes-spanning-subplots.html create mode 100644 _posts/plotly_js/fundamentals/shapes/2025-02-11-shapes-spanning-subplots.html diff --git a/_posts/plotly_js/fundamentals/shapes/2025-02-11-path-shapes-spanning-subplots.html b/_posts/plotly_js/fundamentals/shapes/2025-02-11-path-shapes-spanning-subplots.html new file mode 100644 index 000000000..bc374eb1b --- /dev/null +++ b/_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); diff --git a/_posts/plotly_js/fundamentals/shapes/2025-02-11-shapes-spanning-subplots.html b/_posts/plotly_js/fundamentals/shapes/2025-02-11-shapes-spanning-subplots.html new file mode 100644 index 000000000..6dd381b90 --- /dev/null +++ b/_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); From 80e9bcf314b2a1ba65130fd8a372e439cd9354b2 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 19 Feb 2026 14:16:00 -0500 Subject: [PATCH 2/3] add dash examples --- .../2018-03-15-color-opacity.html | 2 +- .../2018-03-15-marker-opacity.html | 2 +- .../2018-03-15-marker-opaque.html | 2 +- .../2018-03-15-trace-opacity.html | 2 +- .../2025-02-19-marker-line-dash-array.html | 32 +++++++++++++++++++ .../2025-02-19-marker-line-dash.html | 32 +++++++++++++++++++ 6 files changed, 68 insertions(+), 4 deletions(-) create mode 100644 _posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash-array.html create mode 100644 _posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash.html diff --git a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-color-opacity.html b/_posts/plotly_js/fundamentals/marker-style/2018-03-15-color-opacity.html index c971ad39e..8765cbb41 100644 --- a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-color-opacity.html +++ b/_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: | diff --git a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opacity.html b/_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opacity.html index 5258ff4f6..ee60b2fa0 100644 --- a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opacity.html +++ b/_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: | diff --git a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opaque.html b/_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opaque.html index 261547bfb..5450b667e 100644 --- a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-marker-opaque.html +++ b/_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: | diff --git a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-trace-opacity.html b/_posts/plotly_js/fundamentals/marker-style/2018-03-15-trace-opacity.html index 6207d5e11..7c33a1399 100644 --- a/_posts/plotly_js/fundamentals/marker-style/2018-03-15-trace-opacity.html +++ b/_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: | diff --git a/_posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash-array.html b/_posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash-array.html new file mode 100644 index 000000000..6b8f7a1b0 --- /dev/null +++ b/_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); diff --git a/_posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash.html b/_posts/plotly_js/fundamentals/marker-style/2025-02-19-marker-line-dash.html new file mode 100644 index 000000000..58057a9e4 --- /dev/null +++ b/_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) From a6f49a4ba506db75e14aee6cf92f6c9c665cb723 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Mon, 23 Feb 2026 13:23:16 -0500 Subject: [PATCH 3/3] Create 2025-02-23-legend-title-click.html --- .../2025-02-23-legend-title-click.html | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 _posts/plotly_js/fundamentals/legends/2025-02-23-legend-title-click.html diff --git a/_posts/plotly_js/fundamentals/legends/2025-02-23-legend-title-click.html b/_posts/plotly_js/fundamentals/legends/2025-02-23-legend-title-click.html new file mode 100644 index 000000000..4005ed36d --- /dev/null +++ b/_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);