Composed / Combo Chart

Bars and lines on ONE shared y-axis (e.g. actual vs target). Never two y-scales: different units belong in separate charts.

Import

import { ComposedChart } from '@marbleui/ui'

Props

<ComposedChart>

Prop	Type	Default	Description
data *required	`Datum[]`	`—`
index *required	`string`	`—`	Key in each datum used for the x axis.
series *required	`CartesianSeries[]`	`—`
summary *required	`string`	`—`	Accessible one-sentence summary of the chart.
className	`string`	`—`
curve	`'smooth' \| 'linear'`	`—`
description	`ReactNode`	`—`
endLabels	`boolean`	`—`	Label the last point of each line (direct labels, ≤4 series).
height	`number`	`—`
indexFormat	`(v: unknown) => string`	`—`
showGrid	`boolean`	`—`
showLegend	`boolean`	`—`
showYAxis	`boolean`	`—`
stacked	`boolean`	`—`
title	`ReactNode`	`—`
valueFormat	`(n: number) => string`	`—`

Usage notes

Bars and lines (or areas) on one shared y-axis, such as monthly revenue against a target. There is no second y-axis; values in different units belong in separate charts.

<ComposedChart
  title="Revenue vs target"
  summary="Revenue stayed below target until June, then passed it."
  data={revenue} index="month" stacked valueFormat={(n) => `$${Math.round(n / 1000)}K`}
  series={[
    { key: 'subscriptions', label: 'Subscriptions', kind: 'bar' },
    { key: 'services', label: 'Services', kind: 'bar' },
    { key: 'target', label: 'Target', kind: 'line', color: 'var(--fg-muted)' },
  ]}
/>

Each series sets kind: 'bar', 'line' or 'area'. It defaults to 'line', so mark bars explicitly.
With stacked, bars and areas stack but lines never do, so a target line stays at its own value.
Colors are assigned by position across all series (--chart-1…8); give reference lines an explicit neutral color.
Keyboard and tooltip work as in LineChart: Tab into the plot, Left/Right to step, and the tooltip lists every series. Frame, summary and table come from ChartContainer.

Example source · show

import { revenue } from '../lib/chart-samples'
import { ComposedChart } from './composed-chart'

const money = (n: number) => `$${Math.round(n / 1000)}K`

export const styles = {
  'Bars + target': () => (
    <ComposedChart
      className="w-[36rem]"
      title="Revenue vs target"
      summary="Stacked monthly revenue with a target line; revenue stays below target until June."
      data={revenue}
      index="month"
      stacked
      valueFormat={money}
      series={[
        { key: 'subscriptions', label: 'Subscriptions', kind: 'bar' },
        { key: 'services', label: 'Services', kind: 'bar' },
        { key: 'target', label: 'Target', kind: 'line', color: 'var(--fg-muted)' },
      ]}
    />
  ),
}

Source: packages/ui/src/composed-chart/composed-chart.tsx

Catalog