React Box Plot Component

Common errors

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

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

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

Warnings

• gotcha This 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.
• breaking Version 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.
• gotcha When 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.

Install

• npm install react-boxplot npm
• yarn add react-boxplot yarn
• pnpm add react-boxplot pnpm

Imports

• Boxplot
  wrong:

  import { Boxplot } from 'react-boxplot'

  correct:

  import Boxplot from 'react-boxplot'

  Boxplot is the default export of the package.
• computeBoxplotStats
  wrong:

  import computeBoxplotStats from 'react-boxplot'

  correct:

  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.

Quickstart

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;