# Composant BarChart pour les applications Stripe Un diagramme en barres représente les données sous la forme d'une série de points de données en barres. # 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. Pour ajouter le composant `BarChart` à votre application : ```js import {BarChart} from '@stripe/ui-extension-sdk/ui'; ``` Voici un aperçu du composant d’interface utilisateur `BarChart` : ### Propriétés BarChart | Propriété | Type | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `data` | (Obligatoire) `{ [x: string]: any; }[]` Données utilisées pour générer le graphique. | | `x` | (Obligatoire) `string | number | Channel` La propriété ou l’accesseur du point sur l’axe x. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | | `y` | (Obligatoire) `string | number | Channel` La propriété ou l’accesseur du point sur l’axe y. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | | `axis` | (Facultatif) `("x" | "y" | "both" | "none") | undefined` Détermine s’il faut afficher les libellés et les graduations pour chaque axe. | | `color` | (Facultatif) `(string | number | Channel) | undefined` Regroupe les données par couleur en fonction d’une propriété ou d’un accesseur. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | | `grid` | (Facultatif) `("x" | "y" | "both" | "none") | undefined` Détermine s’il faut afficher les lignes de quadrillage pour chaque axe. | | `legend` | (Facultatif) `boolean | undefined` Détermine s’il faut afficher la légende (lorsque plusieurs éléments sont présents). | | `tooltip` | (Facultatif) `boolean | undefined` Détermine s’il faut afficher une infobulle lors du survol du graphique. | | `z` | (Facultatif) `(string | number | Channel) | undefined` Regroupe les données en fonction d’une propriété ou d’un accesseur. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | ### Canal | Propriété | Type | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `domain` | (Facultatif) `any[] | undefined` | | `format` | (Facultatif) `((Currency | UnitIdentifier) | ("capitalize" | { [x: string]: string; })) | undefined` Types associés : [Currency](https://docs.stripe.com/stripe-apps/components/barchart.md#currency), [UnitIdentifier](https://docs.stripe.com/stripe-apps/components/barchart.md#unitidentifier). | | `label` | (Facultatif) `string | undefined` | | `value` | (Facultatif) `(string | number) | undefined` | ### Devise | Propriété | Type | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `currency` | (Obligatoire) `'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 | Propriété | Type | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `unit` | (Obligatoire) `'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’}`` | ## Utilisation de couleurs Le canal `color` regroupe les données : ## Mise en forme des axes et des valeurs Au lieu de transmettre une chaîne pour une valeur d’axe, vous pouvez ajouter une mise en forme plus détaillée en transmettant un objet qui comporte les propriétés `value`, `label` et/ou `format`. | Propriété | Type | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `string | number` Le nom de la propriété dans l’ensemble de données. Obligatoire. | | `label` | `string` Le texte à afficher pour l’axe. | | `format` | `object` Mettez en forme un nombre avec l’un des [codes des devises prises en charge](https://raw.githubusercontent.com/unicode-org/cldr/main/common/validity/currency.xml), par exemple `{currency: 'USD'}` ou une [unité prise en charge](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier) telle que `{unit: 'minute'}`. Vous pouvez également créer une unité composée avec `-per-` au milieu, telle que `{unit: 'megabyte-per-hour'}`. | ## Domaine Pour définir les valeurs minimale et maximale d’un axe, utilisez la propriété `domain`. Par exemple, si vous souhaitez que l’axe `y` soit toujours de 0 à 10 (plutôt qu’il soit ajusté automatiquement en fonction des données fournies), ajoutez la propriété `domain` à votre configuration : # 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. Pour ajouter le composant `BarChart` à votre application : ```js import {BarChart} from '@stripe/ui-extension-sdk/ui'; ``` Voici un aperçu du composant d’interface utilisateur `BarChart` : ### Propriétés BarChart | Propriété | Type | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `data` | (Obligatoire) `{ [x: string]: any; }[]` Données utilisées pour générer le graphique. | | `x` | (Obligatoire) `string | number | Channel` La propriété ou l’accesseur du point sur l’axe x. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | | `y` | (Obligatoire) `string | number | Channel` La propriété ou l’accesseur du point sur l’axe y. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | | `axis` | (Facultatif) `("x" | "y" | "both" | "none") | undefined` Détermine s’il faut afficher les libellés et les graduations pour chaque axe. | | `color` | (Facultatif) `(string | number | Channel) | undefined` Regroupe les données par couleur en fonction d’une propriété ou d’un accesseur. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | | `grid` | (Facultatif) `("x" | "y" | "both" | "none") | undefined` Détermine s’il faut afficher les lignes de quadrillage pour chaque axe. | | `legend` | (Facultatif) `boolean | undefined` Détermine s’il faut afficher la légende (lorsque plusieurs éléments sont présents). | | `tooltip` | (Facultatif) `boolean | undefined` Détermine s’il faut afficher une infobulle lors du survol du graphique. | | `z` | (Facultatif) `(string | number | Channel) | undefined` Regroupe les données en fonction d’une propriété ou d’un accesseur. Types associés : [Channel](https://docs.stripe.com/stripe-apps/components/barchart.md#channel). | ### Canal | Propriété | Type | | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `domain` | (Facultatif) `any[] | undefined` | | `format` | (Facultatif) `((CurrencyFormat | UnitIdentifier | { style?: "decimal" | undefined; }) | ("capitalize" | { [x: string]: string; })) | undefined` Types associés : [CurrencyFormat](https://docs.stripe.com/stripe-apps/components/barchart.md#currencyformat), [UnitIdentifier](https://docs.stripe.com/stripe-apps/components/barchart.md#unitidentifier). | | `label` | (Facultatif) `string | undefined` | | `nice` | (Facultatif) `boolean | undefined` | | `tickFormat` | (Facultatif) `((CurrencyFormat | UnitIdentifier | { style?: "decimal" | undefined; }) | ("capitalize" | { [x: string]: string; })) | undefined` Types associés : [CurrencyFormat](https://docs.stripe.com/stripe-apps/components/barchart.md#currencyformat), [UnitIdentifier](https://docs.stripe.com/stripe-apps/components/barchart.md#unitidentifier). | | `ticks` | (Facultatif) `number | undefined` | | `value` | (Facultatif) `(string | number) | undefined` | | `zero` | (Facultatif) `boolean | undefined` | ### CurrencyFormat | Propriété | Type | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `currency` | (Obligatoire) `'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` | (Facultatif) `(0 | "auto") | undefined` | ### UnitIdentifier | Propriété | Type | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `unit` | (Obligatoire) `'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’}`` | ## Utilisation de couleurs Le canal `color` regroupe les données : ## Mise en forme des axes et des valeurs Au lieu de transmettre une chaîne pour une valeur d’axe, vous pouvez ajouter une mise en forme plus détaillée en transmettant un objet qui comporte les propriétés `value`, `label` et/ou `format`. | Propriété | Type | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `string | number` Le nom de la propriété dans l’ensemble de données. Obligatoire. | | `label` | `string` Le texte à afficher pour l’axe. | | `format` | `object` Mettez en forme un nombre avec l’un des [codes des devises prises en charge](https://raw.githubusercontent.com/unicode-org/cldr/main/common/validity/currency.xml), par exemple `{currency: 'USD'}` ou une [unité prise en charge](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier) telle que `{unit: 'minute'}`. Vous pouvez également créer une unité composée avec `-per-` au milieu, telle que `{unit: 'megabyte-per-hour'}`. | ## Domaine Pour définir les valeurs minimale et maximale d’un axe, utilisez la propriété `domain`. Par exemple, si vous souhaitez que l’axe `y` soit toujours de 0 à 10 (plutôt qu’il soit ajusté automatiquement en fonction des données fournies), ajoutez la propriété `domain` à votre configuration : ## Version suivante La nouvelle version du composant `BarChart` est maintenant disponible. Pour plus de détails sur l’utilisation des prochains composants d’interface utilisateur, consultez [ce guide](https://docs.stripe.com/stripe-apps/next-ui-components.md). ### Axe (suivant) ### Prévisions (suivant) ### Incomplet (suivant) ### Empilé (suivant) ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)