@vx/threshold

@vx/threshold allows for creation of Difference Charts in react, which highlight the delta between two line series.

Installation

npm install --save @vx/threshold

Examples

Area difference chart

<Threshold />

Components

<Threshold />

APIs

#<Threshold />

# Threshold.clipAboveTonumber | NumberAccessor<Datum>required

Specifies a constant value, or an accessor called per datum, above which the upper area is clipped.

# Threshold.clipBelowTonumber | NumberAccessor<Datum>required

Specifies a constant value, or an accessor called per datum, below which the lower area is clipped.

# Threshold.dataDatum[]required

Array of data for which to generate a threshold area shape.

# Threshold.xnumber | NumberAccessor<Datum>required

For the Area shape, specifies the x accessor function for a datum, which defaults to d => d[0]. Alternatively this may be a constant x value.

# Threshold.y0number | NumberAccessor<Datum>required

For the Area shape, specifies the accessor function (or constant value) which generates the "lower" area bound to which "belowAreaProps" and "clipBelow" props apply. Defaults to d => 0.

# Threshold.y1number | NumberAccessor<Datum>required

For the Area shape, specifies the accessor function (or constant value) which generates the "upper" area bound to which "aboveAreaProps" and "clipAbove" props apply. Defaults to d => d[1].

# Threshold.aboveAreaPropsAreaProps<Datum> | undefinedoptional

Additional props passed to the "above" Area shape.

# Threshold.belowAreaPropsAreaProps<Datum> | undefinedoptional

Additional props passed to the "below" Area shape.

# Threshold.classNamestring | undefinedoptional

className applied to container g element.

# Threshold.curveCurveFactory | undefinedoptional

Sets the curve factory (from @vx/curve or d3-curve) for the area generator. Defaults to curveLinear.

# Threshold.defined((datum: Datum, index: number, data: Datum[]) => boolean) | undefinedoptional

The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined.

# Threshold.idstringoptional

id for this threshold. If not set, multiple Threshold's on a page may conflict and interfere with each other.

Default ""