Skip to content
silverpoint
v0.8.0 latest
v0.8.02026-10-21v0.7.02026-10-20v0.6.02026-10-10v0.3.02026-09-30v0.2.02026-09-26v0.1.12026-09-25v0.1.02026-09-25All releases on GitHub ↗
npm
Documentation menu

Charts · Distributions & comparisons

HistogramChart

Raw observations binned in the core. Family: Distributions & comparisons · chart 34 of 60.
Reading timeReading time
Reading time
minutescount
0–214
2–452
4–657
6–833
8–1029
10–1222
12–1411
14–169
16–184
18–203
20–223
22–241
24–260
26–282
Report an issue with this chart
Reading timeReading time
Reading time
minutescount
0–214
2–452
4–657
6–833
8–1029
10–1222
12–1411
14–169
16–184
18–203
20–223
22–241
24–260
26–282
mode="precision"
Reading timeReading time
Reading time
minutescount
0–214
2–452
4–657
6–833
8–1029
10–1222
12–1411
14–169
16–184
18–203
20–223
22–241
24–260
26–282
substrate="green"
Reading timeReading time
Reading time
minutescount
0–214
2–452
4–657
6–833
8–1029
10–1222
12–1411
14–169
16–184
18–203
20–223
22–241
24–260
26–282
ground="cyanotype"

Example

The chart above, in each framework. Pick a framework once and every example on the site follows it. Bins follow the Freedman–Diaconis rule unless you pass `bins`.

shell
npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts
tsx
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { HistogramChart } from '@silverpoint/react/histogram-chart';

const data = [
  { reader: 'R001', device: 'desktop', minutes: 4 },
  { reader: 'R002', device: 'phone', minutes: 17 },
  { reader: 'R003', device: 'phone', minutes: 3 },
  { reader: 'R004', device: 'phone', minutes: 6.5 },
  { reader: 'R005', device: 'phone', minutes: 3.5 },
  { reader: 'R006', device: 'phone', minutes: 3 },
  { reader: 'R007', device: 'phone', minutes: 4.5 },
  { reader: 'R008', device: 'desktop', minutes: 23.5 },
  { reader: 'R009', device: 'phone', minutes: 1 },
  { reader: 'R010', device: 'desktop', minutes: 1 },
  { reader: 'R011', device: 'phone', minutes: 6.5 },
  { reader: 'R012', device: 'desktop', minutes: 4.5 },
  // … 228 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <HistogramChart
        data={data}
        valueKey="minutes"
        title="Reading time"
        unit="min"
      />
    </div>
  );
}

Import

Each chart has its own subpath, so a bundle only carries the charts it uses. Every adapter also exports every chart from its barrel.

FrameworkImport
Reactimport { HistogramChart } from '@silverpoint/react/histogram-chart';
Vueimport { SpHistogramChart } from '@silverpoint/vue/histogram-chart';
Angularimport { SpHistogramChart } from '@silverpoint/angular/histogram-chart'; // <sp-histogram-chart>
Reflexfrom reflex_silverpoint_react import histogram_chart

Props

The props HistogramChart adds to the ones every chart takes. Accessor props (…Key, keys, names) name fields of your rows and are ignored without data.

React / AngularVueReflexTypeDescription
valueKeyvalue-keyvalue_keyAccessor<number | null | undefined>—
binsbinsbinsnumber | readonly number[]A number asks for that many equal-width bins over the niced extent; an array gives the thresholds, increasing. Freedman–Diaconis by default, Sturges when the IQR is 0.
cumulativecumulativecumulativebooleanTurns the counts into a running total.
orientationorientationorientationChartOrientation—

Common props

Every chart also takes these. Framework conventions: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex. Read more about them.

Show the 22 common props
React / AngularVueReflexTypeDescription
datadatadatareadonly Datum[]Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (…_key, keys, names) are ignored.
groundgroundgroundGroundRefStyle ground: silverpoint or cyanotype, or a ground object. Defaults to the app provider's, or silverpoint.
substratesubstratesubstrateSubstrateNamePrepared substrate within the ground (REQ-046).
modemodemodeInkModeink by default; precision disables inking (REQ-021).
seedseedseedSeedSeed. If omitted, it is derived from id stably (REQ-003).
idididstringStable identifier. If omitted, it is generated deterministically.
heightheightheightnumberHeight of the drawing area in px. Width is the container's unless pinned.
widthwidthwidthnumber—
chromechromechrome'card' | 'bare'card draws the full frame; bare only the drawing area (REQ-095).
hatchFillhatch-fillhatch_fill'tile' | 'per-shape'How areas are filled (REQ-029).
titletitletitlestring—
badgebadgebadgestring—
valuevaluevaluestring | number—
unitunitunitstring—
footerLeftfooter-leftfooter_leftstring—
footerRightfooter-rightfooter_rightstring—
labellabellabelstringAccessible name. If omitted, it is derived from title (REQ-120).
descriptiondescriptiondescriptionstringLong description for screen readers (REQ-120).
dataTabledata-tabledata_table'visible' | 'hidden' | 'none'Tabular alternative; hidden leaves it for assistive technology only (REQ-121).
localelocalelocalestring—
numberFormatnumber-formatnumber_formatIntl.NumberFormatOptions—
classNameclass-nameclass_namestring—

Events

Pointer and keyboard exploration are built in. The item under the pointer or focus is reported, and a click, Enter or Space selects it. The item is { seriesKey, index, datum, value, point: { x, y } }.

FrameworkActive itemSelectionCustom readout
ReactonActiveChangeonSelecttooltip={(item, readout) => …}
Vue@active-change@select<template #tooltip>
Angular(activeChange)(select)<ng-template spTooltip>
Reflexon_active_changeon_selecttooltip=tooltip_template(…)
Interaction and readouts →
Report it
Found something wrong with HistogramChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.