@vibe-labs/design-components-graphs

Graph and chart component tokens, styles, and TypeScript types for the Vibe Design System. Provides a framework-agnostic design language for chart libraries (D3, Chart.js, etc.) to consume.

Installation

bash

npm install @vibe-labs/design-components-graphs

css

@import "@vibe-labs/design-components-graphs";

import { GRAPH_SERIES_COUNT, GraphRatios, GraphStatusSeries, RadarGridStyles } from "@vibe-labs/design-components-graphs/types";
import type {
  GraphRatio,
  GraphStyleProps,
  GraphSeriesStyleProps,
  RadarGridStyle,
  GraphRadarStyleProps,
} from "@vibe-labs/design-components-graphs/types";

Tokens

Comprehensive charting tokens defined in @layer vibe.tokens (file: graph.css).

Series Palette

8 default series colors chosen for dark/light distinguishability. Tenants can override or extend with --graph-series-9, etc.

Token	Default
`--graph-series-1`	`#7c5cff` (accent purple)
`--graph-series-2`	`#38bdf8` (sky blue)
`--graph-series-3`	`#34d399` (emerald)
`--graph-series-4`	`#fb923c` (orange)
`--graph-series-5`	`#f472b6` (pink)
`--graph-series-6`	`#facc15` (yellow)
`--graph-series-7`	`#a78bfa` (violet)
`--graph-series-8`	`#22d3ee` (cyan)
`--graph-series-opacity`	`0.15` (area fills)

Status Series

--graph-positive (success) · --graph-negative (danger) · --graph-warning (warning) · --graph-neutral (muted)

Other Token Groups

Axes & Grid — axis lines, labels, titles, major/minor ticks, major/minor grid lines (with dash patterns)
Tooltip — background, border, shadow, padding, label color, value weight
Legend — font size, color, gap, swatch size/radius, inactive opacity
Data Elements — points (size, hover size, stroke), lines (width, hover, caps), bars (radius, gap, hover brightness)
Annotations — reference lines with dash pattern, label background, positive/negative/warning variants
Highlight & Selection — region fill/border, selection region fill (accent-tinted)
Empty State — centered muted text for no-data scenarios

Radar / Spider Chart

Token	Default	Description
`--graph-radar-grid-color`	`border-subtle`	Concentric ring stroke
`--graph-radar-grid-width`	`1px`	Ring stroke width
`--graph-radar-grid-opacity`	`0.6`	Ring opacity
`--graph-radar-spoke-color`	`border-subtle`	Axis line stroke
`--graph-radar-spoke-width`	`1px`	Axis line width
`--graph-radar-label-color`	`text-secondary`	Perimeter label color
`--graph-radar-label-font-size`	`text-xs`	Perimeter label size
`--graph-radar-label-font-weight`	`font-semibold`	Perimeter label weight
`--graph-radar-label-gap`	`12px`	Gap between perimeter and labels
`--graph-radar-fill-opacity`	`0.2`	Polygon area fill opacity
`--graph-radar-fill-hover-opacity`	`0.35`	Polygon hover fill opacity
`--graph-radar-stroke-width`	`2px`	Polygon outline width
`--graph-radar-stroke-hover-width`	`3px`	Polygon hover outline width
`--graph-radar-point-size`	`4px`	Vertex dot radius
`--graph-radar-point-size-hover`	`6px`	Vertex dot hover radius
`--graph-radar-point-stroke-width`	`2px`	Vertex dot stroke width
`--graph-radar-point-stroke-color`	`surface-base`	Vertex dot stroke color

Generated Styles

Component classes generated into @layer vibe.components (file: graph.g.css).

Container

Class	Description
`.graph`	Relative positioned, full width, padding
`.graph-canvas`	Full width/height SVG container

Ratios (data-ratio): 16x9 · 4x3 · 1x1 · 21x9

Series

Set data-color attribute on the series element:

Numbered: data-color="1" … data-color="8" — sets stroke and fill from series palette
Status: data-color="positive|negative|warning|neutral" — semantic series colors
Areas: area-flagged series get reduced fill opacity (--graph-series-opacity)

Data Elements

Class	Description
`.graph-point`	Circle markers with hover size transition
`.graph-line`	Stroked paths with hover width transition
`.graph-bar`	Rounded rects with hover brightness filter

Other Elements

Class	Description
`.graph-tooltip`	Positioned overlay with label rows and auto-layout
`.graph-legend`	Flex-wrapped items with swatches, inactive toggle
`.graph-crosshair`	Dashed pointer-events-none tracking line
`.graph-radar`	Radar container
`.graph-radar-grid`	Concentric ring paths (polygon or circle)
`.graph-radar-spoke`	Axis lines from centre to perimeter
`.graph-radar-label`	Perimeter axis labels
`.graph-radar-polygon`	Data area with fill opacity + stroke, hover
`.graph-radar-point`	Vertex dots with hover size transition

Radar grid style (data-grid-style on .graph-radar): polygon · circle

TypeScript Types

GRAPH_SERIES_COUNT  // 8
GraphRatios         // ["16x9", "4x3", "1x1", "21x9"]
GraphStatusSeries   // ["positive", "negative", "warning", "neutral"]
GraphAnnotationVariants // ["positive", "negative", "warning"]
RadarGridStyles     // ["polygon", "circle"]

type GraphRatio
type GraphStatusSeriesName
type GraphAnnotationVariant
type RadarGridStyle

interface GraphStyleProps { ratio?: GraphRatio }
interface GraphSeriesStyleProps { color?: string }
interface GraphLegendItemStyleProps { inactive?: boolean }
interface GraphLegendSwatchStyleProps { line?: boolean }
interface GraphAnnotationStyleProps { variant?: GraphAnnotationVariant }
interface GraphRadarStyleProps { gridStyle?: RadarGridStyle }
// + tooltip, point, line, bar, canvas, empty, radar-grid, radar-spoke,
//   radar-label, radar-polygon, radar-point interfaces

Dist Structure

File	Description
`index.css`	Barrel — imports tokens + generated styles
`graph.css`	Token definitions
`graph.g.css`	Generated component styles
`index.js` / `index.d.ts`	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, borders, spacing, typography, elevation, transitions).

Build

bash

npm run build

Usage Guide

Import

css

@import "@vibe-labs/design-components-graphs";

import type { GraphStyleProps, GraphRadarStyleProps } from "@vibe-labs/design-components-graphs/types";

Variants

Aspect ratio

Set data-ratio on .graph: 16x9 · 4x3 · 1x1 · 21x9

Series color

Set data-color on series elements: 1–8 for palette colors · positive · negative · warning · neutral for semantic colors

Radar grid style

Set data-grid-style on .graph-radar: polygon · circle

Legend item inactive

Set data-inactive on .graph-legend-item for toggle-off state.

Annotation variant

Set data-variant on .graph-annotation: positive · negative · warning

Examples

Graph container shell

html

<!-- Base container — chart library renders into .graph-canvas -->
<div class="graph" data-ratio="16x9">
  <svg class="graph-canvas" viewBox="0 0 800 450">
    <!-- Chart library renders paths, rects, etc. here -->
  </svg>
</div>

Styled data series (SVG)

html

<!-- Apply Vibe series tokens to SVG paths/circles rendered by your chart lib -->
<g data-color="1">
  <!-- Series 1 — accent purple; stroke and fill from --graph-series-1 -->
  <path class="graph-line" d="M0,100 L200,50 L400,80" />
</g>
<g data-color="2">
  <!-- Series 2 — sky blue -->
  <path class="graph-line" d="M0,120 L200,70 L400,60" />
</g>

Bar chart elements

html

<svg class="graph-canvas">
  <!-- Bars use border-radius and hover brightness from tokens -->
  <rect class="graph-bar" data-color="1" x="10" y="50" width="30" height="100" />
  <rect class="graph-bar" data-color="2" x="50" y="30" width="30" height="120" />
</svg>

html

<!-- Tooltip — positioned absolutely over the chart -->
<div class="graph-tooltip" style="left: 200px; top: 50px">
  <div class="graph-tooltip-label">March 2024</div>
  <div class="graph-tooltip-row">
    <span class="graph-legend-swatch" style="background: var(--graph-series-1)"></span>
    <span>Revenue</span>
    <span>$42,000</span>
  </div>
</div>

Legend

html

<!-- Horizontal flex legend with swatches -->
<div class="graph-legend">
  <div class="graph-legend-item">
    <span class="graph-legend-swatch" style="background: var(--graph-series-1)"></span>
    Revenue
  </div>
  <div class="graph-legend-item" data-inactive>
    <!-- Inactive = toggled off series -->
    <span class="graph-legend-swatch" style="background: var(--graph-series-2)"></span>
    Expenses
  </div>
</div>

Radar chart (spider chart)

html

<!-- Radar chart container with polygon grid style -->
<div class="graph-radar" data-grid-style="polygon">
  <svg class="graph-canvas" viewBox="-150 -150 300 300">
    <!-- Concentric polygon rings -->
    <polygon class="graph-radar-grid" points="…" />
    <!-- Axis spokes -->
    <line class="graph-radar-spoke" x1="0" y1="0" x2="0" y2="-120" />
    <!-- Axis labels -->
    <text class="graph-radar-label" x="0" y="-135">Speed</text>
    <!-- Data polygon for series 1 -->
    <polygon class="graph-radar-polygon" data-color="1" points="…" />
    <!-- Vertex dots -->
    <circle class="graph-radar-point" data-color="1" cx="0" cy="-90" r="4" />
  </svg>
</div>

With Vue

Use @vibe-labs/design-vue-graphs for <SbGraph> and related components that expose the series color system and token CSS variables as props, making chart library integration straightforward.

Design Tokens

CSS Components

Vue Components

Themes

@vibe-labs/design-components-graphs

Installation

Contents

Tokens

Series Palette

Status Series

Other Token Groups

Radar / Spider Chart

Generated Styles

Container

Series

Data Elements

Other Elements

TypeScript Types

Dist Structure

Dependencies

Build

Usage Guide

Import

Variants

Aspect ratio

Series color

Radar grid style

Legend item inactive

Annotation variant

Examples

Graph container shell

Styled data series (SVG)

Bar chart elements

Tooltip

Legend

Radar chart (spider chart)

With Vue

@vibe-labs/design-components-graphs ​

Installation ​

Contents ​

Tokens ​

Series Palette ​

Status Series ​

Other Token Groups ​

Radar / Spider Chart ​

Generated Styles ​

Container ​

Series ​

Data Elements ​

Other Elements ​

TypeScript Types ​

Dist Structure ​

Dependencies ​

Build ​

Usage Guide ​

Import ​

Variants ​

Aspect ratio ​

Series color ​

Radar grid style ​

Legend item inactive ​

Annotation variant ​

Examples ​

Graph container shell ​

Styled data series (SVG) ​

Bar chart elements ​

Tooltip ​

Legend ​

Radar chart (spider chart) ​

With Vue ​

@vibe-labs/design-components-graphs

Installation

Contents

Tokens

Series Palette

Status Series

Other Token Groups

Radar / Spider Chart

Generated Styles

Container

Series

Data Elements

Other Elements

TypeScript Types

Dist Structure

Dependencies

Build

Usage Guide

Import

Variants

Aspect ratio

Series color

Radar grid style

Legend item inactive

Annotation variant

Examples

Graph container shell

Styled data series (SVG)

Bar chart elements

Tooltip

Legend

Radar chart (spider chart)

With Vue