Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Network chart

Service dependencies, review ties or any other graph, laid out by a force simulation. Hover a node to light its neighbors, and drag one to pin it in place.

Charting library: TanStack Charts

Preview

Preview width

Installation

The command adds the example above to components/charts/ and, the first time, the chart kit to components/ui/charts/. Both are source files in your project from then on: read them, change them, delete what you don't use.

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

Give each node an id and each link a source and a target id. A node's group colors it and its value sizes it, and a link's value draws it thicker and pulls its two nodes closer.

import {
  ChartTooltip,
  NetworkChart,
  type NetworkData,
  NetworkLabels,
} from "@/components/ui/charts";

const data: NetworkData = {
  nodes: [
    { group: "Apps", id: "web", label: "Web app" },
    { group: "Apps", id: "mobile", label: "Mobile app" },
    { group: "Services", id: "api", label: "API" },
    { group: "Services", id: "auth", label: "Auth" },
    { group: "Data", id: "postgres", label: "Postgres" },
    { group: "Data", id: "redis", label: "Redis" },
  ],
  links: [
    { source: "web", target: "api", value: 8 },
    { source: "mobile", target: "api", value: 6 },
    { source: "api", target: "auth", value: 5 },
    { source: "api", target: "postgres", value: 7 },
    { source: "auth", target: "redis", value: 4 },
  ],
};

export const ServicesGraph = () => (
  <NetworkChart ariaLabel="Service dependencies" data={data}>
    <NetworkLabels />
    <ChartTooltip />
  </NetworkChart>
);

Anatomy

One component does the layout and the drawing. NetworkLabels and ChartTooltip are optional, and so is a ChartLegend beside it.

<NetworkChart data={data} linkDistance={40} nodeSize={[5, 10]}>
  <NetworkLabels minRadius={7} />
  <ChartTooltip />
</NetworkChart>
  • NetworkChart: Runs the force layout, draws the nodes and links, and handles hover and dragging.
  • NetworkLabels: Each node's name, or only the larger nodes' with minRadius.
  • ChartTooltip: The hovered node's group, value and number of links.

Tuning the layout

linkDistance (46 px) sets how far apart linked nodes settle and repulsion (120) how hard every node pushes the others away. nodeSize is the smallest and largest dot radius, [4, 13] by default.

The simulation runs before the first draw and is deterministic, so the same data always lands in the same place. Drag a node and the graph settles again around where you drop it, with that node pinned there. draggable={false} keeps the layout fixed.

With a legend

onHoverChange reports the hovered node's group, as its index in order of first appearance. Pass that index to a ChartLegend listing the groups in the same order, and wrap both in ChartLegendHoverProvider so hovering a legend row lights its group in the chart.

Preview width

Customization

The kit is in your project, in components/ui/charts/: your framework's components over a shared core/. Change a default there and every chart picks it up.

class goes on the chart's container, so size and spacing are utility classes.

content on ChartTooltip gets the node as point: its label, group, value, degree (its number of links) and the labels of its neighbors.

Groups take --chart-1 to --chart-5 in the order they first appear in nodes, and colors replaces that palette. With more than five groups the colors repeat, so pass enough of them.

<ChartTooltip
  content={({ point }) => (
    <TooltipBox>
      <div class="grid gap-1 px-3 py-2 text-sm">
        <span class="font-medium">{String(point.label)}</span>
        <span class="text-muted-foreground">
          {Number(point.degree)} connections
        </span>
      </div>
    </TooltipBox>
  )}
/>

Where a part renders content of its own, you pass it in. In Solid:

  • ChartTooltip: content={({ point, index }) => …}
  • ChartLegend: renderItem={({ item, index, isHovered, isFaded, percentage }) => …}

Loading state

With status="loading" the chart draws three shimmering clusters of muted dots and ignores the pointer. They don't follow your data, since its layout isn't known until the simulation runs. On "ready" the nodes pop in and the links draw.

With nothing to pass yet, render <NetworkChartLoading /> in the chart's place.

Preview width

Animation

Nodes pop in from the center outward, then the links draw between them. While you drag, the node follows the pointer on a spring.

animate={false} skips the entrance, and so does reduced motion.

Theming

Every color in the kit is one of your theme's tokens or a mix of them, except --chart-positive, a fixed green. A preset or the .dark class restyles the chart, and overriding a token in your CSS changes it everywhere.

Dots and names get a halo in --chart-background, your --card by default, so they stay readable where links cross under them.

TokenDefaultPaints
--chart-1your theme'sthe first series
--chart-2your theme'sthe second series
--chart-3your theme'sthe third series
--chart-4your theme'sthe fourth series
--chart-5your theme'sthe fifth series
--chart-background--carddot halos, the gaps between stacked marks
--chart-tooltip-foreground--popover-foregroundthe tooltip's values
globals.css
:root {
  --chart-background: var(--background);
}

Accessibility

The chart is an image named by ariaLabel ("Network graph" by default). Name the hubs in ariaDescription, since where a node lands means nothing to a screen reader.

Every node is reachable from the keyboard, its neighbors lit as on hover, and its panel shown when there's a ChartTooltip. Dragging takes a pointer.

Tab
Moves focus to the chart.
Arrow Right
Moves to the next node. ArrowDown does the same.
Arrow Left
Moves to the previous node. ArrowUp does the same.
Home
Jumps to the first node.
End
Jumps to the last node.

API reference

Solid takes the same props as React, with class for className. A render prop is a function, called again when its arguments change, so destructured parameters stay current.

NetworkChart

PropType
dataNetworkData
draggable?boolean

Drag a node to move it; the rest settle around where it is dropped, and it stays there.

Default
true
linkDistance?number

How far apart linked nodes settle, in px.

Default
46
repulsion?number

How hard nodes push each other apart.

Default
120
nodeSize?readonly [number, number]

The smallest and largest dot radii, in px.

Default
[4, 13]
colors?readonly string[]

Colours of the groups, in order of first appearance (cycled). Defaults to --chart-1 … --chart-5.

formatValue?(value: number) => string

Formats a node's value in the tooltip.

Type
(value: number) => string
valueLabel?string

The value's name in the tooltip.

Default
"Value"
onHoverChange?(index: number | null) => void

Called with the hovered node's group index (by first appearance), and null when the pointer leaves (pair it with a ChartLegend).

Type
(index: number | null) => void
aspectRatio?string | number

Width over height: a number or a string such as "16 / 10".

Type
string | number
Default
"16 / 10"
height?number

A fixed height in px instead of an aspect ratio.

animate?boolean

Play the entrance: the nodes pop in from the centre outward, then the links draw between them.

Default
true
status?ChartStatus

"loading" draws a shimmering skeleton (muted clusters of nodes and links) in place of the chart and ignores the pointer; switching to "ready" plays the entrance. Switching back to "loading" fades the chart out first.

Default
"ready"
loadingLabel?string

Text shown centered over the plot, with a shimmer, while status is "loading". Nothing is shown when it is unset or empty.

ariaLabel?string
ariaDescription?string
class?string

Extra class name for the chart's root element.

style?CSSProperties

Inline style for the chart's root element.

children?ReactNode

Carriers: ChartTooltip and the family's own.

NetworkLabels

PropType
minRadius?number

Name only the nodes at least this large (their dot's radius, in px); 0 names every node.

Default
0

ChartTooltip

PropType
showDatePill?boolean

Show the date pill that rides along the bottom of the plot.

Default
true
showCrosshair?boolean

Show the vertical crosshair line. Bar charts leave it off unless this is true (the dots and the category pill mark the bar).

Default
true
showDots?boolean

Show a dot on every series at the hovered position.

Default
true
dotVariant?"dot" | "ring"

Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.

Type
"dot" | "ring"
Default
"dot"
dotSize?number

Dot radius in px.

Default
5
dotRadiusFraction?number

Corner radius of the "ring" variant as a fraction of its side (0 is square, 0.5 is a circle). Read by BarChart only.

Default
0.25
dotScale?number

Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.

Default
1
dotStrokeWidth?number

Stroke width of the dots in px.

Default
2
indicatorColor?string | ((point: Record<string, unknown>) => string)

Color of the crosshair. Only a string is applied; the function form that bklit-ui accepts is ignored and the default is used.

Type
string | ((point: Record<string, unknown>) => string)
Default
"var(--chart-crosshair)"
content?(props: { point: Record<string, unknown>; index: number; pinned?: boolean; dismiss?: () => void }) => ReactNode

Replaces the default tooltip panel body. Receives the hovered data row and its index; with pinnable, also whether the panel is pinned and a dismiss that unpins it (for a close button in a pinned panel's detail).

Type
(props: { point: Record<string, unknown>; index: number; pinned?: boolean; dismiss?: () => void }) => ReactNode
pinnable?boolean

A click (or Enter, or Space) on the chart pins the tooltip where it is: the panel takes the pointer, so its content can grow into detail and hold controls, until another click, Escape or dismiss lets it go.

Default
false
rows?(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

Replaces the default rows (one per series) with your own list of { color, label, value }.

Type
(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]
dotColor?string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

Fill of the tooltip dots. A function receives the hovered row and the series config, and is called again each time the hovered row changes. Defaults to each series' color; a ProfitLossLine's dot takes the color of the hovered value's sign.

Type
string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)
children?ReactNode

Extra content rendered below the rows in the default panel, for example marker details. Without it, a chart with ChartMarkers lists the markers on the hovered date there.

class?string

Extra class name for the tooltip panel.

springConfig?SpringConfig

Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.

matchCrosshair?boolean

Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.

Default
false
damping?number

Spring damping for the floating panel when matchCrosshair is off, on bklit's 0 to 100 scale: lower is bouncier, higher slower, 0 moves the panel instantly. The default, 20, is the snappy hover spring (stiffness 3600, damping 120); every other value is bklit's spring for it played six times faster.

Default
20
indicatorDasharray?string

Dash pattern of the crosshair. Omit for a solid line.

indicatorFadeEdges?IndicatorFadeEdges

Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).

Default
"both"
indicatorFadeLength?number

Size of the crosshair's fade, as a percentage of its height (2 to 40).

Default
10
indicatorEndColor?string

Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).

indicatorEnd?"plot" | "point"

How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.

Type
"plot" | "point"
Default
"plot"
dotHaloBlur?number

Blur in px on the dots' halo, for a soft glow.

Default
0
topOffset?number

Extra gap in px between the top of the plot and the tooltip panel.

Default
0
dateLabels?readonly string[]

The date pill's text for each data row, in row order (pair it with XAxis labels).

boxSpringConfig?SpringConfig

Spring for the floating panel. Takes priority over matchCrosshair and damping.

indicatorWidth?IndicatorWidth

Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).

Default
"line"

ChartLegend

PropType
itemsLegendItem[]

The items to list.

hoveredIndex?number | null

Hovered item index (null for none). Pair it with onHover to share hover with a chart.

Type
number | null
Default
null
onHover?(index: number | null) => void

Called with the item index when the pointer enters a row, and null when it leaves.

Type
(index: number | null) => void
showProgress?boolean

Show a progress bar under each item that has a maxValue.

Default
false
showMarker?boolean

Show the colored dot before each label.

Default
true
showValue?boolean

Show each item's value.

Default
true
showPercentage?boolean

Show each item's percentage of maxValue, under its progress bar: it takes effect only with showProgress and an item maxValue, as in bklit-ui (chart-legend.tsx:115, where the plain row has no percentage). For a percentage without a bar, compose Legend with LegendValue showPercentage.

Default
the value of `showProgress`
formatValue?(value: number) => string

Formats each value.

Type
(value: number) => string
Default
en-US number format, for example "1,234"
title?string

Heading shown above the items.

class?string

Class names added to the legend container.

titleClassName?string

Class names added to the title, on top of the default title style.

itemClassName?string

Class names added to each row.

labelClassName?string

Class names that replace the default label text style.

valueClassName?string

Class names that replace the default value text style.

renderItem?(props: Readonly<{ readonly item: LegendItem; readonly index: number; readonly isHovered: boolean; readonly isFaded: boolean; readonly percentage: number }>) => ReactNode

Renders a row yourself. Receives the item, its index, hover flags and its percentage of maxValue. When set, the show* options are ignored.

Type
(props: Readonly<{ readonly item: LegendItem; readonly index: number; readonly isHovered: boolean; readonly isFaded: boolean; readonly percentage: number }>) => ReactNode

NetworkChartLoading

PropType
aspectRatio?string | number

Width over height: a number or a string such as "2 / 1". Defaults to the chart's own.

Type
string | number
height?number

A fixed height in px instead of an aspect ratio.

label?string

Text shown centered over the skeleton, with a shimmer. Nothing is shown when it is unset or empty.

class?string

Extra CSS class name for the placeholder's root element.

Default
""

Examples

3 examples on Solid, each live with its code and its own install command.

All 3 network chart examples