Framework components

Use one generic RevoChart component from the package for your framework:

Framework	Package	Ready notification
React 19	@revolist/react-charts	onReady(chart)
Vue 3	@revolist/vue-charts	@ready="handler"
Angular 22	@revolist/angular-charts	(ready)="handler($event)"
Svelte 5	@revolist/svelte-charts	onReady(chart)

Installation

The four wrapper packages are configured for public npm publishing. @revolist/charts remains a private commercial package on GitHub Packages; you need licensed access to install and use it. The wrapper imports the engine and does not bundle it.

Before publication: local development

The wrapper packages are not published yet. Public npm package names and tarball URLs will fail until the first release. Inside this monorepo, use workspace links instead. From the repository root, replace your-app with your consumer workspace name and choose your wrapper:

wrapper=react-charts # or vue-charts, angular-charts, svelte-charts
pnpm --filter your-app add "@revolist/$wrapper@workspace:*" "@revolist/charts@workspace:*"
pnpm build

The wrappers live in packages/charts/packages/ and still import as @revolist/react-charts, @revolist/vue-charts, @revolist/angular-charts or @revolist/svelte-charts. Root pnpm build compiles them automatically.

After publication: install from the registries

Configure your project’s .npmrc for the engine, keeping credentials in your environment:

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

Choose your wrapper and release version, then install both packages:

wrapper=react-charts # or vue-charts, angular-charts, svelte-charts
version=3.0.0

pnpm add "@revolist/charts@$version" \
  "https://registry.npmjs.org/@revolist/$wrapper/-/$wrapper-$version.tgz"

The wrapper URL selects public npm while .npmrc routes the private engine to GitHub Packages. Both packages use the same scope, so a plain package-name install cannot select the two registries separately. Keep their versions matched and commit your lockfile. CI installs also need GITHUB_PACKAGES_TOKEN.

React

const options = {
  chartType: 'line',
  data: [{ month: 'Jan', revenue: 120 }, { month: 'Feb', revenue: 180 }],
  mapping: {
    category: { field: 'month' },
    series: [{ field: 'revenue', label: 'Revenue' }],
  },
} satisfies ChartComponentOptions;

import { RevoChart, type ChartComponentOptions } from '@revolist/react-charts';
// Use the options above in your component:
<RevoChart options={options} onReady={chart => console.log(chart.model)}
  style={{ height: 400 }} className="sales-chart" />

Vue

<script setup lang="ts">
import { shallowRef } from 'vue';
import { RevoChart, type ChartComponentOptions } from '@revolist/vue-charts';
const options = shallowRef<ChartComponentOptions>({
  chartType: 'line',
  data: [{ month: 'Jan', revenue: 120 }, { month: 'Feb', revenue: 180 }],
  mapping: { category: { field: 'month' }, series: [{ field: 'revenue' }] },
});
</script>
<template>
  <RevoChart :options="options" @ready="chart => console.log(chart.model)"
    style="height:400px" class="sales-chart" />
</template>

Angular

import { Component } from '@angular/core';
import { RevoChart, type ChartComponentOptions, type ChartRef } from '@revolist/angular-charts';
@Component({
  selector: 'sales-chart',
  standalone: true,
  imports: [RevoChart],
  template: '<revo-chart [options]="options" (ready)="onReady($event)" style="height:400px" />',
})
export class SalesChart {
  options: ChartComponentOptions = {
    chartType: 'line',
    data: [{ month: 'Jan', revenue: 120 }, { month: 'Feb', revenue: 180 }],
    mapping: { category: { field: 'month' }, series: [{ field: 'revenue' }] },
  };
  onReady(chart: ChartRef) { console.log(chart.model); }
}

Svelte

<script lang="ts">
  import { RevoChart, type ChartComponentOptions } from '@revolist/svelte-charts';
  let options = $state.raw<ChartComponentOptions>({
    chartType: 'line',
    data: [{ month: 'Jan', revenue: 120 }, { month: 'Feb', revenue: 180 }],
    mapping: { category: { field: 'month' }, series: [{ field: 'revenue' }] },
  });
</script>
<RevoChart {options} onReady={chart => console.log(chart.model)}
  style="height:400px" class="sales-chart" />

Updates and lifecycle

options has type Omit<ChartOptions, 'container'>. It accepts the same rows and mapping, dataset, saved model, renderer, data source and chart settings as @revolist/charts. Existing callbacks such as onNodeClick, onChange and onError belong inside options. Callback replacements take effect without recreating a chart.

Replace options and changed nested values to update the chart; do not mutate nested objects in place. In Vue, replace the ref value; in Svelte, prefer $state.raw for chart configuration. Ordinary data/settings changes update the current chart. Source replacements use setDataSource. Initialization settings, input-mode changes and removed settings recreate it to restore engine defaults.

The host defaults to width 100% and height 300px. Override its dimensions with framework styles. The engine observes resizing. No stylesheet, element registration or manual mount call is needed.

The readiness callback/event receives ChartRef for download, getCSV, getImageDataURL, selection and transactions. It fires again after recreation; replace any stored ref on each readiness event. The component owns destruction, so do not destroy its ref yourself.

Creation and updates are asynchronous. Pending work is cancelled on unmount or superseding configuration, and stale results are destroyed. Failures call options.onError, or console.error when no error handler is supplied. Server rendering produces an empty host; chart creation starts after client mounting.

Builds and distribution

Components compile with your application; no generator or separate chart build step is required. Releases publish the wrappers as public npm packages, with the private chart engine as an external dependency. Public wrapper access does not grant access to the engine. There are no separate wrapper trial packages.

Shared adapter support

@revolist/charts/framework exports ChartComponentOptions, ChartComponentController and createChartComponentController(container, onReady). The adapters use setOptions(options) and destroy() on this shared controller. setOptions resolves after processing the configuration; rendering failures are reported through onError. The optional chart getter exposes the current ref. Most applications should use their framework component directly.