An interactive bar chart for React

activeChart is "desktop". Set it to "mobile". Bar uses dataKey={activeChart} and a fill of var(--color- plus that key, so the series and the color follow the constant. config maps desktop to var(--chart-2) and mobile to var(--chart-1).

ChartTooltipContent sets nameKey="views". That looks up the views entry in config, whose label is Page Views, and uses it as the row name for whichever series is drawn.

XAxis uses tickFormatter={formatDateTick}, a short month and day, and minTickGap={32} so daily labels stay 32 pixels apart. labelFormatter is formatDateLabel, which adds year: "numeric", so the tooltip title reads like Apr 1, 2024. The tooltip also sets className to a fixed w-[150px].

ChartContainer sets aspect-auto h-[250px] w-full. aspect-auto clears the default 16:9 box so h-[250px] holds, and the width follows the max-w-xl frame. CartesianGrid sets vertical={false}.

Yes. This ChartTooltip doesn't set cursor to false, so the bar chart keeps its default cursor on the hovered bar. BarChart sets accessibilityLayer, and the margin is left: 12 and right: 12.

Each chartData row has a date like 2024-04-01, plus desktop and mobile. XAxis reads dataKey="date". Only activeChart is passed to Bar, so the other number stays in the row and off the chart.