Evil Charts

Overview

Evil Charts is an open-source, animated React chart component library built with Recharts, Apache ECharts, shadcn/ui, and Tailwind CSS by design engineer Gurbinder (Axiom.co). Created to solve the ubiquitous problem of dull, generic dashboard charts, Evil Charts delivers handcrafted data visualizations with fluid entrance reveals, gradients, and spring animations. Built with a dual-engine architecture, it lets developers seamlessly toggle between DOM-based Recharts and Canvas-powered ECharts without changing component APIs.

Key Features

• Dual-Engine Architecture: Ships every chart component on both Recharts (SVG/DOM inspectable) and Apache ECharts (Canvas-accelerated for dense live data) under an identical compound API.
• Motion-Driven Aesthetics: Handcrafted with smooth reveals, glowing gradients, dynamic patterns, and seamless light/dark mode color transitions.
• Copy-and-Paste Architecture: Fully compatible with the shadcn registry format. Run a single CLI command to install components directly into your codebase.
• Full Chart Coverage: Includes Area Charts, Bar Charts, Line Charts, Radar, Radial progress indicators, Composed Charts, and Sankey diagrams.

Installation & Quick Start

# Add a Recharts-based area chart via shadcn CLI
npx shadcn@latest add @evilcharts/recharts-area-chart

# Or add the Apache ECharts version for dense data workloads
npx shadcn@latest add @evilcharts/echarts-area-chart

import React from 'react';
import { EvilAreaChart } from '@/components/charts/recharts-area-chart';

const chartData = [
  { month: 'Jan', revenue: 186, profit: 80 },
  { month: 'Feb', revenue: 305, profit: 200 },
  { month: 'Mar', revenue: 237, profit: 120 },
  { month: 'Apr', revenue: 373, profit: 290 },
];

const chartConfig = {
  revenue: { label: 'Monthly Revenue', color: 'hsl(var(--primary))' },
  profit: { label: 'Net Profit', color: 'hsl(var(--chart-2))' },
};

export function FinancialOverview() {
  return (
    <div className="p-6 rounded-2xl border bg-card">
      <h3 className="text-base font-semibold mb-4">Financial Growth Overview</h3>
      <EvilAreaChart data={chartData} config={chartConfig} />
    </div>
  );
}

Why Choose Evil Charts?

1. Unrivaled Aesthetic Quality: Stand out from default, uninspired dashboards with carefully tuned typography, glowing visual accents, and refined spring physics.
2. Flexible Performance Scaling: Start with declarative SVG Recharts, and switch performance-critical charts to Canvas ECharts in minutes with zero API rewrite.