/ux
Components/Charts/BarChart

BarChart

Charts

Vertical / horizontal bar chart with stacked mode.

Single or multi-series bar chart. orientation switches between vertical bars and horizontal bars. withBarValueLabel renders the value above each bar.

Usage

import { BarChart } from "nosible-ux"

const data = [
  { region: "Americas", signals: 480 },
  { region: "Europe", signals: 320 },
  { region: "APAC", signals: 210 },
]

export default function Example() {
  return (
    <BarChart
      data={data}
      dataKey="region"
      series={[{ name: "signals" }]}
      withTooltip
      withXAxis
      withYAxis
    />
  )
}

Examples

Horizontal with value labels

Props

Name TypeDefaultDescription
aria-label
string | undefined—Accessible label forwarded to the `role="img"` wrapper.
data
Record<string, unknown>[]—Array of data objects keyed by `dataKey` + series names.
dataKey
string—Key used for the category axis.
h
number | undefined—Container height in px. Default: `300`.
orientation
"horizontal" | "vertical" | undefined—Bar orientation. - `"vertical"` — bars grow upward (default). - `"horizontal"` — bars grow rightward.
series
BarChartSeries[]—Series definitions — one bar group per entry.
withBarValueLabel
boolean | undefined—Show value labels on each bar. Default: `false`.
withLegend
boolean | undefined—Legend below the chart. Default: `true`.
withTooltip
boolean | undefined—Branded tooltip on hover. Default: `true`.
withXAxis
boolean | undefined—Render the X-axis. Default: `true`.
withYAxis
boolean | undefined—Render the Y-axis. Default: `true`.
← All ComponentsGetting Started →