A stacked area chart with expand stacking for React

AreaChart sets stackOffset="expand". The three areas still use stackId="a", and each month is drawn as one full stack, so the bands are each series' share of that row. type="natural" curves every band.

other is the first Area, then mobile, then desktop. With stackId="a", the first area sits on the baseline and the later ones stack above it. Other uses fillOpacity={0.1}. Mobile and desktop use fillOpacity={0.4}.

Each Area fills and strokes var(--color-other), var(--color-mobile), or var(--color-desktop). config maps those keys to var(--chart-3), var(--chart-2), and var(--chart-1), with the labels Other, Mobile, and Desktop.

ChartTooltipContent sets indicator="line" and doesn't set a formatter, so each row is the series label from config and the tooltip's value for that series. cursor={false} turns the hover cursor off. The title is the month.

XAxis uses dataKey="month" and tickFormatter={formatMonth}, which keeps value.slice(0, 3). axisLine and tickLine are false, tickMargin is 8, and CartesianGrid sets vertical={false}. There is no YAxis in this file.

AreaChart sets accessibilityLayer and a margin of left: 12, right: 12, and top: 12. ChartContainer keeps the default 16:9 box inside a w-full max-w-xl frame.