Combined Chart

A combined bar + line chart component built using Recharts v3. Overlay bars and lines in a single chart for comparative analysis.

Installation

$ npx shadcn@latest add @orecus/combined-chart

Registry:

@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card

Component

Revenue & Profit Margin

Monthly revenue with profit margin trend

With Reference Lines

Revenue target and margin threshold

Props

Prop	Type	Default	Description
`data`*	`any[]`	—	The data for the chart
`index`*	`string`	—	Key in data to use for x-axis
`barCategories`*	`string[]`	—	Keys in data to render as bars
`lineCategories`*	`string[]`	—	Keys in data to render as lines
`barColors`	`ThemeColor[]`	—	Colors for bar series
`lineColors`	`ThemeColor[]`	—	Colors for line series
`stacked`	`boolean`	`false`	Stack bar series
`showDots`	`boolean`	`true`	Show dots on lines
`connectNulls`	`boolean`	`false`	Connect lines across null/undefined values
`showDataLabels`	`boolean`	`false`	Show value labels directly on chart elements
`barRadius`	`number`	`4`	Corner radius for bars
`cardProps`	`CardProps`	—	Props to pass to the underlying Card component
`tooltipSortByValue`	`boolean`	`false`	Sort tooltip items by value (descending)
`tooltipShowTotal`	`boolean`	`false`	Show total in tooltip for multi-series
`tooltipTotalLabel`	`string`	`'Total'`	Label for the total row in tooltip
`legendIndicator`	`'square' \| 'circle' \| 'line'`	`'square'`	Shape of legend indicators
`interactiveLegend`	`boolean`	`false`	Allow clicking legend items to toggle series visibility
`legendWrap`	`boolean`	`true`	Allow legend items to wrap to multiple lines
`xAxisFormatter`	`(value: string) => string`	—	Formatter for x-axis tick labels and tooltip header
`xAxisTick`	`SVGProps \| ReactElement \| ((props) => ReactNode) \| boolean`	—	Custom tick rendering for the x-axis — overrides xAxisFormatter when set
`yAxisFormatter`	`(value: number) => string`	—	Formatter for y-axis tick labels — falls back to valueFormatter
`yAxisTick`	`SVGProps \| ReactElement \| ((props) => ReactNode) \| boolean`	—	Custom tick rendering for the y-axis — overrides yAxisFormatter when set
`referenceLines`	`ChartReferenceLine[]`	—	Reference lines (targets, thresholds, averages) rendered on the chart