shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartDensityGroups } from "@/components/charts/chart-density-groups";<ChartDensityGroups />API Reference
DensityChart
datareadonly SpatialRow[]
The observations: one row per point. Rows without a finite x or y are left out.
xDataKeystring
Key of the horizontal value in each row.
yDataKeystring
Key of the vertical value in each row.
groupDataKey?string
Key of each row's group: each group gets its own density estimate and color (--chart-1, --chart-2… in order of appearance).
groupColors?Readonly<Record<string, string>>
Colors of the groups by name, over the palette.
- Type
Readonly<Record<string, string>>
xDomain?readonly [number, number]
The x range shown. Defaults to the data's, rounded out to nice values.
yDomain?readonly [number, number]
The y range shown. Defaults to the data's, rounded out to nice values.
aspectRatio?string
Aspect ratio of the chart as "width / height".
- Default
"16 / 9"
margin?Partial<SpatialMargin>
Space around the plot in pixels. Any side you omit keeps its default.
- Type
Partial<SpatialMargin>
animate?boolean
Play the entrance animation.
- Default
true
animationDuration?number
Length of the entrance sweep in milliseconds: the time from the first mark starting to the last one.
- Default
900
revealSignature?string
Changing this value replays the entrance animation.
status?ChartStatus
"loading" draws a pulsing skeleton of the chart's shape in place of its marks (the axes, grid and land stay) and ignores the pointer; switching to "ready" plays the entrance.
- Default
"ready"
loadingLabel?string
Text shown centered over the chart, with a shimmer, while status is "loading". Nothing is shown when it is unset or empty.
className?string
Additional class name for the chart container.
children?ReactNode
The chart's carriers: its layers, axes, grid, tooltip and legend.
ariaLabel?string
Accessible label of the chart.
ariaDescription?string
Longer accessible description of the chart.
DensityGrid
horizontal?boolean
Show horizontal grid lines, at the y axis's ticks.
- Default
true
vertical?boolean
Show vertical grid lines, at the x axis's ticks.
- Default
false
stroke?string
Color of the grid lines.
- Default
"var(--chart-grid)"
strokeDasharray?string
Dash pattern of the grid lines.
- Default
"4 4"
DensityContours
bandwidth?number
Smoothing of the estimate: the Gaussian kernel's bandwidth, in pixels. Larger is smoother.
- Default
20
thresholds?number | readonly number[]
The number of levels, or the exact density levels (observations per square pixel).
- Type
number | readonly number[]- Default
8
fillOpacity?number
Opacity of each band's fill; nested bands add up, so the densest areas read darkest.
- Default
0.14
strokeWidth?number
Width of each level's outline, in pixels (0: none).
- Default
1
strokeOpacity?number
Opacity of each level's outline.
- Default
0.55
color?string
A single color for every band; defaults to each group's color (--chart-1 without groups).
inactiveOpacity?number
Opacity of the bands while a point is hovered or focused.
- Default
0.5
fadeOnHover?boolean
Dim the layer's other marks while one is hovered or focused.
- Default
true
DensityPoints
radius?number
Radius of each dot, in pixels.
- Default
2.5
opacity?number
Opacity of the dots at rest.
- Default
0.7
fadeOnHover?boolean
Dim the layer's other marks while one is hovered or focused.
- Default
true
inactiveOpacity?number
Opacity of the other marks while one is hovered or focused.
- Default
0.35
DensityXAxis
numTicks?number
Target number of tick labels.
- Default
5
formatValue?(value: number) => string
Formats a tick value into its label. Defaults to the number, thousands abbreviated (2k).
- Type
(value: number) => string
label?string
A title for the axis, drawn beside its labels.
DensityYAxis
numTicks?number
Target number of tick labels.
- Default
5
formatValue?(value: number) => string
Formats a tick value into its label. Defaults to the number, thousands abbreviated (2k).
- Type
(value: number) => string
label?string
A title for the axis, drawn beside its labels.
DensityTooltip
xLabel?string
The x row's label. Defaults to DensityXAxis' label, else xDataKey.
yLabel?string
The y row's label. Defaults to DensityYAxis' label, else yDataKey.
content?(args: DensityTooltipArgs) => ReactNode
Custom tooltip content. Replaces the default title and rows, inside the same panel.
- Type
(args: DensityTooltipArgs) => ReactNode
formatValue?(value: number) => string
Formats the value row of the default content.
- Type
(value: number) => string- Default
the number with thousands separators
valueLabel?string
The label of the value row of the default content.
className?string
Additional class name for the tooltip panel.
panelStyle?CSSProperties
Inline styles merged onto the tooltip panel.
backgroundColor?string
Background color of the tooltip panel. Overrides the theme's popover color.
DensityLegend
title?string
A title before the legend's items.
formatValue?(value: number) => string
Formats the values the legend shows.
- Type
(value: number) => string- Default
the number, thousands abbreviated (`2k`)
align?"start" | "center" | "end"
Where the legend sits in the row under the plot.
- Type
"start" | "center" | "end"- Default
"center"
className?string
Additional class name for the legend.
