Histogram

Usage

import { Histogram } from '@acronis-platform/ui-react';
import type { ChartConfig } from '@acronis-platform/ui-react';

Histogram shows the distribution of a single continuous variable: give it raw values and a per-series config, and it bins the samples into equal-width ranges and plots the count of each as contiguous bars. Unlike BarChart — which plots pre-categorized rows — the binning is the component's own job, so you don't pre-aggregate.

The bar color comes from the palette prop, not from config — see Palettes. The single config entry maps the count key to a label and an optional tone that re-points it within the palette, resolved into the --color-<key> custom property the bars fill from.

Examples

A distribution binned into 10 equal-width ranges:

const values = [12, 15, 18, 20, 22, 22, 25, 28, 30, 35, 42, 48, 60];

const config = {
  count: { label: 'Frequency' },
} satisfies ChartConfig;

<Histogram config={config} values={values} binCount={10} className="h-[320px] w-[560px]" />;

Tune the resolution with binCount:

<Histogram config={config} values={values} binCount={5} />
<Histogram config={config} values={values} binCount={20} />

Fix the range with domain (samples outside it are dropped):

<Histogram config={config} values={values} domain={[0, 100]} />

Add axis titles and a y-axis unit suffix with xAxisLabel / yAxisLabel / yUnit (the x-axis is the bin label). The titles inherit the theme token:

<Histogram
  config={config}
  values={values}
  xAxisLabel="Value range"
  yAxisLabel="Frequency"
/>

Custom tooltip

Replace the tooltip with a configured ChartTooltipContent — imported from the same library, so you never compose recharts yourself. Its formatter renders each row and labelFormatter the header:

import { Histogram, ChartTooltipContent } from '@acronis-platform/ui-react';

<Histogram
  config={config}
  values={values}
  tooltipContent={
    <ChartTooltipContent
      labelFormatter={(label) => `Range ${label}`}
      formatter={(value) => `${value.toLocaleString()} samples`}
    />
  }
/>;

Hide an axis with showXAxis / showYAxis, or format its ticks with xTickFormatter / yTickFormatter — the shared axis knobs described under Formatting and hiding axes:

import { Histogram } from '@acronis-platform/ui-react';

// Hide the frequency (Y) axis for a cleaner distribution shape
<Histogram config={config} values={values} binCount={10} showYAxis={false} />;

Animation

Charts render statically by default. Opt in to an entrance animation with animate, and tune it with animationDuration / animationBegin / animationEasing:

<Histogram config={config} data={data} animate animationDuration={800} animationEasing="ease-out" />

animate honors prefers-reduced-motion: for a visitor who has asked their system to reduce motion, the series render at their final geometry with no animation (the same applies when rendering on the server).

Accessibility

Neither Histogram nor the shared ChartContainer adds a role or an aria-* attribute of its own. What semantics the chart has come from recharts, whose accessibility layer is on by default and is not switched off here: the plot's <svg> renders role="application" with tabindex="0", so Tab reaches it and focusing it opens the tooltip on the first bin. The left/right arrow keys step it along the bins. Enter toggles the tooltip rather than pinning it, and since focus has already opened one, the first Enter closes it — press Enter again, or an arrow key, to bring it back.

That surface has no accessible name, though, and the layer to fix that is this one rather than recharts. recharts takes title, desc and role as first-class chart props and writes them straight into the plot's <svg>; Histogram passes none of them down, because it spreads the props it doesn't consume onto its own root <div> and hands the recharts chart only the data and margins it computes itself. The <title> and <desc> recharts always emits therefore stay empty and a screen reader announces an unnamed application region. The tooltip is not a live region either: ChartTooltipContent renders plain markup with no role="status" or aria-live, so the bin range and count it reveals as you arrow along are shown but never announced.

So name the chart from the outside: role and aria-label (or aria-labelledby) land on that same root <div>. Choose the role before you copy the snippet, though. role="img" names the chart and also makes its subtree presentational, hiding the plot from assistive technology while it stays in the tab order; that is the right trade when the picture is the whole message. Where the keyboard tooltip should stay reachable, wrap the chart in a <figure> with a <figcaption>, or pass role="group" with the same aria-label, and leave the plot's own semantics alone.

<Histogram
  role="img"
  aria-label="Distribution of response times"
  config={config}
  values={values}
  binCount={10}
/>

A name is not a text alternative. The shape of a distribution — where it peaks, how far it spreads, whether it has a tail — is exactly what the picture carries and the label does not, so state it: a caption with the takeaway, a summary sentence quoting the median and range, or the bin counts in an adjacent Table. Color does no work here (one series, one hue); the bin labels on the category axis are what identifies a bar, so keep showXAxis on unless the numbers are reachable some other way.

Direction (RTL)

Under dir="rtl" the chrome around the plot mirrors on its own — the legend, the tooltip, and any readouts you compose alongside the chart are ordinary flow layout built from logical CSS utilities. The plot area itself deliberately stays left-to-right: recharts lays every mark out in physical SVG coordinates, so a mirrored axis would flip the reading order of the data without flipping the geometry that encodes it — here that means the bins stay ordered low to high from the left. This is what mainstream charting libraries do by default.

ChartContainer pins .recharts-surface to direction: ltr so that holds whatever the page inherits, and the pin is load-bearing rather than a formality: recharts anchors axis tick text with the direction-relative SVG keywords text-anchor: start / end while placing each mark at a coordinate it computed in physical space, so an inherited dir="rtl" mirrors the text away from the geometry — end-anchored Y-axis ticks land inside the plot area and rotated X-axis ticks drift. That second case is the one to note here, since bin labels are long enough that xAxisAngle is common. Text anchored middle is direction-immune either way: unrotated bin labels and axis titles. Because the pin stops at the surface, the tooltip and the legend — HTML outside it — still mirror. Chart carries the measured detail.

API Reference