A bar chart with an active bar for React

Bar sets shape to renderBar. That function compares props.index with ACTIVE_INDEX, which is 2, the Firefox row. A match renders Rectangle with fillOpacity 0.8, stroke from props.payload.fill, strokeDasharray 4, and strokeDashoffset 4.

Change ACTIVE_INDEX. The rows run Chrome, Safari, Firefox, Edge, Other, so 0 is Chrome. Any other index returns Rectangle with the bar props unchanged. Bar also sets radius to 8 and strokeWidth to 2, which is the outline width on the dashed bar.

Each row sets fill to a variable such as var(--color-chrome). config maps chrome through other to --chart-1 through --chart-5 and to labels like Chrome. Bar has dataKey visitors and leaves fill to the row.

XAxis uses dataKey browser and tickFormatter set to formatBrowser, which returns chartConfig[value].label. axisLine and tickLine are false, and tickMargin is 10.

ChartTooltipContent sets hideLabel, and cursor is false. The row name comes from the browser key in config. CartesianGrid sets vertical to false.

Yes. BarChart sets accessibilityLayer. The same config labels feed the axis ticks and the tooltip, so each browser is named in text as well as drawn in its own color.