Plotly.js 3.1 examples

_data/jsversion.json

@@ -1,3 +1,3 @@
 {
-  "version": "3.0.1"
+  "version": "3.1.0"
 }

_data/pyversion.json

@@ -1,3 +1,3 @@
 {
-  "version": "6.2.0"
+  "version": "6.3.0"
 }

_posts/plotly_js/fundamentals/axes/2025-06-29-zeroline.html

@@ -0,0 +1,30 @@
+---
+name: Zero Line Layer
+language: plotly_js
+suite: axes
+order: 12
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+   *New in 3.1*
+
+   By default, zero lines are displayed below traces. Set `zerolinelayer="above traces"` on an axis to display its zero line above traces.
+---
+var trace1 = {
+  x: ['A', 'B', 'C', 'D', 'A'],
+  y: [2, 0, 4, -3, 2],
+  fill: 'toself',
+  mode: 'none',
+  fillcolor: 'lightpink',
+  type: 'scatter'
+};
+
+var data = [trace1];
+
+var layout = {
+  yaxis: {
+    zerolinelayer: "above traces"  // Change to "below traces" to see the difference
+  }
+};
+
+Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/fundamentals/config-options/2025-07-29-button-disable-axis.html

@@ -0,0 +1,34 @@
+---
+name: Disabling Buttons for Specific Axes
+language: plotly_js
+suite: configuration
+order: 5.8
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+     *New in 3.1*
+
+     Disabling the zoom in, zoom out, and autoscale buttons for specific axes is supported on cartesian axes using the `modebardisable` attribute. In the following example, the zoom in and zoom out buttons are disabled on the `xaxis`, meaning these buttons only zoom in and out on the `yaxis`. Disable the autoscale button using `modebardisable='autoscale'`. You can also disable both autoscaling and zoom buttons using `modebardisable='zoominout+autoscale'`.
+---
+var data = [{
+  type: "scatter",
+  mode: "lines+markers",
+  x: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01"],
+  y: [150, 160, 155, 170, 165, 180],
+  name: "Google Stock Price"
+}];
+
+var layout = {
+  title: "Google Stock Price Over Time with Mode Bar Disabled",
+  xaxis: {
+    title: "Date",
+    type: "date",
+    // Try zooming in or out using the modebar buttons. These only apply to the yaxis in this example.
+    modebardisable: "zoominout"
+  },
+  yaxis: {
+    title: "Stock Price (USD)"
+  }
+};
+
+Plotly.newPlot("myDiv", data, layout);

_posts/plotly_js/fundamentals/hover/2025-07-29-unified-hover-template.html

@@ -0,0 +1,47 @@
+---
+name: Custom Unified Hover Title
+language: plotly_js
+suite: hover
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+   *New in 3.1*
+
+   Customize the title shown in unified hovermode by specifying `unifiedhovertitle.text`. The unified hover title is a template string that supports using variables from the data. Numbers are formatted using d3-format's syntax `%{variable:d3-format}`, for example `"Price: %{y:$.2f}"`. Dates are formatted using d3-time-format's syntax `%{variable|d3-time-format}`, for example `"Day: %{x|%A}"`.
+---
+var data = [
+  {
+    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+    y: [150.25, 165.50, 142.75, 178.90],
+    mode: 'lines+markers',
+    name: 'Stock A',
+    type: 'scatter'
+  },
+  {
+    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+    y: [85.30, 92.15, 88.45, 95.20],
+    mode: 'lines+markers',
+    name: 'Stock B',
+    type: 'scatter'
+  }
+];
+
+var layout = {
+  title: {
+    text: "Stock Prices with Custom Unified Hover Title"
+  },
+  hovermode: 'x unified',
+  xaxis: {
+    title: 'Date',
+    unifiedhovertitle: {
+      text: '<b>%{x|%A, %B %d, %Y}</b>'
+    }
+  },
+  yaxis: {
+    title: 'Price (USD)',
+    tickprefix: '$'
+  }
+};
+
+Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/fundamentals/hover/2025-07-29-unified-hover.html

@@ -0,0 +1,43 @@
+---
+name: Unified Hover Mode
+language: plotly_js
+suite: hover
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+   If "x unified" (or "y unified"), a single hoverlabel will appear for multiple points at the closest x- (or y-) coordinate within the `hoverdistance` with the caveat that no more than one hoverlabel will appear per trace.
+---
+var data = [
+  {
+    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+    y: [10, 15, 12, 18],
+    mode: 'markers+lines',
+    name: 'Series A',
+    hovertemplate: null,
+    type: 'scatter'
+  },
+  {
+    x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+    y: [8, 12, 16, 14],
+    mode: 'markers+lines',
+    name: 'Series B',
+    hovertemplate: null,
+    type: 'scatter'
+  }
+];
+
+var layout = {
+  title: {
+    text: "layout.hovermode='x unified'"
+  },
+  hovermode: 'x unified',
+  xaxis: {
+    title: 'Date'
+  },
+  yaxis: {
+    title: 'Value'
+  }
+};
+
+Plotly.newPlot('myDiv', data, layout);