Installation

Install @revolist/charts to use charts independently of Pivot, RevoGrid and Pro. Charts is a commercial package distributed through GitHub Packages.

Configure package access

Use your existing licensed repository and package access. If your project is not configured yet, follow the GitHub Packages installation guide. Configure the @revolist scope in your project’s .npmrc:

@revolist:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

Set GITHUB_PACKAGES_TOKEN in your local environment or CI secret store with package-read access. Keep the actual token out of application code and source control.

Install Charts

pnpm add @revolist/charts

The package manager installs Charts’ runtime dependency automatically. You do not need a Pivot package, grid component, framework wrapper or grid stylesheet. Use the ESM imports below with your application’s build tool.

Choose an import

Import	Use it for
@revolist/charts/line	A line definition and a factory fixed to that type. Every built-in type has an equivalent subpath.
@revolist/charts/core	Lightweight composition, row conversion, neutral contracts and lifecycle utilities. Register the definitions you need.
@revolist/charts	The full built-in catalog with a createChart factory that can switch types.
@revolist/charts/catalog	Catalog metadata and preview datasets for a gallery or chart picker.

Start with one type or /core plus a small set of definitions. Import the full catalog when your application needs all built-in renderers. The overview lists all per-type subpaths.

Mount your first chart

Create a host with an explicit height:

<div id="chart" style="width: 100%; height: 360px;"></div>

Run this code after the element is mounted:

import { createLineChart } from '@revolist/charts/line';

const chart = await createLineChart({
  container: document.getElementById('chart')!,
  data: [
    { month: 'Jan', revenue: 120 },
    { month: 'Feb', revenue: 180 },
    { month: 'Mar', revenue: 160 },
  ],
  mapping: {
    category: { field: 'month' },
    series: [{ field: 'revenue', label: 'Revenue' }],
  },
  presentation: { title: 'Monthly revenue' },
});

// Call when your application removes the host.
function unmount() {
  chart.destroy();
}

In Vue or React, create the chart inside the mounted/effect lifecycle and destroy it in cleanup. In Angular, create it after the view initializes and destroy it with the component. Modules can be imported during server rendering, but chart creation requires a browser DOM host; create it only on the client.

Check the result

A working integration renders a chart inside the host and adapts when the host resizes. This live example uses the same public package APIs:

Load forecastDownload CSVDownload SVG

Loading chart…

If the chart does not appear:

• Confirm the host exists, is visible, and has a non-zero width and height.
• Await the factory and handle rejected promises. Numeric strings, missing values, duplicate category keys or unsupported bindings can reject input.
• Check the package registry and access token if installation returns an access error.
• Match the subpath’s kebab-case name, such as /grouped-column or /box-plot.

Optional integrations

These subpaths keep optional runtimes and assets out of ordinary chart imports:

Import	What your application supplies
@revolist/charts/echarts	An initialized ECharts runtime for the adapter’s supported chart types.
@revolist/charts/vector-pdf	A vector PDF encoder runtime. Native raster PDF export needs no additional PDF backend.
@revolist/charts/geographic	A geographic provider, projection and map assets for its supported types.

Install optional backend libraries only when your application uses that integration. Inspect the adapter’s capabilities before enabling a chart type or export format in your UI.

Next: Data & Configuration explains rows, advanced datasets, styling, updates and cleanup. Or explore the complete live catalog.

Framework components

For declarative rendering and automatic lifecycle management, use the framework wrappers @revolist/react-charts, @revolist/vue-charts, @revolist/angular-charts or @revolist/svelte-charts. See framework components for examples, reactive configuration and local workspace setup before publication. After the first release, that guide covers installing the public wrappers alongside the private engine. These packages share a scope across two registries, so follow the explicit tarball installation steps in that guide. No wrapper trial packages are required.