Chart

<Chart
  type="bar"
  title="Revenue growth"
  description="Monthly revenue, 2026"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  series={[{ name: "Revenue", data: [247,255,208,204,176,164] ]}
/>

<Chart
  type="bar"
  title="Desktop vs mobile"
  labels={["Jan", "Feb", "Mar", "Apr"]}
  series={[
    { name: "Desktop", data: [245,198,193,248] },
    { name: "Mobile", data: [113,159,194,204] },
  ]}
/>

<Chart
  type="bar"
  stack
  title="Sessions by source"
  description="Stacked per day — axis spans daily totals"
  labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
  series={[
    { name: "Direct", data: [320, 360, 310, 420, 480, 260, 210] },
    { name: "Search", data: [280, 300, 340, 380, 410, 220, 180] },
    { name: "Social", data: [120, 140, 110, 160, 190, 240, 200] },
  ]}
/>

<Chart
  type="bar"
  stack="percent"
  title="Traffic mix"
  description="Each column normalized to 100% of its daily total"
  labels={["Mon", "Tue", "Wed", "Thu", "Fri"]}
  series={[
    { name: "Direct", data: [320, 360, 310, 420, 480] },
    { name: "Search", data: [280, 300, 340, 380, 410] },
    { name: "Social", data: [120, 140, 110, 160, 190] },
  ]}
/>
<!-- stack: true | "percent" -->

<Chart
  type="bar"
  gradient
  title="Deploys per week"
  description="Each bar fades toward the baseline"
  labels={["W1", "W2", "W3", "W4", "W5", "W6"]}
  series={[{ name: "Deploys", data: [14, 22, 18, 27, 31, 24] }]}
/>

<!-- gradient works on bar, combo bars, pie and donut too -->

<Chart
  type="bar"
  barStyle="pill"
  title="Pulse"
  description="Thin rounded columns — an equalizer look"
  labels={["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"]}
  series={[{ name: "Load", data: [8,14,22,30,38,44,40,32,20,10,16,28,40,46,42,30,18,10,26,44] }]}
  legend={false}
/>
<!-- barStyle="pill" renders one thin fully-rounded column per label;
     colors follow the series (use one series per color band) -->

<Chart
  type="combo"
  title="Orders vs revenue"
  description="Bars ride the left axis, the line a secondary right axis"
  labels={["Oct 1", "Oct 2", "Oct 3", "Oct 4", "Oct 5", "Oct 6", "Oct 7", "Oct 8", "Oct 9"]}
  series={[
    { name: "Revenue", data: [4200, 4600, 5100, 4900, 5600, 6100, 6900, 5800, 5400] },
    { name: "Orders", data: [148, 158, 172, 165, 184, 196, 210, 186, 178], kind: "line", color: "var(--ui-success)" }
  ]}
/>

<!-- per-series kind: "bar" (default) or "line"; rightMaxY overrides the right-axis ceiling -->

<Chart
  type="line"
  title="Active users"
  labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
  series={[
    { name: "This week", data: [500,524,586,552,546,539,588] },
    { name: "Last week", data: [610,533,587,592,611,607,655] },
  ]}
/>

<Chart
  type="line"
  curve
  title="Visitor flow"
  description="Monotone cubic smoothing — the curve never overshoots the data"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  series={[
    { name: "Visitor-line", data: [247,250,247,209,191,260] },
  ]}
/>

<Chart
  type="line"
  curve="step"
  title="Desktop vs mobile"
  description="Plateaus hold until the midpoint between values, then step"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]}
  series={[
    { name: "Desktop", data: [420, 615, 545, 760, 480, 825, 570, 690, 515, 735, 610, 455] },
    { name: "Mobile", data: [265, 430, 350, 505, 390, 545, 415, 585, 445, 615, 520, 380] },
  ]}
/>
<!-- curve accepts true (smooth) or "step"; combine with per-series color freely -->

<Chart
  type="line"
  curve="bump"
  title="Rank changes"
  description="Flat out of each point, S-curve into the next"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  series={[
    { name: "Desktop", data: [320, 180, 420, 260, 510, 380] },
    { name: "Mobile", data: [180, 320, 240, 450, 290, 460] },
  ]}
/>
<!-- curve: true | "step" | "bump" -->

<Chart
  type="line"
  stroke="dashed"
  title="Forecast"
  description="Whole series dashed — chart-level stroke, per-series override"
  labels={["Apr 1", "Apr 5", "Apr 10", "Apr 15", "Apr 18"]}
  series={[{ name: "Sessions", data: [597,488,386,455,480] ]}
/>

<Chart
  type="line"
  title="Solid vs dashed vs dotted"
  labels={["Jan", "Feb", "Mar", "Apr"]}
  series={[
    { name: "Actual", data: [535,568,554,586] },
    { name: "Target", data: [395,388,380,437], stroke: "dashed" },
    { name: "Stretch", data: [380,345,337,369], stroke: "dotted" },
  ]}
/>
<!-- stroke: "solid" | "dashed" | "dotted", at chart or series level -->

<Chart
  type="line"
  gradient
  title="Portfolio value"
  description="gradient on a line renders a soft wash under the stroke"
  labels={["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}
  series={[{ name: "NAV", data: [42,45,44,48,52,50,55,58,57,62,66,71], color: "var(--ui-success)" }]}
  legend={false}
/>
<!-- gradient on a line: a gradient wash fills under the stroke and a
     blurred mirror of the line adds a glow that hugs the curve -->

<Chart
  type="line"
  grid={false}
  legend={false}
  title="Ping"
  labels={["12am", "6am", "12pm", "6pm"]}
  series={[{ name: "ms", data: [49,54,54,50] ]}
/>

<Chart
  type="area"
  title="Signups"
  labels={["Q1", "Q2", "Q3", "Q4"]}
  series={[{ name: "Signups", data: [1591,1994,1976,1672] ]}
/>

<Chart
  type="area"
  curve
  title="Campaign traffic"
  description="Smoothed area — the fill follows the monotone curve"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  series={[{ name: "Sessions", data: [820, 1210, 940, 580, 1120, 990] }]}
/>

<Chart
  type="area"
  curve
  gradient
  title="API requests"
  description="Series color fades toward the baseline"
  labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
  series={[{ name: "Requests", data: [4200, 5100, 4800, 6300, 7100, 3900, 3400] }]}
/>

<!-- gradient fades the series color to transparent at the baseline; combine with curve freely -->

<Chart
  type="area"
  curve
  gradient
  title="Revenue"
  description="The series color drives the line, the fill, and the gradient"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  series={[{ name: "Revenue", data: [12, 18, 15, 22, 19, 26], color: "var(--ui-success)" }]}
/>

<!-- fill + gradient always follow the series color: pass color per series,
     or retheme globally via --ui-chart-1..6 (area fallback is --ui-chart-1) -->

<Chart
  type="area"
  curve
  gradient
  gradientIntensity={2}
  title="Strong fade"
  description="gradientIntensity scales every fade — 1 is the default, 2 is saturated"
  labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
  series={[{ name: "Requests", data: [4200, 5100, 4800, 6300, 7100, 3900, 3400] }]}
/>

<!-- try 0.5 for a whisper-subtle fill; works on area, bar, pie and donut fades -->

<Chart
  type="area"
  curve="step"
  fill="dots"
  title="Portfolio swing"
  description="Texture fills tinted with each series color"
  labels={["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]}
  series={[
    { name: "Fund A", data: [312, 388, 340, 296, 274, 246, 231, 224] },
    { name: "Fund B", data: [268, 231, 205, 214, 248, 289, 331, 352], fill: "hatch" },
  ]}
/>
<!-- fill: "solid" | "dots" | "hatch" | "none", at chart or series level -->

<Chart
  type="area"
  curve="step"
  title="Weekly signups"
  description="275 this week — +12.2% vs target"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  series={[
    { name: "Actual", data: [240, 178, 262, 335, 212, 275], fill: "hatch" },
    { name: "Target", data: [122, 202, 128, 390, 305, 172], fill: "none", stroke: "dashed" },
  ]}
/>
<!-- fill="none" renders a bare reference line; hatch/dots texture the area -->

<Chart
  type="pie"
  title="Traffic sources"
  labels={["Direct", "Search", "Social", "Referral"]}
  series={[{ name: "Share", data: [435, 286, 151, 96] }]}
/>

<Chart
  type="donut"
  title="Storage by type"
  labels={["Images", "Video", "Docs", "Other"]}
  series={[{ name: "GB", data: [42, 66, 21, 11] }]}
  legend={false}
/>

<Chart
  type="donut"
  padAngle={4}
  sliceRadius={22}
  title="Browser share"
  description="padAngle gaps the slices, sliceRadius rounds their corners"
  labels={["Chrome", "Safari", "Firefox", "Edge", "Other"]}
  series={[{ name: "Share", data: [38, 24, 16, 12, 10] }]}
  legend={false}
/>
<!-- tune padAngle (degrees) and sliceRadius (px) independently -->

<Chart
  type="pie"
  padAngle={2}
  sliceRadius={18}
  sliceCorners="outer"
  title="Vote share"
  description="Only the rim corners round — the center tip stays sharp"
  labels={["A", "B", "C", "D", "E", "F"]}
  series={[{ name: "Votes", data: [28, 22, 18, 14, 10, 8] }]}
  legend={false}
/>
<!-- sliceCorners: "all" (default, every corner) | "outer" (rim only) -->

<Chart
  type="pie3d"
  title="Share of voice"
  description="Extruded slices with shaded walls and outside callouts"
  height={320}
  labels={["Other", "Signal OS", "Nova Chat", "Pulse", "Wave", "Orbit"]}
  series={[{ name: "Share", data: [22, 21, 16, 15, 14, 12] }]}
  sliceLabels="label"
/>
<!-- depth sets the wall height in px (default 36); sliceLabels="label"
     renders outside "pct% NAME" callouts, "value"/"value-pct" print on
     the top face; sliceRadius is ignored so walls meet the top exactly -->

<Chart
  type="treemap"
  title="Top products"
  description="Tile area scales with the value — squarified at build time"
  height={300}
  labels={["Other", "Nova Chat", "Assistly", "Signal OS", "Atlas AI", "Draft Lab"]}
  series={[{ name: "Users", data: [22, 16, 14, 21, 15, 12] }]}
/>
<!-- values read from series[0].data like pie; tiles sort largest-first,
     zero values render no tile; tileRadius rounds the tile corners -->

<Chart
  type="funnel"
  title="Hiring pipeline"
  description="Stages keep input order — widths scale with the value"
  labels={["Applied", "Screened", "Interview", "Offer", "Hired"]}
  series={[{ name: "Candidates", data: [1200, 780, 430, 180, 96] }]}
/>
<!-- one centered trapezoid per stage; narrow stages keep their tooltip -->

<Chart
  type="rose"
  title="Cases by month"
  description="Equal angles, area encodes the value — Nightingale's polar-area manner"
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  series={[{ name: "Cases", data: [12, 19, 33, 27, 41, 22] }]}
  sliceLabels="value"
/>
<!-- roseMode: "area" (default, radius ∝ √value) | "radius" (radius ∝ value) -->

<Chart
  type="histogram"
  title="Response time"
  description="Raw samples auto-binned (Sturges) into touching bars"
  series={[{ name: "ms", data: [12, 18, 22, 19, 25, 31, 28, 35, 42, 38, 47, 55, 51, 62, 58, 70, 66, 74, 81, 77, 90, 95, 110, 88, 72, 64, 59, 48, 44, 39] }]}
/>
<!-- bins={12} overrides the count; barGap={0} restores touching bars;
     pass raw observations, not counts -->

<Chart
  type="waffle"
  title="Market share"
  description="10×10 unit grid — each cell is 1% of the total"
  height={220}
  labels={["Alpha", "Beta", "Gamma"]}
  series={[{ name: "Share", data: [55, 30, 15] }]}
/>
<!-- values read from series[0].data like pie; sub-1% shares render no cell -->

<Chart
  type="bullet"
  title="Q3 performance"
  description="Actual vs target against qualitative ranges (Few's bullet graph)"
  height={220}
  bullets={[
    { label: "Revenue", ranges: [150, 225, 300], measure: 270, target: 250 },
    { label: "Profit", ranges: [20, 25, 30], measure: 21, target: 26 },
    { label: "Orders", ranges: [400, 550, 700], measure: 640 },
  ]}
/>
<!-- bullets: { label, ranges (ascending ceilings), measure, target?, color? } -->

<Chart
  type="dumbbell"
  title="Before vs after"
  description="Paired dots with a delta connector — one series is a dot plot"
  labels={["Shop", "Blog", "Docs"]}
  series={[
    { name: "Before", data: [32, 48, 27] },
    { name: "After", data: [51, 44, 63] },
  ]}
/>
<!-- the axis need not start at zero; hover the connector for the delta -->

<Chart
  type="donut"
  padAngle={4}
  sliceRadius={18}
  sliceLabels="value"
  title="Browser share"
  description="Formatted values printed at each slice centroid"
  labels={["Chrome", "Safari", "Firefox", "Edge", "Other"]}
  series={[{ name: "Users", data: [275, 200, 187, 173, 90] }]}
  legend={false}
/>

<Chart
  type="pie"
  sliceLabels="label"
  title="Browser share"
  description="Category names outside, connected by elbow leader lines"
  labels={["Chrome", "Safari", "Firefox", "Edge", "Other"]}
  series={[{ name: "Users", data: [275, 200, 187, 173, 90] }]}
  legend={false}
/>
<!-- sliceLabels: "none" | "value" | "label" -->

<Chart
  type="donut"
  padAngle={3}
  sliceRadius={14}
  sliceLabels="value-pct"
  title="Plan distribution"
  description="Value and share together at each slice centroid"
  labels={["Free", "Pro", "Team", "Enterprise"]}
  series={[{ name: "Accounts", data: [412, 268, 143, 77] }]}
  legend={false}
/>

<Chart
  type="donut"
  sliceLabels="value-pct"
  sliceLabelFormat={(v, pct) => pct + "% of " + v.toLocaleString()}
  title="Storage by type"
  description="sliceLabelFormat takes (value, pct) and returns any string"
  labels={["Images", "Video", "Docs", "Other"]}
  series={[{ name: "GB", data: [42, 66, 21, 11] }]}
  legend={false}
/>
<!-- sliceLabels: "none" | "value" | "value-pct" | "label" -->

<Chart
  type="donut"
  collapseBelow={8}
  sliceLabels="value-pct"
  title="Entry pages"
  description="Slices under 8% merge into the trailing Other slice"
  labels={["/", "/pricing", "/blog", "/docs", "/changelog", "/about", "/careers"]}
  series={[{ name: "Sessions", data: [4820, 2130, 1640, 1180, 310, 240, 180] }]}
  legend={false}
/>
<!-- collapseBelow: percent threshold (0 = off); merged slice is muted,
     hover lists what it contains -->

<Chart
  type="donut"
  gradient
  title="Storage by type"
  description="Radial fade — strong at the rim, clear toward the center"
  labels={["Images", "Video", "Docs", "Other"]}
  series={[{ name: "GB", data: [42, 66, 21, 11] }]}
  legend={false}
/>

<Chart
  type="donut"
  title="Plan distribution"
  labels={["Free", "Pro", "Team"]}
  series={[
    { name: "Plans", data: [640, 310, 90], color: "var(--ui-primary)" },
  ]}
  legend
/>

<!-- per-series colors: color prop or --ui-chart-1..6 tokens -->

<Chart
  type="scatter"
  title="Deploys per day"
  labels={["Mon", "Tue", "Wed", "Thu", "Fri"]}
  series={[
    { name: "Team A", data: [5,6,7,9,9] },
    { name: "Team B", data: [4,3,3,5,7] },
  ]}
/>

<Chart
  type="hbar"
  title="Top pages"
  labels={["/docs/get-started", "/components", "/blocks", "/docs/rtl"]}
  series={[{ name: "Views", data: [3880,4706,3866,2923] ]}
/>

<Chart
  type="hbar"
  stack
  legend={false}
  title="Capital inflows"
  labels={["Funds"]}
  series={[
    { name: "WaveMark Capital", data: [8372000], color: "var(--ui-success)" },
    { name: "Envato Finances", data: [2962400], color: "var(--ui-warning)" },
    { name: "QBridge Tech", data: [1545600], color: "var(--ui-error)" },
  ]}
/>
<!-- one full-width track; each series becomes a segment sized by its share of the total -->

<Chart
  type="gauge"
  title="Storage used"
  description="Tick marks fill clockwise with the value"
  labels={["Used"]}
  series={[{ name: "of 8 TB", data: [64] }]}
  maxY={100}
  ticks={40}
  legend={false}
/>
<!-- value = series[0].data[0], scale = maxY (default 100); ticks clamps 8–80 -->

<Chart
  type="gauge"
  title="Monthly goal"
  labels={["Reached"]}
  series={[{ name: "of 200 deals", data: [102] }]}
  maxY={200}
  legend={false}
/>

<Chart
  type="gauge"
  gaugeStyle="block"
  gaugeRamp={["var(--ui-success)", "var(--ui-info)", "var(--ui-primary)"]}
  title="Total expenses"
  labels={["Spent"]}
  series={[{ name: "of $80k budget", data: [44220] }]}
  maxY={80000}
  format={(v) => `$${v.toLocaleString("en-US")}`}
  ticks={16}
  legend={false}
/>
<!-- gaugeStyle="block" renders stadium segments; gaugeRamp interpolates
     colors across the arc so blocks show position (start → end) -->

<Chart
  type="radial"
  title="Browser share"
  description="One concentric ring per category — outer ring first"
  labels={["Chrome", "Safari", "Firefox", "Edge", "Other"]}
  series={[{ name: "Users", data: [275, 200, 187, 173, 90] }]}
  maxY={275}
/>
<!-- values read from series[0].data, like pie; maxY sets the full-ring value -->

<Chart
  type="radial"
  radialSweep="half"
  title="Browser share"
  description="Half-circle rings over the top — outer ring first"
  labels={["Chrome", "Safari", "Firefox", "Edge", "Other"]}
  series={[{ name: "Users", data: [275, 200, 187, 173, 90] }]}
  maxY={275}
  legend={false}
/>
<!-- radialSweep: "full" | "half" -->

<Chart
  type="radar"
  title="Skill coverage"
  description="One axis per label, filled polygons per series"
  labels={["JavaScript", "Python", "CSS", "Node.js", "React", "TypeScript"]}
  series={[
    { name: "Desktop", data: [78, 85, 90, 62, 74, 96] },
    { name: "Mobile", data: [52, 58, 66, 54, 41, 60] },
  ]}
/>
<!-- values scale against maxY (default: global data max); one axis per label -->

<Chart
  type="sankey"
  title="Traffic funnel"
  description="Flow value scales each ribbon and node"
  nodes={[
    { name: "Organic Search", color: "var(--ui-success)" },
    { name: "Paid Ads", color: "var(--ui-error)" },
    { name: "Social Media", color: "var(--ui-chart-5, var(--ui-warning))" },
    { name: "Landing Page", color: "var(--ui-info)" },
    { name: "Product Page", color: "var(--ui-chart-2, var(--ui-info))" },
    { name: "Cart", color: "var(--ui-warning)" },
    { name: "Bounced", color: "var(--ui-error)" },
    { name: "Purchase", color: "var(--ui-success)" },
  ]}
  links={[
    { source: "Organic Search", target: "Landing Page", value: 42000 },
    { source: "Paid Ads", target: "Landing Page", value: 28000 },
    { source: "Social Media", target: "Landing Page", value: 18000 },
    { source: "Landing Page", target: "Product Page", value: 52000 },
    { source: "Landing Page", target: "Bounced", value: 36000 },
    { source: "Product Page", target: "Cart", value: 31000 },
    { source: "Product Page", target: "Bounced", value: 21000 },
    { source: "Cart", target: "Purchase", value: 24000 },
    { source: "Cart", target: "Bounced", value: 7000 },
  ]}
/>
<!-- links reference nodes by name; node value = max(in, out) flow -->

<Chart
  type="waterfall"
  title="Cash flow, 2026"
  description="Signed deltas stack on a running total; totals anchor to zero"
  labels={["Start", "Q1", "Q2", "Q3", "Q4", "End"]}
  series={[{ name: "Cash", data: [120, 45, -30, 65, -20, 0] }]}
  waterfallTotals={[0, 5]}
  format={(v) => `$${v}k`}
/>
<!-- waterfallTotals lists label indices that render as full total bars
     and reset the running sum; increases/decreases color automatically -->

<Chart
  type="heatmap"
  title="Commit activity"
  description="Rows are days, columns are week offsets — darker means more commits"
  height={220}
  labels={["-5w", "-4w", "-3w", "-2w", "-1w", "This week"]}
  series={[
    { name: "Mon", data: [4, 9, 6, 12, 8, 11] },
    { name: "Wed", data: [7, 5, 10, 8, 13, 9] },
    { name: "Fri", data: [12, 14, 9, 15, 11, 16] },
    { name: "Sat", data: [2, 1, 3, 0, 2, 5] },
  ]}
  heatmapRamp={["var(--ui-muted)", "var(--ui-chart-2, var(--ui-info))", "var(--ui-primary)"]}
  heatmapLabels
/>
<!-- rows come from series names, columns from labels; heatmapRamp
     interpolates from data min to max; heatmapLabels prints values -->