chartBarActive

A Charts block/component from shadcn/ui — clean-room reimplemented for Domphy (see methodology). Call chartBarActive() with no arguments for a working demo, or edit the code below live.

Implementation notes

A designated bar (activeIndex, default 2) is emphasized by a dashed-stroke rounded-rect SVG overlay (chartBarActiveOverlay) drawn with the same public scale factories as the real chart, positioned pixel-exact over that bar. The standard hover-tooltip cursor rectangle is disabled via axisPointer:'none' as specified. Two real gaps versus the spec, both from BarRenderer (packages/chart/src/gl/BarRenderer.ts) reading only itemStyle.color per data item and nothing else: (1) the spec's '~0.8 fill opacity on the active bar, other bars comparatively flat/muted' cannot be reproduced — there is no per-item opacity hook, so all bars render at full, equal opacity and only the dashed outline distinguishes the active one. (2) the dashed stroke is a separate overlay rect, not a stroke drawn on the bar's own WebGL geometry (no borderWidth/borderType/borderColor support), so it can visually drift by a pixel or two on rapid container resizes between the chart's own render pass and the overlay's ResizeObserver-driven redraw. Click/hover-to-reassign which bar is active (mentioned in the spec as an optional 'could reassign' extension, not the reference demo's actual fixed-default behavior) was not wired up — activeIndex is a static prop evaluated once per render, matching the literal 'fixed bar marked active by default' behavior the spec describes as required.

Status: partial · Reference: shadcn/ui original

chartBarActive

// shadcn/ui "chart-bar" (active recipe) — clean-room reimplementation.
//
// A vertical single-series bar chart where one pre-selected bar is
// deliberately emphasized with a bold dashed outline (rather than relying on
// hover), and the standard hover-tooltip cursor rectangle is disabled so the
// dashed bar reads as a persistent "selected" state.
//
// Implemented purely from the block's public functional/visual spec — no
// upstream shadcn/ui source was viewed or copied.

import type { DomphyElement } from "@domphy/core";
import type { ChartOption } from "@domphy/chart";
import type { ThemeColor } from "@domphy/theme";
import {
  CHART_BAR_BROWSER_DATA,
  chartBarActiveOverlay,
  chartBarAxisTooltipFormatter,
  chartBarCardShell,
  chartBarCategoryXAxis,
  chartBarFrame,
  chartBarHiddenValueYAxis,
  chartBarTrendFooter,
  chartBarValueDomain,
  type ChartBarCategoryPoint,
  type ChartBarGrid,
  type ChartTrendDirection,
} from "./chart-bar-shared.js";

export interface ChartBarActiveProps {
  data?: ChartBarCategoryPoint[];
  seriesLabel?: string;
  seriesColor?: ThemeColor;
  /** Index of the bar rendered with the dashed-outline "active" treatment. */
  activeIndex?: number;
  title?: string;
  subtitle?: string;
  trendText?: string;
  trendDirection?: ChartTrendDirection;
  captionText?: string;
  height?: number;
}

const GRID: ChartBarGrid = { left: 8, right: 8, top: 16, bottom: 24 };

/**
 * shadcn/ui "chart-bar" active recipe — a fixed bar carries a dashed-stroke
 * "selected" outline instead of relying on hover. Call with no arguments for
 * a working demo.
 */
function chartBarActive(props: ChartBarActiveProps = {}): DomphyElement<"div"> {
  const {
    data = CHART_BAR_BROWSER_DATA,
    seriesLabel = "Visitors",
    seriesColor = "primary",
    activeIndex = 2,
    title = "Bar Chart - Active",
    subtitle = "January - June 2026",
    trendText = "Trending up by 5.2% this month",
    trendDirection = "up",
    captionText = "Showing total visitors by browser",
    height = 64,
  } = props;

  const categories = data.map((point) => point.category);
  const values = data.map((point) => point.value);
  const valueDomain = chartBarValueDomain(values);
  const clampedActiveIndex = Math.max(0, Math.min(data.length - 1, activeIndex));

  const option: ChartOption = {
    tooltip: {
      trigger: "axis",
      // The standard shaded cursor rectangle is turned off entirely so the
      // pre-set active bar's dashed outline is the only visual emphasis.
      axisPointer: { type: "none" },
      formatter: chartBarAxisTooltipFormatter(categories),
    },
    xAxis: chartBarCategoryXAxis(categories),
    yAxis: chartBarHiddenValueYAxis({ min: valueDomain[0], max: valueDomain[1] }),
    grid: GRID,
    series: [
      {
        type: "bar",
        name: seriesLabel,
        color: seriesColor,
        data: values,
      },
    ],
  };

  return chartBarCardShell({
    title,
    subtitle,
    content: {
      div: [
        chartBarFrame(option, {
          height,
          overlays: [
            chartBarActiveOverlay({
              categories,
              values,
              valueDomain,
              grid: GRID,
              activeIndex: clampedActiveIndex,
              color: seriesColor,
            }),
          ],
        }),
      ],
    },
    footer: chartBarTrendFooter({ trendText, direction: trendDirection, captionText }),
  });
}

export { chartBarActive };

← Back to shadcn/ui catalog

chartBarActive#

chartBarActive