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

Features

  • Ideal for correlation and clustering analysis.
  • Supports optional Z-axis sizing.
  • Uses LibravelUI chart colors and tooltip styling.
  • Allows numeric axes to be customized as needed.
  • Works well with dense or exploratory datasets.

Installation

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

components/ui/core/charts/chart-shell.tsx
components/ui/core/charts/chart-tooltip.tsx
components/ui/core/charts/scatter-chart.tsx
npx libravelui@latest add scatter-chart

Anatomy

import { ScatterChart } from "@/components/ui/core/charts/scatter-chart";
<ScatterChart
  data={data}
  xDataKey="x"
  yDataKey="y"
  zDataKey="z"
  config={{
    label: "Points",
  }}
/>

Props

Loading types…

Edit on GitHub

Last updated on

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.