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

DivergingBarChart

Ordered levels stacked on both sides of a neutral centre. Family: Distributions & comparisons · chart 46 of 60.
Customer surveyCustomer survey
Customer survey
questionStrongly disagreeDisagreeNeutralAgreeStrongly agree
The site is easy to use21.6%26.6%25.1%12.1%14.6%
Prices are fair19.1%18.1%31.2%21.1%10.6%
Delivery was on time20.1%21.1%22.6%15.6%20.6%
Support solved my issue18.6%19.6%21.6%20.6%19.6%
I would recommend it27.6%18.1%25.1%10.1%19.1%
The app is reliable24.6%16.6%23.1%20.1%15.6%
Report an issue with this chart
Customer surveyCustomer survey
Customer survey
questionStrongly disagreeDisagreeNeutralAgreeStrongly agree
The site is easy to use21.6%26.6%25.1%12.1%14.6%
Prices are fair19.1%18.1%31.2%21.1%10.6%
Delivery was on time20.1%21.1%22.6%15.6%20.6%
Support solved my issue18.6%19.6%21.6%20.6%19.6%
I would recommend it27.6%18.1%25.1%10.1%19.1%
The app is reliable24.6%16.6%23.1%20.1%15.6%
mode="precision"
Customer surveyCustomer survey
Customer survey
questionStrongly disagreeDisagreeNeutralAgreeStrongly agree
The site is easy to use21.6%26.6%25.1%12.1%14.6%
Prices are fair19.1%18.1%31.2%21.1%10.6%
Delivery was on time20.1%21.1%22.6%15.6%20.6%
Support solved my issue18.6%19.6%21.6%20.6%19.6%
I would recommend it27.6%18.1%25.1%10.1%19.1%
The app is reliable24.6%16.6%23.1%20.1%15.6%
substrate="green"
Customer surveyCustomer survey
Customer survey
questionStrongly disagreeDisagreeNeutralAgreeStrongly agree
The site is easy to use21.6%26.6%25.1%12.1%14.6%
Prices are fair19.1%18.1%31.2%21.1%10.6%
Delivery was on time20.1%21.1%22.6%15.6%20.6%
Support solved my issue18.6%19.6%21.6%20.6%19.6%
I would recommend it27.6%18.1%25.1%10.1%19.1%
The app is reliable24.6%16.6%23.1%20.1%15.6%
ground="cyanotype"

Example

The chart above, in each framework. Pick a framework once and every example on the site follows it. `levels` is required: the level columns, most negative first.

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

const data = [
  { question: 'The site is easy to use', Strongly disagree: 43, Disagree: 53, Neutral: 50, Agree: 24, Strongly agree: 29 },
  { question: 'Prices are fair', Strongly disagree: 38, Disagree: 36, Neutral: 62, Agree: 42, Strongly agree: 21 },
  { question: 'Delivery was on time', Strongly disagree: 40, Disagree: 42, Neutral: 45, Agree: 31, Strongly agree: 41 },
  { question: 'Support solved my issue', Strongly disagree: 37, Disagree: 39, Neutral: 43, Agree: 41, Strongly agree: 39 },
  { question: 'I would recommend it', Strongly disagree: 55, Disagree: 36, Neutral: 50, Agree: 20, Strongly agree: 38 },
  { question: 'The app is reliable', Strongly disagree: 49, Disagree: 33, Neutral: 46, Agree: 40, Strongly agree: 31 },
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <DivergingBarChart
        data={data}
        labelKey="question"
        levels={['Strongly disagree', 'Disagree', 'Neutral', 'Agree', 'Strongly agree']}
        title="Customer survey"
      />
    </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 { DivergingBarChart } from '@silverpoint/react/diverging-bar-chart';
Vueimport { SpDivergingBarChart } from '@silverpoint/vue/diverging-bar-chart';
Angularimport { SpDivergingBarChart } from '@silverpoint/angular/diverging-bar-chart'; // <sp-diverging-bar-chart>
Reflexfrom reflex_silverpoint_react import diverging_bar_chart

Props

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

React / AngularVueReflexTypeDescription
labelKeylabel-keylabel_keyAccessor<string>—
levelslevelslevelsreadonly string[]The level columns, most negative first.
neutralneutralneutralnumber | nullIndex of the neutral level, split across the centre; null for none. The middle one by default.
percentpercentpercentbooleanNormalises each row to 100 %; true by default.

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 DivergingBarChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.