@macroui/charts

JavaScript chart library for the MacroUI component system.

@macroui/charts is a fork of ApexCharts maintained by the MacroUI project, with first-class support for the DaisyUI / MacroUI design system via the bundled macroui-themes.css theme bridge.

Features

• 20 chart types — line, area, bar, column, pie, donut, scatter, bubble, heatmap, radar, radialBar, candlestick, boxPlot, rangeBar, rangeArea, polarArea, treemap, violin, timeline, funnel/gauge
• Per-entry bundles — import only the chart type you need (@macroui/charts/line, @macroui/charts/bar, …)
• UMD / ESM / CJS / SSR — works in browsers, Node, edge runtimes, and bundlers
• Tree-shakable — every chart type ships as its own ESM and CJS entry
• macroUI / DaisyUI themes — auto-adapts to your DaisyUI theme tokens via CSS variables
• Server-side rendering — render to static HTML for hydration (e.g. Nuxt, Next)
• TypeScript — full .d.ts shipped, IntelliSense for all options

Install

npm install @macroui/charts

or with pnpm / yarn / bun.

Quick start

import Charts from '@macroui/charts'

const chart = new Charts(document.querySelector('#chart'), {
  chart: { type: 'line', height: 350 },
  series: [
    { name: 'sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }
  ],
  xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] },
})

chart.render()

Per-entry (smaller bundle)

import Charts from '@macroui/charts/line'   // only the line chart code

Available entries: line, area, bar, column, pie, donut, scatter, bubble, heatmap, radar, radialBar, candlestick, boxPlot, rangeBar, rangeArea, polarArea, treemap, violin. Plus features: features/exports, features/legend, features/toolbar, features/annotations, features/keyboard, features/morph, features/drilldown, features/all.

Themes (DaisyUI / macroUI)

Import the theme bridge to make every chart color pick up your DaisyUI / macroUI theme tokens:

import '@macroui/charts/macroui-themes.css'

This swaps the chart's color palette to follow --p, --s, --a, --n, --b1, --b2, --b3, etc. — so a chart in a <div class="dark"> block automatically renders with the dark theme.

Browser script tag (UMD)

<script src="https://cdn.jsdelivr.net/npm/@macroui/charts"></script>
<script>
  const chart = new Charts(document.querySelector('#chart'), { /* ... */ })
  chart.render()
</script>

UMD global name: Charts (note: previously ApexCharts on the upstream project).

TypeScript

import Charts, { type ApexOptions } from '@macroui/charts'

const opts: ApexOptions = { /* ... */ }  // public type alias retained for ecosystem compat

Migration from apexcharts

If you're migrating from the upstream apexcharts package, the main changes in @macroui/[email protected] are:

| Upstream | This package | |---------------------------------|-------------------------------| | import ApexCharts from 'apexcharts' | import Charts from '@macroui/charts' | | new ApexCharts(el, options) | new Charts(el, options) | | window.ApexCharts | window.Charts | | .apexcharts-canvas | .charts-canvas | | data-apexcharts | data-charts | | dist/apexcharts.js | dist/charts.js | | apexcharts / Apex global | Charts (the chart class is also the runtime registry) |

The public type aliases (ApexOptions, ApexAxis, …) are intentionally unchanged so existing TS code continues to compile.

Vue 3 wrapper

If you use Vue 3, install the wrapper:

npm install @macroui/charts-vue

See macroui/macroui-charts-vue.

Demo

A full demo collection lives in macroui/macroui-charts-demo (vanilla JS, React, Vue, and source XML examples).

License

Apache-2.0. See LICENSE. Derived from apexcharts/apexcharts.js — see the NOTICE section at the bottom of the LICENSE file for attribution.

Repositories

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