import { Explainer, registerAll } from "insightcharts";
// The slot props below are JSON specs. This makes their `type` names resolvable.
registerAll();
export function Example() {
return (
<Explainer
kicker="Money basics"
title="Starting to save at 35 instead of 25 leaves $296,000 less at 65"
deck="Both savers put in $300 a month at a 6% real return. The saver who starts at 25 has $597,000 at 65. The saver who starts at 35 has $301,000."
hook={{
value: 296000,
format: { style: "currency", currency: "USD", maximumFractionDigits: 0 },
label: "Difference at 65 between starting at 25 and starting at 35",
context: "Saving $300 a month until 65 at a 6% real return gives $597k from age 25 and $301k from age 35",
}}
hero={{
type: "line-chart",
data: [
{ age: "25", saver: "Starts at 25", balance: 0 },
{ age: "30", saver: "Starts at 25", balance: 20931 },
{ age: "35", saver: "Starts at 25", balance: 49164 },
{ age: "35", saver: "Starts at 35", balance: 0 },
{ age: "40", saver: "Starts at 25", balance: 87246 },
{ age: "40", saver: "Starts at 35", balance: 20931 },
{ age: "45", saver: "Starts at 25", balance: 138612 },
{ age: "45", saver: "Starts at 35", balance: 49164 },
{ age: "50", saver: "Starts at 25", balance: 207898 },
{ age: "50", saver: "Starts at 35", balance: 87246 },
{ age: "55", saver: "Starts at 25", balance: 301355 },
{ age: "55", saver: "Starts at 35", balance: 138612 },
{ age: "60", saver: "Starts at 25", balance: 427413 },
{ age: "60", saver: "Starts at 35", balance: 207898 },
{ age: "65", saver: "Starts at 25", balance: 597447 },
{ age: "65", saver: "Starts at 35", balance: 301355 },
],
x: "age",
y: "balance",
series: "saver",
highlight: "Starts at 25",
format: "compact",
zero: true,
height: 320,
title: "At 50 the saver who started at 25 has $208,000 and the other has $87,000",
subtitle: "Balance by age, $300 a month at a 6% real annual return",
note: "Illustrative calculation",
}}
heroText="The saver who starts at 25 deposits $36,000 more. The other $260,000 of the difference is investment growth."
sections={[
{
title: "Deposits are $144,000 of the $597,000",
text: "The saver who starts at 25 pays in $300 a month for 40 years. The other $453,000 is growth.",
exhibit: {
type: "segmented-bar",
data: [
{ part: "Deposits", usd: 144000 },
{ part: "Growth", usd: 453447 },
],
name: "part",
value: "usd",
format: "compact",
highlight: "Growth",
},
takeaway: "Growth is 76% of the final balance.",
},
{
title: "A 1.5% annual fee leaves $402,000 instead of $566,000",
text: "The index fund charges 0.2% a year. The managed fund charges 1.5%. After 40 years the managed fund's balance is 29% lower.",
exhibit: {
type: "bar-chart",
data: [
{ fund: "Index fund, 0.2% a year", balance: 566005 },
{ fund: "Managed fund, 1.5% a year", balance: 402345 },
],
x: "fund",
y: "balance",
sort: "none",
orientation: "horizontal",
format: "compact",
highlight: "Index fund, 0.2% a year",
},
},
]}
conclusion={{
title: "What to do",
points: [
"Set up a monthly standing order this month.",
"Choose a broad index fund with a fee of about 0.2% a year.",
"Increase the monthly amount each time your pay rises.",
],
}}
sources="Author's calculation"
method="Monthly compounding at a constant real return of 6% a year. Fees are subtracted from the return. Real returns vary from year to year."
note="Illustrative data. Not financial advice."
/>
);
}