@chatwoot/viz

@chatwoot/viz

Small, responsive chart components for Vue 3.5+. Built for Chatwoot with accessible interactions, rich HTML tooltips, and no runtime charting dependency.

Install

pnpm add @chatwoot/viz

Import the stylesheet once, then import the charts you need:

import '@chatwoot/viz/style.css'

<script setup>
import { LineChart } from '@chatwoot/viz'

const data = {
  categories: ['Week 1', 'Week 2', 'Week 3'],
  series: [{ id: 'resolved', label: 'Resolved', data: [12, 29, 23] }],
}
</script>

<template>
  <LineChart :data="data" aria-label="Resolved conversations by week" />
</template>

Documentation

• Overview and development
• BarChart
• DonutChart
• HeatmapChart
• LineChart
• PercentageChart
• SankeyChart

Agent skill

Install the chatwoot-viz skill to teach a compatible coding agent how to choose, configure, theme, and test these charts:

npx skills add chatwoot/viz --skill chatwoot-viz

Playground

pnpm install
pnpm dev

Open / for the chart gallery or /bar, /donut, /heatmap, /line, /percentage, and /sankey for editable stories.

License

MIT