Bar Chart
DataMITA bar graph with one or more series, an optional stack, and a tooltip.
bun add @otfdashkit/ui
Preview
Bar ChartData
Loading Storybook preview…
Code
@otfdashkit/uiimport { BarChart } from '@otfdashkit/ui'
const MONTHLY_DATA = [
{ month: 'Jan', revenue: 4200, users: 240, churn: 12 },
{ month: 'Feb', revenue: 5800, users: 310, churn: 18 },
{ month: 'Mar', revenue: 5200, users: 290, churn: 9 },
{ month: 'Apr', revenue: 7100, users: 420, churn: 15 },
{ month: 'May', revenue: 8400, users: 510, churn: 22 },
{ month: 'Jun', revenue: 7600, users: 480, churn: 19 },
{ month: 'Jul', revenue: 9200, users: 580, churn: 28 },
{ month: 'Aug', revenue: 10400, users: 640, churn: 24 },
]
export function Example() {
return (
<BarChart data={MONTHLY_DATA} dataKey="revenue" xAxisKey="month" height={280} />
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
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.