Add CanvasJS Charts to your Next.js Application

Next.js is a popular React framework known for its server-side rendering (SSR) capabilities, which offers SEO benefits and improved performance. However, when it comes to integrating JavaScript libraries that rely on the browser environment, such as CanvasJS React Charts, some additional considerations are necessary. CanvasJS provides beautiful and interactive charts, which can elevate the data visualization experience in web applications. In this article, we’ll guide you through the process of integrating CanvasJS charts into your Next.js project, taking into account the intricacies of server-side and client-side rendering inherent to Next.js.

Installing the CanvasJS React Package

Before diving into the code, let’s set up the foundation by installing the necessary package. Run the following command in the root directory of your Next.js application:

npm install @canvasjs/react-charts --save
# or
yarn add @canvasjs/react-charts

This command will add @canvasjs/react-charts to your project’s dependencies, ensuring that you can use the CanvasJS components within your React components.

Create Chart Component

With the package installed, the next step is to create a chart component that will encapsulate the CanvasJS chart configuration and rendering logic. Here’s an example of a basic chart component:

// components/ColumnChart.js
import React, { Component } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';

var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class App extends Component {
  render() {
    const options = {
      theme: 'light1', // "light2", "dark1", "dark2"
      animationEnabled: true,
      title: {
        text: 'Basic Column Chart in Next.js'
      },
      data: [{
          type: 'column',
          dataPoints: [
            { label: 'apple', y: 10 },
            { label: 'orange', y: 15 },
            { label: 'banana', y: 25 },
            { label: 'mango', y: 30 },
            { label: 'grape', y: 28 }
          ]
       }]
    };
    const containerProps = {
      width: '80%',
      height: '360px',
      margin: 'auto'
    };
    return (
      <div>
        <CanvasJSChart
          options={options}
          containerProps={containerProps}
          onRef={(ref) => (this.chart = ref)}
        />
      </div>
    );
  }
}

export default App;

We define an options object that contains the configuration for our chart, such as the title, type, and data points. The CanvasJSChart component, recognized from the imported library, takes this options object as a prop and renders the chart accordingly.

Implementing the Chart in Next.js Pages

With the chart component set up, we can now integrate it into our Next.js pages or components. This is as simple as importing the column-chart component and including it in our JSX:

// pages/index.js
import React from ‘react’;
import ColumnChart from ‘…/components/ColumnChart’;

const HomePage = () => {
  return (
    <div>
      <h1>My Data Visualization</h1>
      <ColumnChart />
    </div>
  );
};

export default HomePage;

When you navigate to the homepage, you will see your data visualized using a CanvasJS chart.

Handling Server-Side Rendering

One of the variations of Next.js is its server-side rendering feature, which can cause issues with libraries that depend on the browser’s window object. To circumvent SSR for our chart component and render it only on the client-side, we’ll make use of Next.js’ dynamic imports with ssr: false

// components/ColumnChart.js
import React, { Component } from 'react';
import dynamic from "next/dynamic";

var CanvasJSChart = dynamic(
  () =>
    import('@canvasjs/react-charts').then((mod) => mod.default.CanvasJSChart),
  { ssr: false }
);

class App extends Component {
  render() {
    const options = {
      theme: 'light1', // "light2", "dark1", "dark2"
      animationEnabled: true,
      title: {
        text: 'Basic Column Chart in Next.js'
      },
      data: [{
          type: 'column',
          dataPoints: [
            { label: 'apple', y: 10 },
            { label: 'orange', y: 15 },
            { label: 'banana', y: 25 },
            { label: 'mango', y: 30 },
            { label: 'grape', y: 28 }
          ]
       }]
    };
    const containerProps = {
      width: '80%',
      height: '360px',
      margin: 'auto'
    };
    return (
      <div>
        <CanvasJSChart
          options={options}
          containerProps={containerProps}
          onRef={(ref) => (this.chart = ref)}
        />
      </div>
    );
  }
}

export default App;

This change ensures that the chart component, which requires the window object, is only executed on the client side, thereby avoiding any SSR conflicts. Below is a working example of the same.