Sparkline component for Stripe Apps
A type of line chart to display data succinctly as a simple line.
To add the Sparkline
component to your app:
import {Sparkline} from '@stripe/ui-extension-sdk/ui';
The following shows a preview of the Sparkline
UI component:
const sales = [ { date: 'Jan', sold: 1, }, { date: 'Feb', sold: 4, }, { date: 'Mar', sold: 2, }, { date: 'Apr', sold: 3, }, ]; return ( <Box css={{width: 'fill'}}> <Sparkline data={sales} x="date" y="sold" /> </Box> )
Sparkline props
Property | Type |
---|---|
| Required
The data used to generate the chart. |
| Required
The property or accessor for the point on the x axis. Related types: Channel. |
| Required
The property or accessor for the point on the y axis. Related types: Channel. |
| Optional
Groups data by color based on a property or accessor. Related types: ColorChannel. |
| Optional
Determines whether to render a tooltip when hovering over the chart. |
| Optional
Groups data based on a property or accessor. Related types: Channel. |
Channel
Property | Type |
---|---|
| Optional
|
| Optional
Related types: Currency, UnitIdentifier. |
| Optional
|
| Optional
|
| Optional
|
Currency
Property | Type |
---|---|
| Required
|
UnitIdentifier
Property | Type |
---|---|
| Required
|
ColorChannel
Property | Type |
---|---|
| Optional
|
| Optional
Related types: Currency, UnitIdentifier. |
| Optional
|
| Optional
|
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', }, ]; return ( <Box css={{width: 'fill'}}> <Sparkline data={sales} x="date" y="sold" color="product" /> </Box> )