Installation

how to install evilcharts & use it in your project

EvilCharts is designed to be a plug-and-play solution for beautiful, interactive charts in your Next.js projects. You don't need any complex setup or high-end configuration—just follow these simple steps to get started with stunning data visualizations in minutes.

Steps

1

Install Recharts

Install Recharts, the charting library that powers EvilCharts. This is a required dependency for all chart components.

Learn more at the Recharts installation guide.

npm install recharts
2

Setup shadcn/ui

Initialize shadcn/ui in your project. This sets up Tailwind CSS, theme configuration, and component structure. Skip this step if you already have shadcn/ui installed.

Check out the shadcn/ui Next.js installation docs for more details.

npx shadcn@latest add init
3

Add EvilCharts Components

Add chart components to your project using the CLI. Replace {chart-name} with your desired chart type (e.g., area-chart, bar-chart, line-chart, pie-chart). The CLI will install all necessary files and dependencies.

npx shadcn@latest add @evilcharts/{chart-name}