Chartly 📊

Beautiful, themed charts for React applications built on top of Recharts.

Features

• 🎨 Multiple Themes: Neomorphism, Glassmorphism, Techno, Cyberpunk, Ocean, Sunset, and Dark Mode
• 📱 Responsive: Charts adapt to container size
• ⚡ TypeScript: Full TypeScript support with type definitions
• 🎯 Easy to Use: Simple API with sensible defaults
• 🔧 Customizable: Extensive customization options
• 📈 Chart Types: Line, Bar, and Area charts

Installation

npm create vite@latest

npm install chartly-charts

Quick Start

import React from 'react';
import { ThemedLineChart } from 'chartly';

const data = [
  { name: 'Jan', value: 4200 },
  { name: 'Feb', value: 3200 },
  { name: 'Mar', value: 2800 },
  { name: 'Apr', value: 3800 },
  { name: 'May', value: 4500 },
];

function App() {
  return (
    <ThemedLineChart
      theme="glassmorphism"
      data={data}
      rounded={true}
      glow={true}
      shadow="medium"
      tooltip
      xAxisLabel="Month"
      yAxisLabel="Sales ($)"
      showGrid={true}
      gridStyle="solid"
      legend
      legendPosition="bottom"
      height={400}
      responsive
      dataKey="value"
      strokeWidth={3}
    />
  );
}

Available Themes

• neomorphism - Soft, elevated design
• glassmorphism - Translucent glass effect
• techno - Neon green tech aesthetic
• cyberpunk - Retro-futuristic design
• ocean - Ocean-inspired blues
• sunset - Warm sunset colors
• darkMode - Clean dark theme

Chart Types

Line Chart

import { ThemedLineChart } from 'chartly';

<ThemedLineChart
  theme="glassmorphism"
  data={data}
  strokeWidth={3}
  // ... other props
/>

Bar Chart

import { ThemedBarChart } from 'chartly';

<ThemedBarChart
  theme="techno"
  data={data}
  barRadius={4}
  // ... other props
/>

Area Chart

import { ThemedAreaChart } from 'chartly';

<ThemedAreaChart
  theme="ocean"
  data={data}
  fillOpacity={0.6}
  // ... other props
/>

Props

All charts share these common props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | any[] | Required | Chart data array | | theme | string | "neomorphism" | Theme name | | rounded | boolean | false | Rounded corners | | glow | boolean | false | Glow effect (techno theme) | | shadow | "small" \| "medium" \| "large" | "medium" | Shadow size | | tooltip | boolean | true | Show tooltip on hover | | xAxisLabel | string | undefined | X-axis label | | yAxisLabel | string | undefined | Y-axis label | | showGrid | boolean | true | Show grid lines | | gridStyle | "solid" \| "dashed" \| "dotted" | "solid" | Grid line style | | legend | boolean | false | Show legend | | legendPosition | "top" \| "bottom" \| "left" \| "right" | "bottom" | Legend position | | width | number | 600 | Chart width | | height | number | 400 | Chart height | | responsive | boolean | true | Responsive behavior | | dataKey | string | "value" | Data key for values | | className | string | "" | Additional CSS classes |

Data Format

Your data should be an array of objects with at least a name property and your data key:

const data = [
  { name: 'Category 1', value: 100 },
  { name: 'Category 2', value: 200 },
  { name: 'Category 3', value: 150 },
];

License

MIT © Shoari