/ngx-recharts

Angular port of Recharts

Primary LanguageTypeScript

NGX Recharts

Angular port of the Recharts library. Build composable charts with Angular components using the same API as Recharts.

Installation

npm install ngx-recharts

Quick Start

import { BarChartComponent, BarComponent, XAxisComponent, YAxisComponent, CartesianGridComponent } from "ngx-recharts";

@Component({
  imports: [BarChartComponent, BarComponent, XAxisComponent, YAxisComponent, CartesianGridComponent],
  template: `
    <ngx-bar-chart [data]="data" [width]="600" [height]="400">
      <svg:g ngx-cartesian-grid strokeDasharray="3 3"></svg:g>
      <svg:g ngx-x-axis dataKey="name"></svg:g>
      <svg:g ngx-y-axis></svg:g>
      <svg:g ngx-bar dataKey="value" fill="#8884d8"></svg:g>
    </ngx-bar-chart>
  `,
})
export class MyComponent {
  data = [
    { name: "Page A", value: 4000 },
    { name: "Page B", value: 3000 },
    { name: "Page C", value: 2000 },
  ];
}

Supported Charts

Line Chart

<ngx-line-chart [data]="data" [width]="600" [height]="400">
  <svg:g ngx-cartesian-grid></svg:g>
  <svg:g ngx-x-axis dataKey="name"></svg:g>
  <svg:g ngx-y-axis></svg:g>
  <svg:g ngx-line dataKey="value" stroke="#8884d8"></svg:g>
</ngx-line-chart>

Bar Chart

<ngx-bar-chart [data]="data" [width]="600" [height]="400">
  <svg:g ngx-cartesian-grid></svg:g>
  <svg:g ngx-x-axis dataKey="name"></svg:g>
  <svg:g ngx-y-axis></svg:g>
  <svg:g ngx-bar dataKey="uv" fill="#8884d8"></svg:g>
  <svg:g ngx-bar dataKey="pv" fill="#82ca9d"></svg:g>
</ngx-bar-chart>

Area Chart with Gradients

<ngx-area-chart [data]="data" [width]="600" [height]="400">
  <svg:defs>
    <svg:linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
      <svg:stop offset="5%" stop-color="#8884d8" stop-opacity="0.8"></svg:stop>
      <svg:stop offset="95%" stop-color="#8884d8" stop-opacity="0"></svg:stop>
    </svg:linearGradient>
  </svg:defs>
  <svg:g ngx-x-axis dataKey="name"></svg:g>
  <svg:g ngx-y-axis></svg:g>
  <svg:g ngx-area dataKey="uv" type="monotone" stroke="#8884d8" fill="url(#colorUv)"></svg:g>
</ngx-area-chart>

Architecture

  • Chart Components: LineChart, BarChart, AreaChart
  • Cartesian Components: Line, Bar, Area, XAxis, YAxis, CartesianGrid
  • Interactive Components: Tooltip, ResponsiveContainer
  • Services: ScaleService (D3 scales), TooltipService (tooltip state)

Development Status

  • ✅ Line, Bar, Area Charts
  • ✅ D3 Scale Integration
  • ✅ Interactive Tooltips
  • ✅ SVG Gradients
  • ✅ Curve Interpolation
  • 🔄 Pie Charts (coming soon)
  • 🔄 Legend System (coming soon)
  • 🔄 Animation System (coming soon)

License

MIT