smooth-generic-area-chart

Generic smooth SVG area/line chart with:

• vanilla API (renderChart)
• React wrapper (SmoothChart)
• Next.js compatibility ('use client' already inside wrapper)

Install

npm install smooth-generic-area-chart

React Usage

import { SmoothChart } from 'smooth-generic-area-chart';

const data = [
  { date: '2026-02-11', value: 101.2, units: 820, extra: { pnl: 1.8 } },
  { date: '2026-02-12', value: 99.8, units: 810, extra: { pnl: -0.9 } },
  { date: '2026-02-13', value: 103.4, units: 860, extra: { pnl: 2.7 } }
];

export default function App() {
  return (
    <SmoothChart
      data={data}
      x={(d) => d.date}
      y={(d) => d.value}
      baseline={100}
      axis={{ yTicks: 6, maxLabels: 6 }}
      tooltip={{ mode: 'auto', exclude: ['internalId'] }}
      colors={{ line: '#1d4ed8', positive: '#16a34a', negative: '#dc2626' }}
      style={{ maxWidth: 900, margin: '24px auto' }}
    />
  );
}

React Usage (Key-based data)

import { SmoothChart } from 'smooth-generic-area-chart';

const rows = [
  { timestamp: '2026-02-10', amount: 1200, details: { region: 'US' } },
  { timestamp: '2026-02-11', amount: 1280, details: { region: 'EU' } },
  { timestamp: '2026-02-12', amount: 1195, details: { region: 'APAC' } }
];

export default function RevenueChart() {
  return (
    <SmoothChart
      data={rows}
      xKey="timestamp"
      yKey="amount"
      baseline={1200}
      tooltip={{ mode: 'auto' }}
    />
  );
}

Next.js Usage (App Router)

'use client';

import { SmoothChart } from 'smooth-generic-area-chart';

export default function Page() {
  const data = [
    { ts: '2026-02-10', price: 100 },
    { ts: '2026-02-11', price: 102.3 },
    { ts: '2026-02-12', price: 98.9 }
  ];

  return (
    <SmoothChart
      data={data}
      x={(d) => d.ts}
      y={(d) => d.price}
      baseline={100}
    />
  );
}

Custom Tooltip Example

<SmoothChart
  data={data}
  x={(d) => d.date}
  y={(d) => d.value}
  tooltip={{
    formatter(point) {
      return {
        title: point.xLabel,
        items: [
          { label: 'Value', value: point.yValue.toFixed(2) },
          { label: 'Units', value: point.raw.units },
          { label: 'Manager', value: point.raw.info?.manager || '-' }
        ]
      };
    }
  }}
/>

Vanilla Usage

import { renderChart } from 'smooth-generic-area-chart';

renderChart(document.getElementById('chart'), {
  data: [
    { x: '2026-02-10', y: 10, meta: { region: 'US' } },
    { x: '2026-02-11', y: 12, meta: { region: 'EU' } }
  ],
  xKey: 'x',
  yKey: 'y',
  baseline: 11,
  tooltip: {
    mode: 'auto'
  }
});

Input Parameters

• data: array of objects.
• x or xKey: x accessor (function) or key (string).
• y or yKey: y accessor (function) or key (string).
• baseline: number used to split positive/negative area.
• width: SVG viewbox width (default 960).
• height: SVG viewbox height (default 280).
• smoothness: curve tension (default 0.18).
• dotRadius: point radius (default 4.5).
• axis.yTicks: approximate y-axis tick count.
• axis.maxLabels: max x labels shown.
• colors: { line, positive, negative, grid, text, baseline }.
• tooltip.enabled: enable/disable tooltip.
• tooltip.mode: 'auto' renders JSON card from point data.
• tooltip.exclude: keys to hide in auto mode.
• tooltip.maxDepth: nested JSON depth in auto mode.
• tooltip.formatter(point): custom formatter, returns string or { title, items }.
• formatXLabel(value, row, index): custom x label formatter.
• formatYLabel(value): custom y-axis label formatter.

Publish to npm

1. Update name and version in package.json.
2. Run package preview:

npm run pack:check

3. Login:

npm login

4. Publish:

npm publish

If package is scoped, use:

npm publish --access public

Author

Syed Haseeb