Integrate ZoomCharts with
Next.js and TypeScript

Using ZoomCharts React wrapper component

Set up the Development Enviroment

To set up your development environment, you can basically follow the Next.js installation steps here or proceed with the main steps below.

This tutorial assumes that you already have installed Node.js and that you are familiar with Terminal.

Navigate to the folder where you would like your new project to be nested.

mkdir projectContainer && cd projectContainer

Run the following command to automatically create everything regarding your new project. Then follow the prompts.

npx create-next-app@latest

For this tutorial, we want to use TypeScript, so make sure to respond "Yes" when the prompt about using TypeScript appears.

Would you like to use TypeScript? Yes

After this, your project should have a ready-to-use structure.

Install TypeScript if it is not already installed on your system. Install using brew or your preferred method.

brew install typescript

Run the development server

To start the development server, run the following command:

npm run dev

It will display the link that you can copy into your browser to view the project.

Install ZoomCharts

Install ZoomCharts React wrapper using NPM:

npm install @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.

Test it

Now, open the project in browser (http://localhost:3000/). You should see a ZoomCharts TimeChart visualization.

Integrate ZoomCharts withNext.js and TypeScript