@ken-research/charts

React chart components for Ken Research—built on Highcharts, styled for your brand. Simple props, zero config, SSR-ready.

Quick Start

import { LineChart } from "@ken-research/charts";

<LineChart
  title="Monthly Sales"
  labels={["Jan", "Feb", "Mar"]}
  data={[120, 180, 240]}
/>

Render a Ken-styled chart in minutes—no Highcharts knowledge required.

Installation

pnpm add @ken-research/charts
# or
npm install @ken-research/charts

Peer dependencies: React 18+, React DOM 18+

Supported Charts

| Component | Props | Description | |-----------|-------|-------------| | LineChart | labels, data, title?, subtitle? | Single-series line | | BarChart | labels, data, title?, subtitle? | Horizontal bar | | ColumnChart | labels, data, title?, subtitle? | Vertical column | | AreaChart | labels, data, title?, subtitle? | Area under line | | PieChart | data, title?, donut? | Pie or donut | | StackedBarChart | labels, series, title?, horizontal? | Stacked columns/bars | | MultiSeriesLineChart | labels, series, title? | Multiple lines, same axis | | HistoricalProjectedAreaChart | labels, series, title?, yAxisTitle? | Historical (solid) + projected (dashed) area | | MultiAxisLineChart | labels, leftSeries, rightSeries, title? | Dual Y-axis line |

API Examples

Line Chart

<LineChart
  title="Revenue"
  labels={["Jan", "Feb", "Mar", "Apr"]}
  data={[100, 200, 150, 280]}
/>

Pie / Donut

<PieChart
  title="Market Segments"
  data={[
    { name: "Tech", value: 35 },
    { name: "Healthcare", value: 28 },
  ]}
  donut={true}
/>

Historical & Projected Area (Market Size)

import { HistoricalProjectedAreaChart } from "@ken-research/charts";

<HistoricalProjectedAreaChart
  title="Historical & Projected Market Size ($ Million)"
  labels={["2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030"]}
  series={[
    { name: "Historical (2019-2024)", data: [120, 135, 142, 155, 168, 178, null, null, null, null, null, null] },
    { name: "Projected (2025-2030)", data: [null, null, null, null, null, 178, 186, 195, 202, 212, 220], isProjected: true },
  ]}
  yAxisTitle="$ Million"
/>

Stacked Bar

<StackedBarChart
  title="Quarterly Revenue"
  labels={["Q1", "Q2", "Q3", "Q4"]}
  series={[
    { name: "Product A", data: [120, 140, 130, 160] },
    { name: "Product B", data: [80, 90, 95, 110] },
  ]}
/>

Architecture

@ken-research/charts
├── core/
│   ├── theme.ts       # Ken Research theme tokens
│   ├── baseOptions.ts # Shared Highcharts defaults
│   └── factory.ts     # Option builder (internal)
├── charts/
│   ├── LineChart.tsx
│   ├── BarChart.tsx
│   └── ...
├── types/
│   └── chart-props.ts # Strict TS interfaces
└── index.ts

• SSR-safe: Components use "use client" and lazy-load Highcharts
• Tree-shakable: Import only the charts you use
• No raw config: options={{}} and inline Highcharts config are not allowed
• Theme from core: All styling comes from core/theme.ts

Development

# Install
pnpm install

# Build
pnpm build

# Storybook
pnpm storybook

# Demo app (build first, then run from examples/next-demo)
pnpm build
cd examples/next-demo && pnpm dev

Storybook

Preview all charts at http://localhost:6006:

pnpm storybook

Demo App

Next.js integration example:

cd examples/next-demo && pnpm dev

Open http://localhost:3000.

Engineering Rules

• All components are "use client" for SSR safety
• Highcharts is lazy-loaded via useEffect
• Strict TypeScript; minimal props only
• No styling via props—theming from core/theme.ts
• Components wrapped in memo—no dynamic re-renders from parent

License

UNLICENSED — Internal use only.