Chart Bar Halftone

Component 11

About

An accessible SVG bar chart that fills each bar with an ordered-dither halftone pattern instead of a flat color, so the ink density encodes the value alongside bar height.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chart Bar Halftone to your project and fits it to your theme.

Code

How Chart Bar Halftone is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ChartBarHalftone } from "@/components/ui/chart-bar-halftone";

export default function ChartBarHalftoneDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <ChartBarHalftone
        title="Monthly Revenue"
        data={[
          { label: "Jan", value: 4200 },
          { label: "Feb", value: 6800 },
          { label: "Mar", value: 5100 },
          { label: "Apr", value: 9300 },
          { label: "May", value: 7600 },
          { label: "Jun", value: 11200 },
        ]}
      />
    </div>
  );
}