LineChart

Reusable React + D3 multi-series line chart with a fast nearest-point tooltip, clickable legend toggles, and generic datum accessors.

Public API

• Default export: LineChart
• Type exports: LineChartProps, LineChartSeries, LineChartDatum, LineChartXValue, LineChartXScale

Import

import LineChart, { type LineChartSeries } from "@goacgras/line-chart";
import "@goacgras/line-chart/style.css";

Basic usage

import LineChart, { type LineChartSeries } from "@goacgras/line-chart";
import "@goacgras/line-chart/style.css";

type TrafficDatum = {
  timestamp: Date;
  sessions: number;
};

const dataSets: LineChartSeries<TrafficDatum>[] = [
  {
    id: "search",
    label: "Search",
    color: "#2f6a4a",
    data: [
      { timestamp: new Date("2025-01-01T00:00:00Z"), sessions: 180 },
      { timestamp: new Date("2025-01-01T01:00:00Z"), sessions: 192 },
    ],
  },
];

export function Example() {
  return (
    <LineChart
      dataSets={dataSets}
      getX={(datum) => datum.timestamp}
      getY={(datum) => datum.sessions}
      legendPosition="bottom"
      lineStrokeWidth={1.5}
      hoverPointRadius={3.5}
      hoverPointStrokeWidth={2}
    />
  );
}

Notes for publishing

• The component stylesheet lives in LineChart.css and should be shipped with the package.
• The package lives in its own standalone line-chart-package project folder and is not wired through npm workspaces.
• Build the package from this project root with npm run build.
• react and react-dom are peer dependencies. d3 is a runtime dependency.

Recommended local development workflow

Use the included playground app for fast iteration, then run a tarball check before you publish.

1. Install dependencies

From the package root:

npm install
npm run playground:install

2. Run the library build in watch mode

In one terminal from the package root:

npm run dev:lib

This keeps dist/ updated as you edit the component source.

3. Run the real React consumer app

In a second terminal from the package root:

npm run dev:playground

The playground imports the package through a local file:.. dependency, so you can validate it from a separate React app before publishing.

4. Run a publish-like check

Before publishing, generate the exact package tarball and inspect or install it elsewhere:

npm run pack:check

That creates a .tgz file with the same contents npm would publish.