Demo NextJS Recharts

Guide setup Recharts

Getting Started • Documentation • Need Help? • About • License

Introduction

AG Grid is a feature rich datagrid designed for the major JavaScript Frameworks.

Key Features

• Next JS
• Recharts
• react-bootstrap

Usage

# install libs
yarn
# run dev
yarn dev
# generate
yarn export

Getting Started

Structure

.
├── 📁 assets
│   ├── 📁 styles
│   │   └── 📝 globals.scss
│   └── 📁 images
├── 📁 auth
│   ├── 📝 fireinit.jsx
│   ├── 📝 index.jsx
│   └── 📝 routes.jsx
├── 📁 components
│   ├── 📁 common
│   └── 📁 partials
├── 📁 layouts
│   ├── 📁 components
│   └── 📝 default.jsx
├── 📁 pages
│   ├── 📝 _app.jsx
│   ├── 📝 index.jsx
│   ├── 📝 login.jsx
│   └── 📝 user.jsx
├── 📁 public
├── 📁 shared
│   ├── 📝config.jsx
│   └── 📁 services
├── 📝 jsconfig.js
├── 📝 next.config.js
└── 📝 README.md

Prerequisites

• Node.js
• yarn

Documentation

API

1. Install lib

yarn add recharts

2. Add example

import { LineChart, Line } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];

const App = () => {
  return (
    <LineChart width={400} height={400} data={data}>
      <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    </LineChart>
  );
};

export default App;

Performance and testing

Any of testing activities and reports goes here.

Support

Get Help

You have a question or problem wasn't solved? No worries! Just open up a new issue in the GitHub issue tracker. Please provide all information to reproduce your problem. If you don't have a GitHub account, you can contact me directly.

About

Known Issues

• none (that are reported)

Contact

If you haven't done so already, please check out Get Help for the fastest possible help on your issue. Alternatively you can get in touch with me by:

• Email: phanminhtam1992@gmail.com

License

This project is proudly licensed under the MIT license.