Animated React charts and dashboard widgets

Mix chart

Stacked bars in vivid colours that grow in while the total counts up. Hover a bar to bring out its colours and breakdown; switch sources off in the legend.

Charts, in view, then hover, press and keys, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/mix-chart.tsx https://motion-brew.com/r/mix-chart.tsx

One self contained file for React and Tailwind CSS: mix-chart.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { MixChart } from "@/components/mix-chart";

const series = [
  { key: "solar", label: "Solar", color: "#ffad1f" },
  { key: "battery", label: "Battery", color: "#16c79a" },
  { key: "grid", label: "Grid", color: "#7b61ff" },
];

const ranges = [
  {
    id: "week",
    label: "Week",
    change: 12.4,
    caption: "used this week",
    points: [
      { label: "Mon", detail: "Monday", values: [14.2, 5.1, 6.8] },
      { label: "Tue", detail: "Tuesday", values: [11.5, 4.2, 9.3] },
    ],
  },
];

export default function Page() {
  return <MixChart title="Home energy" series={series} ranges={ranges} unit="kWh" />;
}

Props

Prop	Type	Default	Description
title	string	"Home energy"	Card title
series	{ key; label; color }[]	solar, battery, grid	The sources, bottom of the stack first
ranges	{ id; label; points; change?; caption? }[]	a week, a month and a year	The range switch; points are { label; detail?; values }
unit	string	"kWh"	Unit after the numbers
decimals	number	1	Decimal places on the total and the tooltip
className	string		Placement

More charts

Activity grid: A year of daily activity as a heatmap that sweeps in while the totals count up.
Channel mix: A marketing card where a row of slim ticks splits the week's sessions by channel.
Device traffic: Visitors by device on tall gauges, one color each, that fill to each share.
Range chart: A daily range chart, like heart rate, over 7, 15 or 30 days.

All animated react charts and dashboard widgets