4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tfbc,"use client"; import { EChartsAreaChart, type ChartConfig } from "@/registry/charts/echarts-area-chart"; const SERIES = [ { key: "robinhood", label: "Robinhood", color: "#c3f000", pct: -4.41, delta: -2377.66 }, { key: "coinbase", label: "Coinbase", color: "#2f6bff", pct: 1.15, delta: 617.22 }, ] as const; const chartData = [ { date: "Dec 22", robinhood: 53916, coinbase: 53670 }, { date: "Dec 23", robinhood: 54380, coinbase: 53080 }, { date: "Dec 24", robinhood: 54760, coinbase: 52460 }, { date: "Dec 25", robinhood: 54480, coinbase: 51880 }, { date: "Dec 26", robinhood: 54060, coinbase: 51340 }, { date: "Dec 27", robinhood: 53820, coinbase: 50900 }, { date: "Dec 28", robinhood: 53520, coinbase: 50520 }, { date: "Dec 29", robinhood: 53240, coinbase: 50200 }, { date: "Dec 30", robinhood: 53080, coinbase: 49960 }, { date: "Dec 31", robinhood: 52840, coinbase: 49760 }, { date: "Jan 1", robinhood: 52700, coinbase: 49640 }, { date: "Jan 2", robinhood: 52520, coinbase: 49600 }, { date: "Jan 3", robinhood: 52420, coinbase: 49720 }, { date: "Jan 4", robinhood: 52340, coinbase: 49980 }, { date: "Jan 5", robinhood: 52240, coinbase: 50360 }, { date: "Jan 6", robinhood: 52140, coinbase: 50820 }, { date: "Jan 7", robinhood: 52080, coinbase: 51340 }, { date: "Jan 8", robinhood: 52020, coinbase: 51900 }, { date: "Jan 9", robinhood: 51960, coinbase: 52440 }, { date: "Jan 10", robinhood: 51900, coinbase: 52960 }, { date: "Jan 11", robinhood: 51860, coinbase: 53420 }, { date: "Jan 12", robinhood: 51800, coinbase: 53780 }, { date: "Jan 13", robinhood: 51740, coinbase: 54040 }, { date: "Jan 14", robinhood: 51700, coinbase: 54200 }, { date: "Jan 15", robinhood: 51640, coinbase: 54300 }, { date: "Jan 16", robinhood: 51580, coinbase: 54320 }, { date: "Jan 17", robinhood: 51538, coinbase: 54287 }, ]; const chartConfig = { robinhood: { label: "Robinhood", colors: { light: ["#a6cc00"], dark: ["#c3f000"] } }, coinbase: { label: "Coinbase", colors: { light: ["#2f6bff"], dark: ["#4c86ff"] } }, } satisfies ChartConfig; const money = (value: number) => Math.abs(value).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); export function EChartsPortfolioAreaChart() { return (

{SERIES.map(({ key, label, color, pct, delta }) => (

{label}

{pct > 0 ? "+" : "−"} {Math.abs(pct).toFixed(2)}%

{delta < 0 ? "−" : "+"}${money(delta)}

))}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","echarts",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/echarts","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"echarts"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@evilcharts/echarts-area-chart"]}]]}],["$","$L50",null,{"sourceUrl":"https://evilcharts.com/r/portfolio-echarts-area-chart.json","proxyUrl":"https://shadcnregistry.com/r/evilcharts/portfolio-echarts-area-chart","itemId":"@evilcharts/portfolio-echarts-area-chart"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/echarts/b-portfolio-echarts-area-chart.tsx","content":"$52","type":"registry:block","target":"components/evilcharts/blocks/portfolio-echarts-area-chart.tsx"}]}]]}],"$L53"]}]

Portfolio Echarts Area Chart

Installation

Files

components

Styles