LineChart

<LineChart data={rows} {config} x="month" series={["desktop"]} curve="linear" ... />

<LineChart data={rows} {config} x="month" series={["desktop"]} curve="step" ... />

<LineChart data={rows} {config} x="month" curve="monotone"
           margin={{ left: 12, right: 12 }} tooltip={{ cursor: false }} />

<LineChart data={rows} {config} x="month" series={["desktop"]} curve="natural"
           dots activeDot={{ r: 6 }} tooltip={{ hideLabel: true, cursor: false }} />

<LineChart data={rows} {config} x="month" series={["desktop"]} curve="natural"
           dots={{ shape: "commit", r: 4 }} activeDot={{ shape: "commit", r: 5 }} ... />

<!-- each row's fill colors its dot -->
<LineChart data={browsers} config={browserConfig} x="browser" series={["visitors"]}
           curve="natural" categoryAxis={false} margin={{ top: 24, left: 24, right: 24 }}
           dots={{ r: 5, colorByRow: true }} activeDot={{ r: 6, colorByRow: true }}
           tooltip={{ indicator: "line", nameKey: "visitors", hideLabel: true, cursor: false }} />

<LineChart data={rows} {config} x="month" series={["desktop"]} curve="natural"
           margin={{ top: 20, left: 12, right: 12 }} dots activeDot={{ r: 6 }}
           labels={{ position: "top", offset: 12 }} tooltip={{ indicator: "line", cursor: false }} />

<LineChart data={browsers} config={browserConfig} x="browser" series={["visitors"]} curve="natural"
           categoryAxis={false} margin={{ top: 24, left: 24, right: 24 }}
           dots activeDot={{ r: 6 }}
           labels={{ key: "browser", offset: 12, formatter: (v) => browserConfig[String(v)].label }}
           tooltip={{ indicator: "line", nameKey: "visitors", hideLabel: true, cursor: false }} />

<LineChart data={daily} config={dailyConfig} x="date" series={[state.series]}
           class="chart-demo-wide" curve="monotone" margin={{ left: 12, right: 12 }}
           categoryAxis={{ tickFormatter: shortDate, minTickGap: 32 }}
           tooltip={{ nameKey: "views", labelFormatter: (_, row) => longDate(row.date) }} />

<LineChart data={rows} {config} x="month" curve="monotone" dots
           legend={{ toggle: true }} hidden={state.hidden}
           valueAxis={{ tickCount: 4 }} />

<!-- null values break a line unless connectNulls -->
<LineChart data={rowsWithNulls} {config} x="month" dots />
<LineChart data={rowsWithNulls} {config} x="month" dots connectNulls />

<LineChart data={rows} {config} x="month" active={state.active}
           onActiveChange={() => state.changes++} strokeWidth={3}
           onItemClick={(i) => state.clicked = i} />

<!-- the same syncId: hovering or keying one chart shows the same month in the other -->
<LineChart data={rows} {config} x="month" series={["desktop"]} syncId="traffic" />
<LineChart data={rows} {config} x="month" series={["mobile"]} syncId="traffic" />

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

<!-- categories down the chart, values across -->
<LineChart data={rows} {config} x="month" layout="vertical" valueAxis dots />

<!-- desktop's legend icon is a line; mobile is drawn but not in the legend -->
<LineChart data={rows} x="month" legend config={{
  desktop: { label: "Desktop", color: "var(--chart-1)", legendType: "line" },
  mobile: { label: "Mobile", color: "var(--chart-2)", legendType: "none" },
}} />

<!-- wait 150ms, then take 900ms to enter or move to new data -->
<LineChart data={rows} {config} x="month"
           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 -->
<LineChart 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 on a config entry dashes that line -->
<LineChart data={rows} x="month" config={{
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)", strokeDasharray: "5 5" },
}} />

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

<LineChart data={rows} {config} x="month" series={["desktop"]} dots
           categoryAxis={{ padding: { left: 24, right: 24 } }} />
<LineChart data={powers} config={valueConfig} x="x" series={["v"]} dots
           valueAxis={{ scale: "log", domain: ["auto", "auto"] }} />
<LineChart data={timed} config={valueConfig} x="t" series={["v"]} dots
           categoryAxis={{ type: "number" }} />

<!-- each month keeps its point: the window slides instead of every point changing value -->
<LineChart 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 -->
<LineChart data={rows} {config} x="month" animation={{ interpolate: stagger }} />