FLITTERChart
Menu
Navigation

Installation

Flitter chart styles are copied into your project as editable source. They use @flitterjs/chart for headless chart logic and flitterjs for rendering. Your framework adapter connects the engine to your app.

Prerequisites

  • Node.js 18 or later
  • React 18+ or Svelte 4+
  • A package manager: npm, pnpm, or yarn

Quick setup

Install the engine and your framework adapter, then initialize Flitter:

npm install flitterjs @flitterjs/adapter-react
# For Svelte, use @flitterjs/adapter-svelte instead.
npx @flitterjs/cli@latest init

init creates flitter.json. It does not install runtime packages.

Add your first chart

npx @flitterjs/cli@latest add bar-chart

add installs flitterjs and @flitterjs/chart, then copies editable chart source into your configured chart directory:

charts/
├── bar-chart/
│   ├── index.ts              # BarChart — the component you import
│   ├── base/
│   │   ├── index.ts          # Headless chart logic (scales, layout)
│   │   └── bar-group.ts      # Bar group layout within each category
│   └── style/
│       ├── index.ts          # Style configuration & defaults
│       ├── config.ts         # TypeScript types for all config options
│       └── parts/
│           ├── bar.ts        # Individual bar renderer — edit this to customize bars
│           └── data-view.ts  # Data layer with tooltip overlay
└── _styles/
    └── ag/                   # Shared style base (generated once, reused across charts)
        ├── index.ts
        ├── cartesian/        # Axis, grid, labels — shared across cartesian charts
        ├── bar-like/         # Bar-specific shared components
        └── utils/

Every file is yours. Open any file, read the widget tree, change what you want. The parts/ folder is where most visual customization happens — each file is a small widget factory you can replace entirely.

The CLI is only needed when copying templates. Keep flitterjs, @flitterjs/chart, and your framework adapter installed at runtime.

Choose a style

Each chart comes with multiple visual styles. Pick one during install:

npx @flitterjs/cli@latest add bar-chart --style toast
npx @flitterjs/cli@latest add bar-chart --style ag

The CLI uses defaultChartStyle from flitter.json (AG by default) when no style is specified.

Framework setup

React

import Widget from "@flitterjs/adapter-react";
import BarChart from "./charts/bar-chart";
 
export default function App() {
  return (
    <Widget
      widget={BarChart({ data: [...] })}
      width="100%"
      height="400px"
    />
  );
}

Svelte

<script>
  import Widget from "@flitterjs/adapter-svelte";
  import BarChart from "./charts/bar-chart";
</script>
 
<Widget
  widget={BarChart({ data: [...] })}
  width="100%"
  height="400px"
/>

Next steps