BarChart

Stellen Sie jedes Datenelement als Balken dar, der zum Vergleich kategorialer Werte geeignet ist. Es kann horizontal oder vertikal angeordnet werden, numerische Bereiche, Kategoriebeschriftungen und numerische Beschriftungen festlegen und unterstützt positive und negative Werte.

Beispiel

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 }}
    />
  );
}

Verwendung

Ein data-Eintrag ist ein Balken; Arrayreihenfolge bestimmt Kategorien, x ist unnötig. Bei horizontal heißt der Wertebereich weiter rangeY. Automatik enthält null, negative Werte reichen über die Basislinie, background füllt Balken.
rangeX/rangeY begrenzen Zahlen, nicht Beschriftungen. Versteckte Labels entfernen keine Achsen; dafür stroke="clear" setzen. Native Auswahl verhindert Überlappungen, weshalb nicht jedes aktivierte Label erscheinen muss.
contentAnimation betrifft Text, Bilder und strukturierte Daten. interpolate benötigt passende Polyline-Punktzahl/closed, Path-Befehlsfolge oder Diagrammstruktur. Strukturänderungen werden sofort übernommen.

Eigenschaften

dataReadonlyArray<BarChartDataPoint>

Kategorien in Array-Reihenfolge. Jeder Eintrag enthält einen Zahlenwert und eine optionale Beschriftung.

Beispiel[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]

axis?"horizontal" | "vertical"

Balkenrichtung: vertical von links nach rechts; horizontal von oben nach unten.

Beispiel"vertical"

rangeY?ChartRange

Sichtbarer Wertebereich [min, max]. Ohne Angabe automatisch an Daten angepasst, einschließlich null.

Beispiel[0, 100]

showLabels?boolean

Kategoriebeschriftungen anzeigen. Fehlende bleiben leer; das native Layout verhindert Überlappungen.

Beispieltrue

showValueLabels?boolean

Automatisch erzeugte numerische Achsenbeschriftungen anzeigen.

Beispieltrue

barThickness?number | "auto"

Balkendicke in Punkten oder auto für automatische Kategorieabstände.

Beispiel"auto"

xAxis?ChartAxisStyle

Horizontale Achsenlinie am unteren Diagrammrand. Standard: Vordergrundfarbe, 1pt breit; mit stroke: clear ausblenden.

Beispiel{stroke: HDR($env.foreground), lineWidth: 1}

yAxis?ChartAxisStyle

Vertikale Achsenlinie am linken Diagrammrand. Standard: Vordergrundfarbe, 1pt breit; mit stroke: clear ausblenden.

Beispiel{stroke: HDR($env.foreground), lineWidth: 1}

background?Paint

Füllung jedes Balkens. Standard ist die Vordergrundfarbe des Designs.

BeispielHDR($env.dark ? "white" : "black")

cornerRadius?number

Eckenradius jedes Balkens, auf seine Größe begrenzt.

Beispiel0

stroke?Paint

Linienfarbe oder Verlauf; clear blendet die Linie aus.

Beispiel"clear"

lineWidth?number

Linienstärke in Punkten; 0 zeichnet keine Linie.

Beispiel2

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

Konturposition relativ zu jedem Balken. Standard ist inside.

Beispiel"inside"

dash?number[]

Abwechselnde Strich- und Lückenlängen in Punkten; leeres Array bedeutet durchgezogen.

Beispiel[]

dashPhase?number

Versatz des Strichmusters in Punkten.

Beispiel0

contentAnimation?ContentAnimation

Optionaler Inhaltsübergang. interpolate erfordert dieselbe Kategorienanzahl und Richtung; sonst sofortige Aktualisierung.

Beispiel{type: "interpolate", duration: 0.25}

Allgemeine Eigenschaften

width?number | "auto" | "fill"

Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"

height?number | "auto" | "fill"

Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"

x?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0

y?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0

transform?ViewTransform

Gesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.

Beispiel{rotation: 0}

opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1

clipped?boolean

Zeichnung außerhalb der View-Grenzen abschneiden.

Beispielfalse

clip?"rectangle" | "ellipse"

Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.

Beispiel"rectangle"

mask?View | null

View als Alphamaske. Zentriert ohne Einfluss auf das Layout; null deaktiviert die Maske.

Beispiel<Circle width="fill" height="fill" background="white"/>

zIndex?number

Zeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.

Beispiel0

blur?number

Unschärferadius in Punkten; 0 deaktiviert die Unschärfe.

Beispiel4

innerShadow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

Beispiel{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

Beispiel{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Farbe des äußeren Schattens.

BeispielHDR("black")

shadowOpacity?number

Schattendeckkraft 0–1; 0 blendet ihn aus.

Beispiel0

shadowRadius?number

Unschärferadius des äußeren Schattens in Punkten.

Beispiel4

shadowX?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel0

shadowY?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel2

animations?BarChartAnimation[]

Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.

Beispiel[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stabile Kennung unter Geschwisterelementen.

Praxisbeispiel

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

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

Beim Weglassen

Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.

Eigenschaften	Beim Weglassen
`data`	`[]`
`axis`	`"vertical"`
`showLabels`	`true`
`showValueLabels`	`true`
`cornerRadius`	`0`
`strokePosition`	`"inside"`
`background`	`HDR($env.dark ? 'white' : 'black')`
`xAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`
`yAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

LineChart

Color / Gradient

Auf dieser Seite

BarChart

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

Verwandte APIs

LineChart

Color / Gradient

Auf dieser Seite