The Complete Production SOP: How to Deploy and Run Recharts Declarative React Charts in Autonomous AI Agents

---
name: "recharts-declarative-react-charts"
description: "Construct composable, responsive React data charts using SVG Recharts components."
metadata:
  author: "Recharts"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create recharts line chart"
  - "use responsivecontainer recharts"
  - "customize recharts tooltip"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Recharts Declarative React Charts

Builds React data visualizations with Recharts: ResponsiveContainer, LineChart, BarChart, AreaChart, XAxis, YAxis, Tooltip, Legend, and custom SVG dot shapes.

## Execution SOP & Rules
1. Always wrap charts inside an explicit height container: `<div className="h-[300px] w-full"><ResponsiveContainer width="100%" height="100%">`.
2. Ensure dataKey properties match typed interfaces in the dataset array.
3. Implement custom tooltips as standalone, memoized functional components: `<Tooltip content={<CustomTooltip />} />`.
4. Avoid inline arrow functions or anonymous objects in chart props to prevent infinite re-render cascades.

'use client';

import React, { memo } from 'react';
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  TooltipProps
} from 'recharts';

export interface MetricPoint {
  timestamp: string;
  latencyMs: number;
  throughputRps: number;
}

interface MetricsLineChartProps {
  data: MetricPoint[];
}

interface CustomTooltipProps extends TooltipProps<number, string> {
  active?: boolean;
  payload?: Array<{ value: number; name: string; color: string }>;
  label?: string;
}

const CustomTooltip: React.FC<CustomTooltipProps> = memo(({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="rounded-lg border border-border bg-background p-3 shadow-md text-xs">
        <p className="font-semibold text-foreground mb-1">{label}</p>
        {payload.map((entry, index) => (
          <p key={`item-${index}`} style={{ color: entry.color }} className="tabular-nums">
            {entry.name}: {entry.value.toLocaleString()}
          </p>
        ))}
      </div>
    );
  }
  return null;
});
CustomTooltip.displayName = 'CustomTooltip';

export const MetricsLineChart: React.FC<MetricsLineChartProps> = ({ data }) => {
  return (
    <div className="w-full h-80 min-h-[320px]">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 12, right: 16, left: 0, bottom: 8 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.3} />
          <XAxis dataKey="timestamp" stroke="#9CA3AF" fontSize={12} tickLine={false} />
          <YAxis stroke="#9CA3AF" fontSize={12} tickLine={false} />
          <Tooltip content={<CustomTooltip />} />
          <Legend verticalAlign="top" height={36} />
          <Line type="monotone" dataKey="latencyMs" name="Latency (ms)" stroke="#3B82F6" strokeWidth={2} dot={false} activeDot={{ r: 5 }} />
          <Line type="monotone" dataKey="throughputRps" name="Throughput (req/s)" stroke="#10B981" strokeWidth={2} dot={false} activeDot={{ r: 5 }} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};