build69
build69  /  Components  /  Charts  /  ComboChart

ComboChart

v1.0.4Updated 25 Jul 2026

Recharts-backed combo chart mixing bars + lines on the same axes (e.g., revenue bars + margin line). Two or three series.

Preview

Live · 6 stories
DefaultOpen ↗
Why this is recommendedchartcombomixedrecharts+2

The default, out-of-the-box ComboChart.

Recommended for+14
  • Bars + ratio overlay (revenue + margin)
  • Volume + index
  • Mixed-magnitude comparisons
Tags+6
chartcombomixedrechartsdata-vizdefault
Features+4
  • Bars + lines on shared axes
  • Two or three overlaid series
  • Hover tooltip + legend
  • i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
  • Single-series (use BarChart / LineChart)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ComboChart" })

Usage

import { ComboChart } from '@/components/data-viz/combo-chart';

<ComboChart data={data} series={[{ key: 'revenue', kind: 'bar' }, { key: 'margin', kind: 'line' }]} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
data

Rows of data

object[]yes
series

Per-series config (bar / line)

ComboSeries[]yes

Related