AreaChart

<AreaChart data={rows} {config} x="month" series={["desktop"]} curve="linear"
           tooltip={{ indicator: "dot", hideLabel: true, cursor: false }} />

<AreaChart data={rows} {config} x="month" series={["desktop"]} curve="step"
           tooltip={{ hideLabel: true, cursor: false }} />

<AreaChart data={rows} {config} x="month" series={["mobile", "desktop"]}
           curve="natural" stack="normal" legend tooltip={{ indicator: "line", cursor: false }} />

<AreaChart data={rows} {config} x="month" series={["mobile", "desktop"]}
           curve="natural" stack="normal" tooltip={{ indicator: "dot", cursor: false }} />

<AreaChart data={rows} config={{ desktop, mobile, other }} x="month"
           series={["other", "mobile", "desktop"]} curve="natural" stack="expand"
           margin={{ left: 12, right: 12, top: 12 }} tooltip={{ indicator: "line", cursor: false }} />

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)", icon: "monitor" },
  mobile: { label: "Mobile", color: "var(--chart-2)", icon: "smartphone" },
};

<AreaChart data={rows} {config} x="month" series={["mobile", "desktop"]}
           curve="natural" stack="normal" legend tooltip={{ indicator: "line", cursor: false }} />

<AreaChart data={rows} {config} x="month" series={["mobile", "desktop"]}
           curve="natural" stack="normal" fill="gradient" tooltip={{ cursor: false }} />

<AreaChart data={rows} {config} x="month" series={["mobile", "desktop"]}
           curve="natural" stack="normal" margin={{ left: -20, right: 12 }}
           valueAxis={{ tickCount: 3 }} tooltip={{ cursor: false }} />

<select value={state.range}>...</select>

<AreaChart data={inRange(state.range)} config={dailyConfig} x="date"
           series={["mobile", "desktop"]} curve="natural" stack="normal" fill="gradient"
           legend class="chart-demo-wide"
           categoryAxis={{ tickFormatter: shortDate, minTickGap: 32 }}
           tooltip={{ indicator: "dot", cursor: false, labelFormatter: (_, row) => shortDate(row.date) }} />

<!-- a null breaks the area unless connectNulls -->
<AreaChart data={rowsWithNulls} {config} x="month" series={["desktop"]} />
<AreaChart data={rowsWithNulls} {config} x="month" series={["desktop"]} connectNulls />

<AreaChart data={rows} {config} x="month" series={["desktop"]} curve="natural"
           margin={{ top: 20, left: 12, right: 12 }}
           labels={{ position: "top", offset: 8 }} tooltip={{ cursor: false }} />

<AreaChart data={rows} {config} x="month" dots fillOpacity={0.15} strokeWidth={3}
           legend={{ toggle: true, position: "top" }} hidden={state.hidden} />

<AreaChart data={rows} {config} x="month" stack="normal" stroke={false}
           active={state.active} onActiveChange={() => state.changes++}
           onItemClick={(i) => state.clicked = i} />

<!-- months down the chart, values across -->
<AreaChart data={rows} {config} x="month" layout="vertical" stack="normal" valueAxis />

<!-- mobile on a second value axis on the right -->
<AreaChart data={rows} {config} x="month" valueAxis={[{}, { orientation: "right", series: ["mobile"] }]} />

<!-- fill toward a target of 200 rather than down to zero;
     "dataMin" and "dataMax" fill to the bottom or the top of the axis -->
<AreaChart data={rows} {config} x="month" series={["desktop"]} baseValue={200} valueAxis />

<!-- a streamgraph: layers around a moving center line -->
<AreaChart data={rows} {config} x="month" stack="wiggle" curve="basis" valueAxis />
<AreaChart data={rows} {config} x="month" stack="silhouette" curve="monotone" valueAxis />

<!-- wait 150ms, then take 900ms to enter or move to new data -->
<AreaChart data={rows} {config} x="month" stack="normal"
           animation={{ begin: 150, duration: 900, easing: "linear" }} />

<!-- desktop's legend icon is a line; mobile is left out of the tooltip, other out of the legend -->
<AreaChart data={rows} x="month" legend config={{
  desktop: { label: "Desktop", color: "var(--chart-1)", legendType: "line" },
  mobile: { label: "Mobile", color: "var(--chart-2)", tooltipType: "none" },
  other: { label: "Other", color: "var(--chart-3)", legendType: "none" },
}} />

<!-- strokeDasharray and strokeOpacity on a config entry style that area's edge -->
<AreaChart data={rows} x="month" config={{
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)", strokeDasharray: "4 4", strokeOpacity: 0.5 },
}} />

<!-- desktop stacks on top; legend and tooltip keep series order -->
<AreaChart data={rows} {config} x="month" stack="normal" reverseStackOrder legend />

<AreaChart data={rows} {config} x="month" showTable={state.table} />

<!-- each month keeps its point: the window slides instead of every point changing value -->
<AreaChart data={rows} {config} x="month" animation={{ matchBy: matchByDataKey("month") }} />
<!-- (items, t) => the items to draw: each matched item from prev to next, started one after another -->
<AreaChart data={rows} {config} x="month" animation={{ interpolate: stagger }} />