AreaChart

ImportCopy Anchor Link

import { AreaChart } from '@nizivo/charts/area-chart';

Static or interactiveCopy Anchor Link

Split. AreaChart's SVG, tick labels, legend and data table are server HTML. Its module imports one client module, the ChartInteraction island, which it renders only when the status is 'ready' and interaction is 'nizivo' (the default). With interaction="none" it renders no island and the plot has no Tab stop. The data table is then the screen-reader path; pass tableView="details" so sighted keyboard users can reach the values too.

As with Field and IconButton in @nizivo/react, the shell imports its leaf: Turbopack and next dev ship a client module that a page's server code imports, rendered or not. To ship no chart JavaScript, draw the chart with a part that imports no client module. The Next.js fixture's page for this case (fixtures/next/app/chart-area-static, recorded in week 10) shows it: Turbopack and next dev ship the imported island (1,056 B gzip under Turbopack in week 10; the island has grown since, see Sizes), and webpack ships nothing (fixtures/next/RESULTS.md, "Week 10"). Each charts page has its own route, so on this site the island loads on this page and the BarChart page only. How to choose.

Long series. Measured on 2026-10-20 (M40) with a comparison series and USD values, a year of daily points (365) is about 82 KB of server HTML (15.5 KB gzip) and 164 KB of RSC payload (28.8 KB gzip), of which 23 KB is the island's props: about 64 B of JSON a point (week 10: about 335 B). The same year bucketed weekly (52 points) is 14 KB of HTML (3.1 KB gzip) and 26 KB of RSC payload (5 KB gzip). area-chart.server.test.tsx in packages/charts/test/ssr holds the island's props to 50 to 80 B a point at 365 points. Bytes no longer force bucketing at 90 points (13.9 KB gzip in all, the island's code included), but on Figma's 720 px plot a daily year leaves 2 px a point and 365 arrow-key steps, so above about 90 points, bucket daily data weekly before passing it in.

ExamplesCopy Anchor Link

BasicCopy Anchor Link

import type { JSX } from 'react';
import { AreaChart } from '@nizivo/charts/area-chart';

interface Day {
  date: string;
  current: number;
  previous: number;
}

// Thirty days of sales, as Figma 03 draws them (Oct 1–30, this period vs the previous one).
// Deterministic, so the visual lane's shots are stable.
const DAYS: Day[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-10-${String(i + 1).padStart(2, '0')}`,
  current: Math.round(2200 + i * 150 + Math.sin(i / 2.2) * 620 + (i % 4) * 90),
  previous: Math.round(2600 + i * 55 + Math.cos(i / 3) * 380),
}));

const USD = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } as const;

export function AreaChartExample(): JSX.Element {
  return (
    <AreaChart
      title="Sales"
      summary="Daily sales, Oct 1–30, vs previous period"
      data={DAYS}
      x="date"
      y="current"
      compare="previous"
      format={USD}
    />
  );
}

SingleCopy Anchor Link

import type { JSX } from 'react';
import { AreaChart } from '@nizivo/charts/area-chart';

interface Day {
  date: string;
  current: number;
  previous: number;
}

// Thirty days of sales, as Figma 03 draws them (Oct 1–30, this period vs the previous one).
// Deterministic, so the visual lane's shots are stable.
const DAYS: Day[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-10-${String(i + 1).padStart(2, '0')}`,
  current: Math.round(2200 + i * 150 + Math.sin(i / 2.2) * 620 + (i % 4) * 90),
  previous: Math.round(2600 + i * 55 + Math.cos(i / 3) * 380),
}));

export function AreaChartSingleExample(): JSX.Element {
  return (
    <AreaChart
      title="Orders"
      data={DAYS.slice(0, 14)}
      x="date"
      y={(day) => Math.round(day.current / 42)}
    />
  );
}

StaticCopy Anchor Link

import type { JSX } from 'react';
import { AreaChart } from '@nizivo/charts/area-chart';

interface Day {
  date: string;
  current: number;
  previous: number;
}

// Thirty days of sales, as Figma 03 draws them (Oct 1–30, this period vs the previous one).
// Deterministic, so the visual lane's shots are stable.
const DAYS: Day[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-10-${String(i + 1).padStart(2, '0')}`,
  current: Math.round(2200 + i * 150 + Math.sin(i / 2.2) * 620 + (i % 4) * 90),
  previous: Math.round(2600 + i * 55 + Math.cos(i / 3) * 380),
}));

const USD = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } as const;

export function AreaChartStaticExample(): JSX.Element {
  return (
    <AreaChart
      title="Sales"
      data={DAYS}
      x="date"
      y="current"
      format={USD}
      interaction="none"
      tableView="details"
    />
  );
}

StatusCopy Anchor Link

import type { JSX } from 'react';
import { AreaChart } from '@nizivo/charts/area-chart';

interface Day {
  date: string;
  current: number;
  previous: number;
}

// Thirty days of sales, as Figma 03 draws them (Oct 1–30, this period vs the previous one).
// Deterministic, so the visual lane's shots are stable.
const DAYS: Day[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-10-${String(i + 1).padStart(2, '0')}`,
  current: Math.round(2200 + i * 150 + Math.sin(i / 2.2) * 620 + (i % 4) * 90),
  previous: Math.round(2600 + i * 55 + Math.cos(i / 3) * 380),
}));

export function AreaChartStatusExample(): JSX.Element {
  return (
    <div>
      <AreaChart title="Sales" status="loading" data={DAYS} x="date" y="current" />
      <AreaChart title="Sales" data={[] as Day[]} x="date" y="current" />
      <AreaChart title="Sales" status="error" data={DAYS} x="date" y="current" />
    </div>
  );
}

Right to leftCopy Anchor Link

import type { JSX } from 'react';
import { AreaChart } from '@nizivo/charts/area-chart';

interface Day {
  date: string;
  current: number;
  previous: number;
}

// Thirty days of sales, as Figma 03 draws them (Oct 1–30, this period vs the previous one).
// Deterministic, so the visual lane's shots are stable.
const DAYS: Day[] = Array.from({ length: 30 }, (_, i) => ({
  date: `2026-10-${String(i + 1).padStart(2, '0')}`,
  current: Math.round(2200 + i * 150 + Math.sin(i / 2.2) * 620 + (i % 4) * 90),
  previous: Math.round(2600 + i * 55 + Math.cos(i / 3) * 380),
}));

export function AreaChartRtlExample(): JSX.Element {
  return (
    <div dir="rtl">
      <AreaChart
        title="المبيعات"
        data={DAYS}
        x="date"
        y="current"
        compare="previous"
        locale="ar-EG"
        format={{ maximumFractionDigits: 0 }}
        axisFormat={{ maximumFractionDigits: 0 }}
        xDirection="rtl"
        labels={{ current: 'هذه الفترة', previous: 'الفترة السابقة', delta: 'مقارنة بالسابقة' }}
      />
    </div>
  );
}

PropsCopy Anchor Link

Server component. Props: AreaChartProps<T>. Source: src/area-chart/area-chart.tsx.

• Also takes every <figure> attribute except children, title.

render takes an element, or, in client code, a function of the props and this state (ChartFrameState):

x, y and compare are an Accessor: a key of the datum whose values have the right type (x="date", which a Server Component can pass), or a (datum, index) => value function. format and axisFormat are plain Intl.NumberFormatOptions, as @nizivo/react's Delta and Meter take them; there are no presets.

xTicks (ChartXTicks): at most max x labels (AreaChart: 6), the last point always labelled. When every is not given, a daily date series rounds the step up to whole weeks (Figma 03's Oct 1, 8, 15, 22 and the forced 30).

The props marked as from CartesianChartOptions are the ones AreaChart and BarChart share, with the same names and types (one API shape across the charts, M40). The defaults are the same too, except xTicks.max: 6 here, 8 for BarChart.

labels takes Partial<AreaChartLabels>, which extends ChartFrameLabels (its members are under Other exports). The English defaults, in areaChartLabels, on top of ChartFrame's:

Other exportsCopy Anchor Link

AreaChartLabels type

import type { AreaChartLabels } from '@nizivo/charts/area-chart'

AreaChart's strings (§16.4), with ChartFrame's. English defaults in areaChartLabels.

Name	Type	Default	Description
categoryrequired	string	–	The data table's first column header when x holds labels (BarChart's category).
currentrequired	string	–	The series' name in the legend, the tooltip and the table.
deltarequired	string	–	After the tooltip's change, for example "+28.0% vs previous".
hintrequired	string	–	The interactive layer's keyboard instructions.
interactionrequired	string	–	The interactive layer's role, as assistive technology names it.
missingrequired	string	–	A value the series does not have at that point (BarChart's missing too).
pointsrequired	string	–	The interactive layer's name when title is not a string.
previousrequired	string	–	The comparison's name.
xrequired	string	–	The data table's first column header when every x is an ISO plain date.

AreaChartProps type

import type { AreaChartProps } from '@nizivo/charts/area-chart'

AreaChart's props: the shared cartesian options (_core/api.ts), its own, and ChartFrame's, the <figure>'s attributes included.

The props of AreaChart, listed above.

areaChartLabels constant

import { areaChartLabels } from '@nizivo/charts/area-chart'

const areaChartLabels: AreaChartLabels

Data attributes and slotsCopy Anchor Link

Inside the ChartFrame root, which carries nz-area-chart:

CSS hooksCopy Anchor Link

Layers: nz.components. Classes: .nz-area-chart-dot, .nz-area-chart-halo. Runtime variables: --nz-surface.

--nz-area-chart-halo is the ring around the end dot: the surface behind the chart. When the hook is unset, the ring takes the shared --nz-surface that @nizivo/react's Card declares for its children (KpiTile and TrendCard are Cards, so a tinted tile's halo is its own surface), else --nz-bg-surface. Charts read --nz-surface only if it is there: without @nizivo/react on the page it is unset and the halo is --nz-bg-surface, and @nizivo/charts does not depend on @nizivo/react (M42). The aspect ratio is ChartFrame's --nz-chart-frame-aspect (18 / 7).

AccessibilityCopy Anchor Link

• The picture is aria-hidden; the data table (one row per point, every series in a column) is the accessible alternative. The comparison line is decorative and its values are in the table.
• With the island, the plot is one Tab stop: a role="application" layer named by the title, with the labels.interaction role description and the labels.hint description, both rendered on the server. application is the role that lets a screen reader pass the arrow keys through; it stays until the manual screen-reader pass (M40).
• One polite live region (aria-live="polite", aria-atomic="true"), empty in the server HTML, speaks the point a key move reaches: the date, then each series' name and value, joined with the separators Intl.ListFormat writes in locale on the server. Hiding the card (Escape, the pointer leaving, leaving the layer) empties it, so the next key that shows the card speaks the active point again. A key that does not move the point (End at the last point) says nothing, as a slider at its end does. A pointer shows the point and says nothing (Figma 03).
• The tooltip card is aria-hidden: it repeats what the live region and the table say.
• Against WCAG 1.4.13 (Content on Hover or Focus), the card is dismissable: Escape hides it wherever focus is, a card the pointer opened included (Escape on the focused plot hides only the card, so an enclosing dialog stays open). It is persistent: no timeout. It never hides while the pointer is over the plot or the card, but it takes no pointer events, so it follows the point under the pointer and cannot be held on one point: not "hoverable" in 1.4.13's sense. chart-interaction.spec.tsx checks this in Chromium, WebKit and Firefox.
• Showing a point moves nothing in the layout, and moving it adds no layout shift: the crosshair and the dots move by translate (chart-interaction.spec.tsx sweeps a pointer across the plot).
• Right to left: see Right to left for what a page sees before and after the island hydrates.

KeyboardCopy Anchor Link

Source: chart-interaction.client.tsx in packages/charts/src/_island, checked in Chromium, WebKit and Firefox by chart-interaction.spec.tsx in packages/charts/test/browser. Touch: a tap shows the point and keeps the card after the finger lifts (synthetic pointer events only; real touch hardware is not tested).

FigmaCopy Anchor Link

Area Chart, 7275:13336: State=Default 7275:13337 and State=Hover 7275:13358, 720 × 280. "Time series, 1 axis. Hover: crosshair + ringed dots + Chart Tooltip (Series=2)." The hover variant places the duplicate tooltip set 747:287; code treats 7275:13303 as the source. Figma's reveal path-trims the line and fades the area in after 120 ms; code reveals both by clip-path, because pathLength with non-scaling strokes is unverified. Notes: docs/figma/03-data-viz.md §4.4.