eglador-ui-react-chart

A modern, opinionated chart components library built on Recharts and Tailwind CSS v4 — plus a set of pure-SVG primitives (no recharts) for tile/card embedded visualizations.

Features

• Config-driven API — data, xKey, series props with minimal boilerplate
• TypeScript-first — full type safety on Recharts options
• Tailwind v4 native — default palette, optional per-series override
• Responsive by default — responsive={false} for fixed sizing
• Full Recharts power — margin, barCategoryGap, reverseStackOrder, startAngle/endAngle and more, all exposed
• 8 chart types + 4 SVG primitives — Line, Bar, Area, Pie, Doughnut, Radar, RadialBar, Treemap + Sparkline, SparkBar, HeatmapCalendar, GaugeChart

Installation

npm install eglador-ui-react-chart

Peer dependencies: react ^19 · react-dom ^19 · tailwindcss ^4

Setup

Add the following to your global stylesheet so Tailwind picks up the component classes:

@import "tailwindcss";
@source "../node_modules/eglador-ui-react-chart";

The @source path is relative to the CSS file location:

| Framework | CSS file location | Path | |---|---|---| | Next.js (App Router) | app/globals.css | ../node_modules/eglador-ui-react-chart | | Next.js (src/) | src/app/globals.css | ../../node_modules/eglador-ui-react-chart | | Vite + React | src/index.css | ../node_modules/eglador-ui-react-chart |

Quick Start

import { LineChart } from "eglador-ui-react-chart";

const data = [
  { month: "Jan", revenue: 4200 },
  { month: "Feb", revenue: 3100 },
  { month: "Mar", revenue: 5800 },
  { month: "Apr", revenue: 4900 },
  { month: "May", revenue: 6300 },
  { month: "Jun", revenue: 7200 },
];

export function MyChart() {
  return (
    <LineChart
      data={data}
      xKey="month"
      series={[{ key: "revenue", label: "Revenue", color: "#3b82f6" }]}
      showGrid
      showTooltip
      showLegend
    />
  );
}

Charts (recharts-based)

| Component | Use case | |---|---| | LineChart | Time series, trends, multi-series comparison | | BarChart | Category comparison (vertical/horizontal, stacked) | | AreaChart | Filled trend chart with gradient and stacking | | PieChart | Proportional distribution — pie or half-circle (gauge) | | DoughnutChart | Dedicated donut variant of PieChart | | RadarChart | Multi-dimensional profile/score comparison | | RadialBarChart | KPI panels and progress indicators | | TreemapChart | Hierarchical visualization sized by area |

Primitives (pure SVG/CSS, recharts kullanmaz)

| Component | Use case | |---|---| | Sparkline | Mini trend line — KpiTile, dashboard metric kartlari | | SparkBar | Mini bar distribution — saatlik aktivite, gunluk hit dagilimi | | HeatmapCalendar | GitHub-style contributions grid — editoryal aktivite, gunluk yogunluk | | GaugeChart | Polar arc gauge — KPI score, SLA, fuel/battery, tachometer (180°/270°/360°) |

Ortak SparklineTone palette: positive · negative · neutral · info · warning.

Common props (recharts-based)

All recharts-based charts share these base props:

| Prop | Type | Default | Description | |---|---|---|---| | data | array | — | Data array (chart-specific shape) | | responsive | boolean | true | Wrap in ResponsiveContainer | | width | number | 600 | Used when responsive=false | | height | number | 300–360 | Chart height | | margin | { top, right, bottom, left } | { 8, 16, 8, 8 } | Recharts margin | | showTooltip | boolean | true | Show interactive tooltip | | showLegend | boolean | varies | Show legend | | className | string | — | Override container class |

Chart-specific props (xKey, series, stacked, gradient, innerRadius, startAngle, etc.) are documented per component in Storybook.

Examples

BarChart — stacked

<BarChart
  data={data}
  xKey="month"
  series={[
    { key: "revenue", label: "Revenue" },
    { key: "expenses", label: "Expenses" },
  ]}
  stacked
  reverseStackOrder
  barCategoryGap="20%"
  showLegend
/>

PieChart — gauge

<PieChart
  data={[
    { name: "Used", value: 75 },
    { name: "Free", value: 25 },
  ]}
  startAngle={180}
  endAngle={0}
  innerRadius="50%"
/>

AreaChart — gradient stacked

<AreaChart
  data={data}
  xKey="month"
  series={[
    { key: "revenue", label: "Revenue", color: "#3b82f6" },
    { key: "expenses", label: "Expenses", color: "#ef4444" },
  ]}
  stacked
  gradient
  showLegend
/>

Sparkline — dashboard tile

<Sparkline
  data={[4, 6, 5, 8, 7, 9, 11, 14, 16, 18]}
  tone="positive"
  ariaLabel="Aylik gelir trendi"
  showLastDot
/>

SparkBar — hourly distribution

<SparkBar
  data={hourlyHits}
  tone="info"
  ariaLabel="Saatlik hit dagilimi"
  gap={2}
/>

HeatmapCalendar — GitHub-style activity

<HeatmapCalendar
  values={[
    { date: "2026-01-15", value: 3 },
    { date: "2026-01-16", value: 7 },
  ]}
  tone="positive"
  locale="tr-TR"
  onCellClick={(v) => console.log(v.date, v.value)}
/>

GaugeChart — KPI score / tachometer

// Default 180° dome
<GaugeChart value={72} tone="info" label="Performance" hint="of 100" />

// 270° tachometer with zones
<GaugeChart
  value={5200}
  max={8000}
  startAngle={-135}
  endAngle={135}
  zones={[
    { from: 0, to: 4000, tone: "positive" },
    { from: 4000, to: 6500, tone: "warning" },
    { from: 6500, to: 8000, tone: "negative" },
  ]}
  label="rpm"
/>

// 360° donut with Intl formatting
<GaugeChart
  value={12400}
  max={20000}
  startAngle={0}
  endAngle={360}
  tone="positive"
  format={(v) =>
    new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY" }).format(v)
  }
  label="Aylik gelir"
/>

TreemapChart — hierarchical

<TreemapChart
  data={[
    {
      name: "Electronics",
      size: 0,
      children: [
        { name: "Phones", size: 2500 },
        { name: "Laptops", size: 1800 },
      ],
    },
    { name: "Clothing", size: 3200 },
  ]}
/>

Compatibility

Works with any React-based framework: Next.js 16+, Remix, Vite + React, Gatsby, etc.

Development

npm install
npm run dev               # tsup watch mode
npm run build             # production build to dist/
npm run typecheck         # tsc --noEmit
npm run storybook         # Storybook dev (http://localhost:6006)
npm run build-storybook   # static Storybook export

Publishing

Publishing is automated via GitHub Actions. When a GitHub Release is created, the package is published to npm.

1. Update version in package.json
2. Commit and push
3. Create a GitHub Release with a matching tag (e.g. v1.0.0)

Author

Kenan Gündoğan — https://github.com/kenangundogan

Maintained under Eglador

License

MIT