BarChart
Un diagramme en barres représente les données sous la forme d'une série de points de données en barres.
Pour ajouter le composant BarChart
à votre application :
import {BarChart} from '@stripe/ui-extension-sdk/ui';
Voici un aperçu du composant d’interface utilisateur 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. |
Utilisation de couleurs
Le canal color
regroupe les données :
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" />
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 | Description |
---|---|---|
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, par exemple {currency: 'USD'} ou une unité prise en charge telle que {unit: 'minute'} . Vous pouvez également créer une unité composée avec -per- au milieu, telle que {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'}}} />
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 :
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]}} />