How do I install the Bar Chart component?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { BarChart }. Copy-paste distribution is also supported.

Is the Bar Chart component free to use?

Yes. Bar Chart ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Bar Chart page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK keeps the same component API across its web and native packages where a counterpart exists.

What is a bar chart used for?

It plots numeric series as bars. Pass data and dataKey. Set stacked to stack the series. Set layout to vertical to put the category on the Y axis. The tooltip and the grid are on unless you turn them off.

The Bar Chart component on this page. Each dataKey is one series. Recharts draws the bars. An optional lineDataKey adds a line on a second axis.

How to describe a bar chart?

Each row in data is a category. xAxisKey names that field and defaults to name. Each dataKey becomes a bar. The colors prop overrides the palette built into the component.

How to use a bar chart?

Import BarChart from @otfdashkit/ui and render it with data and dataKey. This page is the component, not a separate hosted chart creator. The preview is the Storybook story charts-areachart--bar-basic.

The same Bar Chart component. The function name is BarChart.

Shadcn-style Bar Chart

Data

Shadcn-style bar chart for React. A bar graph from the Bar Chart component on Recharts, with one or more series, an optional stack, and a tooltip.

View in Storybook

Bar ChartData · Web

Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import Bar Chart from @otfdashkit/ui.

Code

// Bar Chart — Shadcn-style bar chart for React. A bar graph from the Bar Chart component on Recharts, with one or more series, an optional stack, and a tooltip.
//
// Install:
//   bun add @otfdashkit/ui

import { BarChart } from '@otfdashkit/ui'

export function Example() {
  return (
    <BarChart>
      {/* your content */}
    </BarChart>
  )
}

Props

Props declared in the BarChart source. Inherited HTML attributes are not listed.

Prop	Type	Default	Description
datarequired	Record<string, unknown>[]
dataKeyrequired	string \| string[]
barCategoryGap	string \| number	'45%'	Gap between bar groups. Defaults to '45%' for generous whitespace.
barSize	number	28	Exact bar width/height in px. Defaults to 28 for a slim, elegant look.
className	string
colors	string[]
height	number	300
layout	'vertical' \| 'horizontal'	'horizontal'
lineColor	string	'hsl(var(--foreground))'
lineDataKey	string		Optional line overlay key — switches to ComposedChart with second Y axis
lineStrokeWidth	number	2
maxBarSize	number		Maximum bar width/height in px
rightAxisDomain	[string \| number, string \| number]
rightAxisFormatter	(v: number) => string
showGrid	boolean	true
showLegend	boolean	false
showTooltip	boolean	true
stacked	boolean	false
xAxisKey	string	'name'

Questions

What is a bar chart used for?: It plots numeric series as bars. Pass data and dataKey. Set stacked to stack the series. Set layout to vertical to put the category on the Y axis. The tooltip and the grid are on unless you turn them off.
What is bar charts?: The Bar Chart component on this page. Each dataKey is one series. Recharts draws the bars. An optional lineDataKey adds a line on a second axis.
How to describe a bar chart?: Each row in data is a category. xAxisKey names that field and defaults to name. Each dataKey becomes a bar. The colors prop overrides the palette built into the component.
How to use a bar chart?: Import BarChart from @otfdashkit/ui and render it with data and dataKey. This page is the component, not a separate hosted chart creator. The preview is the Storybook story charts-areachart--bar-basic.
What is a barchart?: The same Bar Chart component. The function name is BarChart.

Installation

Usage

Props

Related

Questions