React ZoomCharts

A React wrapper for the ZoomCharts SDK, providing easy-to-use React components for creating interactive charts and visualizations.

Installation

npm install @dvsl/react-zoomcharts

or

pnpm add @dvsl/react-zoomcharts

or

yarn add @dvsl/react-zoomcharts

Importing Assets

To use the built-in default styling, import the appropriate CSS file.

For PieChart, TimeChart, NetChart and FacetChart

Import zc.css for default styling:

import "@dvsl/react-zoomcharts/zc.css";

For GeoChart

Import leaflet.css for default styling:

import "@dvsl/react-zoomcharts/leaflet.css";

API Reference

Generic Chart Component

The Chart component accepts a type prop and corresponding settings:

import { Chart } from "@dvsl/react-zoomcharts";

<Chart
  type={"PieChart"}
  settings={pieChartSettings}
  ref={chartRef}
/>

Typed Chart Components

For better TypeScript support and IDE autocomplete, use the specific chart components:

import { PieChart, TimeChart, NetChart, FacetChart, GeoChart } from "@dvsl/react-zoomcharts";

// Each component is pre-configured for its chart type
<PieChart settings={pieSettings} ref={pieRef} />
<TimeChart settings={timeSettings} ref={timeRef} />
<NetChart settings={netSettings} ref={netRef} />
<FacetChart settings={facetSettings} ref={facetRef} />
<GeoChart settings={geoSettings} ref={geoRef} />

Props

All chart components accept the following props:

| Prop | Type | Description | |------|------|-------------| | settings | SettingsForType<T> | Chart configuration object (see ZoomCharts documentation) | | ref | ForwardedRef | React ref to access the underlying chart instance |

Chart Configuration

Each chart type accepts different settings based on the ZoomCharts SDK. Refer to the ZoomCharts Documentation for detailed configuration options.

Accessing Chart Instance

Use React refs to access the underlying ZoomCharts instance for advanced operations:

import { useRef } from "react";
import { PieChart } from "@dvsl/react-zoomcharts";

function AdvancedChart() {
  const chartRef = useRef<PieChart>(null);

  const expandRandomSlice = () => {
    if (chartRef && chartRef.current) {
      const allSlices = chartRef.current.getActivePie().allSlices;
      const slice = allSlices[Math.floor(Math.random() * allSlices.length)];
      chartRef.current.expandSlice(slice);
    }
  };

  return (
    <div>
      <button onClick={expandRandomSlice}>Expand Random Slice</button>
      <PieChart ref={chartRef} settings={pieSettings} />
    </div>
  );
}

License Configuration

This package is a wrapper around ZoomCharts SDK. Please ensure you have a valid ZoomCharts license for production use. Make sure to configure your ZoomCharts license:

// In your main application file or index.html
window.ZoomChartsLicense = "your-license";
window.ZoomChartsLicenseKey = "your-license-key";