Core

Scatter Chart

A scatter chart plots point relationships across two or more numeric axes, making it useful for distribution and correlation analysis.

Example

Usage

Copy the shared chart utilities and the chart component you need into your project.

TypeScript

JavaScript

components/ui/core/charts/chart-shell.tsx

TypeScript

JavaScript

components/ui/core/charts/chart-tooltip.tsx

TypeScript

JavaScript

components/ui/core/charts/scatter-chart.tsx

npx libravelui@latest add scatter-chart

import { ScatterChart } from "@/components/ui/core/charts/scatter-chart";

<ScatterChart
  data={data}
  xDataKey="x"
  yDataKey="y"
  zDataKey="z"
  config={{
    label: "Points",
  }}
/>

Loading types…

Radial Bar Chart

A radial bar chart presents values on a circular scale and works well for progress-style or compact comparison dashboards.

Treemap Chart

A treemap chart shows hierarchical data using nested rectangles and is useful when size and grouping need to be understood together.