An area chart with a legend for React

ChartLegend sets content to ChartLegendContent. That reads label from config for each series and draws a color swatch. These entries have no icon, and this file passes no onClick. verticalAlign stays at bottom, which adds space above the legend.

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

Set verticalAlign="top" on ChartLegend. ChartLegendContent then uses the top spacing, pb-3, under the legend. The default bottom uses pt-3 above it. The labels still come from config.

ChartTooltipContent sets indicator="line". The title is the month, and the rows are Mobile and Desktop with their values. cursor={false} on ChartTooltip turns the hover cursor off.

XAxis uses dataKey="month" and tickFormatter={formatMonth}, which returns value.slice(0, 3). axisLine and tickLine are false, tickMargin is 8, and CartesianGrid sets vertical={false}.

config sets mobile to var(--chart-2) and desktop to var(--chart-1). ChartContainer writes --color-mobile and --color-desktop. The areas read those variables, and the legend swatch uses the same series color. AreaChart also sets accessibilityLayer.