@visx/threshold

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

Installation

npm install --save @visx/threshold

Examples

Area difference chart

<Threshold />

APIs

#<Threshold />

# clipAboveTonumber | NumberAccessor<Datum>required

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

# clipBelowTonumber | NumberAccessor<Datum>required

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

# dataDatum[]required

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

# 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.

# 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.

# 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].

# aboveAreaPropsAreaProps<Datum>

Additional props passed to the "above" Area shape.

# belowAreaPropsAreaProps<Datum>

Additional props passed to the "below" Area shape.

# classNamestring

className applied to container g element.

# curveCurveFactory

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

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

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.

# idstring

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

Default ""

Exports

<Threshold />