Cartesian shapes

Line

Renders a single SVG <path> connecting your data points. Configure the interpolation with curve ("linear", "monotone", "step") and style with stroke, strokeWidth, strokeDasharray.

<Line stroke="#5eead4" strokeWidth={2} curve="monotone" />

Undefined or NaN values in the data are filtered out via d3’s .defined(), so gaps in your data produce gaps in the line, not broken paths.

Area

A filled polygon between the line and the plot bottom. Same curve options as Line. Pair with LinearGradient for a fading fill.

<LinearGradient id="fade" from="#5eead4" to="#5eead4"
  fromOpacity={0.35} toOpacity={0} />
<Area fill="url(#fade)" curve="monotone" />
<Line stroke="#5eead4" strokeWidth={2} curve="monotone" />

Put <Area> before <Line> in JSX so the line paints on top of the fill.

Bar

A vertical rectangle per data row. Requires a band x-scale. Bars are all the same width (from xScale.bandwidth()) and start from a configurable baseline (default 0).

<Bar fill="#38bdf8" fillOpacity={0.85} radius={4} />

When your y-domain doesn’t include 0 (say, revenue values 120–270), Chartlyx clamps the baseline to the plot floor so bars visually stand on the axis. Override baseline to pin them somewhere else.

Scatter

One <circle> per data point at (xScale(x), yScale(y)). Ideal for correlation studies or overlaying markers on top of a line.

<Scatter fill="#5eead4" radius={5} fillOpacity={0.8} />

Stacked Bar

Wraps d3-shape.stack() to draw multiple series as accumulated segments per band. Pass the keys to stack and (optionally) a color palette. Only the top segment gets the corner radius; rounding every segment would produce visible curved gaps between color bands.

<ChartContainer
  data={quarter}
  xKey="month" xScaleType="band"
  yKey="laptops" yScaleType="linear"
  yDomain={[0, stackSum(quarter, ["laptops", "phones", "tablets"])]}
>
  <StackedBar
    keys={["laptops", "phones", "tablets"]}
    colors={DEFAULT_STACK_COLORS}
    radius={4}
  />
</ChartContainer>

Set yDomain using stackSum because the auto-computed domain covers only the largest single key, not the sum, so the top of the stack would otherwise clip.

Stacked Area

The area equivalent of Stacked Bar. Same keys and yDomain mechanics; supports curve for smooth interpolation between accumulated points.

<StackedArea
  keys={["laptops", "phones", "tablets"]}
  colors={DEFAULT_STACK_COLORS}
  curve="monotone"
/>

Composed charts

Multiple shapes in one chart is just multiple children. Every shape accepts optional per-shape y / yKey props that override the container default, letting one shape plot revenue and another plot runningAvg.

<ChartContainer
  data={sales}
  xKey="month" xScaleType="band"
  yKey="revenue" yScaleType="linear"
>
  <Bar fill="#38bdf8" fillOpacity={0.5} />
  <Line y={(d) => d.runningAvg} stroke="#5eead4" curve="monotone" />
</ChartContainer>

Both series share the same x-scale and y-scale; the running average must fit within the revenue domain (or you must set an explicit yDomain).