diff --git a/src/marks/tip.js b/src/marks/tip.js
index 10ce7f8973..b745084d65 100644
--- a/src/marks/tip.js
+++ b/src/marks/tip.js
@@ -135,9 +135,9 @@ export class Tip extends Mark {
const value = channel.value[i];
if (!defined(value) && channel.scale == null) continue;
if (key === "x2" && "x1" in sources) {
- yield {name: formatLabel(scales, channel, "x"), value: formatPair(sources.x1, channel, i)};
+ yield {name: formatPairLabel(scales, sources.x1, channel, "x"), value: formatPair(sources.x1, channel, i)};
} else if (key === "y2" && "y1" in sources) {
- yield {name: formatLabel(scales, channel, "y"), value: formatPair(sources.y1, channel, i)};
+ yield {name: formatPairLabel(scales, sources.y1, channel, "y"), value: formatPair(sources.y1, channel, i)};
} else {
const scale = channel.scale;
const line = {name: formatLabel(scales, channel, key), value: formatDefault(value)};
@@ -334,6 +334,12 @@ function formatPair(c1, c2, i) {
: `${formatDefault(c1.value[i])}–${formatDefault(c2.value[i])}`;
}
+function formatPairLabel(scales, c1, c2, defaultLabel) {
+ const l1 = formatLabel(scales, c1, defaultLabel);
+ const l2 = formatLabel(scales, c2, defaultLabel);
+ return l1 === l2 ? l1 : `${l1}–${l2}`;
+}
+
function formatLabel(scales, c, defaultLabel) {
return String(scales[c.scale]?.label ?? c?.label ?? defaultLabel);
}
diff --git a/test/output/tipAreaBand.svg b/test/output/tipAreaBand.svg
new file mode 100644
index 0000000000..9ad11da81c
--- /dev/null
+++ b/test/output/tipAreaBand.svg
@@ -0,0 +1,66 @@
+
\ No newline at end of file
diff --git a/test/plots/tip.ts b/test/plots/tip.ts
index 9b49f06b2a..d2b1b78c0d 100644
--- a/test/plots/tip.ts
+++ b/test/plots/tip.ts
@@ -2,6 +2,11 @@ import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {feature, mesh} from "topojson-client";
+export async function tipAreaBand() {
+ const aapl = await d3.csv("data/aapl.csv", d3.autoType);
+ return Plot.areaY(aapl, {x: "Date", y1: "Low", y2: "High", tip: true, curve: "step", stroke: "currentColor"}).plot();
+}
+
export async function tipAreaStack() {
const industries = await d3.csv("data/bls-industry-unemployment.csv", d3.autoType);
return Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry", tip: true}).plot({marginLeft: 50});