@composy/chart-vue

@composy/chart-vue

Vue 3 adapter for @composy/chart-core. It provides chart components, composables and plugin exports while preserving the same ldesign-chart class and token conventions as the core package.

Install

pnpm add @composy/chart-vue @composy/chart-core vue

Components

• LChart
• LLineChart
• LBarChart
• LPieChart
• LScatterChart

Root components use the shared base class and BEM-style modifiers:

ldesign-chart
ldesign-chart--line
ldesign-chart--bar
ldesign-chart--pie
ldesign-chart--scatter

Quick Start

<script setup lang="ts">
import { LLineChart } from '@composy/chart-vue'

const data = [120, 200, 150, 80, 70, 110]
const xData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
</script>

<template>
  <LLineChart
    :data="data"
    :x-data="xData"
    title="Revenue"
    color="var(--ldesign-chart-color-primary, var(--color-primary-500))"
    :smooth="true"
    :show-area="true"
  />
</template>

Composable

<script setup lang="ts">
import { DataPipeline, filterDataStage } from '@composy/chart-core'
import { useChart } from '@composy/chart-vue'
import { onUnmounted, ref } from 'vue'

const option = ref({
  title: { text: 'Sales' },
  xAxis: { data: ['Mon', 'Tue', 'Wed'] },
  series: [{ type: 'bar', data: [30, 45, 28] }],
})

const { containerRef, setOption, appendData, runDataPipeline, setTheme, toDataURL, dispose } =
  useChart({
    option,
    autoResize: true,
  })

appendData(0, 36)
const pipeline = new DataPipeline<number[]>([filterDataStage('finite', Number.isFinite)])
await runDataPipeline(0, pipeline)
setOption(option.value)
setTheme('dark')
toDataURL('png')
onUnmounted(dispose)
</script>

<template>
  <div ref="containerRef" class="ldesign-chart" />
</template>

Workspace checks

Run these commands from the workspace root:

pnpm --dir packages/vue run build
pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run type-check:cjs
pnpm --dir packages/vue run lint:check

The Builder configuration and ESM/CJS TypeScript configurations are stored in packages/vue/.ldesign/. The package exposes its stylesheet as @composy/chart-vue/index.css.

useChart() exposes resize, refresh, setOption, setData, appendData, runDataPipeline, setTheme, toDataURL and dispose. runDataPipeline carries a monotonic revision and ignores late results; pass an AbortSignal to cancel an async stage. Import DataPipeline and stage helpers from @composy/chart-core.

Events

Components forward chart events:

<LBarChart
  :data="[30, 45, 28]"
  title="Sales"
  @ready="(chart) => console.log(chart)"
  @click="(payload) => console.log(payload)"
  @mouseover="(payload) => console.log(payload)"
  @mouseout="(payload) => console.log(payload)"
/>

Tokens

Component styles use package-level --ldesign-chart-* variables with defaults from packages/color and packages/size.

• Colors: --color-primary-*, --color-success-*, --color-warning-*, --color-danger-*, --color-gray-*
• Sizes: --size-*, including spacing, radius, font, shadow, z-index and motion variables

Example override:

.analytics-panel .ldesign-chart {
  --ldesign-chart-height: var(--size-40);
  --ldesign-chart-radius: var(--size-radius-md);
  --ldesign-chart-color-primary: var(--color-primary-500);
  --ldesign-chart-color-surface: var(--color-gray-50);
}

Consumers should load the global LDesign color and size CSS variable files before mounting Vue chart components.

Build Outputs

The package is built with @composy/builder and emits engine-style outputs:

• dist/ UMD/browser bundle and CSS, including minified JS/CSS
• es/ ESM output used by package exports
• esm/ additional ESM output
• lib/ CommonJS output

The post-build sync script mirrors Vue generated component output into es, esm and lib so subpath exports work in ESM and CJS consumers.

Commands

pnpm --filter @composy/chart-vue type-check
pnpm --filter @composy/chart-vue build