diff --git a/src/marks/area.js b/src/marks/area.js
index 628088445a..7b1f6ac180 100644
--- a/src/marks/area.js
+++ b/src/marks/area.js
@@ -77,11 +77,17 @@ export function area(data, options) {
}
export function areaX(data, options) {
- const {y = indexOf, ...rest} = maybeDenseIntervalY(options);
- return new Area(data, maybeStackX(maybeIdentityX({...rest, y1: y, y2: undefined}, y === indexOf ? "x2" : "x")));
+ const {x, y = indexOf, fill, z = x === fill ? null : undefined, ...rest} = maybeDenseIntervalY(options);
+ return new Area(
+ data,
+ maybeStackX(maybeIdentityX({...rest, x, y1: y, y2: undefined, z, fill}, y === indexOf ? "x2" : "x"))
+ );
}
export function areaY(data, options) {
- const {x = indexOf, ...rest} = maybeDenseIntervalX(options);
- return new Area(data, maybeStackY(maybeIdentityY({...rest, x1: x, x2: undefined}, x === indexOf ? "y2" : "y")));
+ const {x = indexOf, y, fill, z = y === fill ? null : undefined, ...rest} = maybeDenseIntervalX(options);
+ return new Area(
+ data,
+ maybeStackY(maybeIdentityY({...rest, x1: x, x2: undefined, y, z, fill}, x === indexOf ? "y2" : "y"))
+ );
}
diff --git a/src/marks/line.js b/src/marks/line.js
index 74e4b19fe5..ec1728cf62 100644
--- a/src/marks/line.js
+++ b/src/marks/line.js
@@ -103,10 +103,10 @@ export function line(data, {x, y, ...options} = {}) {
return new Line(data, {...options, x, y});
}
-export function lineX(data, {x = identity, y = indexOf, ...options} = {}) {
- return new Line(data, maybeDenseIntervalY({...options, x, y}));
+export function lineX(data, {x = identity, y = indexOf, stroke, z = stroke === x ? null : undefined, ...options} = {}) {
+ return new Line(data, maybeDenseIntervalY({...options, x, y, z, stroke}));
}
-export function lineY(data, {x = indexOf, y = identity, ...options} = {}) {
- return new Line(data, maybeDenseIntervalX({...options, x, y}));
+export function lineY(data, {x = indexOf, y = identity, stroke, z = stroke === y ? null : undefined, ...options} = {}) {
+ return new Line(data, maybeDenseIntervalX({...options, x, y, z, stroke}));
}
diff --git a/test/output/aaplCloseVaryingColor.svg b/test/output/aaplCloseVaryingColor.svg
new file mode 100644
index 0000000000..bba1e2239a
--- /dev/null
+++ b/test/output/aaplCloseVaryingColor.svg
@@ -0,0 +1,2478 @@
+
\ No newline at end of file
diff --git a/test/plots/aapl-close.ts b/test/plots/aapl-close.ts
index 21595c72a0..3592dd04ac 100644
--- a/test/plots/aapl-close.ts
+++ b/test/plots/aapl-close.ts
@@ -13,6 +13,18 @@ export async function aaplClose() {
});
}
+export async function aaplCloseVaryingColor() {
+ const aapl = await d3.csv("data/aapl.csv", d3.autoType);
+ return Plot.plot({
+ y: {grid: true},
+ marks: [
+ Plot.areaY(aapl, {x: "Date", y: "Close", fill: "Close", fillOpacity: 0.2}),
+ Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "Close"}),
+ Plot.ruleY([0])
+ ]
+ });
+}
+
export async function aaplCloseClip() {
const aapl = await d3.csv("data/aapl.csv", d3.autoType);
return Plot.plot({