Skip to main content

Keisen

🚧 A modern web candlestick chart library — under active development 🚧.

Keisen comes from Japanese 罫線 (けいせん) — the traditional finance term for candlestick charts. We chose the name to bring professional charting to the modern web with familiar component APIs.

Features​

  • 👀What you write is what you get — declare chart structure with JSX / templates; children are layers
  • 🖼️Cross-framework — one API surface for React and Vue
  • 🎁Ready out of the box — pass K-line data and render; theme, resolution, indicators, and drawings compose as needed
  • 🎈Lightweight — zero dependencies, ~20kb gzipped
  • 🧩Component-first — if you know React / Vue, you know Keisen
import { KeisenChart } from "@keisen-charts/react";

export default function App() {
  return (
    <div style={{ width: "100%", height: 420 }}>
      <KeisenChart data={data} mode="light" />
    </div>
  );
}

Loading interactive example…

Docs & links​

Docshttps://keisen-charts.com
GitHubhttps://github.com/Dieber/keisen-charts
Quick StartQuick Start
npm (React)@keisen-charts/react
npm (Vue)@keisen-charts/vue

Install​

bun add @keisen-charts/react
# or
bun add @keisen-charts/vue

You can also use npm / pnpm / yarn. Peer deps are react@^18 || ^19 or vue@^3.5.

Development​

TODOs​

  • Vanilla support
  • Overlay support
  • IANA support

License​

MIT