@eonui/charts-svg

@eonui/charts-svg is the SVG renderer layer for the EonUI Mystique chart stack. It turns chart definitions and data into SVG markup strings, which makes it a strong fit for accessible charts, printable output, docs generation, and UI surfaces where DOM-level styling or inspection is useful.

Workspace Note

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

Docs And Live Reference

Use this README for the SVG renderer path. For broader EonUI examples, chart positioning, and future public docs, refer to https://eonui.com.

Purpose

Use this package when you need:

• SVG markup as a string
• accessible or inspectable chart output
• server-side or build-time chart generation
• integration into docs, templates, or CMS-rendered surfaces

What The Package Exposes Today

Important exports include:

• renderMystiqueSvgChart()
• chartTag

The renderer supports a wide range of Mystique chart families, including bar, line, area, scatter, bubble, heatmap, treemap, network, sankey, funnel, pie, donut, radar, combo, candlestick, histogram, and waterfall variants.

Install

npm install @eonui/charts-svg

When To Reach For SVG

Choose this package when you want:

• crisp chart output at many sizes
• inspectable markup for docs or debugging
• easier SSR and static preview generation
• SVG assets that can be embedded into landing pages, emails, docs, or export flows

This renderer is especially strong for design systems, visual catalogs, generated previews, and product pages where markup portability matters.

Example 1: Render a chart as SVG

import { renderMystiqueSvgChart } from '@eonui/charts-svg';

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

console.log(svg);

Use this when:

• generating chart markup on the server
• embedding SVG directly into docs pages
• storing chart previews as markup instead of raster images

Example 2: Render using a prebuilt definition

import { createChartDefinition } from '@eonui/charts-core';
import { renderMystiqueSvgChart } from '@eonui/charts-svg';

const definition = createChartDefinition('grouped-bar', {
  title: 'Pipeline status',
  width: 760,
  height: 340
});

const svg = renderMystiqueSvgChart({
  type: 'grouped-bar',
  data: [
    { label: 'Jan', values: [12, 18, 14] },
    { label: 'Feb', values: [16, 20, 17] },
    { label: 'Mar', values: [19, 24, 22] }
  ],
  definition
});

Use this when:

• one shared chart definition should drive multiple renderers
• docs or screenshots must match application config exactly
• you want a render pipeline that is explicit about chart options

Example 3: Generate SVG for docs or previews

import { renderMystiqueSvgChart } from '@eonui/charts-svg';

const preview = renderMystiqueSvgChart({
  type: 'donut-control-room',
  data: [
    { label: 'Healthy', value: 42 },
    { label: 'Warning', value: 18 },
    { label: 'Critical', value: 7 }
  ],
  options: {
    title: 'Cluster health',
    width: 320,
    height: 320
  }
});

console.log(preview);

Use this when:

• building a chart gallery
• generating visual review assets
• documenting variant coverage

Troubleshooting

• If the SVG appears cropped, verify the width, height, and internal padding assumptions in the definition.
• If very dense datasets feel heavy, compare the SVG output path with the canvas renderer for the same chart family.
• If embedding into another app strips styles, confirm the generated SVG carries the required attributes or inline definitions expected by the consumer.
• If preview output differs from runtime output, check whether both paths share the same chart definition and sample-data generation logic.

Where This Package Fits

Use @eonui/charts-svg when you want renderer-level control but prefer SVG over canvas. Start with @eonui/charts if you want the simplest entry point and only drop down to this package when you need direct SVG markup.

Current Limitations

• it returns SVG markup, not interactive runtime behavior by itself
• hover and brush UX still belong to the higher-level chart package or host app
• large and very dense charts may still be better suited to canvas

Future Prospects

Strong next steps include:

• tighter accessibility annotations
• export helpers for inline and standalone SVG files
• richer legend and annotation support
• visual-regression testing against the canvas renderer