@eonui/charts

@eonui/charts is the high-level Mystique chart entry package for EonUI. It orchestrates chart definitions, sample data, SVG rendering, canvas rendering, interaction overlays, and a custom element entry point so teams can work from one API instead of wiring the renderer packages by hand.

Workspace Note

This folder currently documents the published package surface. The implementation source for @eonui/charts is consumed from npm in the EonUI app and is not mirrored into revamp/eonui/packages/charts yet.

Docs And Live Reference

Use this README for package-level chart orchestration guidance. For the wider EonUI product story, showcase surfaces, and future chart documentation, refer to https://eonui.com.

Purpose

Use this package when you want:

• one chart entry point for EonUI applications
• automatic access to both SVG and canvas rendering paths
• preview generation from a chart type alone
• chart custom elements for simple embedding
• interaction overlays for zoom, hover, brush, and pinned inspection

What The Package Exposes Today

The current package surface includes functions such as:

• createMystiqueChart()
• createMystiqueChartDefinition()
• createMystiqueChartPreview()
• createMystiqueCatalogPreviews()
• defineMystiqueChartElement()
• hydrateMystiqueCharts()

It builds on:

• @eonui/charts-core
• @eonui/charts-svg
• @eonui/charts-canvas

Install

npm install @eonui/charts

Recommended Adoption Flow

@eonui/charts is the orchestration layer of the chart stack. In practice, teams usually:

1. define or select a chart family
2. feed data into createMystiqueChart() or createMystiqueChartDefinition()
3. use preview helpers for docs, catalogs, or selection UIs
4. register or hydrate the chart element when the UI needs runtime interaction

Use this package when you want a single entry point instead of wiring @eonui/charts-core, @eonui/charts-svg, and @eonui/charts-canvas separately in every consuming app.

Example 1: Render a chart from a type and data

import { createMystiqueChart } from '@eonui/charts';

const markup = createMystiqueChart({
  type: 'line',
  data: [
    { x: 1, y: 14, label: 'Jan' },
    { x: 2, y: 20, label: 'Feb' },
    { x: 3, y: 18, label: 'Mar' }
  ],
  options: {
    title: 'Revenue trend',
    width: 720,
    height: 320,
    renderer: 'svg'
  }
});

console.log(markup);

Use this when:

• rendering server-side chart markup
• embedding generated chart previews in docs or CMS output
• creating a runtime chart block from JSON configuration

Example 2: Create a preview pair for docs

import { createMystiqueChartPreview } from '@eonui/charts';

const preview = createMystiqueChartPreview('bar', {
  title: 'Quarterly revenue'
});

console.log(preview.svg);
console.log(preview.canvas);

Use this when:

• building a chart gallery
• comparing renderers visually
• generating example assets for docs or review pages

Example 3: Register the custom element

import { defineMystiqueChartElement } from '@eonui/charts';

defineMystiqueChartElement();

<eon-chart
  type="line"
  renderer="hybrid"
  width="720"
  height="320"
  title="Revenue overview"
  data='[{"x":1,"y":12,"label":"Jan"},{"x":2,"y":18,"label":"Feb"},{"x":3,"y":24,"label":"Mar"}]'>
</eon-chart>

Use this when:

• you want a low-friction custom-element chart API
• a static site or CMS needs direct declarative chart embedding
• you want the interaction runtime without writing renderer glue code

Example 4: Hydrate interaction overlays after render

import { hydrateMystiqueCharts } from '@eonui/charts';

hydrateMystiqueCharts(document);

Use this when:

• chart markup was rendered ahead of time
• you need zoom, hover, brush, or pinned inspection behavior
• you are progressively enhancing charts after page load

Troubleshooting

• If a chart renders but feels static, confirm the relevant hydration step has run.
• If a chart type resolves unexpectedly, validate the chart family and data shape before passing them into the factory helpers.
• If you see duplicate custom-element errors, guard registration so the element definition only runs once per browser session.
• If previews look correct but full runtime charts do not, compare the definition object used in both paths and watch for diverging dimensions or renderer settings.

Where This Package Fits

@eonui/charts is the package most application teams should start with. Reach for the lower-level packages only when you need:

• pure definition and manifest logic from @eonui/charts-core
• SVG-only string rendering from @eonui/charts-svg
• canvas drawing on an existing 2D context from @eonui/charts-canvas

Current Limitations

• it is renderer orchestration, not a framework-native chart wrapper
• canvas and SVG share one concept model, but visual parity still needs ongoing refinement
• custom element registration and hydration are browser-focused concerns

Future Prospects

Strong next steps include:

• dedicated Angular and React chart wrappers
• richer accessibility and annotation tooling
• chart export helpers
• tighter integration with @eonui/manifest and future template catalogs