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" />
Props
Prop | Type | Description |
---|---|---|
data Required |
| The data used to generate the chart. |
x Required |
| The property or accessor for the point on the x axis. |
y Required |
| The property or accessor for the point on the y axis. |
axis |
| Determines whether to render labels and ticks for each axis. |
color |
| Groups data by color based on a property or accessor. |
grid |
| Determines whether to render grid lines for each axis. |
legend |
| Determines whether to render the legend (when more than one item is present). |
tooltip |
| Determines whether to render a tooltip when hovering over the chart. |
z |
| Groups data based on a property or accessor. |
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.
Property | Type | Description |
---|---|---|
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]}} />