Add unified hover examples

Author: LiamConnors

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

@@ -0,0 +1,45 @@
+---
+name: Custom Unified Hover Title
+language: plotly_js
+suite: hover
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+   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);