# Stripe Apps の BarChart コンポーネント 棒グラフは、棒を使用してデータを一連のデータポイントとして視覚化します。 # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/barchart?app-sdk-version=8. `BarChart` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {BarChart} from '@stripe/ui-extension-sdk/ui'; ``` `BarChart` コンポーネントのプレビューを以下に示します。 ### BarChart プロパティ | プロパティー | タイプ | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `data` | (必須) `{ [x: string]: any; }[]` チャートの生成に使用されるデータ。 | | `x` | (必須) `string | number | Channel` x 軸上の点のプロパティまたはアクセサー。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | | `y` | (必須) `string | number | Channel` y 軸上の点のプロパティまたはアクセサー。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | | `axis` | (オプション) `("x" | "y" | "both" | "none") | undefined` 各軸のラベルと目盛をレンダリングするかどうかを決定します。 | | `color` | (オプション) `(string | number | Channel) | undefined` プロパティまたはアクセサーに基づいてデータを色でグループ化します。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | | `grid` | (オプション) `("x" | "y" | "both" | "none") | undefined` 各軸のグリッド線をレンダリングするかどうかを決定します。 | | `legend` | (オプション) `boolean | undefined` 凡例をレンダリングするかどうかを決定します (複数の項目が存在する場合)。 | | `tooltip` | (オプション) `boolean | undefined` チャート上にマウスを合わせたときにツールチップを表示するかどうかを決定します。 | | `z` | (オプション) `(string | number | Channel) | undefined` プロパティまたはアクセサーに基づいてデータをグループ化します。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | ### Channel | プロパティー | タイプ | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `domain` | (オプション) `any[] | undefined` | | `format` | (オプション) `((Currency | UnitIdentifier) | ("capitalize" | { [x: string]: string; })) | undefined` 関連タイプ: [Currency](https://docs.stripe.com/stripe-apps/components/barchart.md#currency)、[UnitIdentifier](https://docs.stripe.com/stripe-apps/components/barchart.md#unitidentifier)。 | | `label` | (オプション) `string | undefined` | | `value` | (オプション) `(string | number) | undefined` | ### 通貨 | プロパティー | タイプ | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `currency` | (必須) `'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 | プロパティー | タイプ | | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `unit` | (必須) `'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’}`` | ## 色の使用 `color` チャネルは、データを次のようにグループ化します。 ## 軸と値の形式設定 axis 値に文字列を渡す代わりに、`value`、`label`、または `format` プロパティーが含まれたオブジェクトを渡すことで、より豊富な形式設定を追加できます。 | プロパティ | タイプ | | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `string | number` データセット内のプロパティー名。必須。 | | `label` | `string` 軸の表示テキスト。 | | `format` | `object` [サポートされている通貨コード](https://raw.githubusercontent.com/unicode-org/cldr/main/common/validity/currency.xml) (`{currency: 'USD'}` など) または[サポートされている単位](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier) (`{unit: 'minute'}` など) のいずれかを使用して、数値の形式を指定します。`{unit: 'megabyte-per-hour'}` のように間に `-per-` を入れることで複合単位を作成することもできます。 | ## ドメイン 軸の最小値と最大値を設定するには、`domain` プロパティーを使用します。たとえば、`y` 軸を (提供されたデータに合わせて自動調整するのではなく) 常に 0 から 10 の範囲にしたい場合は、設定に `domain` プロパティーを追加します。 # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/barchart?app-sdk-version=9. `BarChart` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {BarChart} from '@stripe/ui-extension-sdk/ui'; ``` `BarChart` コンポーネントのプレビューを以下に示します。 ### BarChart プロパティ | プロパティー | タイプ | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `data` | (必須) `{ [x: string]: any; }[]` チャートの生成に使用されるデータ。 | | `x` | (必須) `string | number | Channel` x 軸上の点のプロパティまたはアクセサー。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | | `y` | (必須) `string | number | Channel` y 軸上の点のプロパティまたはアクセサー。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | | `axis` | (オプション) `("x" | "y" | "both" | "none") | undefined` 各軸のラベルと目盛をレンダリングするかどうかを決定します。 | | `color` | (オプション) `(string | number | Channel) | undefined` プロパティまたはアクセサーに基づいてデータを色でグループ化します。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | | `grid` | (オプション) `("x" | "y" | "both" | "none") | undefined` 各軸のグリッド線をレンダリングするかどうかを決定します。 | | `legend` | (オプション) `boolean | undefined` 凡例をレンダリングするかどうかを決定します (複数の項目が存在する場合)。 | | `tooltip` | (オプション) `boolean | undefined` チャート上にマウスを合わせたときにツールチップを表示するかどうかを決定します。 | | `z` | (オプション) `(string | number | Channel) | undefined` プロパティまたはアクセサーに基づいてデータをグループ化します。 関連タイプ: [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel)。 | ### Channel | プロパティー | タイプ | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `domain` | (オプション) `any[] | undefined` | | `format` | (オプション) `((CurrencyFormat | UnitIdentifier | { style?: "decimal" | undefined; }) | ("capitalize" | { [x: string]: string; })) | undefined` 関連タイプ: [CurrencyFormat](https://docs.stripe.com/stripe-apps/components/barchart.md#currencyformat)、[UnitIdentifier](https://docs.stripe.com/stripe-apps/components/barchart.md#unitidentifier)。 | | `label` | (オプション) `string | undefined` | | `nice` | (オプション) `boolean | undefined` | | `tickFormat` | (オプション) `((CurrencyFormat | UnitIdentifier | { style?: "decimal" | undefined; }) | ("capitalize" | { [x: string]: string; })) | undefined` 関連タイプ: [CurrencyFormat](https://docs.stripe.com/stripe-apps/components/barchart.md#currencyformat)、[UnitIdentifier](https://docs.stripe.com/stripe-apps/components/barchart.md#unitidentifier)。 | | `ticks` | (オプション) `number | undefined` | | `value` | (オプション) `(string | number) | undefined` | | `zero` | (オプション) `boolean | undefined` | ### CurrencyFormat | プロパティー | タイプ | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `currency` | (必須) `'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'` | | `fractionalDigits` | (オプション) `(0 | "auto") | undefined` | ### UnitIdentifier | プロパティー | タイプ | | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `unit` | (必須) `'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’}`` | ## 色の使用 `color` チャネルは、データを次のようにグループ化します。 ## 軸と値の形式設定 axis 値に文字列を渡す代わりに、`value`、`label`、または `format` プロパティーが含まれたオブジェクトを渡すことで、より豊富な形式設定を追加できます。 | プロパティ | タイプ | | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `string | number` データセット内のプロパティー名。必須。 | | `label` | `string` 軸の表示テキスト。 | | `format` | `object` [サポートされている通貨コード](https://raw.githubusercontent.com/unicode-org/cldr/main/common/validity/currency.xml) (`{currency: 'USD'}` など) または[サポートされている単位](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier) (`{unit: 'minute'}` など) のいずれかを使用して、数値の形式を指定します。`{unit: 'megabyte-per-hour'}` のように間に `-per-` を入れることで複合単位を作成することもできます。 | ## ドメイン 軸の最小値と最大値を設定するには、`domain` プロパティーを使用します。たとえば、`y` 軸を (提供されたデータに合わせて自動調整するのではなく) 常に 0 から 10 の範囲にしたい場合は、設定に `domain` プロパティーを追加します。 ## 次のバージョン `BarChart` コンポーネントの次のバージョンが利用可能です。Next UI コンポーネントの使用方法の詳細については、[このガイドを](https://docs.stripe.com/stripe-apps/next-ui-components.md)参照してください。 ### 軸 (次) ### 予測 (次) ### 未完了 (次) ### スタック (次) ## See also - [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md) - [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md) - [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)