Creating a Topic Graph with React ApexCharts in Next.js

Topic Graph with React ApexCharts in Next.js

React ApexCharts is a powerful charting library that allows developers to create beautiful and interactive charts. When integrating it with Next.js, a popular React framework, you may encounter challenges due to server-side rendering. Here’s how you can overcome them and successfully implement a topic graph.

Getting Started

Before starting our project we should have the following prerequisites in our local system.

Prerequisites:

• Node.js(version >= 18.17.0) nodejs
• Bun package manager Bun installation
• Git version controller Git

Creating and setting up Next-js project:

We are using create-next-app, which sets up everything automatically for us. We want to start with a TypeScript in our project so we should use the --typescript flag. To create a project, run:

# I am using bun as package manager
yarn create next-app --typescript
# or
npx create-next-app@latest --typescript
# or
pnpm create next-app --typescript
# or
bun create next-app --typescript

For more about NextJs application, you can visit next-js official documentation here.

Here I am using bun package manager:

bun create next-app

During the process, you will be prompted to choose which features to enable for the project. Make sure to select “Yes” for TypeScript and ESLint. Additionally, you will be asked if you would like to use the src/ directory and the experimental app/ directory. I have chosen “Yes” for src/ directory options and “Yes” for app/ directory options. For the import alias, simply press Tab and Enter to accept.

🎉 Bravo, our basic next-app setup has been completed.

Install ApexCharts and Its React Wrapper

ApexCharts and its React wrapper can be added to your project via npm:

bun add react-apexcharts apexcharts

Configure ApexCharts with SSR in Next.js

Since Next.js pre-renders pages on the server, libraries that use the window object, like ApexCharts, needs special handling. We’ll use dynamic imports to ensure our chart only loads on the client side:

// components/TopicGraph.tsx

"use client";
import dynamic from "next/dynamic";
import { ApexOptions } from "apexcharts";
import React from "react";

// Dynamically import ApexCharts with SSR disabled for Next.js compatibility
const ApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });

// Define the props interface for type safety and IntelliSense in TypeScript
interface TopicGraphProps {
  series: {
    name: string;
    data: number[];
  }[];
  categories: string[];
}

// Functional component for the Topic Graph using TypeScript
const TopicGraph: React.FC<TopicGraphProps> = ({ series, categories }) => {
  // Chart configuration options using ApexOptions type for type safety
  const options: ApexOptions = {
    chart: {
      type: "line", // Define the chart type
      height: 350, // Set the height of the chart
      zoom: {
        enabled: true, // Enable zooming feature on the chart
      },
    },
    xaxis: {
      categories: categories, // Set the categories for the x-axis from props
    },
    stroke: {
      curve: "smooth", // Define the line curve as smooth
    },
    title: {
      text: "Trending Topics Over Time", // Chart title
      align: "left", // Align the title to the left
    },
    markers: {
      size: 5, // Set the size of the markers on the chart
    },
    tooltip: {
      enabled: true, // Enable tooltips
      x: {
        format: "dd/MM/yy HH:mm", // Set the format for the tooltip's x-value
      },
    },
  };

  // Render the ApexChart component with the provided options and series
  return (
    <div className="flex items-center justify-center">
      <div className="p-4 w-9/12 shadow-lg rounded-lg bg-white">
        <ApexChart options={options} series={series} type="line" />
      </div>
    </div>
  );
};

export default TopicGraph;

Implement the Chart in a Next.js Page

With the TopicGraph component ready, you can now import and use it within your Next.js pages:

// pages/index.tsx
import TopicGraph from '../components/TopicGraph';
import React from 'react';

const Home: React.FC = () => {
   // Data series for the chart
  const series = [{
    name: 'Topic Popularity', // Name of the series
    data: [23, 44, 56, 75, 56, 55, 60, 69] // Data points for the series
  }];

  // Categories for the x-axis
  const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'];

  return (
    <div className="mx-auto mt-8">
      <h1 className="text-3xl font-bold underline mb-4">Topic Graph Visualization</h1>
      <TopicGraph series={series} categories={categories} />
    </div>
  );
};

export default Home;

Run Project in Local

To start the dev server with Bun, run bun --bun run dev from the project root.

bun --bun run dev

To run the dev server with Next instead, omit --bun.

bun run dev

Open http://localhost:3000 with your browser to see the result. Any changes you make to (pages/app)/pages.tsx will be hot-reloaded in the browser.

Output

Topic Graph with React ApexCharts in Next.js

Conclusion

Following these steps, you can seamlessly integrate React ApexCharts into your Next.js project and create a topic graph. Remember to dynamically import the chart component to avoid issues with server-side rendering.

For more detailed instructions and troubleshooting, refer to the official documentation or explore additional React-ApexCharts examples.

Repo Link:https://github.com/RaazeshP96/react_apex_chart_demo
Demo Link:https://react-apex-chart-demo-6thy.vercel.app/

Thank you 🎉 🎉 🎉