Graphiques

Spend breakdown chart

Examinez les dépenses par service dans un graphique horizontal avec une échelle commune.

Spend breakdown chart

Inspect service spending with an accessible horizontal bar chart and period comparison.

Spend period

USD per billing cycle

$624.00

$134.40

$84.00

Compute

Compute runs build and release workers. September spend increased by $94.00.

Utiliser Spend breakdown chart

Examinez les dépenses par service dans un graphique horizontal avec une échelle commune.

Examinez les dépenses par service dans un graphique horizontal avec une échelle commune. En React contrôlé, fournissez value et onChange ; onAction reçoit l’action et l’état résultant. defaultValue initialise un brouillon local.

Sélectionnez Storage pour lire l’explication, puis passez à August pour comparer les montants. Cet exemple ne modifie qu?un brouillon local.

L’exemple contient trois catégories fixes sur une échelle commune de 700 USD. Remplacez les valeurs lors de l’adaptation.

Propriétés: accent, status

Comment l’application reçoit-elle les changements ?

En React contrôlé, fournissez value et onChange ; onAction reçoit l’action et l’état résultant. defaultValue initialise un brouillon local.

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent

Composants proches

1840Activity cell heatmapGraphiquesUne grille de calendrier composée de petits carrés teintés qui balaye une onde diagonale et permet à une bande de niveau d'isoler une intensité à la fois.

2104Animated Time AxisGraphiquesUne rangée d'étiquettes de date sous un graphique linéaire qui sélectionne automatiquement un sous-ensemble régulièrement espacé pour éviter l'encombrement et atténue les étiquettes à proximité du point survolé.

2097Animated Value AxisGraphiquesColonne d'étiquettes de valeurs à côté d'un graphique qui abrége les grands nombres et glisse facilement vers de nouvelles positions chaque fois que la plage de données du graphique change.

1525Area chart liteGraphiquesUn graphique en aires SVG réactif avec des graduations à axe rond, un remplissage dégradé, un réticule qui lit l'échantillon sous le pointeur et un volet de dessin.

2086Candle Price ChartGraphiquesUn graphique en chandeliers OHLC avec des bougies colorées de haut en bas, une mèche par période et une info-bulle de survol indiquant l'ouverture, le haut, le bas et la clôture.

2287Category dot lineGraphiquesUne seule courbe lisse répartie sur cinq catégories nommées où chaque marqueur de point est coloré à partir d'une rampe d'accentuation en teinte, de sorte que les marqueurs font également office de légende.