Bar Chart
Bar charts are commonly used to compare categorical data by representing each category with bars of varying lengths.
Basic
Bar charts help visualize data comparisons across categories. They are effective for highlighting differences and trends using vertical or horizontal bars.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
npx @intentui/cli@latest add bar-chartComposed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The Bar Chart comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Make sure you also install the composed components and the required packages for the component to function properly.
npm i rechartsYou can copy the code below and paste it into your component folder.
"use client"
import { type ComponentProps, startTransition } from "react"
import { Bar, BarChart as BarChartPrimitive } from "recharts"
import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent"
import { twMerge } from "tailwind-merge"
import {
type BaseChartProps,
CartesianGrid,
Chart,
ChartLegend,
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
constructCategoryColors,
DEFAULT_COLORS,
getColorValue,
valueToPercent,
XAxis,
YAxis,
} from "./chart"
interface BarChartProps<TValue extends ValueType, TName extends NameType>
extends BaseChartProps<TValue, TName> {
barCategoryGap?: number
barRadius?: number
barGap?: number
barSize?: number
barProps?: Partial<React.ComponentProps<typeof Bar>>
chartProps?: Omit<ComponentProps<typeof BarChartPrimitive>, "data" | "stackOffset">
}
const BarChart = <TValue extends ValueType, TName extends NameType>({
data = [],
dataKey,
lineType = "linear",
colors = DEFAULT_COLORS,
type = "default",
className,
config,
children,
layout = "horizontal",
// Components
tooltip = true,
tooltipProps,
legend = true,
legendProps,
intervalType = "equidistantPreserveStart",
barCategoryGap = 5,
barGap,
barSize,
barRadius,
barProps,
valueFormatter = (value: number) => value.toString(),
// XAxis
displayEdgeLabelsOnly = false,
xAxisProps,
hideXAxis = false,
// YAxis
yAxisProps,
hideYAxis = false,
hideGridLines = false,
chartProps,
...props
}: BarChartProps<TValue, TName>) => {
const categoryColors = constructCategoryColors(Object.keys(config), colors)
const stacked = type === "stacked" || type === "percent"
return (
<Chart
className={twMerge("w-full", className)}
config={config}
data={data}
dataKey={dataKey}
layout={layout}
{...props}
>
{({ onLegendSelect, selectedLegend }) => (
<BarChartPrimitive
onClick={() => {
onLegendSelect(null)
}}
data={data}
margin={{
bottom: 0,
left: 5,
right: 0,
top: 5,
}}
layout={layout === "radial" ? "horizontal" : layout}
barGap={barGap}
barSize={barSize}
barCategoryGap={barCategoryGap}
stackOffset={type === "percent" ? "expand" : stacked ? "sign" : undefined}
{...chartProps}
>
{!hideGridLines && <CartesianGrid strokeDasharray="4 4" />}
<XAxis
hide={hideXAxis}
className="**:[text]:fill-muted-fg"
displayEdgeLabelsOnly={displayEdgeLabelsOnly}
intervalType={intervalType}
{...xAxisProps}
/>
<YAxis
hide={hideYAxis}
className="**:[text]:fill-muted-fg"
tickFormatter={type === "percent" ? valueToPercent : valueFormatter}
{...yAxisProps}
/>
{legend && (
<ChartLegend
content={typeof legend === "boolean" ? <ChartLegendContent /> : legend}
{...legendProps}
/>
)}
{tooltip && (
<ChartTooltip
content={
typeof tooltip === "boolean" ? <ChartTooltipContent accessibilityLayer /> : tooltip
}
{...tooltipProps}
/>
)}
{!children
? Object.entries(config).map(([category, values]) => {
return (
<Bar
key={category}
name={category}
dataKey={category}
stroke={getColorValue(values.color || categoryColors.get(category))}
strokeWidth={1}
stackId={stacked ? "stack" : undefined}
onClick={(_item, _number, event) => {
event.stopPropagation()
startTransition(() => {
onLegendSelect(category)
})
}}
radius={barRadius ?? (stacked ? undefined : 4)}
strokeOpacity={selectedLegend && selectedLegend !== category ? 0.2 : 0}
fillOpacity={selectedLegend && selectedLegend !== category ? 0.1 : 1}
fill={getColorValue(values.color || categoryColors.get(category))}
{...barProps}
/>
)
})
: children}
</BarChartPrimitive>
)}
</Chart>
)
}
export type { BarChartProps }
export { BarChart }
Stacked
Stacked bar charts let you compare parts of a whole across categories. Each bar stacks its values to show how they build up.
Custom format
Custom format bar charts let you style the appearance, including bar radius, spacing, and color, for visual alignment with your product.
Custom tooltip
Custom tooltips let you enrich the bar hover experience with icons, values, and additional context. Ideal for readable data at a glance.
Custom legend
Custom legends help identify bar categories with icons, colors, or labels tailored to your dataset.
Custom colors
Custom colors allow you to set specific colors for each bar, enhancing visual distinction and brand alignment.
Controlled
Controlled bar charts let you dynamically manage state. You can filter datasets, toggle views, or update the display based on user interaction.