Scatter And Line Of Best Fit

Preview

Loading…

Installation

CLI

npx @sonojs/ui@latest add scatter-and-line-of-best-fit

Also needsnpx @sonojs/ui@latest add chart chart-styles && npm i recharts

Usage

import

import ScatterAndLineOfBestFitDemo from "@/components/charts/scatter-and-line-of-best-fit"

page.tsx

export default function Page() {
  return <ScatterAndLineOfBestFitDemo />
}

Scrub

scrub highlights the active category and dims the rest (default true). Pass false to keep the idle last-category view.

scrub

import { ScatterAndLineOfBestFit } from "@/components/charts/scatter-and-line-of-best-fit"

export default function Page() {
  return <ScatterAndLineOfBestFit scrub={false} />
}

Plot direction

plotDir only flips the plot (bars / axes). Header and legend still follow page dir. Omit it to match the page (default).

plotDir

import { ScatterAndLineOfBestFit } from "@/components/charts/scatter-and-line-of-best-fit"

export default function Page() {
  return (
    <div dir="rtl">
      {/* Chrome RTL · bars still start on the left */}
      <ScatterAndLineOfBestFit plotDir="ltr" />
    </div>
  )
}

Props

Prop	Type	Default	Description
scrub	boolean	true	Hover, touch, and keyboard scrub — dim inactive categories and update the metric header.
plotDir	"ltr" · "rtl"	page dir	Plot-only layout (bar sides / axes). Header and legend keep following page dir.