BarChart
棒グラフは、棒を使用してデータを一連のデータポイントとして視覚化します。
BarChart
コンポーネントをアプリに追加するには、以下のようにします。
import {BarChart} from '@stripe/ui-extension-sdk/ui';
BarChart
コンポーネントのプレビューを以下に示します。
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. |
色の使用
color
チャネルは、データを次のようにグループ化します。
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 値に文字列を渡す代わりに、value
、label
、または format
プロパティーが含まれたオブジェクトを渡すことで、より豊富な形式設定を追加できます。
プロパティー | タイプ | 説明 |
---|---|---|
value | string | number | データセット内のプロパティー名。必須。 |
label | string | 軸の表示テキスト。 |
format | object | サポートされている通貨コード ({currency: 'USD'} など) またはサポートされている単位 ({unit: 'minute'} など) のいずれかを使用して、数値の形式を指定します。{unit: 'megabyte-per-hour'} のように間に -per- を入れることで複合単位を作成することもできます。 |
<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
プロパティーを使用します。たとえば、y
軸を (提供されたデータに合わせて自動調整するのではなく) 常に 0 から 10 の範囲にしたい場合は、設定に domain
プロパティーを追加します。
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]}} />