Integrate ZoomCharts with
Next.js and TypeScript

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 using NPM:

npm i @dvsl/zoomcharts

Create a Component and include it in a page

Make a 'components' directory in the root of the project.

mkdir components

Inside that folder, create a new Component file ZoomChartsComponent.tsx with the following content:

TypeScript


"use client";
import React from 'react';
import { useEffect, useRef } from "react";
import "@dvsl/zoomcharts";

interface ZoomChartsComponentProps {
    // Define your props and their types here
    height: number; // Optional prop
    children?: React.ReactNode;
}

// Zoomcharts license and license key
window.ZoomChartsLicense = "";
window.ZoomChartsLicenseKey = "";
  
const ZoomChartsComponent: React.FC<ZoomChartsComponentProps> = ({
    height = 0,
    children
}) => {
    const chartRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!chartRef.current) return;

            const t = new TimeChart({
                assetsUrlBase: "/zoomcharts/lib/assets/",
                container: chartRef.current,
                area: { height: height },
                data: [
                    {
                        preloaded: {    
                            values: [
                                ["2017-01-09 00:00:00", 100],
                                ["2017-01-20", 200],
                                [1485907200, 300],
                                ["2017-02-05 15:20:00", 400],
                                ["2017-02-15 22:59:59", 500]
                            ],
                            dataLimitFrom: "2017-01-09 00:00:00",
                            dataLimitTo: "2017-02-15 22:59:59",
                            unit: 's',
                            from: "2017-01-09 00:00:00",
                            to: "2017-02-15 22:59:59"
                        }
                    }
                    ]
                });

            return () => t.remove(); // Cleanup
        }, []);

    return <div ref={chartRef} />;
};

export default ZoomChartsComponent;

Create a page where to import and use new component - page.tsx. Afterwards, put the following content inside it:

JavaScript


import ZoomChartsComponent from '@/components/ZoomChartsComponent';

export default function Page() {
    return (
        <>
            <ZoomChartsComponent height={400}>
            </ZoomChartsComponent>
        </>
    )
    
}

Make ZoomCharts assets available

In the component, we have defined assetsUrlBase: "/zoomcharts/lib/assets/". That will be the path inside the project's public folder where you should place the ZoomCharts assets. You can either copy the 'assets' folder and modify assetsUrlBase or just create a symlink to the ZoomCharts module.

cd public
ln -s ../node_modules/@dvsl/zoomcharts

Test it

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

Integrate ZoomCharts withNext.js and TypeScript