@bysages/charts

@bysages/charts

Token-themed charts for By Sages Elements — TanStack Charts re-exported per framework, with the palette and surface variables bridged onto the paper-and-ink tokens.

Features

• 🎨 Tokens as ink — marks carry var(--bs-color-*) straight through paint attributes; var() resolves against the live theme, so mode, accent, and scene retune the ink with no redraw
• 🖌️ A fixed pigment palette — ink → danger → success → warning → info, the system's semantic order, handed to series that don't name their own colors
• 🪟 Paper vessels — tooltips dress like every other popup vessel (surface, hairline, elevation), crosshairs and focus takes the primary ink
• 🧩 The full grammar — marks, transforms, scales, and defineChart pass through from TanStack Charts, one entry per framework (/vue, /react, /solid, /svelte)

Installation

# pnpm
pnpm add @bysages/charts

# npm
npm install @bysages/charts

# yarn
yarn add @bysages/charts

# bun
bun add @bysages/charts

Quick Start

<script setup lang="ts">
import { Chart } from "@bysages/charts/vue";
import { bar } from "@tanstack/charts";

const definition = {
  axis: ["Region", "Units"],
  series: [{ type: bar(), label: "Sales", data: [42, 87, 63] }],
} as const;
</script>

<template>
  <Chart :definition="definition" />
</template>

The module side-effects bridge the theme once on import — no setup call of its own.

License

• MIT © By Sages