An area chart with axes for React

YAxis sets tickCount={3}, so Recharts aims for three ticks. axisLine and tickLine are false, and tickMargin is 8. This file doesn't set tickFormatter on YAxis, so the ticks are the raw scale numbers.

AreaChart sets margin to left: -20 and right: 12. The negative left margin pulls the plot toward the frame so the YAxis labels sit in that gutter. The right margin is 12, matching the other edge's padding on the X ticks.

Both Area components set stackId="a". Mobile is first, on the baseline. Desktop is second, on top of it. Both use type="natural" and fillOpacity={0.4}, with fill and stroke of var(--color-mobile) and var(--color-desktop).

XAxis uses dataKey="month" and tickFormatter={formatMonth}, which returns value.slice(0, 3). axisLine and tickLine are false, and tickMargin is 8. CartesianGrid sets vertical={false}, so the grid lines run across the Y scale.

ChartTooltip renders ChartTooltipContent with no extra props, so indicator stays dot, and sets cursor={false}. The title is the month. The rows are Mobile and Desktop from config.

Yes. AreaChart sets accessibilityLayer. The month tick, the Y numbers, and the labels in config name the point. ChartContainer keeps the default 16:9 box inside a w-full max-w-xl frame.