Skip to content
InsightCharts

Search

Search guides and components

Get started

Installation

Install the npm package, or copy component source into your project with the shadcn CLI.

npm package

Install the library and ECharts.

npm package
$ pnpm add insightcharts echarts

react and react-dom (18 or later) and echarts (6 or later) are peer dependencies. There is no stylesheet to import and no Tailwind setup: the small amount of CSS the figure chrome needs is injected once at runtime.

import { BarChart } from "insightcharts";

The package has five entry points.

ImportContents
insightchartsEverything: components, Insight and registerAll, the engine, data helpers, Scrolly, the theme presets.
insightcharts/coreThe engine: Chart, Figure, defineChart, InsightProvider, InsightData, theme and export helpers, and the layout helpers useContainerWidth, measureText, truncateText, wrapText and dodge.
insightcharts/dataloadData, transformRows, parseCsv and the other data helpers. Server-safe.
insightcharts/storyScrolly.
insightcharts/themesthemes, themeSurfaces, presetThemes, each preset by name (editorialTheme, ledgerTheme, ...), shadcnTheme, defaultTheme, createTheme.

shadcn registry

To copy the component source into your project so you can edit it, use the shadcn CLI. The components are published under the @insightcharts namespace. Add the registry to components.json once:

components.json
{
  "registries": {
    "@insightcharts": "https://insightcharts.dev/r/{name}.json"
  }
}

Then add components by name.

shadcn CLI
$ pnpm dlx shadcn@latest add @insightcharts/bar-chart

The CLI copies the component file into your project and installs insightcharts and echarts, because the engine (data loading, theming, the figure chrome) still comes from the package. Every component page has the exact command for that component, and the registry index lists everything available.

Next.js and server components

The built insightcharts, insightcharts/core, insightcharts/story and insightcharts/themes modules start with "use client", so you can import a chart into a server component and pass it serialisable props. insightcharts/data has no client directive and runs anywhere, including server components and plain Node.

app/page.tsx
import { LineChart } from "insightcharts";
import { loadData } from "insightcharts/data";

export default async function Page() {
  const rows = await loadData("https://example.com/energy.csv");
  return <LineChart data={rows} x="year" y="solar" title="Solar generation by year" />;
}

Function props (onSelect, onEvents, onReady, a function option, format, transform or data) cannot cross the server/client boundary. Put the chart in a file that starts with "use client" when you need them.

Requirements

  • React 18 or later.
  • ECharts 6 or later.
  • Any bundler that understands ES modules. The package is ESM only.