BJORK Scatter brush

Component 23

About

Scatter brush is a production-ready charts component from BJORK UI, packaged for shadcn registries.

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

Code

How BJORK Scatter brush is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { ScatterBrush, createScatterCloud, type Brush } from "@/components/ui/bjork-scatter-brush";
import { DemoColumn } from "@/components/ui/bjork-scatter-brush-utils/app-charts-_demo-controls";

const POINTS = createScatterCloud(23);

const X_DOMAIN: [number, number] = [0, 10];

const Y_DOMAIN: [number, number] = [0, 100];

const PREVIEW_BRUSH: Brush = { x0: 5.3, x1: 8.2, y0: 56, y1: 92 };

const fmtX = (v: number) => `${v.toFixed(1)}m`;

const fmtY = (v: number) => `${Math.round(v)}`;
function SourceDemo(){
const isPreview = false;
const [trend, setTrend] = useState(true);
const reset = () => setTrend(true);
return <>

      {isPreview ? (
        <div className="w-[660px]">
          <ScatterBrush points={POINTS} xDomain={X_DOMAIN} yDomain={Y_DOMAIN} defaultBrush={PREVIEW_BRUSH} trend xLabel="Session length" yLabel="Engagement" formatX={fmtX} formatY={fmtY} height={440} ariaLabel="Sessions" />
        </div>
      ) : (
        <DemoColumn width={720}>
          <ScatterBrush points={POINTS} xDomain={X_DOMAIN} yDomain={Y_DOMAIN} trend={trend} xLabel="Session length" yLabel="Engagement" formatX={fmtX} formatY={fmtY} height={460} ariaLabel="Sessions" />
        </DemoColumn>
      )}
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}