@macroui/charts-vue

Vue 3 components for @macroui/charts, with first-class DaisyUI / macroUI theme support.

This package wraps the @macroui/charts engine in idiomatic Vue 3 SFCs and composables, and ships a theme bridge that makes every chart auto-adapt to your DaisyUI / macroUI theme tokens.

Install

npm install @macroui/charts @macroui/charts-vue vue

@macroui/charts is a peer dependency; install it alongside this package.

Quick start

<script setup>
import { ref } from 'vue'
import { MacroChart } from '@macroui/charts-vue'
import '@macroui/charts-vue/style.css'

const options = ref({
  chart: { id: 'sales', type: 'line' },
  xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996] },
  series: [{ name: 'sales', data: [30, 40, 35, 50, 49, 60] }],
})
</script>

<template>
  <MacroChart type="line" :options="options" :height="350" />
</template>

Components

• <MacroChart type="…" :options="…" :height="…" :width="…" :theme="…" /> — generic chart
• <MacroLineChart />, <MacroBarChart />, <MacroPieChart />, … — typed per-entry wrappers (one per chart type)
• <MacroChartGroup> — composes multiple charts with synchronized tooltips/zooming

Composables

• useChartTheme() — read and watch the active DaisyUI / macroUI theme
• useChartAutoResize(chartRef, options) — automatic ResizeObserver-based reflow
• useChartLoading(chartRef) — show a loading overlay while data resolves

Web component

import { registerMacroChartElement } from '@macroui/charts-vue/wc'
registerMacroChartElement()

After this you can use <macro-chart type="line" options='…'> in any framework or plain HTML.

Themes

import { useChartTheme } from '@macroui/charts-vue'
import '@macroui/charts-vue/style.css'

const { theme, setTheme } = useChartTheme()
setTheme('dark')   // 'auto' | 'light' | 'dark' | 'business' | …

Migration from vue3-apexcharts

If you're coming from the vue3-apexcharts package, see the macroui-charts 2.0.0 migration guide for the underlying library changes. The wrapper API is similar but renamed:

| Upstream | This package | |---------------------------|-------------------------------| | <apexchart> | <MacroChart> | | VueApexCharts component | MacroChart / typed wrappers | | vue3-apexcharts | @macroui/charts-vue |

License

Apache-2.0. See LICENSE.

Repositories

• Library: gitee.com/macroui/macroui-charts
• This wrapper: gitee.com/macroui/macroui-charts-vue
• Demos: gitee.com/macroui/macroui-charts-demo
• npm: @macroui/charts-vue