chart

Integrate ZoomCharts using React

Using ZoomCharts React wrapper component

Get Examples from Github

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

Installation

You need to set up your development before you can do anything. Install Node.js® and npm if they are not already on your machine.

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";

View Examples on Github

Download a ready to use examples from Github. See how to use the component in a real-world application with Vite.

View Examples on Github