A react-vis alternative for React 19

react-vis has no maintainers, its repo says it's deprecated, and on React 19 a plain XYPlot throws "Objects are not valid as a React child". Recharts covers the same charts and is maintained. If your charts sat in a KPI dashboard, Analytics Dashboard V1 is that screen, already animated.

One payment$9

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

The same line chart in Recharts

components/sales-chart.tsx

"use client";
// Before (react-vis):
// <XYPlot width={600} height={300}>
//   <HorizontalGridLines /><XAxis /><YAxis />
//   <LineSeries data={data} onNearestX={(v) => setHint(v)} />
//   {hint && <Hint value={hint} />}
// </XYPlot>
import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";

// your react-vis data can stay as { x, y }: Recharts reads whatever keys you name
const data = [
  { x: "Mon", y: 4200 }, { x: "Tue", y: 5800 }, { x: "Wed", y: 3600 }, { x: "Thu", y: 7100 },
  { x: "Fri", y: 8800 }, { x: "Sat", y: 6400 }, { x: "Sun", y: 9500 },
];

export default function SalesChart() {
  return (
    <LineChart responsive data={data} style={{ width: "100%", maxWidth: 640, aspectRatio: 2 }}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="x" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="y" stroke="#7c5cff" strokeWidth={2} dot={false} />
    </LineChart>
  );
}

Good to know

Where react-vis stands: npm's latest is 1.12.1, from June 8, 2023, and npm counted 50,252 downloads in the week of October 16 to 22, 2026. The repo (uber/react-vis) isn't archived, but its DEPRECATED.md says: "react-vis currently has no active maintainers. As such, we have decided to deprecate the library."
Why it breaks on React 19: on October 26, 2026 we rendered <XYPlot><LineSeries /></XYPlot> with React 19.2.9. It threw "Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store})" and drew nothing. The same code on React 18.3.1 drew the plot. Its peer range is react ^16.8.3, so npm also refuses it next to React 18 or 19 unless you pass --legacy-peer-deps.
There's a 2.0.0-beta.3 on npm's beta tag, but it dates from April 2017 and asks for React 0.14 or 15.
Recharts is the closest fit: you nest series and axes inside a chart, like XYPlot. Version 3.10.1 came out July 25, 2026, it's MIT, it accepts React 16.8 to 19, and npm counted 35,373,674 downloads that same week. Keep your { x, y } data and name the keys with dataKey.
Analytics Dashboard V1 isn't a chart library. It's one screen: revenue, orders and conversion cards that count up, a 7-bar sales chart that springs up with a hover tooltip, a goal ring and a Week/Month switch. There are no line, area or scatter series and no axes.
Two things to know before you swap it in. The bar tooltip works its value out from the period's revenue and the bar's height, so edit barValue in your copy if you want exact per-bar numbers. Revenue is formatted in US dollars; change fmtMoney for another currency.
Type-checked on October 26, 2026 with TypeScript 5.9.3 against react 19.1.1, recharts 3.10.1 and the shipped AnalyticsDashboard.tsx.

What each react-vis piece becomes in Recharts

XYPlot and FlexibleXYPlot: LineChart, BarChart or AreaChart with your data array. The responsive prop, or a ResponsiveContainer, replaces the flexible sizing.
LineSeries, AreaSeries, MarkSeries: Line, Area, and Scatter inside a ScatterChart. Each takes a dataKey instead of its own data prop.
VerticalBarSeries: Bar. HorizontalBarSeries: Bar with layout="vertical" on the chart, and the axes swapped.
XAxis and YAxis keep their names; give XAxis the dataKey of your x values. HorizontalGridLines and VerticalGridLines: CartesianGrid with vertical={false} or horizontal={false}.
Hint and onNearestX: Tooltip, which follows the pointer on its own. Pass content for a custom box. DiscreteColorLegend: Legend.
RadialChart: PieChart with a Pie. The animation prop: isAnimationActive, animationDuration and animationEasing on each series.

components/orders-bars.tsx

"use client";
// Before: <XYPlot xType="ordinal"><VerticalBarSeries data={data} /></XYPlot>
// Horizontal bars (HorizontalBarSeries) are layout="vertical" on the chart.
import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from "recharts";

const data = [
  { x: "Jan", web: 120, app: 80 },
  { x: "Feb", web: 160, app: 95 },
  { x: "Mar", web: 140, app: 130 },
];

export default function OrdersBars() {
  return (
    <BarChart responsive data={data} style={{ width: "100%", maxWidth: 640, aspectRatio: 2 }}>
      <XAxis dataKey="x" />
      <YAxis />
      <Tooltip />
      <Legend />
      {/* the old animation prop: isAnimationActive, animationDuration, animationEasing */}
      <Bar dataKey="web" fill="#7c5cff" animationDuration={600} />
      <Bar dataKey="app" fill="#c6ff3d" animationDuration={600} />
    </BarChart>
  );
}

If the charts lived in a KPI dashboard

Many react-vis setups were one screen of numbers and a bar chart. Analytics Dashboard V1 is that screen with the motion done: the numbers count up on load, the bars spring up one after another, and switching between Week and Month counts from the old values to the new ones.
It's React, Tailwind and framer-motion, drawn on a 1000 by 660 stage that scales down as one piece in a narrower box, so it fits a card or a phone. You pass the numbers; the shape is below.

More dashboards, including a free one

app/dashboard/page.tsx

"use client";
import AnalyticsDashboard, { type DashboardData } from "@/components/AnalyticsDashboard";

// The numbers your react-vis KPI screen showed, in the shape the dashboard reads.
const data: DashboardData = {
  week: {
    revenue: 48920, orders: 1284, conv: 3.82,
    d: [12.4, 8.1, 0.6], // % change for revenue, orders, conversion
    goal: 78,             // goal ring, 0 to 100
    bars: [42, 58, 36, 71, 88, 64, 95], // bar heights, 0 to 100
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  month: {
    revenue: 186450, orders: 5213, conv: 4.17,
    d: [21.7, 15.3, 1.1],
    goal: 93,
    bars: [55, 62, 80, 47, 90, 73, 99],
    labels: ["W1", "W2", "W3", "W4", "W5", "W6", "W7"],
  },
};

export default function Dashboard() {
  return <AnalyticsDashboard title="Revenue" subtitle="Acme store" data={data} />;
}

Install

Copy from the zipPut react/src/components into src/, then Recharts route: npm i recharts. Analytics Dashboard V1: npm i framer-motion. Then npm uninstall react-vis.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data: { week, month }: KPIs, % changes, goal, 7 bar heights, labels
title / subtitle: header text
startDelay: ms before the first count-up

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: Animated SVG Line Chart in React Without a Chart Library (Draw-On Effect)

From the blog: How to Animate a v0 Dashboard: Cards, KPI Count-Up and Charts

From the blog: findDOMNode Is Not a Function in React 19: Find It, Fix It

Questions

Does react-vis work with React 19?

Not in our test. A plain XYPlot with a LineSeries threw "Objects are not valid as a React child" on React 19.2.9 and rendered on React 18.3.1.

Is react-vis deprecated?

Yes, by its own repo: DEPRECATED.md says it has no active maintainers. npm doesn't show a deprecation warning, so installs keep going.

What should I use instead?

For general charts, a maintained library. Recharts is the closest in how you write it. For one animated KPI screen, Analytics Dashboard V1 is ready to fill with your numbers.

Can I keep my { x, y } data?

Yes. Recharts reads any keys you name, so XAxis dataKey="x" and Line dataKey="y" take the same array.

Does the dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

The same line chart in Recharts

components/sales-chart.tsx

"use client"; // Before (react-vis): // <XYPlot width={600} height={300}> // <HorizontalGridLines /><XAxis /><YAxis /> // <LineSeries data={data} onNearestX={(v) => setHint(v)} /> // {hint && <Hint value={hint} />} // </XYPlot> import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts"; // your react-vis data can stay as { x, y }: Recharts reads whatever keys you name const data = [ { x: "Mon", y: 4200 }, { x: "Tue", y: 5800 }, { x: "Wed", y: 3600 }, { x: "Thu", y: 7100 }, { x: "Fri", y: 8800 }, { x: "Sat", y: 6400 }, { x: "Sun", y: 9500 }, ]; export default function SalesChart() { return ( <LineChart responsive data={data} style={{ width: "100%", maxWidth: 640, aspectRatio: 2 }}> <CartesianGrid vertical={false} /> <XAxis dataKey="x" /> <YAxis /> <Tooltip /> <Line type="monotone" dataKey="y" stroke="#7c5cff" strokeWidth={2} dot={false} /> </LineChart> ); }

Good to know

Where react-vis stands: npm's latest is 1.12.1, from June 8, 2023, and npm counted 50,252 downloads in the week of October 16 to 22, 2026. The repo (uber/react-vis) isn't archived, but its DEPRECATED.md says: "react-vis currently has no active maintainers. As such, we have decided to deprecate the library."

Why it breaks on React 19: on October 26, 2026 we rendered <XYPlot><LineSeries /></XYPlot> with React 19.2.9. It threw "Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store})" and drew nothing. The same code on React 18.3.1 drew the plot. Its peer range is react ^16.8.3, so npm also refuses it next to React 18 or 19 unless you pass --legacy-peer-deps.

There's a 2.0.0-beta.3 on npm's beta tag, but it dates from April 2017 and asks for React 0.14 or 15.

Recharts is the closest fit: you nest series and axes inside a chart, like XYPlot. Version 3.10.1 came out July 25, 2026, it's MIT, it accepts React 16.8 to 19, and npm counted 35,373,674 downloads that same week. Keep your { x, y } data and name the keys with dataKey.

Analytics Dashboard V1 isn't a chart library. It's one screen: revenue, orders and conversion cards that count up, a 7-bar sales chart that springs up with a hover tooltip, a goal ring and a Week/Month switch. There are no line, area or scatter series and no axes.

Two things to know before you swap it in. The bar tooltip works its value out from the period's revenue and the bar's height, so edit barValue in your copy if you want exact per-bar numbers. Revenue is formatted in US dollars; change fmtMoney for another currency.

Type-checked on October 26, 2026 with TypeScript 5.9.3 against react 19.1.1, recharts 3.10.1 and the shipped AnalyticsDashboard.tsx.

What each react-vis piece becomes in Recharts

XYPlot and FlexibleXYPlot: LineChart, BarChart or AreaChart with your data array. The responsive prop, or a ResponsiveContainer, replaces the flexible sizing.

LineSeries, AreaSeries, MarkSeries: Line, Area, and Scatter inside a ScatterChart. Each takes a dataKey instead of its own data prop.

VerticalBarSeries: Bar. HorizontalBarSeries: Bar with layout="vertical" on the chart, and the axes swapped.

XAxis and YAxis keep their names; give XAxis the dataKey of your x values. HorizontalGridLines and VerticalGridLines: CartesianGrid with vertical={false} or horizontal={false}.

Hint and onNearestX: Tooltip, which follows the pointer on its own. Pass content for a custom box. DiscreteColorLegend: Legend.

RadialChart: PieChart with a Pie. The animation prop: isAnimationActive, animationDuration and animationEasing on each series.

components/orders-bars.tsx

"use client";
// Before: <XYPlot xType="ordinal"><VerticalBarSeries data={data} /></XYPlot>
// Horizontal bars (HorizontalBarSeries) are layout="vertical" on the chart.
import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from "recharts";

const data = [
  { x: "Jan", web: 120, app: 80 },
  { x: "Feb", web: 160, app: 95 },
  { x: "Mar", web: 140, app: 130 },
];

export default function OrdersBars() {
  return (
    <BarChart responsive data={data} style={{ width: "100%", maxWidth: 640, aspectRatio: 2 }}>
      <XAxis dataKey="x" />
      <YAxis />
      <Tooltip />
      <Legend />
      {/* the old animation prop: isAnimationActive, animationDuration, animationEasing */}
      <Bar dataKey="web" fill="#7c5cff" animationDuration={600} />
      <Bar dataKey="app" fill="#c6ff3d" animationDuration={600} />
    </BarChart>
  );
}

If the charts lived in a KPI dashboard

Many react-vis setups were one screen of numbers and a bar chart. Analytics Dashboard V1 is that screen with the motion done: the numbers count up on load, the bars spring up one after another, and switching between Week and Month counts from the old values to the new ones.

It's React, Tailwind and framer-motion, drawn on a 1000 by 660 stage that scales down as one piece in a narrower box, so it fits a card or a phone. You pass the numbers; the shape is below.

app/dashboard/page.tsx

"use client";
import AnalyticsDashboard, { type DashboardData } from "@/components/AnalyticsDashboard";

// The numbers your react-vis KPI screen showed, in the shape the dashboard reads.
const data: DashboardData = {
  week: {
    revenue: 48920, orders: 1284, conv: 3.82,
    d: [12.4, 8.1, 0.6], // % change for revenue, orders, conversion
    goal: 78,             // goal ring, 0 to 100
    bars: [42, 58, 36, 71, 88, 64, 95], // bar heights, 0 to 100
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  month: {
    revenue: 186450, orders: 5213, conv: 4.17,
    d: [21.7, 15.3, 1.1],
    goal: 93,
    bars: [55, 62, 80, 47, 90, 73, 99],
    labels: ["W1", "W2", "W3", "W4", "W5", "W6", "W7"],
  },
};

export default function Dashboard() {
  return <AnalyticsDashboard title="Revenue" subtitle="Acme store" data={data} />;
}

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.

qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.

qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

Questions

Does react-vis work with React 19?

Not in our test. A plain XYPlot with a LineSeries threw "Objects are not valid as a React child" on React 19.2.9 and rendered on React 18.3.1.

Is react-vis deprecated?

Yes, by its own repo: DEPRECATED.md says it has no active maintainers. npm doesn't show a deprecation warning, so installs keep going.

What should I use instead?

For general charts, a maintained library. Recharts is the closest in how you write it. For one animated KPI screen, Analytics Dashboard V1 is ready to fill with your numbers.

Can I keep my { x, y } data?

Yes. Recharts reads any keys you name, so XAxis dataKey="x" and Line dataKey="y" take the same array.

Does the dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.