{"id":11656,"library":"react-boxplot","title":"React Box Plot Component","description":"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.","status":"maintenance","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/paulmelnikow/react-boxplot","tags":["javascript","react","chart","boxplot","svg","typescript"],"install":[{"cmd":"npm install react-boxplot","lang":"bash","label":"npm"},{"cmd":"yarn add react-boxplot","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-boxplot","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for runtime type checking of component props.","package":"prop-types","optional":false},{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Boxplot is the default export of the package.","wrong":"import { Boxplot } from 'react-boxplot'","symbol":"Boxplot","correct":"import Boxplot from 'react-boxplot'"},{"note":"computeBoxplotStats is a named export utility function.","wrong":"import computeBoxplotStats from 'react-boxplot'","symbol":"computeBoxplotStats","correct":"import { computeBoxplotStats } from 'react-boxplot'"},{"note":"Type import for component props, available since the library ships TypeScript types.","symbol":"BoxplotProps","correct":"import type { BoxplotProps } from 'react-boxplot'"}],"quickstart":{"code":"import React from 'react';\nimport Boxplot, { computeBoxplotStats } from 'react-boxplot';\n\nconst values = [\n  14, 15, 16, 16, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 19, 19, 19, 20,\n  20, 20, 20, 20, 20, 21, 21, 22, 23, 24, 24, 29\n];\n\nconst BoxplotExample = () => (\n  <Boxplot\n    width={400}\n    height={20}\n    orientation=\"horizontal\"\n    min={0}\n    max={30}\n    stats={computeBoxplotStats(values)}\n  />\n);\n\nexport default BoxplotExample;\n","lang":"typescript","description":"This quickstart demonstrates rendering a horizontal box plot using `react-boxplot` by passing raw data values and letting the library compute the statistics."},"warnings":[{"fix":"Monitor GitHub repository for activity and consider contributing to ensure longevity if critical features are needed.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import { Boxplot } from 'react-boxplot'` to `import Boxplot from 'react-boxplot'`.","cause":"Attempting to import `Boxplot` as a named export when it is a default export.","error":"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."},{"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.","cause":"The `stats` prop is either missing or contains invalid/incomplete data, specifically for the `outliers` array or other required statistical values.","error":"TypeError: Cannot read properties of undefined (reading 'map') or similar errors related to data processing within the component."}],"ecosystem":"npm"}