CapDrive
Guía de uso

BarChart

Trace cada elemento de datos como una barra, adecuada para comparar valores categóricos. Se puede organizar horizontal o verticalmente, establecer rangos numéricos, etiquetas de categorías y etiquetas numéricas, y admite valores positivos y negativos.

Ejemplo

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

Uso

  • Cada elemento data es una barra, en orden del array, sin x. horizontal conserva rangeY como rango numérico. El rango automático incluye cero, los negativos cruzan la base y background rellena las barras.
  • rangeX/rangeY limita números, no etiquetas. Ocultar etiquetas no oculta ejes; usa stroke="clear" por separado. El motor evita solapamientos, por lo que activar etiquetas no garantiza mostrarlas todas.
  • contentAnimation cambia texto, imágenes o datos estructurados. interpolate requiere puntos/closed de Polyline, secuencia Path o muestras compatibles. Los cambios de estructura se aplican inmediatamente.

Propiedades

dataReadonlyArray<BarChartDataPoint>

Categorías en orden del arreglo. Cada elemento tiene un valor numérico y una etiqueta opcional.

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

Dirección: vertical de izquierda a derecha; horizontal de arriba abajo.

Ejemplo"vertical"
rangeY?ChartRange

Rango visible [min, max]. Si se omite, se ajusta a los datos e incluye cero.

Ejemplo[0, 100]
showLabels?boolean

Mostrar etiquetas de categorías. Las ausentes quedan vacías; el diseño nativo evita superposiciones.

Ejemplotrue
showValueLabels?boolean

Mostrar etiquetas numéricas del eje generadas automáticamente.

Ejemplotrue
barThickness?number | "auto"

Grosor de las barras en puntos o auto para adaptarse al espacio entre categorías.

Ejemplo"auto"
xAxis?ChartAxisStyle

Línea horizontal en la parte inferior del gráfico. Por defecto usa primer plano y ancho 1pt; stroke: clear la oculta.

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

Línea vertical a la izquierda del gráfico. Por defecto usa primer plano y ancho 1pt; stroke: clear la oculta.

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

Relleno de cada barra. Por defecto usa el color de primer plano del tema.

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

Radio de las esquinas de cada barra, limitado a su tamaño.

Ejemplo0
stroke?Paint

Color o degradado del trazo; clear lo oculta.

Ejemplo"clear"
lineWidth?number

Grosor del trazo en puntos; 0 no dibuja trazo.

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

Posición del trazo respecto a cada barra. Por defecto inside.

Ejemplo"inside"
dash?number[]

Longitudes alternas de trazo y hueco en puntos; matriz vacía para línea continua.

Ejemplo[]
dashPhase?number

Desplazamiento del patrón de guiones en puntos.

Ejemplo0
contentAnimation?ContentAnimation

Transición opcional. interpolate requiere igual cantidad de categorías y dirección; en otro caso actualiza inmediatamente.

Ejemplo{type: "interpolate", duration: 0.25}
Propiedades comunes
width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"
height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"
x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}
opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1
clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"
mask?View | null

View de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.

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

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0
blur?number

Radio de desenfoque en puntos; 0 lo desactiva.

Ejemplo4
innerShadow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

Color de la sombra exterior.

EjemploHDR("black")
shadowOpacity?number

Opacidad de la sombra de 0 a 1; 0 la oculta.

Ejemplo0
shadowRadius?number

Radio de desenfoque de la sombra, en puntos.

Ejemplo4
shadowX?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo0
shadowY?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo2
animations?BarChartAnimation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

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

Identidad estable entre elementos hermanos.

Ejemplo práctico

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

Animación

Animación

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

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

PropiedadesAl omitir
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

Anterior

LineChart

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas