BarChart

Plot each data item as a bar, suitable for comparing categorical values. It can be arranged horizontally or vertically, set numerical ranges, category labels and numerical labels, and supports positive and negative values.

Example

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

Usage

Each data item is one bar, ordered by the array; no x value is needed. axis=horizontal rotates the bar direction, but the value range is still rangeY. Automatic ranges include zero, negatives extend across the baseline, and background fills bars.
rangeX/rangeY bound numeric values, not labels. Hiding labels does not hide axis lines; use stroke="clear" in xAxis/yAxis to hide them separately. Native layout selects non-overlapping labels, so enabling labels does not guarantee every label appears.
contentAnimation transitions text, images or structured data rather than scalar properties. interpolate needs compatible structure: matching Polyline point count/closed state, Path command sequence or chart samples. Structural changes update immediately.

Properties

dataReadonlyArray<BarChartDataPoint>

Categories in array order. Each item has a numeric value and an optional label.

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

axis?"horizontal" | "vertical"

Bar direction: vertical runs left to right; horizontal runs top to bottom.

Example"vertical"

rangeY?ChartRange

Visible value range [min, max]. Omit to fit data and include zero.

Example[0, 100]

showLabels?boolean

Show category labels. Missing labels stay empty; native layout prevents overlap.

Exampletrue

showValueLabels?boolean

Show automatically generated numeric axis labels.

Exampletrue

barThickness?number | "auto"

Bar thickness in points, or auto to fit category spacing.

Example"auto"

xAxis?ChartAxisStyle

Horizontal axis line at the bottom of the plot. Defaults to foreground with 1pt width; use clear stroke to hide.

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

yAxis?ChartAxisStyle

Vertical axis line at the left of the plot. Defaults to foreground with 1pt width; use clear stroke to hide.

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

background?Paint

Fill paint for each bar. Defaults to the theme foreground.

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

cornerRadius?number

Corner radius of each bar, clamped to its size.

Example0

stroke?Paint

Stroke paint; accepts a color or gradient. Use clear to hide the stroke.

Example"clear"

lineWidth?number

Stroke thickness in points; 0 draws no stroke.

Example2

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

Stroke placement relative to each bar. Defaults to inside.

Example"inside"

dash?number[]

Alternating painted and empty lengths in points; an empty array makes a solid stroke.

Example[]

dashPhase?number

Offset along the dash pattern, in points.

Example0

contentAnimation?ContentAnimation

Optional content transition. Interpolate requires the same category count and axis; otherwise updates immediately.

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

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example"fill"

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example"fill"

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

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

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

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

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

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

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?BarChartAnimation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

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

key?string | number

Stable identity among siblings.

Practical example

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

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`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 }`

Example

Usage

Properties

Practical example

Animation

When omitted

LineChart

Color / Gradient

On this page

BarChart

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

LineChart

Color / Gradient

On this page