Rendering Charts Using Next.js

FusionCharts is a JavaScript charting library that helps you to visualize data in the form of charts on your browser. On the other NextJs is one of the widely used server-side components for React ecosystem.

In this story, we would be sharing how to render charts using Next js

Assumption: You have Next JS & Node installed.

Step 1 : Install fusioncharts & react-fusioncharts
npm install fusioncharts react-fusioncharts --save

Step 2: Preparaing the data, here we would be visualizing a simple column2d chart using a static data source, you can check the other supported charts from here.

Step 3: Creating the component.

Step 4: Importing the component to the parent component

import dynamic from "next/dynamic.js";
const FC = dynamic(() => import("./next-fusioncharts.js"), { ssr: false });
export default function Index() {
return (
<div>
<h2>Column Chart Using Next JS</h2>
<FC></FC>
</div>
);
}

Step 5: That's all, simple right?? now let's render the app
npm run dev

The awesome chart below :

If you face any difficulty while implementing the app, please clone the GitHub repo: https://github.com/AyanBhadury/nextjs-fusioncharts

Learn more about FusionCharts from here: https://www.fusioncharts.com/features