Charts

Vanduo Charts is a standalone SVG-first package for common dashboard charts, installed separately from the framework. It renders accessible SVG, reads Vanduo theme tokens, and ships an optional Vue 3 binding (@vanduo-oss/vd3-cbun/charts) used here.

Mark clicks (new in 1.3.0)

VdChart forwards clicks on marks as Vue events — @bar-click, @point-click, and @slice-click — each carrying a ClickEvent { event, datum, index }. Click a bar:

No bar clicked yet.

Bar Chart

Line Chart

Donut Chart

New in 0.2.0

Multi-series, value labels, per-point colour, reference-line annotations and pinned axis ranges — all opt-in, so default charts render unchanged.

Multi-Series

Labels + Per-Point Colour

Annotation + Axis Range

<!-- Multiple series (grouped bars) -->
<VdChart type="bar" :data="data" x="month" legend
         :series="[{ name: 'Product', y: 'product' },
                   { name: 'Service', y: 'service' }]" />

<!-- Value labels + per-point colour -->
<VdChart type="bar" :data="data" x="stage" y="users" :data-labels="true"
         :color="(row) => row.users >= 2600 ? '#22c55e' : '#64748b'" />

<!-- Reference line + pinned axis range -->
<VdChart type="line" :data="data" x="week" y="mrr" :y-min="0" :y-max="300"
         :annotations="[{ y: 200, label: 'Target', color: '#e5484d' }]" />

API Reference

Install

pnpm add @vanduo-oss/vd3-cbun

Usage

<script setup lang="ts">
import { VdChart } from '@vanduo-oss/vd3-cbun/charts';

const data = [
  { month: 'Jan', sales: 120 },
  { month: 'Feb', sales: 180 },
];
</script>

<template>
  <VdChart type="bar" :data="data" x="month" y="sales"
           title="Monthly sales" :height="300" />
</template>

Chart Types

Type	Description
`type="bar"`	Category bars with band scale, axes, grid lines, tooltips, bar-click events.
`type="line"`	Line path with optional points over category, number, or date-like x.
`type="area"`	Filled area plus line path, sharing the cartesian infrastructure.
`type="scatter"`	Circle marks over numeric, date-like, or categorical x.
`type="donut"`	Arc slices, default inner-radius-ratio 0.62, center total, legend.
`type="pie"`	Same polar renderer with inner-radius-ratio 0.

Component API

Prop	Description
`:type`	'bar' \| 'line' \| 'area' \| 'scatter' \| 'donut' \| 'pie' (default 'bar').
`:data`	Array of row objects.
`x / y`	Cartesian accessors — key string or function.
`label / value`	Pie / donut accessors.
`title / description`	Rendered into SVG accessibility metadata.
`:height`	Container min-height in px (default 300).
`:theme / :tooltip / :responsive`	Theme overrides, custom/disabled tooltip, responsive resize.
`:series`	Multiple series — grouped bars, or one line/area path each (Series[]). New in 0.2.0.
`:color`	A CSS color, a category-field name, or a per-datum (row) => color. New in 0.2.0.
`:data-labels`	true or { format, color } — draw value labels on each mark. New in 0.2.0.
`:annotations`	Reference lines: [{ y?, x?, label?, color?, dash? }]. New in 0.2.0.
`:y-min / :y-max / :y-tick-count`	Pin axis bounds and tick density (otherwise auto-scaled). New in 0.2.0.
`:legend`	true or { position } — shown by default for multi-series charts. New in 0.2.0.
`@bar-click / @point-click / @slice-click`	Mark-click events — each carries a ClickEvent { event, datum, index }. New in 1.3.0.

Notes

Each chart renders an <svg role="img"> with title/description metadata when provided.
Charts are Vue 3 components — import VdChart from @vanduo-oss/vd3-cbun/charts and render it directly. There is no global object or init step.
Charts read Vanduo theme tokens, so they follow the active theme automatically.