About Flarecharts

Flarecharts is a composable SVG chart library for Svelte 5 built on runes. We believe data visualization should be expressive, accessible, and easy to customize. Flarecharts takes the pain out of charting by easing common tasks used in many web projects, such as:

• Runes-first architecture: Built specifically for Svelte 5.
• d3 for math only: No d3 DOM bindings, just pure SVG components.
• CSS-variable themed: "Styled mode" is the only mode. Theme by setting variables on any wrapper.
• Composable Primitives & one-tag Charts: Eject from a wrapper to custom composition without reshaping your data.
• Accessibility built-in: Visually-hidden data tables, aria-live regions, and full arrow-key point navigation.
• First-class stacking & curves: Modelled on d3's stack generator with diverging, stream, and silhouette offsets.

Learning Flarecharts

Flarecharts has extensive and thorough documentation. It covers everything from getting started to deep dives on stacking, curves, and accessibility.

The documentation is also available in docs/ directory of the repository, covering:

• Core Concepts — the two layers, data, scales & axes, options & precedence
• Theming — full variable surface and class lists for plain-CSS/Tailwind restyling
• Charts — LineChart, AreaChart, BarChart, StackChart, DonutChart, Sparkline
• Primitives — Chart/Svg, marks, axes & grid, overlays
• Guides — stacking, curves, accessibility, responsive, interaction, etc..

Installation

Install Flarecharts via your preferred package manager:

npm install @faintshadow/flarecharts
# or
bun add @faintshadow/flarecharts

One Tag or Composed — Your Choice

Use a single <LineChart> tag for quick implementation:

<LineChart
  xAxis={{ type: 'time' }}
  series={[
    { name: 'Revenue', data: revenue, x: (d) => d.date, y: (d) => d.value },
    { name: 'Costs', data: costs, x: (d) => d.date, y: (d) => d.value }
  ]}
  bands={[{ from: 55, to: 70, label: 'Target' }]}
  crosshair
/>

Or compose your own chart pixel-identically using primitives, using the exact same data shapes and defaults. When you outgrow the one-tag form, you don't have to rewrite anything:

<script lang="ts">
  import { Chart, Svg, Axis, Grid, Line, PlotBand } from 'flarechart';

  const revenue = [
    { date: new Date(2025, 0, 1), value: 48 },
    { date: new Date(2025, 1, 1), value: 61 }
    // ...
  ];
</script>

<div style="height: 280px">
  <Chart x={{ type: 'time' }} label="Revenue by month">
    <Svg>
      <Grid y />
      <PlotBand from={55} to={70} label="Target" />
      <Line data={revenue} x={(d) => d.date} y={(d) => d.value} />
      <Axis placement="left" />
      <Axis placement="bottom" />
    </Svg>
  </Chart>
</div>

The chart fills its container (give it a height) and resizes with it. Paint order is markup order.

Core Concepts

• Two Layers: Primitives (src/lib/components/) are composable building blocks you assemble in markup. Charts (src/lib/charts/) are one-tag wrappers built only from Primitives.
• Flexible Data Shapes: Every mark accepts the same data shapes (number[], [x, y][], { x?, y }[], or T[] with accessors). null / NaN values render as gaps, never zeros.
• Theming: Every visual attribute resolves from a CSS custom property with a built-in fallback. Dark mode is just you flipping variables — the library does nothing, by design.
• Accessibility: <Chart> renders a role="group" container with an aria-label, a visually-hidden data table of every visible series, and arrow-key point navigation.

Development

bun install
bun run dev      # demo app (routes/)
bun run test     # vitest: normalizer, merge, scales, stacking, …
bun run check    # svelte-check, strict
bun run package  # svelte-package + publint

Contributing

Thank you for considering contributing to Flarecharts! Please review the design rationale in the Architecture page before opening a pull request.

License

Flarecharts is open-sourced software licensed under the MIT + Attribution License.