@graphysdk/geom-boxplot

Beta. This geom is on a 0.x version line: a minor release may change its aesthetics, params, style parts or look. Use a caret range (^0.1.0) to take only patches.

A boxplot geom for the Graphy charting SDK. It summarises the values of each category as a box from the first to the third quartile with a line at the median, whiskers out to the furthest values within 1.5 interquartile ranges of the box, and each value beyond them as an outlier.

Learn more at graphy.dev.

Install

npm install @graphysdk/geom-boxplot @graphysdk/react

Requires React 19. Its only peer is @graphysdk/react.

Usage

Data is raw, one row per value; the geom computes the summary. Map the category to x, the value to y, and a group to color to draw boxes side by side:

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { boxplot } from '@graphysdk/geom-boxplot';

const kit = createGraphyKit({ plugins: [boxplot] });

const spec = kit.pipe(
  kit.createSpec({ x: 'service', y: 'ms' }),
  kit.geom.boxplot(),
  kit.scale.x.discrete(),
  kit.scale.y.continuous()
);

export function Latencies({ data }) {
  return (
    <kit.GraphProvider spec={spec} data={data}>
      <GraphRenderer />
    </kit.GraphProvider>
  );
}

kit.geom.boxplot({ params: { extent: 'min-max' } }) runs the whiskers to the extremes instead, with no outliers.

Style the boxes with kit.style.geom.boxplot(), and the rest of the mark with kit.style.geom.boxplot.median(), .whisker() and .outlier().

Docs

• Boxplot

Feedback

This geom is released early to hear what works. Tell us on Discord.

Licence

This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See what you can do under the trial.

For a commercial licence, talk to us.