@eonui/charts-core

@eonui/charts-core is the data, definition, manifest, scale, and interaction foundation for the EonUI Mystique chart stack. It does not render charts by itself. Instead, it provides the shared contract that the SVG, canvas, and orchestration packages build on.

Workspace Note

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

Docs And Live Reference

Use this README for the data model, manifest, and chart-definition layer. For broader EonUI demos and product-level chart storytelling, refer to https://eonui.com.

Purpose

Use this package when you need:

• chart definitions independent of renderer choice
• access to the Mystique chart manifest
• sample chart data generation
• scale helpers
• interaction anchors for hover, pinning, brush, and drilldown logic

What The Package Exposes Today

Important exports include:

• getMystiqueChartManifest()
• mystiqueChartManifest
• MYSTIQUE_CHART_CATALOG_SIZE
• createChartDefinition()
• createSampleChartData()
• createLinearScale()
• createBandScale()
• createChartInteractionModel()
• resolveChartType()
• resolveRenderer()
• isFullyImplementedChart()

The current manifest surface contains 700 chart names in the generated catalog.

Install

npm install @eonui/charts-core

Recommended Core Workflow

This package is the modeling engine of the EonUI chart stack. A typical flow looks like this:

1. inspect the manifest to learn which chart families are available
2. generate or normalize data into the expected series model
3. build a chart definition with createChartDefinition()
4. select a renderer path such as SVG or canvas
5. attach an interaction model if the chart needs hover, focus, or tooltip coordinates

If you are building a docs site, chart picker, AI-assisted chart suggestion flow, or internal analytics builder, this is usually the package to integrate first.

Example 1: Read the chart manifest

import {
  getMystiqueChartManifest,
  MYSTIQUE_CHART_CATALOG_SIZE
} from '@eonui/charts-core';

const charts = getMystiqueChartManifest(MYSTIQUE_CHART_CATALOG_SIZE);

console.log(charts.length);
console.log(charts.slice(0, 8).map((entry) => entry.name));

Use this when:

• building a chart picker
• generating docs pages
• verifying coverage in tests or release checks

Example 2: Create a chart definition

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

const definition = createChartDefinition('line', {
  title: 'Revenue trend',
  width: 720,
  height: 320,
  renderer: 'svg',
  showLegend: true,
  showGrid: true
});

console.log(definition.options);
console.log(definition.series);
console.log(definition.scales);

Use this when:

• a renderer should be driven from one shared definition object
• you want config that can outlive a single rendering engine
• chart settings need to be serializable or inspectable

Example 3: Generate sample data for a chart family

import { createSampleChartData } from '@eonui/charts-core';

const data = createSampleChartData('grouped-bar', 6);

console.log(data);

Use this when:

• building preview galleries
• testing renderer output quickly
• generating placeholder chart states without writing custom mock data

Example 4: Build interaction anchors

import { createChartInteractionModel } from '@eonui/charts-core';

const interaction = createChartInteractionModel(
  'line',
  [
    { x: 1, y: 14, label: 'Jan' },
    { x: 2, y: 20, label: 'Feb' },
    { x: 3, y: 17, label: 'Mar' }
  ],
  720,
  320
);

console.log(interaction.anchors);

Use this when:

• building custom tooltips
• supporting pin or brush interactions
• keeping interaction logic renderer-agnostic

Example 5: Use the scale helpers directly

import { createLinearScale, createBandScale } from '@eonui/charts-core';

const yScale = createLinearScale([0, 100], [280, 24]);
const xScale = createBandScale(['Jan', 'Feb', 'Mar'], [48, 680]);

console.log(yScale.map(42));
console.log(xScale.map('Feb'));

Use this when:

• creating your own renderer experiments
• positioning overlays or annotations
• debugging chart coordinate logic

Troubleshooting

• If a chart family appears unavailable, verify whether it is fully implemented before promising it in product flows.
• If scales produce strange placements, check the domain and range values before debugging the renderer.
• If tooltips or hover anchors drift, compare the interaction model dimensions against the final rendered chart dimensions.
• If sample data helps but real data breaks, normalize incoming series names, numeric fields, and empty states before definition creation.

Where This Package Fits

@eonui/charts-core sits underneath:

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

If you are building tooling, not just rendering, this is usually the most important chart package to understand first.

Current Limitations

• it does not render anything on its own
• chart families and variants are data-driven, so consumers still need a renderer path
• interaction models are useful but still need UI handling in the host app

Future Prospects

Likely next steps include:

• stronger schema validation
• richer metadata around accessibility and annotations
• better dev-time diagnostics for unsupported option combinations
• manifest export helpers tailored for docs and AI tooling