@tradingaction/series 2.0.13

package/lib/index.js

@@ -0,0 +1,24 @@
+export * from "./AlternateDataSeries";
+export * from "./AlternatingFillAreaSeries";
+export * from "./AreaOnlySeries";
+export * from "./AreaSeries";
+export * from "./markers";
+export * from "./LineSeries";
+export * from "./CandlestickSeries";
+export * from "./OHLCSeries";
+export * from "./BarSeries";
+export { StackedBarSeries } from "./StackedBarSeries";
+export * from "./GroupedBarSeries";
+export * from "./KagiSeries";
+export * from "./PointAndFigureSeries";
+export * from "./RenkoSeries";
+export * from "./MACDSeries";
+export * from "./BollingerSeries";
+export * from "./RSISeries";
+export * from "./StochasticSeries";
+export * from "./ElderRaySeries";
+export * from "./VolumeProfileSeries";
+export * from "./ScatterSeries";
+export * from "./StraightLine";
+export * from "./SARSeries";
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}

package/lib/markers/CircleMarker.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface CircleMarkerProps {
+    readonly className?: string;
+    readonly fillStyle?: string;
+    readonly point: {
+        x: number;
+        y: number;
+        datum: any;
+    };
+    readonly r: number | ((datum: any) => number);
+    readonly strokeStyle?: string;
+    readonly strokeWidth?: number;
+}
+export declare class CircleMarker extends React.Component<CircleMarkerProps> {
+    static defaultProps: {
+        fillStyle: string;
+        className: string;
+    };
+    static drawOnCanvas: (props: CircleMarkerProps, point: {
+        x: number;
+        y: number;
+        datum: unknown;
+    }, ctx: CanvasRenderingContext2D) => void;
+    render(): JSX.Element;
+}

package/lib/markers/CircleMarker.js

@@ -0,0 +1,35 @@
+import { functor } from "@tradingaction/core";
+import * as React from "react";
+export class CircleMarker extends React.Component {
+    render() {
+        const { className, strokeStyle, strokeWidth, fillStyle, point, r } = this.props;
+        const radius = functor(r)(point.datum);
+        return (React.createElement("circle", { className: className, cx: point.x, cy: point.y, stroke: strokeStyle, strokeWidth: strokeWidth, fill: fillStyle, r: radius }));
+    }
+}
+CircleMarker.defaultProps = {
+    fillStyle: "#4682B4",
+    className: "react-financial-charts-marker-circle",
+};
+CircleMarker.drawOnCanvas = (props, point, ctx) => {
+    const { strokeStyle, fillStyle, r, strokeWidth } = props;
+    if (strokeStyle !== undefined) {
+        ctx.strokeStyle = strokeStyle;
+    }
+    if (strokeWidth !== undefined) {
+        ctx.lineWidth = strokeWidth;
+    }
+    if (fillStyle !== undefined) {
+        ctx.fillStyle = fillStyle;
+    }
+    const { datum, x, y } = point;
+    const radius = functor(r)(datum);
+    ctx.moveTo(x, y);
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.fill();
+    if (strokeStyle !== undefined) {
+        ctx.stroke();
+    }
+};
+//# sourceMappingURL=CircleMarker.js.map

package/lib/markers/CircleMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleMarker.js","sourceRoot":"","sources":["../../src/markers/CircleMarker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA4B;IAoCzD,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAChF,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAEvC,OAAO,CACH,gCACI,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,EACf,CAAC,EAAE,MAAM,GACX,CACL,CAAC;IACN,CAAC;;AAlDa,yBAAY,GAAG;IACzB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,sCAAsC;CACpD,CAAC;AAEY,yBAAY,GAAG,CACzB,KAAwB,EACxB,KAA+C,EAC/C,GAA6B,EAC/B,EAAE;IACA,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEzD,IAAI,WAAW,KAAK,SAAS,EAAE;QAC3B,GAAG,CAAC,WAAW,GAAG,WAAW,CAAC;KACjC;IACD,IAAI,WAAW,KAAK,SAAS,EAAE;QAC3B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;KAC/B;IACD,IAAI,SAAS,KAAK,SAAS,EAAE;QACzB,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;KAC7B;IAED,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;IAE9B,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAEjC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjB,GAAG,CAAC,SAAS,EAAE,CAAC;IAChB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC7C,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,WAAW,KAAK,SAAS,EAAE;QAC3B,GAAG,CAAC,MAAM,EAAE,CAAC;KAChB;AACL,CAAC,CAAC"}

package/lib/markers/SquareMarker.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface SquareProps {
+    readonly className?: string;
+    readonly fillStyle?: string;
+    readonly point: {
+        x: number;
+        y: number;
+        datum: any;
+    };
+    readonly strokeStyle?: string;
+    readonly strokeWidth?: number;
+    readonly width: number | ((datum: any) => number);
+}
+export declare class Square extends React.Component<SquareProps> {
+    static defaultProps: {
+        fillStyle: string;
+        className: string;
+    };
+    static drawOnCanvas: (props: SquareProps, point: {
+        x: number;
+        y: number;
+        datum: unknown;
+    }, ctx: CanvasRenderingContext2D) => void;
+    render(): JSX.Element;
+}

package/lib/markers/SquareMarker.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { functor } from "@tradingaction/core";
+export class Square extends React.Component {
+    render() {
+        const { className, strokeStyle, strokeWidth, fillStyle, point, width } = this.props;
+        const w = functor(width)(point.datum);
+        const x = point.x - w / 2;
+        const y = point.y - w / 2;
+        return (React.createElement("rect", { className: className, x: x, y: y, stroke: strokeStyle, strokeWidth: strokeWidth, fill: fillStyle, width: w, height: w }));
+    }
+}
+Square.defaultProps = {
+    fillStyle: "#4682B4",
+    className: "react-financial-charts-marker-rect",
+};
+Square.drawOnCanvas = (props, point, ctx) => {
+    const { strokeStyle, fillStyle, strokeWidth, width } = props;
+    if (strokeStyle !== undefined) {
+        ctx.strokeStyle = strokeStyle;
+    }
+    if (strokeWidth !== undefined) {
+        ctx.lineWidth = strokeWidth;
+    }
+    if (fillStyle !== undefined) {
+        ctx.fillStyle = fillStyle;
+    }
+    const w = functor(width)(point.datum);
+    const x = point.x - w / 2;
+    const y = point.y - w / 2;
+    ctx.beginPath();
+    ctx.rect(x, y, w, w);
+    ctx.fill();
+    if (strokeStyle !== undefined) {
+        ctx.stroke();
+    }
+};
+//# sourceMappingURL=SquareMarker.js.map

package/lib/markers/SquareMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SquareMarker.js","sourceRoot":"","sources":["../../src/markers/SquareMarker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAe9C,MAAM,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAsB;IAmC7C,MAAM;QACT,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACpF,MAAM,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAE1B,OAAO,CACH,8BACI,SAAS,EAAE,SAAS,EACpB,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,GACX,CACL,CAAC;IACN,CAAC;;AApDa,mBAAY,GAAG;IACzB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,oCAAoC;CAClD,CAAC;AAEY,mBAAY,GAAG,CACzB,KAAkB,EAClB,KAA+C,EAC/C,GAA6B,EAC/B,EAAE;IACA,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE7D,IAAI,WAAW,KAAK,SAAS,EAAE;QAC3B,GAAG,CAAC,WAAW,GAAG,WAAW,CAAC;KACjC;IACD,IAAI,WAAW,KAAK,SAAS,EAAE;QAC3B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;KAC/B;IACD,IAAI,SAAS,KAAK,SAAS,EAAE;QACzB,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;KAC7B;IAED,MAAM,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,GAAG,CAAC,SAAS,EAAE,CAAC;IAChB,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,GAAG,CAAC,IAAI,EAAE,CAAC;IAEX,IAAI,WAAW,KAAK,SAAS,EAAE;QAC3B,GAAG,CAAC,MAAM,EAAE,CAAC;KAChB;AACL,CAAC,CAAC"}

package/lib/markers/TriangleMarker.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface TriangleProps {
+    readonly className?: string;
+    readonly direction?: "top" | "bottom" | "left" | "right" | "hide" | ((datum: any) => any);
+    readonly fillStyle?: string | ((datum: any) => string);
+    readonly point: {
+        x: number;
+        y: number;
+        datum: any;
+    };
+    readonly strokeStyle?: string | ((datum: any) => string);
+    readonly strokeWidth?: number;
+    readonly width?: number | ((datum: any) => number);
+}
+export declare class Triangle extends React.Component<TriangleProps> {
+    static defaultProps: {
+        direction: string;
+        fillStyle: string;
+        className: string;
+    };
+    static drawOnCanvas: (props: TriangleProps, point: {
+        x: number;
+        y: number;
+        datum: unknown;
+    }, ctx: CanvasRenderingContext2D) => void;
+    render(): JSX.Element | null;
+}

package/lib/markers/TriangleMarker.js

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { functor } from "@tradingaction/core";
+export class Triangle extends React.Component {
+    render() {
+        const { className, fillStyle, strokeStyle, strokeWidth, point, width } = this.props;
+        const rotation = getRotationInDegrees(this.props, point);
+        if (rotation == null) {
+            return null;
+        }
+        const fillColor = functor(fillStyle)(point.datum);
+        const strokeColor = functor(strokeStyle)(point.datum);
+        const w = functor(width)(point.datum);
+        const { x, y } = point;
+        const { innerOpposite, innerHypotenuse } = getTrianglePoints(w);
+        const points = `
+		${x} ${y - innerHypotenuse},
+		${x + w / 2} ${y + innerOpposite},
+		${x - w / 2} ${y + innerOpposite}
+	    `;
+        return (React.createElement("polygon", { className: className, points: points, stroke: strokeColor, strokeWidth: strokeWidth, fill: fillColor, transform: rotation !== 0 ? `rotate(${rotation}, ${x}, ${y})` : undefined }));
+    }
+}
+Triangle.defaultProps = {
+    direction: "top",
+    fillStyle: "#4682B4",
+    className: "react-financial-charts-marker-triangle",
+};
+Triangle.drawOnCanvas = (props, point, ctx) => {
+    const { fillStyle, strokeStyle, strokeWidth, width } = props;
+    if (strokeStyle !== undefined) {
+        ctx.strokeStyle = functor(strokeStyle)(point.datum);
+    }
+    if (strokeWidth !== undefined) {
+        ctx.lineWidth = strokeWidth;
+    }
+    if (fillStyle !== undefined) {
+        ctx.fillStyle = functor(fillStyle)(point.datum);
+    }
+    const w = functor(width)(point.datum);
+    const { x, y } = point;
+    const { innerOpposite, innerHypotenuse } = getTrianglePoints(w);
+    const rotationDeg = getRotationInDegrees(props, point);
+    ctx.beginPath();
+    ctx.moveTo(x, y - innerHypotenuse);
+    ctx.lineTo(x + w / 2, y + innerOpposite);
+    ctx.lineTo(x - w / 2, y + innerOpposite);
+    // TODO: rotation does not work
+    // example: https://gist.github.com/geoffb/6392450
+    if (rotationDeg !== null && rotationDeg !== 0) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate((rotationDeg * Math.PI) / 180); // 45 degrees
+        ctx.fill();
+        ctx.restore();
+    }
+    ctx.fill();
+    if (strokeStyle !== undefined) {
+        ctx.stroke();
+    }
+};
+const getTrianglePoints = (width) => {
+    const innerHypotenuse = (width / 2) * (1 / Math.cos((30 * Math.PI) / 180));
+    const innerOpposite = (width / 2) * (1 / Math.tan((60 * Math.PI) / 180));
+    return {
+        innerOpposite,
+        innerHypotenuse,
+    };
+};
+const getRotationInDegrees = (props, point) => {
+    const { direction = Triangle.defaultProps.direction } = props;
+    const directionVal = functor(direction)(point.datum);
+    if (directionVal === "hide") {
+        return null;
+    }
+    let rotate = 0;
+    switch (directionVal) {
+        case "bottom":
+            rotate = 180;
+            break;
+        case "left":
+            rotate = -90;
+            break;
+        case "right":
+            rotate = 90;
+            break;
+    }
+    return rotate;
+};
+//# sourceMappingURL=TriangleMarker.js.map

package/lib/markers/TriangleMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriangleMarker.js","sourceRoot":"","sources":["../../src/markers/TriangleMarker.tsx"],"names":[],"mappings":"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"}

package/lib/markers/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CircleMarker";
+export * from "./SquareMarker";
+export * from "./TriangleMarker";

package/lib/markers/index.js

@@ -0,0 +1,4 @@
+export * from "./CircleMarker";
+export * from "./SquareMarker";
+export * from "./TriangleMarker";
+//# sourceMappingURL=index.js.map

package/lib/markers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/markers/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@tradingaction/series",
+    "version": "2.0.13",
+    "description": "Series for react-financial-charts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./lib/index.js",
+    "typings": "./lib/index.d.ts",
+    "files": [
+        "lib",
+        "src"
+    ],
+    "sideEffects": false,
+    "author": "Reactive Markets",
+    "keywords": [
+        "charts",
+        "charting",
+        "stockcharts",
+        "finance",
+        "financial",
+        "finance-chart",
+        "react",
+        "d3"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/reactivemarkets/react-financial-charts.git"
+    },
+    "bugs": {
+        "url": "https://github.com/reactivemarkets/react-financial-charts/issues"
+    },
+    "scripts": {
+        "build": "npm run clean && npm run compile",
+        "clean": "rimraf lib",
+        "compile": "tsc -p tsconfig.json",
+        "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
+    },
+    "dependencies": {
+        "@tradingaction/core": "^2.0.13",
+        "@types/d3-scale": "^3.2.2",
+        "d3-array": "^2.9.1",
+        "d3-scale": "^3.2.3",
+        "d3-shape": "^2.0.0"
+    },
+    "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    },
+    "gitHead": "9c9bc635a2291c8da0e1dd5befa4000e96d83119"
+}

package/src/AlternateDataSeries.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { ChartCanvasContext } from "@tradingaction/core";
+
+export interface AlternateDataSeriesProps<TData> {
+    readonly data: TData[];
+}
+
+export const AlternateDataSeries = <TData,>({
+    data,
+    children,
+}: React.PropsWithChildren<AlternateDataSeriesProps<TData>>) => {
+    const context = React.useContext(ChartCanvasContext);
+    const contextValue = React.useMemo(() => {
+        const { plotData, xAccessor } = context;
+
+        const startDate = xAccessor(plotData[0]);
+        const endDate = xAccessor(plotData[plotData.length - 1]);
+
+        return {
+            ...context,
+            plotData: data.filter((d) => {
+                const date = xAccessor(d);
+                return date > startDate && date < endDate;
+            }),
+        };
+    }, [data, context]);
+
+    return <ChartCanvasContext.Provider value={contextValue}>{children}</ChartCanvasContext.Provider>;
+};

package/src/AlternatingFillAreaSeries.tsx

@@ -0,0 +1,159 @@
+import { strokeDashTypes } from "@tradingaction/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import { CurveFactory } from "d3-shape";
+import * as React from "react";
+import { AreaSeries } from "./AreaSeries";
+import { SVGComponent } from "./SVGComponent";
+
+export interface AlternatingFillAreaSeriesProps {
+    readonly baseAt: number;
+    /**
+     * Wether to connect the area between undefined data points.
+     */
+    readonly connectNulls?: boolean;
+    /**
+     * Color, gradient, or pattern to use for fill.
+     */
+    readonly fillStyle?: {
+        top: string;
+        bottom: string;
+    };
+    /**
+     * A factory for a curve generator for the area and line.
+     */
+    readonly curve?: CurveFactory;
+    /**
+     * Color, gradient, or pattern to use for the stroke.
+     */
+    readonly strokeStyle?: {
+        top: string;
+        bottom: string;
+    };
+    /**
+     * Stroke dash.
+     */
+    readonly strokeDasharray?: {
+        top: strokeDashTypes;
+        bottom: strokeDashTypes;
+    };
+    /**
+     * Stroke width.
+     */
+    readonly strokeWidth?: {
+        top: number;
+        bottom: number;
+    };
+    /**
+     * Selector for data to plot.
+     */
+    readonly yAccessor: (data: any) => number | undefined;
+}
+
+/**
+ * `AlternatingFillAreaSeries` component is similar to a `AreaSeries` but with different colors above and below the base.
+ */
+export class AlternatingFillAreaSeries extends React.Component<AlternatingFillAreaSeriesProps> {
+    public static defaultProps = {
+        connectNulls: false,
+        fillStyle: {
+            top: "rgba(38, 166, 154, 0.1)",
+            bottom: "rgba(239, 83, 80, 0.1)",
+        },
+        strokeStyle: {
+            top: "#26a69a",
+            bottom: "#ef5350",
+        },
+        strokeWidth: {
+            top: 2,
+            bottom: 2,
+        },
+        strokeDasharray: {
+            top: "Solid" as strokeDashTypes,
+            bottom: "Solid" as strokeDashTypes,
+        },
+    };
+
+    private clipPathId1 = `alternating-area-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
+    private clipPathId2 = `alternating-area-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
+
+    public render() {
+        const {
+            connectNulls,
+            yAccessor,
+            curve,
+            strokeStyle = AlternatingFillAreaSeries.defaultProps.strokeStyle,
+            strokeWidth = AlternatingFillAreaSeries.defaultProps.strokeWidth,
+            strokeDasharray = AlternatingFillAreaSeries.defaultProps.strokeDasharray,
+            fillStyle = AlternatingFillAreaSeries.defaultProps.fillStyle,
+        } = this.props;
+
+        return (
+            <g>
+                <SVGComponent>{this.renderClip}</SVGComponent>
+                <AreaSeries
+                    canvasClip={this.topClip}
+                    connectNulls={connectNulls}
+                    yAccessor={yAccessor}
+                    curve={curve}
+                    baseAt={this.baseAt}
+                    fillStyle={fillStyle.top}
+                    strokeStyle={strokeStyle.top}
+                    strokeDasharray={strokeDasharray.top}
+                    strokeWidth={strokeWidth.top}
+                />
+                <AreaSeries
+                    canvasClip={this.bottomClip}
+                    connectNulls={connectNulls}
+                    yAccessor={yAccessor}
+                    curve={curve}
+                    baseAt={this.baseAt}
+                    fillStyle={fillStyle.bottom}
+                    strokeStyle={strokeStyle.bottom}
+                    strokeDasharray={strokeDasharray.bottom}
+                    strokeWidth={strokeWidth.bottom}
+                />
+            </g>
+        );
+    }
+
+    private readonly baseAt = (yScale: ScaleContinuousNumeric<number, number>) => {
+        return yScale(this.props.baseAt);
+    };
+
+    private readonly renderClip = (moreProps: any) => {
+        const { chartConfig } = moreProps;
+        const { baseAt } = this.props;
+        const { yScale, width, height } = chartConfig;
+
+        return (
+            <defs>
+                <clipPath id={this.clipPathId1}>
+                    <rect x={0} y={0} width={width} height={yScale(baseAt)} />
+                </clipPath>
+                <clipPath id={this.clipPathId2}>
+                    <rect x={0} y={yScale(baseAt)} width={width} height={height - yScale(baseAt)} />
+                </clipPath>
+            </defs>
+        );
+    };
+
+    private readonly bottomClip = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { chartConfig } = moreProps;
+        const { baseAt } = this.props;
+        const { yScale, width, height } = chartConfig;
+
+        ctx.beginPath();
+        ctx.rect(0, yScale(baseAt), width, height - yScale(baseAt));
+        ctx.clip();
+    };
+
+    private readonly topClip = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const { chartConfig } = moreProps;
+        const { baseAt } = this.props;
+        const { yScale, width } = chartConfig;
+
+        ctx.beginPath();
+        ctx.rect(0, 0, width, yScale(baseAt));
+        ctx.clip();
+    };
+}

package/src/AreaOnlySeries.tsx

@@ -0,0 +1,106 @@
+import { first, functor, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import { area, CurveFactory } from "d3-shape";
+import * as React from "react";
+
+export interface AreaOnlySeriesProps {
+    /**
+     * The base y value to draw the area to.
+     */
+    readonly base?:
+        | number
+        | ((yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number | undefined);
+    readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
+    /**
+     * Wether to connect the area between undefined data points.
+     */
+    readonly connectNulls?: boolean;
+    /**
+     * A factory for a curve generator for the area.
+     */
+    readonly curve?: CurveFactory;
+    /**
+     * The default accessor for defined returns not NaN, thus assumes that the input data is always a number.
+     */
+    readonly defined?: (data: number | undefined) => boolean;
+    /**
+     * Color, gradient, or pattern to use for fill.
+     */
+    readonly fillStyle?:
+        | string
+        | ((context: CanvasRenderingContext2D, moreProps: any) => string | CanvasGradient | CanvasPattern);
+    /**
+     * Selector for data to plot.
+     */
+    readonly yAccessor: (data: any) => number | undefined;
+}
+
+/**
+ * `AreaOnlySeries` component.
+ */
+export class AreaOnlySeries extends React.Component<AreaOnlySeriesProps> {
+    public static defaultProps = {
+        connectNulls: false,
+        defined: (d: number | undefined) => d !== undefined && !isNaN(d),
+        base: (yScale: ScaleContinuousNumeric<number, number>) => first(yScale.range()),
+    };
+
+    public render() {
+        return <GenericChartComponent canvasDraw={this.drawOnCanvas} canvasToDraw={getAxisCanvas} drawOn={["pan"]} />;
+    }
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const {
+            connectNulls,
+            fillStyle,
+            curve,
+            canvasClip,
+            yAccessor,
+            defined = AreaOnlySeries.defaultProps.defined,
+            base,
+        } = this.props;
+
+        const {
+            xScale,
+            chartConfig: { yScale },
+            plotData,
+            xAccessor,
+        } = moreProps;
+
+        if (canvasClip !== undefined) {
+            ctx.save();
+            canvasClip(ctx, moreProps);
+        }
+
+        if (fillStyle !== undefined) {
+            if (typeof fillStyle === "string") {
+                ctx.fillStyle = fillStyle;
+            } else {
+                ctx.fillStyle = fillStyle(ctx, moreProps);
+            }
+        }
+
+        const newBase = functor(base);
+
+        const areaSeries = area()
+            .x((d) => Math.round(xScale(xAccessor(d))))
+            .y0((d) => newBase(yScale, d, moreProps))
+            .y1((d) => Math.round(yScale(yAccessor(d))));
+
+        if (curve !== undefined) {
+            areaSeries.curve(curve);
+        }
+
+        if (!connectNulls) {
+            areaSeries.defined((d) => defined(yAccessor(d)));
+        }
+
+        ctx.beginPath();
+        areaSeries.context(ctx)(plotData);
+        ctx.fill();
+
+        if (canvasClip !== undefined) {
+            ctx.restore();
+        }
+    };
+}