Next.js Quick Start Guide

Adding interactive graphs and charts

There are many graph/chart libraries available on the market, but for the sake of an example, we will use the one that is truly React-based and can deliver high performance.

1. The first step, as usual, is installation:

      $ npm i react-vis --save

2. Next, let's create a simple graph on the index page.

We need to add library styles (this assumes that you have added the with Css plugin in the previous step):

      import "react-vis/dist/style.css";

3. Next, let's implement a simple graph; we should import the required parts:

      import {HorizontalGridLines, LineSeries, XAxis, XYPlot, YAxis} from 'react-vis';

4. Then, we can add a graph implementation, so the resulting page will look like this:

      // pages/index.js ... ...