Intentwise Primitives

Charts

Full-featured data visualization components built on Recharts. Support multi-series, dual axes, auto-coloring from the design token palette, tooltips, legends, and PNG export.

AreaChart

Revenue & Ad Spend

Multi-series area chart with a dashed line for the secondary series.

Show code

<AreaChart data={timeSeriesData} title="Revenue & Ad Spend" height={350} exportable />

Dual Y-Axis

Two metrics on separate axes — revenue on the left, growth percentage on the right.

Show code

<AreaChart data={dualAxisData} title="Revenue vs Growth" />

LineChart

Multi-Series Comparison

LineChart is a thin wrapper over the same time-series engine as AreaChart, without the area fill.

Show code

<LineChart data={data} title="Comparison" showDots />

BarChart

Grouped Bars

Side-by-side comparison of multiple metrics across categories.

Show code

<BarChart data={categoricalData} title="Revenue by Ad Type" />

Stacked Bars

Use stackId on series to create stacked bar charts.

Show code

<BarChart data={stackedData} title="Revenue Composition" />

Horizontal Layout

Switch to horizontal bars with layout='horizontal' on the data.

Show code

<BarChart data={{ ...data, layout: 'horizontal' }} />

With Bar Labels

Show formatted values above each bar.

Show code

<BarChart data={data} showBarLabels />

DonutChart

Revenue Breakdown

Donut chart with center label showing total. Auto-colors from the design token palette.

Show code

<DonutChart data={{ slices: [...], centerLabel: 'Total', centerValue: 146000 }} />

ScatterChart

Ad Spend vs ROAS

Scatter plot for correlation analysis. Supports multiple series and bubble sizing.

Show code

<ScatterChart data={{ points: [...], series: [...] }} />

FunnelChart

Purchase Funnel

Conversion funnel with stage-to-stage conversion rates. Built on Recharts FunnelChart.

Show code

<FunnelChart data={{ stages: [...], showConversionRate: true }} />

HeatMap

Clicks by Day & Hour

2D grid with color intensity based on values. Uses the sequential blue palette from design tokens.

Show code

<HeatMap data={{ rows: [...], columns: [...], cells: [...] }} />

WaterfallChart

Revenue Waterfall

Cumulative bar chart showing increases and decreases. Green for gains, red for losses, blue for totals.

Show code

<WaterfallChart data={{ steps: [...], format: 'currency' }} />

RadarChart

Campaign Performance Radar

Multi-series radar (spider) chart for comparing performance profiles across dimensions. Supports configurable fill opacity and grid visibility.

Show code

<RadarChart data={{ points: [...], series: [...] }} />

Without Grid Lines

Hide the polar grid for a cleaner look.

Show code

<RadarChart data={...} showGrid={false} />

ComboChart

Bars + Line (Dual Axis)

ComboChart combines bars and lines on the same canvas with independent Y-axes — ideal for showing volume alongside a rate or percentage.

Show code

<ComboChart data={{ points, xAxisKey, series, yAxes }} title="Orders & Return Rate" />

With Metric Chips

Shows the metric chips and Add Metric flow used in DSP-Order chart experiences.

Show code

<ComboChart
  data={comboChartData}
  enableMetricSelection
  availableMetrics={comboChartData.series}
  defaultVisibleMetrics={['ordered_quantity', 'return_rate']}
/>

Compare Mode

Pass compareData (previous-period points aligned by index) and an optional comparePeriodLabel. Dashed lines and translucent bars represent the previous period; the tooltip groups current vs previous entries.

Show code

<ComboChart
  data={comboChartCompareData}
  compareData={comboChartComparePreviousPoints}
  comparePeriodLabel="Previous Period"
  title="Compare Mode — Campaigns"
/>