@ghostly-solutions/charts

Typed chart components for Ghostly Solutions products, built on top of recharts.

Install

npm install @ghostly-solutions/charts recharts

Public API

• Chart
• ChartType
• ChartTooltip
• ChartTooltipContent
• ChartLegend
• ChartLegendContent
• chart config, motion, performance, and overlay types

Low-level chart components are not part of the public API in this release.

Quick Start

import { Chart, ChartType, PerformanceMode } from "@ghostly-solutions/charts";

const data = [
    { name: "Mon", value: 24 },
    { name: "Tue", value: 18 },
    { name: "Wed", value: 33 },
];

export function Example() {
    return (
        <Chart
            type={ChartType.line}
            title="Weekly trend"
            data={data}
            xAxisKey="name"
            dataKeys={["value"]}
            performanceMode={PerformanceMode.auto}
            motionBehavior="auto"
        />
    );
}

Supported Chart Types

• ChartType.line
• ChartType.bar
• ChartType.area
• ChartType.pie
• ChartType.composed
• ChartType.radialBar
• ChartType.scatter

Best Fit

Use @ghostly-solutions/charts for exploratory or trend-heavy data visualizations.

If you only need KPI cards or compact metric summaries, prefer @ghostly-solutions/stats.

Performance API

• performanceMode: auto | quality | speed
• maxPoints: cartesian downsampling cap
• disableAnimationsAbove: auto-disable threshold
• animation: explicit animation override
• downsample: explicit cartesian downsample override
• disableDots: explicit line dots override
• minTickGap: explicit X-axis tick gap override
• maxSlices: explicit pie slice cap
• transformData: pre-render data transform hook

Motion API

• motionBehavior: auto | always | never
  • auto: respects reduced-motion
  • always: keeps chart animations enabled unless perf rules disable them
  • never: disables chart animations

Cartesian Reference Overlays

Supported on line, bar, area, composed, and scatter charts:

• referenceLines
• referenceAreas
• referenceDots

Example:

<Chart
    type={ChartType.line}
    data={data}
    xAxisKey="name"
    dataKeys={["value"]}
    referenceLines={[{ value: 100, label: "SLA" }]}
    referenceAreas={[{ y1: 80, y2: 100, color: "var(--chart-2)" }]}
    referenceDots={[{ x: "Tue", y: 98, label: "Spike" }]}
/>;

Notes

• Cartesian charts use default margins out of the box. Override them only when layout requires it.
• Color tokens resolve from config first, then from --chart-* CSS variables.
• Scatter does not downsample automatically. Use server-side aggregation for very large datasets.
• Charts are client components. They are safe to render from server boundaries in app code, but the chart runtime itself is still client-driven because of recharts, ResponsiveContainer, and reduced-motion integration.