CapDrive
Guide d’utilisation

BarChart

Tracez chaque élément de données sous forme de barre, adaptée à la comparaison des valeurs catégorielles. Il peut être disposé horizontalement ou verticalement, définir des plages numériques, des étiquettes de catégorie et des étiquettes numériques, et prend en charge les valeurs positives et négatives.

Exemple

function main() {
  return (
    <BarChart
      data={[
        { value: 30, label: 'A' },
        { value: 70, label: 'B' },
      ]}
      axis="vertical"
      rangeY={[0, 100]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={6}
      yAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

Utilisation

  • Chaque élément data est une barre, dans l’ordre des catégories ; x est inutile. horizontal garde le nom rangeY pour les valeurs. La plage automatique inclut zéro, les négatifs franchissent la base, background remplit les barres.
  • rangeX/rangeY délimitent des nombres, pas des étiquettes. Masquer les textes ne masque pas les axes : utilisez stroke="clear". Le moteur évite les chevauchements ; toutes les étiquettes activées ne seront pas forcément affichées.
  • contentAnimation concerne texte, images et données structurées. interpolate exige des points/closed Polyline, commandes Path ou échantillons compatibles. Un changement de structure produit une mise à jour immédiate.

Propriétés

dataReadonlyArray<BarChartDataPoint>

Catégories dans l’ordre du tableau. Chaque élément contient une valeur numérique et un libellé facultatif.

Exemple[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]
axis?"horizontal" | "vertical"

Orientation : vertical de gauche à droite ; horizontal de haut en bas.

Exemple"vertical"
rangeY?ChartRange

Plage visible [min, max]. Sans valeur, adaptation aux données en incluant zéro.

Exemple[0, 100]
showLabels?boolean

Afficher les libellés des catégories. Les absents restent vides ; la disposition native évite les chevauchements.

Exempletrue
showValueLabels?boolean

Afficher les graduations numériques générées automatiquement.

Exempletrue
barThickness?number | "auto"

Épaisseur des barres en points, ou auto selon l’espacement des catégories.

Exemple"auto"
xAxis?ChartAxisStyle

Axe horizontal en bas du graphique. Par défaut : couleur de premier plan, largeur 1pt ; stroke: clear le masque.

Exemple{stroke: HDR($env.foreground), lineWidth: 1}
yAxis?ChartAxisStyle

Axe vertical à gauche du graphique. Par défaut : couleur de premier plan, largeur 1pt ; stroke: clear le masque.

Exemple{stroke: HDR($env.foreground), lineWidth: 1}
background?Paint

Remplissage de chaque barre. Par défaut, couleur de premier plan du thème.

ExempleHDR($env.dark ? "white" : "black")
cornerRadius?number

Rayon des coins de chaque barre, limité à sa taille.

Exemple0
stroke?Paint

Trait de couleur ou dégradé ; clear le masque.

Exemple"clear"
lineWidth?number

Épaisseur du trait en points ; 0 ne dessine aucun trait.

Exemple2
strokePosition?"inside" | "center" | "outside"

Position du contour par rapport à chaque barre. Par défaut inside.

Exemple"inside"
dash?number[]

Longueurs alternées de traits et d’espaces en points ; tableau vide pour un trait continu.

Exemple[]
dashPhase?number

Décalage du motif de tirets en points.

Exemple0
contentAnimation?ContentAnimation

Transition facultative. interpolate exige le même nombre de catégories et la même orientation ; sinon mise à jour immédiate.

Exemple{type: "interpolate", duration: 0.25}
Propriétés communes
width?number | "auto" | "fill"

Largeur en points, taille automatique ou remplissage du parent.

Exemple"fill"
height?number | "auto" | "fill"

Hauteur en points, taille automatique ou remplissage du parent.

Exemple"fill"
x?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
y?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
transform?ViewTransform

Transformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.

Exemple{rotation: 0}
opacity?number

Opacité globale du View : 0 transparent, 1 opaque.

Exemple1
clipped?boolean

Découpe les dessins dépassant les limites du View.

Exemplefalse
clip?"rectangle" | "ellipse"

Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.

Exemple"rectangle"
mask?View | null

View de masque alpha. Centrée sans modifier la disposition ; null désactive le masque.

Exemple<Circle width="fill" height="fill" background="white"/>
zIndex?number

Ordre entre éléments frères ; les valeurs élevées sont devant.

Exemple0
blur?number

Rayon du flou en points ; 0 le désactive.

Exemple4
innerShadow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

Exemple{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

Exemple{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Couleur de l’ombre extérieure.

ExempleHDR("black")
shadowOpacity?number

Opacité de l’ombre de 0 à 1 ; 0 la masque.

Exemple0
shadowRadius?number

Rayon du flou de l’ombre extérieure, en points.

Exemple4
shadowX?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple0
shadowY?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple2
animations?BarChartAnimation[]

Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.

Exemple[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identifiant stable parmi les éléments frères.

Exemple pratique

function main() {
  return (
    <BarChart
      width={260}
      height={160}
      axis="horizontal"
      rangeY={[-50, 100]}
      data={[
        { value: 80, label: 'A' },
        { value: -25, label: 'B' },
        { value: 45, label: 'C' },
      ]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={4}
      xAxis={{ stroke: $env.foreground, dash: [4, 3] }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

Animation

Animation

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

En cas d’omission

Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.

PropriétésEn cas d’omission
data[]
axis"vertical"
showLabelstrue
showValueLabelstrue
cornerRadius0
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

LineChart

Color / Gradient

Path

Précédent

LineChart

Étape suivante

Sur cette page

ExempleUtilisationPropriétésExemple pratiqueAnimationEn cas d’omissionAPI associées