Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in
Overview
Developer tools
Stripe for Visual Studio CodeFile uploadsRelease phasesFeedback
Security
Extend Stripe
Stripe Apps
Partners
Partner ecosystemPartner certification

BarChart

A bar chart visualizes data as a series of data points using bars.

To add the BarChart component to your app:

import {BarChart} from '@stripe/ui-extension-sdk/ui';

The following shows a preview of the BarChart UI component:

const sales = [
  {
    date: 'Jan',
    sold: 1
  },
  {
    date: 'Feb',
    sold: 4
  },
  {
    date: 'Mar',
    sold: 2
  },
  {
    date: 'Apr',
    sold: 3
  }
];

<BarChart data={sales} x="date" y="sold" />

BarChart props

PropertyType

data

Required

{ [x: string]: any; }[]

The data used to generate the chart.

x

Required

string | number | Channel

The property or accessor for the point on the x axis.

Related types: Channel.

y

Required

string | number | Channel

The property or accessor for the point on the y axis.

Related types: Channel.

axis

Optional

("x" | "y" | "both" | "none") | undefined

Determines whether to render labels and ticks for each axis.

color

Optional

(string | number | ColorChannel) | undefined

Groups data by color based on a property or accessor.

Related types: ColorChannel.

grid

Optional

("x" | "y" | "both" | "none") | undefined

Determines whether to render grid lines for each axis.

legend

Optional

boolean | undefined

Determines whether to render the legend (when more than one item is present).

tooltip

Optional

boolean | undefined

Determines whether to render a tooltip when hovering over the chart.

z

Optional

(string | number | Channel) | undefined

Groups data based on a property or accessor.

Related types: Channel.

Channel

PropertyType

domain

Optional

any[] | undefined

format

Optional

((Currency | UnitIdentifier) | ("capitalize" | { [x: string]: string; })) | undefined

Related types: Currency, UnitIdentifier.

label

Optional

string | undefined

range

Optional

any[] | undefined

value

Optional

(string | number) | undefined

Currency

PropertyType

currency

Required

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'YER' | 'ZAR' | 'ZMW'

UnitIdentifier

PropertyType

unit

Required

'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year' | `${'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year'}-per-${'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year'}`

ColorChannel

PropertyType

domain

Optional

any[] | undefined

format

Optional

((Currency | UnitIdentifier) | ("capitalize" | { [x: string]: string; })) | undefined

Related types: Currency, UnitIdentifier.

label

Optional

string | undefined

value

Optional

(string | number) | undefined

Using color

The color channel groups data:

const sales = [
  {
    date: 'Jan',
    sold: 1,
    product: 'tables'
  },
  {
    date: 'Jan',
    sold: 2,
    product: 'chairs'
  },
  {
    date: 'Feb',
    sold: 4,
    product: 'tables'
  },
  {
    date: 'Feb',
    sold: 6,
    product: 'chairs'
  },
  {
    date: 'Mar',
    sold: 2,
    product: 'tables'
  },
  {
    date: 'Mar',
    sold: 4,
    product: 'chairs'
  },
  {
    date: 'Apr',
    sold: 7,
    product: 'tables',
  },
  {
    date: 'Apr',
    sold: 9,
    product: 'chairs',
  },
];

<BarChart data={sales} x="date" y="sold" color="product" />

Axis and value formatting

Instead of passing a string for an axis value, you can add richer formatting by passing an object including the value, label and/or format properties.

PropertyType

value

string | number

The property name in the data set. Required.

label

string

The display text for the axis.

format

object

Format a number with one of the supported currency codes for example {currency: 'USD'}, or a supported unit such as {unit: 'minute'}. You can also create a compound unit with -per- in between, such as {unit: 'megabyte-per-hour'}.

<BarChart
  data={[
    {
      date: 'January',
      sold: 10,
    },
    {
      date: 'February',
      sold: 41,
    },
    {
      date: 'March',
      sold: 22,
    },
    {
      date: 'April',
      sold: 38,
    },
  ]}
  x="date"
  y={{value: 'sold', label: 'Price', format: {currency: 'USD'}}}
/>

Domain

To set the minimum and maximum values of an axis, use the domain prop. For example, if you always want the y axis to go from 0 to 10 (rather than automatically adjusting to the data provided), add the domain property to your configuration:

const sales = [
  {
    date: 'Jan',
    sold: 1,
  },
  {
    date: 'Feb',
    sold: 4,
  },
  {
    date: 'Mar',
    sold: 2,
  },
  {
    date: 'Apr',
    sold: 3,
  },
];

<BarChart
  data={sales}
  x="date"
  y={{value: 'sold', label: 'Sold', domain: [0, 10]}}
/>

See also

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
On this page
Using color
Axis and value formatting
Domain
See also