https://github.com/juanpablodiaz/recharts

Rechart Playground
https://github.com/juanpablodiaz/recharts

data-visualization nextjs react tailwindcss

Last synced: 2 months ago
JSON representation

Rechart Playground

• Host: GitHub
• URL: https://github.com/juanpablodiaz/recharts
• Owner: JuanPabloDiaz
• License: mit
• Created: 2024-03-07T16:37:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-03-11T21:01:03.000Z (over 1 year ago)
• Last Synced: 2025-06-10T19:06:36.006Z (about 1 year ago)
• Topics: data-visualization, nextjs, react, tailwindcss
• Language: JavaScript
• Homepage: https://recharts.jpdiaz.dev
• Size: 605 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Contributing: CONTRIBUTING.md
  • License: license
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


# Recharts Library 📊

Reacharts is a composable charting library for building charts with ease. It is built on top of D3. This library is a wrapper around D3 and it is used to create beautiful charts in React.

Learn more about [Recharts](http://recharts.org/en-US/).



[![](https://img.shields.io/badge/View%20Demo-000?style=for-the-badge&logo=Google-Chrome&logoColor=white)](https://recharts.jpdiaz.dev/)

[![repo](https://img.shields.io/badge/View%20Code-000?style=for-the-badge&logo=GitHub&logoColor=white)](https://stackblitz.com/github.com/JuanPabloDiaz/recharts)



In this repository, you'll find the following charts:

- Line Chart

- Area Chart

- Bar Chart

- Pie Chart

- Scatter Chart

- Composed Chart

- Customized Dot Line Chart

### Desktop View 🖥️



### iPad view 📱



### Mobile view 📱



### Lighthouse Score 🚀



### Built With 🔑

Welcome to the [recharts](https://recharts.jpdiaz.dev), collection.

![Recharts](https://img.shields.io/badge/Recharts-61DAFB.svg?style=for-the-badge&logo=Recharts&logoColor=black)

![Nextjs](https://img.shields.io/badge/Next.js-000?style=for-the-badge&logo=Next.js&logoColor=white)

![Tailwind-CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4.svg?style=for-the-badge&logo=Tailwind-CSS&logoColor=white)

## Get started 🛠️

To get started with [recharts](https://recharts.jpdiaz.dev), simply clone the repository and follow the setup instructions. You'll be up and running in no time!

### Setup 📋

1. Clone the repo

2. Install dependencies

   ```sh

   npm install

   ```

3. Start the development server

   ```sh

   npm run dev

   ```

4. Open [http://localhost:3000/](http://localhost:3000/) with your browser to see the result.

## Contribution 🤝

All contributions are welcome. Please read the [CONTRIBUTING guidelines](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.

### Contributors



## License 📜

[recharts](https://recharts.jpdiaz.dev) is licensed under the MIT License.

I hope you enjoy using the recharts repo!

## Acknowledgments 📚

Resources list that I find helpful and would like to give credit to.

[![Recharts](https://img.shields.io/badge/Recharts-61DAFB.svg?style=for-the-badge&logo=Recharts&logoColor=black)](http://recharts.org/en-US/)

[![YouTube📺](https://img.shields.io/badge/YouTube-FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white)](https://www.youtube.com/watch?v=Fu_YFp-9xoQ)

[![Recharts library](https://img.shields.io/badge/Recharts%20library-000?style=for-the-badge&logo=GitHub&logoColor=white)](https://github.com/CodeSnaps/recharts-library)

[![Tailwind-CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4.svg?style=for-the-badge&logo=Tailwind-CSS&logoColor=white)](https://tailwindcss.com/)

[![Next.js](https://img.shields.io/badge/Next.js-000?style=for-the-badge&logo=Next.js&logoColor=white)](https://nextjs.org/)

[![Vercel](https://img.shields.io/badge/Vercel-000?style=for-the-badge&logo=Vercel&logoColor=white)](https://vercel.com/)

(👆 Top 👆)