Registry / data / react-boxplot

react-boxplot

library4.0.0jsnpmunverified

react-boxplot is a React component for rendering simple SVG box plots. It provides flexibility for both horizontal and vertical orientations and aligns the major axis coordinate system with the original data values. The current stable version is 4.0.0. This library is a maintained fork of an originally abandoned repository, suggesting a slower, maintenance-driven release cadence focused on stability and bug fixes rather than rapid feature development. Its key differentiators include its pure SVG rendering, allowing for easy styling and scalability, and the option to either compute box plot statistics internally via `computeBoxplotStats` or provide pre-calculated statistics, catering to different data processing workflows.

data

npm install react-boxplot

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-BOXPLOT

react-boxplot

datajavascriptv4.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Boxplot

✓ import Boxplot from 'react-boxplot'

✗ import { Boxplot } from 'react-boxplot'

Boxplot is the default export of the package.

computeBoxplotStats

✓ import { computeBoxplotStats } from 'react-boxplot'

✗ import computeBoxplotStats from 'react-boxplot'

computeBoxplotStats is a named export utility function.

BoxplotProps

✓ import type { BoxplotProps } from 'react-boxplot'

Type import for component props, available since the library ships TypeScript types.

This quickstart demonstrates rendering a horizontal box plot using `react-boxplot` by passing raw data values and letting the library compute the statistics.

import React from 'react'; import Boxplot, { computeBoxplotStats } from 'react-boxplot'; const values = [ 14, 15, 16, 16, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 19, 19, 19, 20, 20, 20, 20, 20, 20, 21, 21, 22, 23, 24, 24, 29 ]; const BoxplotExample = () => ( <Boxplot width={400} height={20} orientation="horizontal" min={0} max={30} stats={computeBoxplotStats(values)} /> ); export default BoxplotExample;

Debug

Known issues

gotchaThis library is a fork of an abandoned project. While currently maintained by its original author, future development or major feature additions might be limited. Evaluate long-term support needs carefully.

fix

Monitor GitHub repository for activity and consider contributing to ensure longevity if critical features are needed.

affects: >=1.0.0

breakingVersion 4.0.0 requires React 15, 16, or 17. Projects using older or newer unsupported React versions may encounter compatibility issues or warnings related to peer dependency mismatches.

fix

Ensure your project's React and ReactDOM versions are within the `^15.0.0 || ^16.0.0 || ^17.0.0` range. Upgrade React if necessary or consider using an older version of `react-boxplot` if tied to an incompatible React version.

affects: >=4.0.0

gotchaWhen providing custom `stats` to the Boxplot component, ensure all required properties (whiskerLow, quartile1, quartile2, quartile3, whiskerHigh) are present and numerically valid. Missing or invalid statistics will result in an incorrectly rendered plot or runtime errors.

fix

Always validate the `stats` object before passing it to the Boxplot component, especially if derived from external data sources. Utilize `computeBoxplotStats` for reliable calculation from raw data.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Attempting to import `Boxplot` as a named export when it is a default export.

fix

Change `import { Boxplot } from 'react-boxplot'` to `import Boxplot from 'react-boxplot'`.

TypeError: Cannot read properties of undefined (reading 'map') or similar errors related to data processing within the component.

The `stats` prop is either missing or contains invalid/incomplete data, specifically for the `outliers` array or other required statistical values.

fix

Ensure the `stats` prop is always provided with a valid object conforming to the expected structure, including `whiskerLow`, `quartile1`, `quartile2`, `quartile3`, `whiskerHigh`, and an `outliers` array (even if empty). Use `computeBoxplotStats()` to generate a valid `stats` object from raw data.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

prop-typesrequiredUsed for runtime type checking of component props.

reactrequiredPeer dependency required for rendering React components.

react-domrequiredPeer dependency required for rendering React components to the DOM.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/paulmelnikow/react-boxplot ↗

packagehttps://www.npmjs.com/package/react-boxplot ↗