Browse the guide

Styling

Styling

Chartlyx emits bare SVG. There is no theme provider, no CSS-in-JS, no style props with magic behavior. Every visual choice is a plain SVG attribute you can tune per component.

LinearGradient

A convenience wrapper for SVG <defs> gradients; the fading fill under an <Area> is the classic use case. Reference it from any fill or stroke prop as url(#your-id). 

<LinearGradient
  id="fade"
  from="#5eead4"
  to="#5eead4"
  fromOpacity={0.35}
  toOpacity={0}
  direction="vertical"    // default; "horizontal" for left → right
/>
<Area fill="url(#fade)" />

The component is opt-in convenience. If you need something more exotic (radial gradients, multi-stop, pattern fills), drop your own <defs> block into the chart’s SVG tree instead.

Colors & palettes

Colors are plain SVG values: hex, rgb(), HSL, CSS variables, or gradient URLs. Every shape accepts fill, fillOpacity, stroke, and strokeWidth (Line is stroke-only). 

<Bar fill="var(--accent)" fillOpacity={0.85} />
<Line stroke="hsl(180 65% 55%)" strokeWidth={2} />
<Area fill="url(#gradient)" />

For multi-series shapes (StackedBar, StackedArea, Pie), pass a colors array. Chartlyx ships a 6-color default palette as DEFAULT_STACK_COLORS.

Responsive charts

Every container uses ResizeObserver internally and re-renders on parent size changes. There are no width or height props to manage. Just size the parent with CSS. 

<div style={{ width: "100%", height: 320 }}>
  <ChartContainer ...>
    ...
  </ChartContainer>
</div>

The chart fills the parent, respects the parent’s box constraints, and re-scales tick counts automatically as the width changes. Great for card layouts, dashboards, or any grid that reflows on breakpoints.

Dark theme

There is no theme prop and no theme provider. Chartlyx emits a bare <svg> with your styles: light, dark, or otherwise. For dark themes, set axis stroke and textFill to grays, use muted grid stroke, and pick accent colors that pop on your background. 

<XAxis stroke="#64748b" textFill="#cbd5e1" />
<YAxis stroke="#64748b" textFill="#cbd5e1" />
<CartesianGrid stroke="#334155" strokeOpacity={0.75} dashArray="4 6" />
<Line stroke="#5eead4" strokeWidth={2} curve="monotone" />

Because there’s no theme lock-in, hooking chart colors up to CSS custom properties, and having your app-wide dark-mode toggle recolor charts for free, is a one-liner.

Interaction Helpers